はじめませんか？ Jetpack

はじめませんか？ Jetpack

Mozilla 勉強会 1st

{id:|@} con_mame

自己紹介

con_mame ( こんまめ )

• こんにちは！• 本名 : 星野豊• 職業 : 大学院生• 主に Twitter に生息してます

– フォローはお気軽に！

• http://d.hatena.ne.jp/con_mame/

• 主に使ってるもの– Ruby > Flex > PHP > Javascript > C# > Java

こんなの作ってます･･･　Mozilla関係なくてすいません･･･

• Chumby 用ニコニコ動画 Player

こんなの作ってます･･･　Mozilla関係なくてすいません･･･

• 勉強しながら Twitter やりたかったので自重しなかった

こんなの作ってます！• 最近は、 Jetpack Feature を作ってます！

• 本当にちょっとした Feature を公開中– http://

jetpackgallery.mozillalabs.com/contributors/con_mame/

– 気軽に拡張を作れるのが Jetpack の魅力の 1つ！

Jetpack って？

• Jetpack が登場して早 7 ヶ月･･･

• Jetpack が意外と広まっていない印象･･･– 解説記事– Jetpack Feature を作ってみた– とか、検索しても中々出てこない– しかも、ちょっと古い記事もまじってる

Jetpackって知ってますか？？

Jetpack Feature作ったことありますか？？

Jetpack って何？？• Firefox の拡張を簡単・手軽に作成できる！

– Javascript+HTML+CSS– jQuery 標準装備 (v1.3.2 / Jetpack v0.6.2)– XUL やパッケージングが必要ない– Jetpack Feature をインストールしても再起動いらず

• 自動更新（ 1 時間ごとに確認 / オプション）

• 互換性を保つ– 現状

• Firefox のバージョンアップに伴い動作しなくなるアドオンがある

– Jetpack• Jetpack の API によりアドオンの互換性を心配する必要がな

い

• API の提供により拡張を簡単に作成可能– Clipboard– Storage– Selection– Menus– Settings– SideBar– StatusBar etc…

• Jetpack が開発環境を提供– 開発環境– Feature の管理– API リファレンス etc…

• 開発環境内のエディタで Feature の編集・実行が可能

• Feature インストール時に Firefox の再起動不要

• Firebug を使用したデバッグ

• API リファレンス内のコードを選択するとJetpack のエディタが起動

つまり･･･• Jetpack の登場で

– Firefox の拡張作成の敷居が下がった！

– 拡張機能を手軽に試せる！

• 手軽に自分の好きな機能を Firefox に追加出来る！

Jetpack Feature の作り方

Jetpack を導入～開発環境• http://jetpack.mozillalabs.com/

– もしくは 「ツール」　→　「アドオン」 →　「アドオンを入手」で Jetpack と検索

– Firebug あると便利 (1.4.0b4< は動作しない )

• アドレスバーに「 about:jetpack 」– もしくは、「ツール」内の「 about:jetpack 」– about:jetpack(safemode)

• インストール済 Feature を無効化• Feature の動作がおかしい時などに

開発環境• Syntax highlight

• Feature の実行

API の読み込み• API 使用の前にjetpack.future.import("API 名 ");

• Ex– Menu (menu)– Settings (storage.settings)– Storage (storage.simple)– pageMods (jetpack.pageMods)

Menu

• Jetpack 0.6 ～• JEP14

• メニューバーやコンテキストメニューに追加– 一部 API 未実装

Menu (add2hateb)

Menu

• 特定のタグ上でのみ動作する (ex. リンク上のみ )

Menu

• 既存のメニューも置換可能• サブメニューも作成可能

– クリックされたアイテムは引数で渡される

Settings

• Jetpack 0.6 ～• JEP24

• Feature で使用する設定を保存• Manifest に記述する事で設定 UI を自動生

成

Settings

• text, password, boolean, slidebar

• パスワードはパスワードマネージャに登録

Settings

自動生成

Settings• 設定を参照する

– jetpack.storage.settings.name.settingName– Ex..

• jetpack.storage.settings.miterunow.twitterId• jetpack.storage.settings.miterunow.twitterPass

• 注意– manifest は jetpack.future.import(“storage.settings”)

の前に記述– 修正されるかも– Feature 中から設定画面を呼び出す（未実装）

• jetpack.settings.open();

Storage

• Feature で使用する情報を保存する

• Storage.simple– ブラウザを閉じても消えない– JSON 形式で保存

• Stroage.live– ブラウザを閉じると消える

Storage （ storage.simple ）

• 5 分間隔で自動的に同期• 削除時は即同期

pageMods

• JEP17

• 指定したサイトを開いたタイミングで Feature を実行– tabs.onReady– DOMContentLoaded

