忍者ブログ

Home > JavaScript

JavaScript Archive

[PR]

  • 2017-03-29 (Wed)
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

  • Comments (Close):
  • TrackBack (Close):

ブラウザが落ちた時textareaの内容が消えちゃうのがショックなので、cookieに保存しておくという無謀な試み

自作JSエディタのテストがてらブログを書いてたら、
Firefoxが落ちた。(3になってからIE6レベルに落ちるようになって困ってます…)

当然textareaにしたためていたブログの内容は消えちゃうわけです。

これはショックということで対策を考えました。

  1. アドオンでsqliteに保存(出来るのか?)
  2. location.hashに保存
  3. cookieに保存

1が出来ればいろんなサイトに使えてよさそうだけど、ハードル高いので今回は除外。
(Jetpackで作れるようになるとありがたいなー)

2は…トリッキーなのでやめときましょう。

まぁ3が妥当ですねー。じゃ、早速。

テキスト圧縮

クッキーの最大サイズは4096バイトらしいので小さくしなくちゃいけません。

そこで、高度な JavaScript 技集からJSでzipできちゃうスーパーライブラリを拝借してきます。

var value = textarea.value;
var data = utf16to8(value);
data = zip_deflate(data);
data = base64encode(data);

とやれば、そこそこサイズを小さくできます。

ちなみに

var data2 = base64decode(data);
data2 = zip_inflate(data2);
data2 = utf8to16(data2);

で戻せます。

Cookieに保存

Cookieへの保存はjquery.cookie.jsで行います。

保存のタイミングはエディタのイベントと合わせてtextarea.onkeyupにします。
(onchangeはJSからの変更の時に発生しないので使ってない)

最後にこれが一番重要ですが、上記の通りcookieにはサイズ制限がありますので、
保存する前に長さをチェックし、(余裕を持たせて)4000バイトより大きければあきらめることにします。

これをまとめると以下のコードになります。

editor.keyup(function() {

	var value = this.value;
	
    	var data = utf16to8(value);
    	data = zip_deflate(data);
     	data = base64encode(data);

	var size = data.length;

	if(size <= 4000) {
		$.cookie('t', data, { 'expires': 1 });
	}
	
	$('#byte').val(size);
	$('#byte2').val(document.cookie.length);
	$('#cookie').val(document.cookie);
	
});

デモはこちらから。

textareaの内容をcookieに保存

以上、どう考えても実用には耐えないと思いますが…。

PR

Canvasでクォータービュー作ってみた

summary

HTML5::Canvasでクォータービューなゲーム画面を。
uupaa-excanvasが単体で動くようになってますます便利です!

珍しく朝早く目が覚めたので試しにやってみた。

ちょっと前に見て気になってた、
モデリング要らず!Google 3Dデータを使って、1日で街のゲームグラフィックを制作する方法(1/2) - @IT
を参考に。

結果が、

これ↓
(drawImageは透過がうまくいかなかったので使ってません。imgで絶対配置してます。)

パース上に城を配置
※ 素材:Castle by ?ilikepie? - Google 3D Warehouse

と、これ↓
緑のフィールド

うん、何かに使えるかも。

Canvasでクォータービュー

GoogleのTwitter初発言をJavaScriptで読めるように

遅い(※)。しかもしょうもない。
が、自分が読むために作っちゃったので公開しとく。
※ googleがじゃなく僕がブログのネタにするのが…ね、一応。

2進表記を文字に直すのは、

String.fromCharCode(parseInt('01100110', 2)); // f

でOK。

というわけで、Googleの発言を読めるようにしましょう。




できました。

答えは…
最近何かと話題のGoogle日本のトップ画面からいつのまにか消え去ったあの機能です。

あぁあのシンプルな画面がなつかしい。

一応ソース

<textarea id="decodeGoogle" cols="30" rows="3"></textarea><br />
<input type="button" value="変換" onclick="(function(){ 
var chars = document.getElementById('decodeGoogle').value.split(/\s/);
for(var i = 0; i < chars.length; i++) {
	if (!isNaN(chars[i])) chars[i] = String.fromCharCode(parseInt(chars[i], 2));
	else chars[i] = chars[i] + ' ';
}
document.getElementById('decodeGoogle').value = chars.join('');
 })()" />

以上です。

LighediTorをSourceForge.jpで公開しました

ここ最近いじり続けてたエディタですが、SourceForge.jpでホスティングすることにしました。
名前はLighediTor。スペルミス注意です。

SF.jpにしたのは、比較的自由に使えるサーバスペースが手に入るから。
先日の障害の際、xrea一極集中はやばいと感じたので調度良かったのです。

以下が主なページです。

プロジェクト概要
プロジェクトページ(サンプル)
ソース(Subversion)

というわけで改めてよろしくお願いします。

