先週、とりあえず開発環境を整えました。早速…でもないですが、何か作ってみましょう。
最初の一歩なので、カンタンなものから。
チュートリアルとAPIリファレンスを見ながら、以前用意した画像がスクリューするボタンを付けてみます。
とりあえず、ボタンを表示
まずはアドレスバーに about:jetpack と入力して”I am Jetpack.”のページを表示します。
ここの”Develop”タブで開発するのが、手っ取り早い。
ページ中ほどの黒い矩形をクリックすると、Bespinのように編集可能な状態になります。
ここに、次のようなコードを入れてみましょう。
jetpack.statusBar.append({
html: 'Screw!',
width: 50
});
そして”try out this code”をクリック（以下、実行時には常にこの手順）
ステータスバーに”Screw!”と表示されたかと。
クリックしたらイベントが走るようにする
次に、クリックイベントが拾えるかを確かめます。
jetpack.statusBar.append({
html: 'Screw!',
width: 50,
onReady: function(widget){
$(widget).click(function(){
jetpack.tabs.focused.contentWindow.alert("!");
});
}
});
Screw!表示は、なんとなく押せそうなマウスカーソルに。
クリックしたら”!”が表示されれば、ここまでは成功。
スクリューさせる
あとは実行時のコードを書くだけ。
画像を舞わせるスクリプトについては基本的には説明しませんが、以前コッソリ書いたBookmarkletと違うのは、jQueryっぽく書き直してみたこと。
その辺だけ少し。
jetpack.statusBar.append({
html: 'Screw!',
width: 50,
onReady: function(widget){
$(widget).click(function(){
var doc = jetpack.tabs.focused.contentDocument;
var R=0;
var x1=.1;
var y1=.05;
var x2=.25;
var y2=.24;
var x3=1.6;
var y3=.24;
var x4=300;
var y4=200;
var x5=300;
var y5=200;
var DI=$(doc).find('img').css('position', 'absolute');
setInterval(function(){
var i=0;
DI.each(function(){
$(this).css({
left: Math.sin(R*x1+i*x2+x3)*x4+x5,
top: Math.cos(R*y1+i*y2+y3)*y4+y5
});
i++;
});
R++;
},5);
});
}
});
注意が必要なのは1点だけ、18行目のDOM Selectorです。
通常、ページ内でのセレクター指定は、findではなくjQuery関数を直接呼び出します。
例えばここでの「img要素を全て取得」というものであれば、次のように記述するのが普通かと思います。
var DI = $('img');
しかし、これではJetpack内では対象となるDocumentオブジェクトがどれなのかハッキリしません。
今回は「現在アクティブになっているタブのDocument」が対象なので、次のように明示的にしてやる必要があります。
var DI = $(jetpack.tabs.focused.contentDocument).find('img');
慣れだと思いますが、注意して下さい。
あとはsetIntervalなどは通常と同じく使えます。
早速Screw!してみましょう。Flickrなんかで試すと、いい感じです。
インストール画面を作る
せっかく作ったので、Firefoxを再起動しても、いつでもScrew!したいところです。
ここでインストール画面を作ってみましょう。
まずはJetpack Featureを単体のjsファイルに。
ここでは適当に置きました。
そして、インストール用のページを作成します。
これは恐らく、link要素で指定してやれば良いだけ。
Screw! - Sample of Jetpack Screw! - Sample of Jetpack
8行目さえきちんと記述されていれば、あとはどうでもいいのだと思います。
アクセスしてみると、インストールを確認するバーがページ上部に出てくるようになります。
ここで”Install”を選ぶと、「信頼されていないページです」的な警告画面になります。
今回は自作物なので安心して “I know what I’m doing. Install it!” を選んで大丈夫ですが、実はJetpackは現時点でも結構危ない関数にもアクセス可能です。
他所でこの画面に遭遇したら、信頼しても良いスクリプトかどうかをしっかり判断して、自己責任で入れるようにして下さい。
これで完了。
確認のために、”about:jetpack”から “Installed Features” を見てみましょう。
ちゃんと、Screw!が入っていると思います。
極めて簡単でした。
Related posts:
- [Jetpack] インストールと開発環境構築準備
- [Jetpack] v.2リリース：スライドバー搭載
- [Jetpack] 表示中ページのブックマーク数を自動表示
- [Jetpack] 開発環境構築
