localStorage へのデータ保存・読み込みに json を使う

localStorage を使う場面が増えてきたように思うけど、localStorage には Object をそのまま保存できないので、色々なキーで保存・読み込みをしないといけなくなり、相当めんどくさいです。間違えやすくもなりますしね。でも、json 形式で保存すると、そのままの形式で保存できるし、間違いもグッと減るし、なにより楽でいいですね。

【保存する場合】

var opt = {
  browser: 'Chrome',
  OS: 'Mac OS 10.8.2'
};
localStorage.setItem('data', JSON.stringify(opt));

【読み込む場合】

var data = JSON.parse(localStorage.getItem('data'));
console.log(data);

【結果】

Search Capsule をリリースしました。

Google 検索や iTunes 検索をはじめとする様々なウェブサービスの検索結果ページへ、この「SearchCapsule」1つでジャンプできる Chrome の機能拡張をリリースしました。既存の60種に加え、簡単な操作でウェブサービスの追加もできます。
※以前「goSearchForYou」としてリリースしていた拡張のリニューアルです。

Chrome ウェブストア - SearchCapsule

インストール後、F12 もしくは Alt キーと一緒にクリックすると、検索ボックスが表示されます。


このウェブサービスを選ぶセレクトボックスは、ただサービスを表示するだけではありません。例えば、SearchCapsuleで「YouTube 動画検索」を行ったとします。すると、その直後からは「YouTube 動画検索」が一番上に表示されます。


これは検索を行う度、独自にポイントを計算しているので、よく使うサービスほど上位に表示されるようになります。この自動並び替えを使いたくない場合は、オプション画面の「使用頻度による自動並び替えを有効にする」のチェックを外します。外している間も計算自体は継続して行いますので、再びチェックしたときには、過去のポイントが全て反映されます。



SearchCapsuleを呼び出したり引っ込めたりするには、ショートカットキー（以下の通り）を使います。
-開く時（どちらもオプション画面で変更可）
--F1～F12 キー
--Shift / Alt / Command(Mac) / Ctrl(Win) キーを押しながらクリック
-閉じる時
--検索ボックスから離れたところをクリック（オプション画面で設定可）
--開く時のショートカットキー（オプション画面で設定可）

ショートカットキーを変更したい場合は、オプション画面で変更できます。



なお、テキストボックスに文字が入っている場合、セレクトボックスの項目を変更することで、検索を開始します。この自動発動をやめたい場合は、オプション画面の「ウェブサービスの切り替えでの自動検索を有効にする」のチェックを外します。


方向キーの「↑」と「Return キー」もしくは「Enter キー」を一緒に押して検索すると、新規タブで開きます。



各ウェブサービスの編集モードも備えています。「項目の非表示」「項目の並び替え」「名前の編集」「項目の削除」の操作をすることができます。


チェックを外すと、セレクトボックス内に表示されなくなります。もちろん、チェックを再び入れると、表示されるようになります。



項目名をドラッグ&ドロップすることにより、並び替えることができます。



鉛筆ボタンを押すことで、名前の変更ができます。



ゴミ箱ボタンを押すことで、項目を削除できます。削除した項目の復帰はできません。



オプション画面で「表示時にショートカットキーを押すことで非表示にする」のチェックを外している場合、開く時のキー（初期値は F12）を文字が選択された状態で押すと、入力ボックスに選択した文字が挿入されます。



初期値として定義されているウェブサービスは以下の通りです。
Google/Google[画像]/Google[地図]/YouTubeGoogle[ニュース]/Google[ブログ]/Google[書籍]/Google[ショッピング]/iTunesストア/Wikipedia/amazon/駅探乗り換え/えきから時刻表/Chromeウェブストア/livedoor[天気]/Yahoo![ニュース]/Yahoo![ショッピング]/Yahoo![オークション]/Yahoo![ファイナンス]/Yahoo![知恵袋]/OKWave/Goo[郵便番号]/Goo[国語辞書]/Goo[英和辞書]/Goo[和英辞書]/Goo[車]/Goo[バイク]/食べログ/ぐるなび/Twitter/Facebook/tumblr./flickr/Pinterest/github/ニコニコ動画/Ustream/価格.com/ヨドバシカメラ/ビックカメラ/ベルメゾン/ニッセン/セシール/楽天[市場]/楽天[オークション]/楽天[トラベル]/じゃらん/JTB/はてな[ブックマーク]/はてな[ダイアリー]/HOMES/チケットぴあ/映画.com/QLife/クックパッド/素材辞典/Cosmeet/リクナビNEXT/リクルート進学ネット/マイナビバイト

ウェブサービスを追加する方法はとても簡単です。
追加したいウェブサービスのウェブページを開き、対象とするテキストボックスでクリックした上で、F9 キー（オプション画面で変更可）を押します。すると、追加画面が表示されるので、項目名を入力し、「追加」ボタンを押します。追加できるウェブサービスは、<form>要素内にテキストボックスを持ち、実行先がJavaScriptでなく、文字コードがUTF-8・Shift_JIS・EUC-JPのどれかの場合です。


追加したウェブサービスは、一番下に追加されます。


