使ったのは、v.2から実装されたスライドバー。ここに、現在表示中のページに付けられているブックマークを表示します。
「このページ、どのくらい注目されてるのかな？」と思った時に、割と手っ取り早く分かって便利なんじゃないかと。
現時点で対応しているのは「はてなブックマーク」と「livedoorクリップ」だけです。

概要

Mozillaが開発中のFirefoxプラグイン、Jetpackを用いて作ってみたブックマーク表示ツールです。

左側に開いているのグレーのエリアが、今回作ったFeature。ここに、現在のページのブックマーク数が表示されます。

自由に開け閉めできますが、開きっぱなしにもできます。タブの移動やページ遷移でもチェックに行くので、鬱陶しかったら閉じてしまうのが良いかと。

インストール方法

まず、なにはともあれJetpackをインストールしてください。

次に、Social-Screwをインストールします。
上記リンクを辿った先のページにFirefoxでアクセスすると、ページ上部にインストールを促すバーが表示されます。ここで”Install…”ボタンを押すだけです。
しかし何分非公式のサイトなので、非常に危なそうな警告ページが表示されてしまいます。しかしここは気にせず、ページ下部の”I know what I’m doing. Install it!”をクリックしてください。

これで完了のはずです。
プラグインの設定やタブの表示位置によって若干異なるのですが、概ね左上あたりに青い矢印が表示されているでしょうか？これがスライドバーの開閉スイッチになっています。
マウスを近づけるかクリックすると、左端が少し開いてネジの頭が表示されると思います。(先ほどのスナップショットでも見えます)
これをクリックすると、表示領域が開きます。閉じるには、先ほどの青い矢印をもう一度クリックします。

コード

githubにホスティングしておいたので、興味のある人は見てみてください。
試行錯誤しながらだったので綺麗なコードとは言いがたいですが、100行ちょっとの短いコードです。
Jetpack APIリファレンスやjQuery日本語リファレンスなどと併せて見れば、簡単に読めると思います。

今後の展開

本当はtomblooのような、ここから投稿まで出来るツールを作りたかったのですが、ID/PWDをセキュアに保存する良い方法が無かったので、断念しました。
自分個人用ならjetpack.storage.simpleで保存してしまっても良いのですが、公開するとなるとさすがに…
それこそtomblooのようにAPIを認証させて使うのではなくPostをエミュレートするような形で実装するのが良いのかもしれませんが、そこまでやるパワーは無く。

結局、単純にブックマーク数を表示するだけのものですが、これはこれでと思います。
# これを作ってみて、世の中変な人が多いことに気づきました :-p

本当はdeliciousを入れたかったのですが、URLをJavascriptでMD5にするのがメンドウで、今回はパスしました。Y!は基本的にはAPI公開してないし。もし要望があれば考えます。

注意事項

冒頭でも書きましたが、Jetpackは未だ実験段階の機能です。
動作の怪しい部分は多々ありますので、導入する場合はあくまで自己責任でお願いいたします。

Related posts:

1. [Jetpack] v.2リリース：スライドバー搭載
2. [Jetpack] インストールと開発環境構築準備
3. [Jetpack] Screw!ボタンをつけてみる

今回目に付いた変更は、スライドバー機能が搭載されたことです。
これによって、選択した文字列のWikipediaでの検索結果をサイドバーに表示したり、フラッシュムービーを横で流したまま他のページをナビゲートしたりといった、Juiceのような機能を簡単に作ることが出来たりします。（続きに動画を載せました）

他にもXMLHttpRequestの追加やストレージ機能の実装など、本当に使える機能へ着々と進んでいると思わせます。

XMLHttpRequestの追加

これでAjax通信も可能になります。しかも、クロスドメインOK。
確かにプラグインという性質上、現在表示されているページと同じドメインとしか通信できないというのはナンセンスです。しかしContent Documentに直接アクセスできる以上、セキュリティポリシーとして本当に良いのかなと疑問には思わせます。
JSONPなどで幾らでも抜け道がある今、黎明期に作られたポリシーに縛られ続ける必要は無いとの判断なのかもしれませんが。

