javascript | NINXIT-BLOG

localStorage でオプション設定の管理

By utahta, on 1月 31st, 2010%

Google Chrome extension のオプション設定周りについてのメモ。

localStorage は、データをローカルに保存したり管理したりする機能。
Chromeブラウザのキャッシュをクリアすると保存データも一緒に消えてしまったり。
永続的に保存することができるわけではないらしい。
あと、html5 の機能で Chrome 独自の機能というわけではないらしい。

キーと値の連想配列ような感じで使える。文字列しか保存できないといった制限がある模様。

Chrome extension ではこの機能をオプション設定の管理に用いることが多い様子。

簡単な使い方

localStorage.setItem( "short_cut1", "ctrl" );
localStorage.setItem( "short_cut2", "shift" );
 
var val1 = localStorage.getItem( "short_cut1" ); // ctrl という文字列が取得される
var val2 = localStorage.getItem( "short_cut2" ); // shift という文字列が取得される

というように例えばショートカットの設定なんかに使ったりする。

しかし、文字列しか保存できない制限の為、設定が構造的な場合、管理が煩雑になってしまったりする。

var hoge_option = {} // hoge 設定用の連想配列
hoge_option["short_cut1"] = "ctrl";
hoge_option["short_cut2"] = "shift";
//localStorage.setItem( "hoge_option", hoge_option ); // 本当はこうしたいけど、文字列しか保存できない。
localStorage.setItem( "hoge_short_cut1", hoge_option["short_cut1"] ); // １つ１つキーを作るのは管理的に辛い...
localStorage.setItem( "hoge_short_cut2", hoge_option["short_cut2"] );

構造的に保存

文字列しか保存できないなら、連想配列を文字列に変換して保存すればいいじゃない。

文字列から連想配列への変換には eval を使ってみた。

// 連想配列を文字列へ変換する関数
function toSource( elm )
{
    var out = '';
    for( var key in elm ){
        if( out != '' ) out += ',';
        out += "'"+key+"':'"+elm[key]+"'";
    }
    return '{' + out + '}';
}
 
var hoge_option = {}
hoge_option["short_cut1"] = "ctrl";
hoge_option["short_cut2"] = "shift";
localStorage.setItem( "hoge_option", toSource( hoge_option ) ); // {'short_cut1':'ctrl', 'short_cut2':'shift'} という文字列が保存される。
 
eval( "var hoge_out = " + localStorage.getItem( "hoge_option" ) );
hoge_out["short_cut1"]; // ctrl という文字列が取得される
hoge_out["short_cut2"]; // shift という文字列が取得される

toSource 関数は改善の余地が多分にあるけど、まぁ大体こんな感じでいけるっぽい。

eval が遅いとかありそうだけど、オプションのロードで最初に1回呼び出すぐらいなら問題ないと思いたい。

FastLookUp for Chrome のオプションは、この方法を使って設定を管理ちう。

FastLookUp for Chrome

By utahta, on 12月 23rd, 2009%

Google Chrome Extension に満足いく英和＆和英アプリがなかったので自分でつくってみたメモ。

本当は Firefox で便利だった fastlookupalc をまんま模倣したかったけど、肝心の英訳をしてくれる Alc（英辞郎 on the WEB）が残念ながら規約的にプラグインから利用できない？ようだったので、代わりに excite 翻訳と google 翻訳を利用しました。
（2010/01/16 追記：excite 翻訳に関しては、利用を制約・制限される可能性があるもよう）

個人的にあったら便利だなーと思ってた、「英単語は意味や品詞や用例」を「その他長文や英語以外の文字は単純に翻訳」的な機能（というほどのものではないけど）をつけてみた。

使い方

Ctrl を押しながらマウスでピーっと文字を選択すると翻訳結果がポップアップ。
多々ある fast lookup 系と同じ形式。

いまのところフォントサイズとかショートカットキーが変更出来ます。
（2010/03/25: フォントカラーや背景カラーも変えられるようになりました。）

つくって思ったこと

ブラウザ互換を気にせず javascript が書けて楽しかった。
意外と簡単につくれた。
テスト的なインストールもアンインストールも簡単。
デバッグ環境は、Firebug に比べると少し物足りなかった。使いこなせてないだけかも。

参考

Chrome extension tutorial：チュートリアル。
Bubble Translate： Chrome extension やら CSS やらたくさん参考にさせていただきました。いっぱい模倣してます。
AutoPatchWork：複雑で全部は追いきれてないですが、こちらも Chrome extension 作成にあたって参考にさせていただきました。
fastlookupalc：そもそも移植したかったスクリプト。とにかく発想がすばらすぃ。

ECMAScript, DOM仕様書

By utahta, on 12月 29th, 2008%

メモ。
MetaGraphic Cell B4F – Scripts

IE6 + https + iframe

By utahta, on 4月 7th, 2008%

iframeを使ったページをhttpsで開くと警告が出る問題。

何が悲しいって「IE6 + select + ポップアップ + javascript」で紹介したバグ潰しをうっかり適用すると、httpsに持ってったとき、警告が頻発する事に。
バグを解決する為に、バグを作り出すなんて本当に最悪！

解決するためには、src=’javascript:false;’ を追加してあげれば良いみたい。

↑こんな感じ。

IE7では例によって修正されているのかな。

参考

Firefox + responseXML + 仕様

By utahta, on 3月 20th, 2008%

Firefox で困ったちゃんな問題に出くわしました。

XMLで 4096 byte以上のデータをjavascript側で受け取ってごにょごにょしようとすると、~~4096 byteで勝手に切り詰められてしまうという~~。
正確には、4096byteずつchildNodesに分割されてしまうみたいでした。
childNodes[0].nodeValueの4096byte以降は、childNodes[1].nodeValueに格納されるようです。
つまり、10000byte送ったらchildNodesが３つ作成されるみたいな。
しかし、なぜそんな仕様にしたのやら。

滅多に4096byte以上の文字列なんて送らないからいいけど、送りたいときとても困る。

解決策を探したら、どうやらnormalize()をしてあげるとうまくいくみたいです。

また、JSON形式で送って受け取っても問題ないようです。

IE, Safariではうまくいくものだから、またなんとも。
このブラウザ依存性は、本当になんとかして欲しいと切に願う。

以下、ソース。

XML形式は視認性がよくて好きなんだけどなぁ。
おとなしくJSON使っとけってことなのかしら。