追加済みのウェブサービスの場合は、項目名を変更することができます。


また、他のChromeと設定情報を共有したい場合は、共有元のChromeでオプション画面を開き、「エクスポート」を押してファイルを保存します。次に、共有先のChromeでオプション画面を開き、ファイルを選択して「インポート」を押すと、共有元の情報に上書きされます。Chrome間での同期はできません。


Chrome ウェブストア - SearchCapsule

myFacebookStyle に「一番上に戻る」ボタンを追加しました

Facebook って、スクロールしていって過去の post を見ていると、一番上に戻るのにめんどくさい場合があるので、myFacebookStyle（Chrome/Safari 拡張）に「一番上に戻る」ボタンを追加しました。

ふと思ってサクっと実装したので、もしかしたら変な挙動をするかもしれませんが、ちょっとめんどくさいのから解放されます。



myFacebookStyle（Chrome 拡張）
myFacebookStyle（Safari 拡張）

現在開いているタブのスクリーンショットを撮る [Chrome Extensions を作ってみる：第十一回]

Chrome 拡張には、現在開いているタブのスクリーンショットを撮れる api があるってつい昨日、chrome.tabs - Google Chrome を眺めてて知りました...。

使い方はとても簡単。

chrome.windows.getCurrent(function(w) {
  chrome.tabs.captureVisibleTab(w.id, {format: 'png'}, function(url) {
    console.log(url);
  });
});

「format」のところは jpeg か png を選べ、「url」には、dataUrl として値が返ってきます。

なんてステキなんでしょう！

captureVisibleTab | chrome.tabs - Google Chrome

myPageCollexion をリリースしました。

新規タブページでお気に入りのウェブサイトに素早くアクセスできる Chrome の機能拡張をリリースしました。
ブックマーク、履歴、アプリ、訪問中のウェブページ、エクスポートからコレクションを登録することができます。ウェブページにより、サムネイルを複数種類から選ぶこともできます。また、日本語で使うと、46種類のウェブサービスの検索結果ページへジャンプできます。

Chrome ウェブストア - myPageCollexion

インストール後、新規タブを開くと、以下のような画面が表示されます。


「ブックマークから追加」ボタンを押すと、ブックマークを読み込んだ画面が表示されるので、コレクションに追加したいウェブページを選んで「登録」ボタンを押してください。


なお、登録しようとしたウェブページが何らかの理由で削除されている場合、ブックマークからも削除できます。


「最近閉じたタブから追加」ボタンを押すと、本拡張をインストールした後に閉じたタブがある場合に一覧で表示されます。


「履歴から追加」ボタンを押すと、履歴を読み込んだ画面が表示されます。


「アプリから追加」ボタンを押すと、有効化がされており、訪問先のウェブページが登録されているアプリを読み込んだ画面が表示されます。


また、各画面で各コレクションにマウスを重ねると表示されるボタンを押すことで、新規タブでそのウェブページにジャンプできます。


なお、上記の各画面では、既にコレクションに登録されているウェブページは黒く表示され、マウスを重ねると表示されるゴミ箱ボタンを押すことによりコレクションから削除できます。



加えて、現在開いているウェブページを追加したい場合は、オムニバー横に表示されるアイコンを押すことで追加画面を表示できます。既にコレクションに追加されている場合は、削除をすることができます。



この場合は、現在開いているタブのスクリーンショットをサムネイルとして使用することもできます。


各コレクションにマウスを重ねると表示されるボタンを押すことにより、別タブで開くことができます。


4/6/8/10列に変更することができます。


「レイアウト」ボタンを押すと、レイアウト変更画面に切り替わります。この画面では、ドラッグ&ドロップで任意の位置に各コレクションを移動できます。「+」の部分にドラッグすると、その列の一番下に移動します。


「入れ替え」モードでは、ドラッグ元のコレクションとドラッグ先のコレクションを入れ替えます。「差し込み」モードでは、ドラッグ先に差し込みます。


コレクションにマウスを重ねると表示される鉛筆ボタンを押すことで、タイトルやサムネイルを変更することができます。変更するには、「編集」ボタンを押したあと、「保存」ボタンを押してください。



レイアウト変更画面では、各コレクションにチェックをつけることにより一括で削除できます。削除するには、一度ダイアログで「了解」ボタンを押したあと、「保存」ボタンを押すことにより実行されます。



日本語モードの場合は、46種類のウェブサービスの検索結果にジャンプできる検索ボックスが表示されます。「駅探乗り換え検索」では「乗車駅 下車駅」、「食べログ検索」では「エリア キーワード」のようにスペースを入れて指定します。なお、ジャンプ先のウェブサービスの文字コードがUTF-8以外の場合、本拡張内で入力語句の文字コード変換ができないため、一度当方のサーバにジャンプし、変換後にリダイレクトしています。入力された語句の保持などは一切行っておりません。


「エクスポート/インポート」ボタンを押すと、共有用の画面が表示されます。エクスポートは、ボタンを押すことによりファイルをダウンロードできます。インポートは、エクスポートで生成したファイルを選択し、ボタンを押すと、現在のコレクションに追加されます。


Chrome ウェブストア - myPageCollexion