pageMods

• 現状では例外サイトの指定不可

その他 API の情報• Jetpack JEP (Jetpack Enhancement Proposal)

– https://wiki.mozilla.org/Labs/Jetpack/JEP

– 将来 Jetpack で提供予定の API の Draft

– 一部 API として提供済• API リファレンス• 細かい修正が頻繁にある

公開してみる

公開方法

• Jetpack gallery– http://jetpackgallery.mozillalabs.com/

• 自前でインストールサイトを用意

Jetpack gallery

• Feature へのタグ付け• スクリーンショットや動画

の掲載• レビュー• ランキング

• コードの確認にはログイン• 警告画面スキップ• 自動更新• Jetpack のバージョンチェッ

ク

• 登録にちょっとコツが・・・

Jetpack gallery - ちょっと注意 -

• Feature を削除した後でも同名で保存不可– 修正を行う場合は Feature ページの「 Edit this Jetpack 」

• サイト上のフォームからコードを登録する場合サイズ制限– フォーム張り付けずファイルをアップロード– 修正時もフォーム上では無く、修正済ファイルをアップロード

• サニタイズが若干怪しい– http://d.hatena.ne.jp/con_mame/20091112#1258008697– http://d.hatena.ne.jp/con_mame/20091024#1256360709

インストールサイトを用意する• head タグ内に<link rel="jetpack" href="feature.js">

• インストールページにアクセスすると

インストールサイトを用意する

• 信用しているドメイン以外からのインストールだと確認画面出現

• コードの確認

• 自動更新の許可

Jetpack のもろもろ

開発の時少し不便・・・• 開発する時はインストール用の HTML ファ

イル必須・・・• いちいち作の面倒

• id: teramako さん作の「ローカルの Jetpack Feature ファイルをインストールする Feature 」– http://d.hatena.ne.jp/teramako/20091201/p1– 便利！！

外部スクリプトのロード• Jetpack の API として用意はない

– 今後、提供の可能性あり

• スマートではないけど– $.get して eval する– statusBar の HTML プロパティに記述

• 動作確認取れなかった

– ２つの方法が現状で提案されてる

ちょっと注意• Feature 中で alert などを使う

– jetpack.tabs.focused.contentWindow.alert();– jetpack.tabs.focused.contentWindow.prompt();– jetpack.__parent__ と jetpack.tabs.focused.contentWi

ndow は同一だが後者の使用を推薦

• Document を取得– jetpack.tabs.focused.contentDocument

ちょっと注意• Components.classes は基本的に使用不可

– Ver0.5 では使用不可– でも・・・ Ver0.6 で復活– セキュリティ確保のために Feature 中では提

供済 API を使用する– どうしても使用したい場合は・・・

• jetpack.tabs.focused.raw.ownerDocument.defaultView.Cc

• jetpack.tabs.focused.raw.ownerDocument.defaultView.Ci

でも・・・• 使用しないこと推薦

– jetpack.tabs.focused.raw• XUL のタブオブジェクトへアクセス出来てしま

う・・・• セキュリティ的によろしくない• 将来的にアクセス出来なくなる可能性あり

– jetpack.tabs.focused.raw.ownerDocument.defaultView

• で Chrome ウインドウにアクセス可能・・・• 使わない事推薦

本当にちょっとしたこと

Jetpack が不調になったら• 開発中に Jetpack が不調になることが稀に

– エディタに貼付けたコードは即保存され Firefox 再起動後に自動実行される←

– 変な Feature をつかまされた・・・• そんなときは

– Safemode で起動→対象の Feature を削除– エディタのコードはファイルを削除

• Firefox プロファイルディレクトリ中の「 jetpack-editor-code.txt 」の中身を削除！

自動更新・・・• Jetpack gallery ってレビューとか無いの

に自動インストール・自動更新設定・・・なんてこったい・・・

• 自動更新切りたい– Feature はすべて SQLite で管理されてる– Firefox プロファイルディレクトリ中の「 jetp

ack_ann.sqlite 」を編集• ubiquity/autoupdate を false に

Jetpack の今後

• API の機能追加– Clipboard のイメージサポート– Panel API の提供– Menu API の機能拡張– Feature インストール時に任意のページを表示可能

（ First-run pages ）

• セキュリティ強化– Feature に署名

• 署名済 : 自動アップデート• 未証明 : アップデート時に許可を求める

– Manifest ファイルによるアクセス権の付与– AMO みたいなレビューシステムで Feature の危険性

などを確認

まとめ

ブラウザが物足りなかったら・・・• Firefox の拡張を作って！

• 自分仕様の使い易いブラウザに！

• でも難しいんでしょ？

• Jetpack なら簡単に出来るよ！

もっともっとギャラリーに Featureを！！