当面の課題は補完候補を充実させることと、
Ctrl+Enterでの閉じタグ補完をうまく動くようにすることです。
※ IE6でとてつもなく重いのはとりあえず見なかったことにします。。。

皆さんもよければコミッタになってください!

SF.jpの使い方(SVN/シェルサーバ/FTP)

わりとつまづいたのでメモ。

TortpiseSVNで接続

基本的に以下の記事を参考にやればOK。
cl.pocari.org - TortoiseSVN で公開鍵を使う方法
ただ、

2. 公開鍵をサーバに登録
Public key for pasting into OpenSSH authorized_keys file の部分をコピーして $HOME/.ssh/authorized_keys に貼り付けます.

の部分は、
ユーザ設定 » アカウント基本情報設定 » [鍵の編集]から貼り付ければOK。
あと、パスフレーズは空白でOK。

未だにディレクトリとかコピーしながら開発してるので、これを気に活用していこうと思います。
せっかく環境が用意されてるようなので、Gitも使ってみたいところ。

Tera Termでシェルサーバに接続

上でputtygenをもう1回使います。

1. Conversions » Import keyからさっき作った秘密鍵をインポート。
2. Conversions » Export OpenSSH keyで変換。(identityっていう名前にしとくと楽)
※ 鍵を作る時にOpenSSH形式でExportもしておけば、importを省ける。
3. Teratermでshell.sourceforge.jpにSSHでログイン。
4. RSA/DSA鍵を使うを選択し、identityを読み込み。
  (ユーザ/パスは、SF.jpアカウントのもの。)
5. あとは普通にシェルを使える。

参考。
SF.jpのsvnリポジトリへのアクセス設定(亀用) - つくば日記 (仮)

WinSCPでSFTP接続

これは特につまづくところはない。

ユーザ名/パスはSF.jpアカウント。
秘密鍵は、.ppkの方を指定。
プロトコルはSFTP。

あとは普通にFTPできる。

以上、SF.jpはホスティング環境としてかなりいい感じ。
(アドセンスも簡単に使えるしね。)
ソースの公開とかにはgoogle codeの方が向いてそうだけど。

JavaScriptで非WYGIWYGな軽量HTMLエディタを作ろう(最終回)

What You Code Is What You Get.

実は地味に進めてました。
めんどくさいのでまとめて投稿、すいません。。。

[実装2-1 入力補完候補表示]

手始めにカーソル位置の文字を取得して、補完候補を選ぶとこまでやりました。
結果がこちら→Editor2.1

<aと入力すれば、<a>、<adress>等と表示されます。
※ 候補が貧弱なのはキーワードを少ししか登録していないからです。

お世話になったサイトをあげておきます。

textareaの選択範囲を取得し、前後に文字列を挿入する - Archiva
前回以上にこのエントリに頼りっぱなしでした。

上のエントリを理解するために見たMSDN達。
duplicate
moveToElementText
setEndPoint

[実装2-2 カーソル座標にBOX表示]

2-1の候補をカーソル位置に表示しなくちゃだめなので、
まずはただのdivを表示してみることにしました。

結果→Editor2.2

textarea内で入力すれば、そのすぐ右下にBOXが移動します。

参考サイトはこちら。
テキストエリア内のキャレット座標を取得する - Webと文字
getBoundingClientRect()を使って要素の絶対座標を求める - 素人がプログラミングを勉強するブログ

[実装3 入力補完実装]

パーツは揃ったのでいよいよ実装。
ついでにjQueryプラグイン化。
必要なDOM要素は動的に作成するようにし、
複数のtextareaに対応しました。

※ あわせてツールバーを整理。
  選択範囲変換、置換機能も実装しました。

Editor3

参考。
jQuery のプラグインを作成する : ブログの新着記事を表示:Goodpic

[実装4 リファクタリング]

ソースコードがあまりにもひどくなっていたので、書き直し。
が、大して変わらず。

他のjQueryプラグインを参考に何とかしようと思います。
※ 何がいいかなぁ…。
  uiはちょっとでかすぎるし。

ここまでの成果がこれ↓
Editor4
Editor4-a
(4-aはボタンでエディタ化するサンプル。
上のtextareaの入力内容はすぐ下のdivに反映。
下のtextareaはツールバーなしバージョン。)

[まとめ]

補完候補が少なさを筆頭に不具合はまだまだありますが、ある程度できてきました。
今は、微調整を繰り返している状況です。(Editor5で公開)

そろそろ管理も煩雑になってきたので、どこかにhostingしようと思います。
というわけで連載風ブログでの公開は今回で最後です。

まさか2回で終わるとは思いませんでしたが…;

以上、今回はこの辺で。

Home > JavaScript

Search
Loading
Feeds
Links
スポンサードリンク
Ad
デル株式会社
Ad

Page Top