スライドバー

下手な文章で説明するより、以下の動画参照。

Jetpack: Slidebar from Aza Raskin on Vimeo.

ストレージ

jetpack.storage.liveおよびjetpack.storage.simpleが追加されました。
ページ遷移してもオブジェクトを保持できるliveも便利ですが、Featureごとの設定を名前の衝突を心配する必要なしに使えるSimple Persistent Storage JEPの実装が大きいかと思います。

Tabオブジェクトのドキュメント整理および機能追加

最も重要なオブジェクトのひとつであるjetpack.tabsについてのドキュメントがリファレンス上で強化されました。
それにあわせてrawなどの新たなプロパティも紹介されていますが、これが以前からあったのか、今回はじめて実装されたのかは未確認です。

詳しくは、Jetpack APIリファレンスを参照してください。

Related posts:

1. [Jetpack] 表示中ページのブックマーク数を自動表示
2. [Jetpack] インストールと開発環境構築準備
3. [Jetpack] Screw!ボタンをつけてみる

最初の一歩なので、カンタンなものから。
チュートリアルと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要素で指定してやれば良いだけ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Screw! - Sample of Jetpack</title>
  <link rel="jetpack" href="screw.js">
</head>
<body>
  <h1>Screw! - Sample of Jetpack</h1>
</body>
</html>

8行目さえきちんと記述されていれば、あとはどうでもいいのだと思います。

アクセスしてみると、インストールを確認するバーがページ上部に出てくるようになります。

ここで”Install”を選ぶと、「信頼されていないページです」的な警告画面になります。
今回は自作物なので安心して “I know what I’m doing. Install it!” を選んで大丈夫ですが、実はJetpackは現時点でも結構危ない関数にもアクセス可能です。
他所でこの画面に遭遇したら、信頼しても良いスクリプトかどうかをしっかり判断して、自己責任で入れるようにして下さい。

これで完了。
確認のために、”about:jetpack”から “Installed Features” を見てみましょう。
ちゃんと、Screw!が入っていると思います。

極めて簡単でした。

Related posts:

1. [Jetpack] インストールと開発環境構築準備
2. [Jetpack] v.2リリース：スライドバー搭載
3. [Jetpack] 表示中ページのブックマーク数を自動表示

目標としては、次のような感じ。

• 既存のFirefox 3.0系は、そのまま使えるように残す
• それとは別に、Firefox 3.5 Betaをインストールする
• Firebug 1.4 Alphaも入れる

Firefox 3.5 Betaのインストール

こちらから。日本語にローカライズされたものが良ければ、LanguageがJapaneseのものを選びます。
その際、インストール先のフォルダを現在のものと異なる場所に入れるようにします。
自分はあくまでFF3.0が本線で、これは開発用のブランチという位置づけ。なのでフォルダ名にはこだわらず、次のような場所にインストールしてしまいます。

C:\Program Files\Mozilla Firefox 3.5 Beta 4

ちなみに、本線の方のインストールパスは次の通り。

C:\Program Files\Mozilla Firefox

以後、コマンドの類はこのパスで記述します。自身の環境に適当に読み替えてください。

プロファイルの作成

次に、開発用のプロファイルを作成します。
Firefoxが起動していない状態で、Windowsの[スタート]→[ファイル名を指定して実行]から次のコマンドを実行。

"C:\Program Files\Mozilla Firefox 3.5 Beta 4\firefox.exe" -p

そして「新しいプロファイルを作成」で、開発用プロファイルを作成します。

追加したら、とりあえず「終了」。

起動用ショートカットを作成

本線起動用

"C:\Program Files\Mozilla Firefox\firefox.exe" -no-remote -p "default"

開発環境起動用

"C:\Program Files\Mozilla Firefox 3.5 Beta 4\firefox.exe" -no-remote -p "Dev Firefox3.5"

これでFirefoxはおしまい。

