By utahta, on 3月 22nd, 2010%
以前、localStorage でオプション設定の管理 というメモを書いたけど、それよりもっと良い管理方法があったので再度メモ。
JSON
JSON.parse と JSON.stringify を使う。
JSON.parse はテキストをオブジェクトに変換してくれる関数。
JSON.stringify はオブジェクトをテキストに変換してくれる関数。
Google Chrome は、ネイティブでこれら２つを使うことが出来るらしい。
以前、eval でせっせと書いていた箇所をまるまる削除することができる。
var options = {
cat:{
name: "tama"
},
dog:{
name: "pochi"
}
};
// 文字列にする
var options_txt = JSON.stringify( options );
// 文字列なのでそのまま保存可能
localStorage.setItem( 'options', options_txt );
// 保存した文字列を取得してくる
options_txt = localStorage.getItem( "options" );
// オブジェクトにする
var options_obj = JSON.parse( options_txt );こんな便利な関数があったとはなー。ありがたや。
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 のオプションは、この方法を使って設定を管理ちう。
By utahta, on 12月 23rd, 2009%
Google Chrome Extension に満足いく英和＆和英アプリがなかったので自分でつくってみたメモ。
本当は Firefox で便利だった fastlookupalc をまんま模倣したかったけど、肝心の英訳をしてくれる Alc（英辞郎 on the WEB） が残念ながら規約的にプラグインから利用できない？ようだったので、代わりに excite 翻訳と google 翻訳を利用しました。
（2010/01/16 追記：excite 翻訳に関しては、利用を制約・制限される可能性があるもよう）
個人的にあったら便利だなーと思ってた、「英単語は意味や品詞や用例」を「その他長文や英語以外の文字は単純に翻訳」的な機能（というほどのものではないけど）をつけてみた。
インストール
FastLookUp for Chrome インストールページ
ソース
fastlookup-for-chrome.git
コミット履歴
Commit History
使い方
Ctrl を押しながらマウスでピーっと文字を選択すると翻訳結果がポップアップ。
多々ある fast lookup 系と同じ形式。
いまのところフォントサイズとかショートカットキーが変更出来ます。
（2010/03/25: フォントカラーや背景カラーも変えられるようになりました。）
つくって思ったこと
ブラウザ互換を気にせず javascript が書けて楽しかった。
意外と簡単につくれた。
テスト的なインストールもアンインストールも簡単。
デバッグ環境は、Firebug に比べると少し物足りなかった。使いこなせてないだけかも。
参考
Chrome extension tutorial： チュートリアル。
Bubble Translate： Chrome extension やら CSS やらたくさん参考にさせていただきました。いっぱい模倣してます。
AutoPatchWork： 複雑で全部は追いきれてないですが、こちらも Chrome extension 作成にあたって参考にさせていただきました。
fastlookupalc： そもそも移植したかったスクリプト。とにかく発想がすばらすぃ。
