30分で作るJetpack Feature (1) 概要

Jetpack JavaScript

日記を全然更新してなかったので会社で作った資料をまるっとコピー
長い資料なので2つに分けた


はじめに：Tutorialの方が詳しいです

何も考えないで使いながら覚えていきましょう

  1. とりあえずインストール
  2. about:jetpackをアドレスバーに入力すると色々見れる
  3. WelcomeのDemoをインストールしてみる
  4. Tutorialをいじる
    • Libraries
      • Twitterクライアントがデフォルトで入ってる：jetpack.lib.twitterで呼び出せる
      • console.log(jetpack.lib);で確認する感じだとTwitterだけ。今後色んなの増やすらしい
  5. API Referenceをちょっと見る
    • 見たような関数(jQueryとか)はとりあえず他で勉強
    • jetpack
      • jetpack.notifications
        • 通知用の小窓。今はリンクもなくシンプルなもの
        • jetpack.notifications.show(options)で開く
options = {
    title: 小窓のタイトル
    body: 小窓の本文
    icon: 小窓につけるアイコンのURL（httpとかchrome）
}
      • jetpack.slideBar
        • タブの横にスライドサイドバーができる(Firefox3.5じゃないと見れないかな？)
        • 実験的な機能なので初めに以下の宣言が必要
jetpack.future.import("slideBar");
        • jetpack.slideBar.append(options)で設定
options = {
    icon: slidebarを開いた時に出すアイコン
    url: 表示するページのURL（slidebarにiframeを表示するイメージ？）相対pathの場合はjetpack featureのjsが置いてある場所からのpath（e.g. https://jetpack.mozillalabs.com/demos/unad.jsをインストールしている場合、unad.htmlと書けばhttps://jetpack.mozillalabs.com/demos/unad.htmlが読み込まれる）
    html: 表示するHTML。urlと一緒に書いたらこっちが優先される
    width: slidebarの幅
    onSelect: slidebarに出ているアイコンをクリックしたときに実行される関数。$(slide.icon).clickと同じかな？
    onReady: slidebarを読み込んだ時に実行される関数
}
        • onSelect,onReadyのコールバック関数で受け取った引数（わかりやすいようにslideとする）を使い、slide(options)でslidebarを操作することもできる
options = {
    size：スライドさせたときの幅
    persist：trueならユーザが閉じるクリックしない限り閉じない
}
※optionsなしでslide()を実行するとslidebarが閉じられる
      • jetpack.statusBar
        • ステータスバーに表示されるボタン
        • jetpack.statusBar.append(options)で設定
options = {
    url: 表示するページのURL。slidebarと逆でhtmlと一緒に書いたらこっちが優先される
    html: 表示するHTML。
    width: slidebarの幅
    onReady: slidebarを読み込んだ時に実行される関数
}
      • jetpack.storage
        • データの一時保存、永続保存
        • jetpack.storage.live（Firefoxを再起動するまでの一時保存）
        • jetpack.storage.simple（永続保存）
            • 新しい機能みたいだからimportで読み込みが必要
jetpack.future.import("storage.simple");
            • 非同期でデータを取得するようなので、getしたデータを使いたい場合はコールバック関数の中に書く必要がありそう
var value = 0;
jetpack.storage.simple.set('storageData', 1);
jetpack.storage.simple.get('storageData', function(data, value) {
    console.log(data);   //  storageData
    console.log(value);  //  1:保存したデータ
    // 以降valueを使った処理
});
// ここではvalueがまだgetできていない可能性がある
console.log(value);   // 0:まだgetできていないため
      • jetpack.tabs
        • 現在開いてるタブ一覧のオブジェクト（配列のようになっている）
最初のタブ：jetpack.tabs[ 0 ]
最後のタブ：jetpack.tabs[ jetpack.tabs.length-1 ]
        • 現在見ているページはfocusedでとれる
console.log(jetpack.tabs.focused.url);            // 現在見ているページのURL
console.log(jetpack.tabs.focused.close())         // 現在見ているタブを閉じる
console.log(jetpack.tabs.focused.favicon)         // 現在見ているタブのfavicon
console.log(jetpack.tabs.focused.contentDocument) // 現在見ているタブのwindowオブジェクト（alert使ったり）
console.log(jetpack.tabs.focused.contentWindow)   // 現在見ているタブのdocumentオブジェクト
        • タブを選択した時に実行させたいならonFocus()、DOMを読み込んだ時に実行させたいならonReady()
            • onReadyはiframeを読み込んだ時にも実行され、その時にコールバック関数で受け取る引数はiframeのオブジェクト
jetpack.tabs.onReady(function onNextPage(doc) {
  if (!doc.defaultView.frameElement) { // このif文がないとiframeを読み込んだタイミングでも以下が実行される
    jetpack.notifications.show("Loaded " + doc.location.href);
  }
});
  1. Demoに戻ってソースを見てみる
    • Installed Featuresのview source
      • これを参考に実際に作ってみる

一から作ろうとせずに既にあるソースからインスパイア

発表の時間が余ったら以下も触れる

  • 作ったjetpack（例えばmonmon.js）をインストールさせたいときは以下のlinkタグをheadに入れたページを作ればいい
<link rel="jetpack" href="monmon.js" name="monmonのJetpackFeature"/>
  • Bespin
  • 色々できすぎてセキュリティ少しやばい
  • Jetpackのロードマップとか
  • その他（ハマりどころとか）
    • 普段jQueryを使う場合、そのページのhtmlを処理するのが当たり前なので$('span')ってやってタグを取得しようとするけど、jetpackで同じようにやると現在見ているページを取りに行っちゃうみたいなので注意
      • 例えばslidebarに表示しているhtmlのを取得したい場合は$(slide.doc).find('span')で探索するか、$('span', slide.doc)で取得する
    • jetpack.statusBar.appendなどでurlを読み込んだ場合、onReadyなどからそのHTMLにアクセスするにはdefaultViewを使う
onReady: function(doc) {
   console.log(doc.defaultView.window); // windowオブジェクト
   console.log(doc.defaultView.wrappedJSObject); // HTMLに書かれたJavaScriptの関数が使える
   console.log(doc.defaultView.wrappedJSObject.exampleFn()); // HTMLに書かれたexampleFnという関数を実行
}
    • console.log(jetpack)に何のプロパティがあるのか見てみた
      • jetpack.jsonとかあったけど、Firefox3から使えるJSON.stringifyとJSON.parseを使えと言われた
jetpack.json.encode is deprecated, please use JSON.stringify instead.
jetpack.json.decode is deprecated, please use JSON.parse instead.

var obj = {
   nifty: 'ニフティ'
}
var json = JSON.stringify(obj);
console.log(json); // {"nifty":"ニフティ"}
console.log(JSON.parse(json));
      • 実験機能、新機能みたいなのをプロパティに持っている
 ["jetpack.T1000", "jetpack.os.clipboard", "jetpack.securableModules", "jetpack.slideBar", "jetpack.storage.simple"]

jetpack.future.import("T1000");
jetpack.notifications.show(jetpack.T1000());

jetpack.future.import("os.clipboard")
jetpack.os.clipboard.set('ニフティ');
jetpack.notifications.show(JSON.stringify(jetpack.os.clipboard.get()));