初めてのJetpackでカラーピッカー作ってみた

javascript

今週末のMozilla勉強会のテーマがJetpackということで、前々から興味があったので触ってみました（初参加！ドキドキ）。

JetpackはFirefoxで簡単なアドオンを作るためのアドオンです。
jQueryを内蔵してるので面倒くさい処理が簡単に書けるし、インストーラもHTMLで書くだけで作れるので楽ちんってのが売りみたいです。

導入についてはd:id:mollifierさんがとても詳しくまとめてくださっているので、そちらとAPIリファレンスを見ればだいたい概要は分かると思います。
Kanasan.JS Jetpackワークショップに向けたJetpack入門


で、作ってみたのがこれ（githubにアップしてます）。
ページ上の要素の背景色をピッカーから直感的に変更できます。

使い方
  • ステータスバーの「Color」をクリックするとピッカーが表示されます
  • カーソルを動かして背景色を変えたい要素を選択（クリック）します
  • ピッカーで色を選んで「OK」ボタンを押すと選択した要素の背景色が変わります
  • やり直したいときは「Reset」ボタンを押してください
  • 色を変えた要素を選んで「Reset」を押すと、表示時の背景色に戻せます
  • もう一度ステータスバーの「Color」をクリックするとピッカーを消せます

Firebugでも背景色変えられるけど、16進数（#ffffff)より実際に色見ながらの方が分かりやすいかなと。
レイアウト組んで背景色を何度も微調整、ってのはよくやるのでそういうときは便利かも。
（まあ多分探せばそういうアドオンいくらでもありそうな気もしますが。。。）
正直ソースはやっつけで書いたうんこです。一応動くってだけ。

試しにこのブログの背景色を変えてみた。

ピッカーの外観には、HTML5.jpで配布されてるカラーピッカーがとてもよく出来てるので使わせていただきました。
もちろんそのままだと今回の用途に使えないので、イベント周りはガツっと書き換えてます。


触ってみての所感ですが、もう少しイベント周りが充実してくると嬉しいかなと。
グリモンっぽいの作ってしまったからかもしれませんが、特にタブのフォーカスが移る前のイベント（jetpack.tabs.onBlurとか）があると、要素とイベント削除して初期化みたいなのがやりやすい。
それと外部ライブラリのロードはやっぱり欲しい。
インストーラを10秒で作れるのは最高だし、これからに期待したいです。

通信周りとか全然見れてないですけど、何となくJetpack作っていれる流れは分かったので、週末の勉強会が楽しみ！