Firebug 1.4のインストール

Firebugの1.4は未だalpha版ですが、インストールはこちらから。

2009.05.24現在の最新版はa29ですが、ここで注意が必要です。リリースノートによると実は、現時点での最新バージョンはNet Monitorが一時的に削除されています。そのためFirebug.NetMonitorオブジェクトが生成されず、consoleを扱おうとするとエラーが表示されたり、処理が異様に重くなったりしてしまうようです。

Jetpackの開発用と割り切れば、NetMonitorが含まれているa27以前を入れておくのが良いと思います。

Jetpackのインストール

前回書いた通りで、何も難しいことはありません。
Firefox再起動後、about:jetpackのタブが出ていると思います。
チュートリアルをまとめてみましたので、よかったら参照してください。

Related posts:

1. [Jetpack] インストールと開発環境構築準備

• 書きなれたJavascript+jQueryで記述できる
• インラインで実行確認できるツールがある
• Firebugとの組み合わせでデバッグしやすい

ということで、ちょっと覚えておこうという気に。
まずは開発準備に環境を整えましょう。

インストール

jQueryでプラグインが作れると言っても、ネイティブなExtensionが生成されるわけではなく。あくまでJetpack上で動作させるものなので、現時点ではJetpackエクステンションをインストールしないといけません。

公式サイトのページ中ほどにある “Get Started! Install the Jetpack Prototype & API” をクリックし、いつも通りの手順でインストールを実行します。

拡張機能を有効にするため、Firefoxを再起動。すると “about:jetpack” タブが表示されています。

これで完了と非常に簡単なのですが、これから開発をしようと思うと、気になる注意が表示されています。

2つ出ていますが、まずは上の方。

You appear to be running Firefox 3 or earlier, which means that any logging messages or errors produced by your Jetpacks will reference the wrong line numbers. This makes debugging Jetpacks difficult; please consider using Firefox 3.5 Beta.

要約すると、「Firefox3もしくはそれ以前のバージョンを使っているようですが、その場合はJetpackのエラー発生行が間違って報告されちゃいます。これはデバッグを非常に困難にするので、Firefox 3.5 Betaを使うことを検討してください」と。

確かにそれは困ります。現在レギュラーで使っているのは、Firefox 3.0.1。
しかし、安易に3.5にしてしまうと、他の拡張機能が使えなくなったりして日常が不便。
ここはプロファイルを分けて、あくまで3.5はJetpack開発用のものとして起動させるようにします。これならば開発には余計なエクステンションも入らずサクサク動くし、そういった拡張機能が干渉して悪さをするようなことも無いので快適。
プロファイルの切り分けは -p パラメータをつけて操作するだけなので、それほど難しくありません。

ちなみに、2つめの注意文は次のようなもの。

You either don’t have the latest version of Firebug installed, or you don’t have it enabled for this page, so all logging messages will appear in the JS Error Console. If you get Firebug 1.4 Alpha and enable it for this page, and then reload this page, all logging messages will be logged to the Firebug Console, where it’s much easier to debug problems and inspect live objects.

こちらも簡単に約しておくと、こんな感じ。

「最新のFirebugがインストールされていないか、このページに対して有効になっていません。そのため、全てのエラーメッセージはJS Error Consoleに出力されます。Firebug 1.4 Alphaを入手して有効にしてからこのページをリロードすればメッセージは全て、よりデバッグや生成されたオブジェクトの調査がしやすいFirebugのコンソールに出力されるようになります。」

ここで書いている JS Error Console とは標準で入っている[ツール]→[エラーコンソール]のことだと思います。確かにこれは使いにくい。
やはり前記の通り、Jetpackの開発用に Firefox3.5 + Firebug1.4 環境を別プロファイルで作るのが良さそうです。

というわけで、開発環境の構築を具体的に。少し長くなったので次で。

Related posts:

1. [Jetpack] 開発環境構築
2. [Jetpack] Screw!ボタンをつけてみる
3. [Jetpack] v.2リリース：スライドバー搭載