はじめませんか? Jetpack

2,089 views

Published on

Jetpac LT資料

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,089
On SlideShare
0
From Embeds
0
Number of Embeds
161
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 自動更新の仕組みを簡単に(コードの比較だけとか)
  • Firebugを使用したデバックの話
  • html プロパティのところの書き方がこの方法意外にもいくつかあることに軽く触れる
  • Jetpack. がない場合は内部で付加される
  • 国際化対応などが最近追加された
  • 提供している API を使用して安全を提供するつもりだけど、初期段階では実装が間に合わないから API の整備と共に厳しくして行くつもり raw プロパティは API でも最後の手段として書かれていて、使用しない事を推薦している
  • インストール時に同意のチェックいれるけど、心配なら
  • First-run page の話
  • 発展途上なプロジェクトなので、どんどん使ってどんどん意見を出していこう
  • はじめませんか? Jetpack

    1. 1. はじめませんか? Jetpack Mozilla 勉強会 1 st {id:|@} con_mame
    2. 2. <ul><li>自己紹介 </li></ul>
    3. 3. con_mame ( こんまめ ) <ul><li>こんにちは! </li></ul><ul><li>本名 : 星野豊 </li></ul><ul><li>職業 : 大学院生 </li></ul><ul><li>主に Twitter に生息してます </li></ul><ul><ul><li>フォローはお気軽に! </li></ul></ul><ul><li>http://d.hatena.ne.jp/con_mame/ </li></ul><ul><li>主に使ってるもの </li></ul><ul><ul><li>Ruby > Flex > PHP > Javascript > C# > Java </li></ul></ul>
    4. 4. こんなの作ってます・・・   Mozilla 関係なくてすいません・・・ <ul><li>Chumby 用ニコニコ動画 Player </li></ul>
    5. 5. こんなの作ってます・・・   Mozilla 関係なくてすいません・・・ <ul><li>勉強しながら Twitter やりたかったので自重しなかった </li></ul>
    6. 6. こんなの作ってます! <ul><li>最近は、 Jetpack Feature を作ってます! </li></ul><ul><li>本当にちょっとした Feature を公開中 </li></ul><ul><ul><li>http:// jetpackgallery.mozillalabs.com/contributors/con_mame / </li></ul></ul><ul><ul><li>気軽に拡張を作れるのが Jetpack の魅力の 1 つ! </li></ul></ul>
    7. 7. <ul><li>Jetpack って? </li></ul>
    8. 8. <ul><li>Jetpackが登場して早7ヶ月・・・ </li></ul><ul><li>Jetpackが意外と広まっていない印象・・・ </li></ul><ul><ul><li>解説記事 </li></ul></ul><ul><ul><li>Jetpack Featureを作ってみた </li></ul></ul><ul><ul><li>とか、検索しても中々出てこない </li></ul></ul><ul><ul><li>しかも、ちょっと古い記事もまじってる </li></ul></ul>
    9. 9. <ul><li>Jetpack って知ってますか?? </li></ul><ul><li>Jetpack Feature 作ったことありますか?? </li></ul>
    10. 10. Jetpackって何?? <ul><li>Firefox の拡張を簡単・手軽に作成できる! </li></ul><ul><ul><li>Javascript+HTML+CSS </li></ul></ul><ul><ul><li>jQuery 標準装備 (v1.3.2 / Jetpack v0.6.2) </li></ul></ul><ul><ul><li>XUL やパッケージングが必要ない </li></ul></ul><ul><ul><li>Jetpack Feature をインストールしても再起動いらず </li></ul></ul><ul><li>自動更新( 1 時間ごとに確認 / オプション) </li></ul><ul><li>互換性を保つ </li></ul><ul><ul><li>現状 </li></ul></ul><ul><ul><ul><li>Firefox のバージョンアップに伴い動作しなくなるアドオンがある </li></ul></ul></ul><ul><ul><li>Jetpack </li></ul></ul><ul><ul><ul><li>Jetpack の API によりアドオンの互換性を心配する必要がない </li></ul></ul></ul>
    11. 11. <ul><li>API の提供により拡張を簡単に作成可能 </li></ul><ul><ul><li>Clipboard </li></ul></ul><ul><ul><li>Storage </li></ul></ul><ul><ul><li>Selection </li></ul></ul><ul><ul><li>Menus </li></ul></ul><ul><ul><li>Settings </li></ul></ul><ul><ul><li>SideBar </li></ul></ul><ul><ul><li>StatusBar etc… </li></ul></ul>
    12. 12. <ul><li>Jetpackが開発環境を提供 </li></ul><ul><ul><li>開発環境 </li></ul></ul><ul><ul><li>Featureの管理 </li></ul></ul><ul><ul><li>APIリファレンス etc… </li></ul></ul>
    13. 13. <ul><li>開発環境内のエディタでFeatureの編集・実行が可能 </li></ul><ul><li>Featureインストール時にFirefoxの再起動不要 </li></ul><ul><li>Firebugを使用したデバッグ </li></ul><ul><li>APIリファレンス内のコードを選択するとJetpackのエディタが起動 </li></ul>
    14. 14. つまり・・・ <ul><li>Jetpackの登場で </li></ul><ul><ul><li>Firefoxの拡張作成の敷居が下がった! </li></ul></ul><ul><ul><li>拡張機能を手軽に試せる! </li></ul></ul><ul><li>手軽に自分の好きな機能をFirefoxに追加出来る! </li></ul>
    15. 15. <ul><li>Jetpack Feature の作り方 </li></ul>
    16. 16. Jetpackを導入~開発環境 <ul><li>http://jetpack.mozillalabs.com/ </li></ul><ul><ul><li>もしくは 「ツール」 -> 「アドオン」 -> 「アドオンを入手」で Jetpack と検索 </li></ul></ul><ul><ul><li>Firebug あると便利 (1.4.0b4< は動作しない ) </li></ul></ul><ul><li>アドレスバーに「 about:jetpack 」 </li></ul><ul><ul><li>もしくは、「ツール」内の「 about:jetpack 」 </li></ul></ul><ul><ul><li>about:jetpack(safemode) </li></ul></ul><ul><ul><ul><li>インストール済 Feature を無効化 </li></ul></ul></ul><ul><ul><ul><li>Feature の動作がおかしい時などに </li></ul></ul></ul>
    17. 17. 開発環境 <ul><li>Syntax highlight </li></ul><ul><li>Featureの実行 </li></ul>
    18. 18. APIの読み込み <ul><li>API 使用の前に </li></ul><ul><li>jetpack.future.import(&quot;API 名 &quot;); </li></ul><ul><li>Ex </li></ul><ul><ul><li>Menu (menu) </li></ul></ul><ul><ul><li>Settings ( storage.settings ) </li></ul></ul><ul><ul><li>Storage ( storage.simple ) </li></ul></ul><ul><ul><li>pageMods ( jetpack.pageMods ) </li></ul></ul>
    19. 19. Menu <ul><li>Jetpack 0.6~ </li></ul><ul><li>JEP14 </li></ul><ul><li>メニューバーやコンテキストメニューに追加 </li></ul><ul><ul><li>一部API未実装 </li></ul></ul>
    20. 20. Menu (add2hateb)
    21. 21. Menu <ul><li>特定のタグ上でのみ動作する (ex. リンク上のみ ) </li></ul>
    22. 22. Menu <ul><li>既存のメニューも置換可能 </li></ul><ul><li>サブメニューも作成可能 </li></ul><ul><ul><li>クリックされたアイテムは引数で渡される </li></ul></ul>
    23. 23. Settings <ul><li>Jetpack 0.6~ </li></ul><ul><li>JEP24 </li></ul><ul><li>Featureで使用する設定を保存 </li></ul><ul><li>Manifestに記述する事で設定UIを自動生成 </li></ul>
    24. 24. Settings <ul><li>text, password, boolean, slidebar </li></ul><ul><li>パスワードはパスワードマネージャに登録 </li></ul>
    25. 25. Settings 自動生成
    26. 26. Settings <ul><li>設定を参照する </li></ul><ul><ul><li>jetpack.storage.settings. name.settingName </li></ul></ul><ul><ul><li>Ex.. </li></ul></ul><ul><ul><ul><li>jetpack.storage.settings.miterunow.twitterId </li></ul></ul></ul><ul><ul><ul><li>jetpack.storage.settings.miterunow.twitterPass </li></ul></ul></ul><ul><li>注意 </li></ul><ul><ul><li>manifest は jetpack.future.import(“storage.settings”) の前に記述 </li></ul></ul><ul><ul><li>修正されるかも </li></ul></ul><ul><ul><li>Feature 中から設定画面を呼び出す(未実装) </li></ul></ul><ul><ul><ul><li>jetpack.settings.open(); </li></ul></ul></ul>
    27. 27. Storage <ul><li>Feature で使用する情報を保存する </li></ul><ul><li>Storage.simple </li></ul><ul><ul><li>ブラウザを閉じても消えない </li></ul></ul><ul><ul><li>JSON 形式で保存 </li></ul></ul><ul><li>Stroage.live </li></ul><ul><ul><li>ブラウザを閉じると消える </li></ul></ul>
    28. 28. Storage ( storage.simple ) <ul><li>5分間隔で自動的に同期 </li></ul><ul><li>削除時は即同期 </li></ul>
    29. 29. pageMods <ul><li>JEP17 </li></ul><ul><li>指定したサイトを開いたタイミングで Feature を実行 </li></ul><ul><ul><li>tabs.onReady </li></ul></ul><ul><ul><li>DOMContentLoaded </li></ul></ul>
    30. 30. pageMods <ul><li>現状では例外サイトの指定不可 </li></ul>
    31. 31. その他APIの情報 <ul><li>Jetpack JEP ( Jetpack Enhancement Proposal ) </li></ul><ul><ul><li>https://wiki.mozilla.org/Labs/Jetpack/JEP </li></ul></ul><ul><ul><li>将来Jetpackで提供予定のAPIのDraft </li></ul></ul><ul><ul><li>一部APIとして提供済 </li></ul></ul><ul><ul><ul><li>APIリファレンス </li></ul></ul></ul><ul><ul><ul><li>細かい修正が頻繁にある </li></ul></ul></ul>
    32. 32. <ul><li>公開してみる </li></ul>
    33. 33. 公開方法 <ul><li>Jetpack gallery </li></ul><ul><ul><li>http:// jetpackgallery.mozillalabs.com / </li></ul></ul><ul><li>自前でインストールサイトを用意 </li></ul>
    34. 34. Jetpack gallery <ul><li>Feature へのタグ付け </li></ul><ul><li>スクリーンショットや動画の掲載 </li></ul><ul><li>レビュー </li></ul><ul><li>ランキング </li></ul><ul><li>コードの確認にはログイン </li></ul><ul><li>警告画面スキップ </li></ul><ul><li>自動更新 </li></ul><ul><li>Jetpack のバージョンチェック </li></ul><ul><li>登録にちょっとコツが・・・ </li></ul>
    35. 35. Jetpack gallery -ちょっと注意- <ul><li>Feature を削除した後でも同名で保存不可 </li></ul><ul><ul><li>修正を行う場合は Feature ページの「 Edit this Jetpack 」 </li></ul></ul><ul><li>サイト上のフォームからコードを登録する場合サイズ制限 </li></ul><ul><ul><li>フォーム張り付けずファイルをアップロード </li></ul></ul><ul><ul><li>修正時もフォーム上では無く、修正済ファイルをアップロード </li></ul></ul><ul><li>サニタイズが若干怪しい </li></ul><ul><ul><li>http://d.hatena.ne.jp/con_mame/20091112#1258008697 </li></ul></ul><ul><ul><li>http://d.hatena.ne.jp/con_mame/20091024#1256360709 </li></ul></ul>
    36. 36. インストールサイトを用意する <ul><li>head タグ内に </li></ul><ul><li><link rel=&quot;jetpack&quot; href=&quot;feature.js&quot;> </li></ul><ul><li>インストールページにアクセスすると </li></ul>
    37. 37. インストールサイトを用意する <ul><li>信用しているドメイン以外からのインストールだと確認画面出現 </li></ul><ul><li>コードの確認 </li></ul><ul><li>自動更新の許可 </li></ul>
    38. 38. <ul><li>Jetpack のもろもろ </li></ul>
    39. 39. 開発の時少し不便・・・ <ul><li>開発する時はインストール用の HTML ファイル必須・・・ </li></ul><ul><li>いちいち作の面倒 </li></ul><ul><li>id: teramako さん作の「ローカルの Jetpack Feature ファイルをインストールする Feature 」 </li></ul><ul><ul><li>http://d.hatena.ne.jp/teramako/20091201/p1 </li></ul></ul><ul><ul><li>便利!! </li></ul></ul>
    40. 40. 外部スクリプトのロード <ul><li>Jetpack の API として用意はない </li></ul><ul><ul><li>今後、提供の可能性あり </li></ul></ul><ul><li>スマートではないけど </li></ul><ul><ul><li>$.get して eval する </li></ul></ul><ul><ul><li>statusBar の HTML プロパティに記述 </li></ul></ul><ul><ul><ul><li>動作確認取れなかった </li></ul></ul></ul><ul><ul><li>2つの方法が現状で提案されてる </li></ul></ul>
    41. 41. ちょっと注意 <ul><li>Feature 中で alert などを使う </li></ul><ul><ul><li>jetpack.tabs.focused.contentWindow.alert(); </li></ul></ul><ul><ul><li>jetpack.tabs.focused.contentWindow.prompt(); </li></ul></ul><ul><ul><li>jetpack.__parent__ と jetpack.tabs.focused.contentWindow は同一だが後者の使用を推薦 </li></ul></ul><ul><li>Document を取得 </li></ul><ul><ul><li>jetpack.tabs.focused.contentDocument </li></ul></ul>
    42. 42. ちょっと注意 <ul><li>Components.classes は基本的に使用不可 </li></ul><ul><ul><li>Ver0.5 では使用不可 </li></ul></ul><ul><ul><li>でも・・・ Ver0.6 で復活 </li></ul></ul><ul><ul><li>セキュリティ確保のために Feature 中では提供済 API を使用する </li></ul></ul><ul><ul><li>どうしても使用したい場合は・・・ </li></ul></ul><ul><ul><ul><li>jetpack.tabs.focused.raw.ownerDocument.defaultView.Cc </li></ul></ul></ul><ul><ul><ul><li>jetpack.tabs.focused.raw.ownerDocument.defaultView.Ci </li></ul></ul></ul>
    43. 43. でも・・・ <ul><li>使用しないこと推薦 </li></ul><ul><ul><li>jetpack.tabs.focused. raw </li></ul></ul><ul><ul><ul><li>XUL のタブオブジェクトへアクセス出来てしまう・・・ </li></ul></ul></ul><ul><ul><ul><li>セキュリティ的によろしくない </li></ul></ul></ul><ul><ul><ul><li>将来的にアクセス出来なくなる可能性あり </li></ul></ul></ul><ul><ul><li>jetpack.tabs.focused.raw.ownerDocument.defaultView </li></ul></ul><ul><ul><ul><li>で Chrome ウインドウにアクセス可能・・・ </li></ul></ul></ul><ul><ul><ul><li>使わない事推薦 </li></ul></ul></ul>
    44. 44. <ul><li>本当にちょっとしたこと </li></ul>
    45. 45. Jetpackが不調になったら <ul><li>開発中に Jetpack が不調になることが稀に </li></ul><ul><ul><li>エディタに貼付けたコードは即保存され Firefox 再起動後に自動実行される← </li></ul></ul><ul><ul><li>変な Feature をつかまされた・・・ </li></ul></ul><ul><li>そんなときは </li></ul><ul><ul><li>Safemode で起動->対象の Feature を削除 </li></ul></ul><ul><ul><li>エディタのコードはファイルを削除 </li></ul></ul><ul><ul><ul><li>Firefox プロファイルディレクトリ中の「 jetpack-editor-code.txt 」の中身を削除! </li></ul></ul></ul>
    46. 46. 自動更新・・・ <ul><li>Jetpack gallery ってレビューとか無いのに自動インストール・自動更新設定・・・なんてこったい・・・ </li></ul><ul><li>自動更新切りたい </li></ul><ul><ul><li>Feature はすべて SQLite で管理されてる </li></ul></ul><ul><ul><li>Firefox プロファイルディレクトリ中の「 jetpack_ann.sqlite 」を編集 </li></ul></ul><ul><ul><ul><li>ubiquity/autoupdate を false に </li></ul></ul></ul>
    47. 47. <ul><li>Jetpack の今後 </li></ul>
    48. 48. <ul><li>API の機能追加 </li></ul><ul><ul><li>Clipboard のイメージサポート </li></ul></ul><ul><ul><li>Panel API の提供 </li></ul></ul><ul><ul><li>Menu API の機能拡張 </li></ul></ul><ul><ul><li>Feature インストール時に任意のページを表示可能 ( First-run pages ) </li></ul></ul><ul><li>セキュリティ強化 </li></ul><ul><ul><li>Feature に署名 </li></ul></ul><ul><ul><ul><li>署名済 : 自動アップデート </li></ul></ul></ul><ul><ul><ul><li>未証明 : アップデート時に許可を求める </li></ul></ul></ul><ul><ul><li>Manifest ファイルによるアクセス権の付与 </li></ul></ul><ul><ul><li>AMO みたいなレビューシステムで Feature の危険性などを確認 </li></ul></ul>
    49. 49. <ul><li>まとめ </li></ul>
    50. 50. ブラウザが物足りなかったら・・・ <ul><li>Firefoxの拡張を作って! </li></ul><ul><li>自分仕様の使い易いブラウザに! </li></ul><ul><li>でも難しいんでしょ? </li></ul><ul><li>Jetpackなら簡単に出来るよ! </li></ul>
    51. 51. <ul><li>もっともっとギャラリーに Feature を!! </li></ul>

    ×