Upload
yutaka-hoshino
View
1.724
Download
0
Embed Size (px)
DESCRIPTION
Jetpac LT資料
Citation preview
はじめませんか? 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 プロパティに記述
• 動作確認取れなかった
– 2つの方法が現状で提案されてる
ちょっと注意• 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を!!