Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Try Jetpack

5,644 views

Published on

Mozilla 勉強会@大阪での Jetpack についての発表資料

Published in: Technology
  • Be the first to comment

Try Jetpack

  1. 1. JetpackでFirefox を拡張しよう  2010/02/20  mollifier  http://d.hatena.ne.jp/mollifier/
  2. 2. id:mollifier
  3. 3. 今日は Jetpack で Firefox 拡張が書けるよ うになって帰りましょう
  4. 4.  Jetpack とは  拡張を書く:基本編  拡張を書く:応用編  参考ページ
  5. 5.  Jetpack とは  拡張を書く:基本編  拡張を書く:応用編  参考ページ
  6. 6. Firefox の 拡張機能(Addon) の一種
  7. 7. 追加で「拡張機能」 をインストールして 実行できるようにな る
  8. 8. Jetpack 用の 拡張の例
  9. 9. Jet Lagged http://jetpackgallery.moz illalabs.com/jetpacks/95 インストールページ
  10. 10. Jet Lagged 選択部分を Google 翻訳で 翻訳する
  11. 11. Google It! http://jetpackgallery.mozil lalabs.com/jetpacks/231 インストールページ
  12. 12. Google It! 選択した単語を Google で 検索する
  13. 13. TabGroup Organizer http://jetpackgallery.mozill alabs.com/jetpacks/164 インストールページ
  14. 14. TabGroup Organizer 今開いているタブ を保存して、 後から開き直せる
  15. 15. このような 「Jetpack 用の 拡張機能」を Feature と呼ぶ
  16. 16. Featureの特徴
  17. 17. jQuery を使って サクサク書ける
  18. 18. Firefox の UI を 操作できる
  19. 19.  ステータスバーに ボタンを追加  右クリックメニューに 追加
  20. 20. それでは Jetpack Feature の書き方 を見ていきましょう
  21. 21.  Jetpack とは  拡張を書く:基本編  拡張を書く:応用編  参考ページ
  22. 22. Jetpack Feature の基本的な書き方を 押さえる
  23. 23. その前に開発環境を そろえる
  24. 24. 必要なもの  Firefox  Jetpack 本体  Firebug  好きなエディタ
  25. 25. すぐに準備できる。 うれしい。
  26. 26. 1. Hello World
  27. 27. jetpack.tabs.onReady(function() { console.log("Hello World!"); });
  28. 28. インストール用に HTML ページが必要
  29. 29. <html> <head> <!-- ここが大事 --> <link rel="jetpack" href="hello.js" name="Hello Jetpack" /> <title>Hello World</title> </head> <!-- 略 ... -->
  30. 30. <link rel="jetpack" href="hello.js" name="Hello Jetpack" /> href="Featureのパス" Web上に置いてある場合は http:// ... 形式で指定する name="Feature 名"
  31. 31. jetpack.tabs.onReady( // ここに関数を書くと // 新しいタブを開いた // ときに呼び出される );
  32. 32. jetpack.tabs.onReady( // Firebug の // コンソールに // 出力される console.log( "Hello World!"); );
  33. 33. 2. Hello Jetpack in Statusbar
  34. 34. ステータスバーに パネルを追加する例
  35. 35. jetpack.statusBar.append({ html: "<em>Hello</em>", width: 45, });
  36. 36. HTML を直接書ける jetpack.statusBar.append({ html: "<em>Hello</em>", width: 45, });
  37. 37. クリックしたときの 何か動くようにする
  38. 38. jetpack.statusBar.append({ html: "Click", width: 45, onReady: function(widget){ $(widget).click(function() { jetpack.notifications.show( "Hello Statusbar"); }); } });
  39. 39. onReady: function(widget){ $(widget).click(function() { // 何か処理 }); }  onReady : 新しいパネルが作られた 際のコールバック  widget : パネル要素  $ : jQuery の $
  40. 40. 3. Disable Hatena Keyword
  41. 41. Greasemonkey っぽく動作する例
  42. 42. jetpack.future.import("pageMods"); function callback(doc) { $("a.keyword", doc).each(function() { $(this).replaceWith($(this).html()); }); } var options = {}; options.matches = [ "http://d.hatena.ne.jp/*" ]; jetpack.pageMods.add(callback, options);
  43. 43. 長いので分割
  44. 44. ポイント 1
  45. 45. jetpack.future.import( "pageMods"); この1行を書いておくと pageMods という機能が有 効になる
  46. 46. ポイント 2
  47. 47. function callback(doc) { // doc が読み込んだページの // document オブジェクト $("a.keyword", doc).each( function() { // 何か処理 } ); }
  48. 48. よくある書き方 function callback(doc) { // 引数が一つだけ $("a.keyword").each( function() { // 何か処理 } ); }
  49. 49. document でドキュメン トオブジェクトが参照で きない。 なので、$(cssセレクタ) という書き方ではどこか ら要素を探すか決まらな い。
  50. 50. function callback(doc) { // 第二引数で // どこから要素を探すか // 明示的に指定する $("a.keyword", doc).each( function() { // 何か処理 } ); }
  51. 51. 4. Info
  52. 52. Ajaxの例
  53. 53. jetpack.statusBar.append({ html: "<button>info</button>", width: 60, onReady: function(widget) { $(widget).click(function() { var word = jetpack.tabs.focused. contentWindow.getSelection(); $.get("http://www.google.co.jp/search", {q: word}, function(data) { var info = $(data, widget). find("#resultStats").text(); jetpack.notifications.show(info); }); }); } });
  54. 54. $.get( "http://www.google.co.jp/search", {q: word}, function(data) { // 受信した後の処理 } ); 普通に jQuery の $.get が使える
  55. 55. はまりやすい ポイント
  56. 56. onReady: function(widget) { // 略 ... $.get( "http://www.google.co.jp/search", {q: word}, function(data) { var info = $(data, widget). find("#resultStats").text(); コンテキストを指定する 必要がある。
  57. 57. 普通の jQuery コードでは var info = $(data); これで内部的に document.createElement が呼び出される。
  58. 58. Jetpack Feature では document で Document オブジェクトが 参照できない
  59. 59. onReady: function(widget) { // 略 ... $.get( function(data) { var info = $(data, widget). find("#resultStats").text(); widget が追加したパネルの Document オブジェクトになっ ているので、うまくいく。
  60. 60.  Jetpack とは  拡張を書く:基本編  拡張を書く:応用編  参考ページ
  61. 61. 基本編の内容の 組み合わせで けっこう色々なことが できる
  62. 62. もう一工夫するための Jetpack API の紹介
  63. 63. 1. 右クリック メニュー
  64. 64. まずは簡単な例
  65. 65. 選択したら コンソールログに 出力する
  66. 66. jetpack.future.import("menu"); jetpack.menu.context.page.add({ label: "simple menu", command: function() { console.log("simple menu"); } });
  67. 67. メニューを使うために 必要な1行 jetpack.future.import("menu");
  68. 68. 右クリックメニューに 追加する jetpack.menu.context.page.add({ // 追加するメニューの内容 });
  69. 69. jetpack.menu.context.page.add({ // メニューに表示する文言 label: "simple menu", // メニューを選択したときの // コールバック関数 command: function() { console.log("simple menu"); } });
  70. 70. これをふまえて
  71. 71. 右クリックで選ん だ要素を消す Feature を作る
  72. 72. jetpack.future.import("menu"); jetpack.menu.context.page.add( function(c) { return { label: "hide <" + c.node.nodeName + ">", command: function() { $(c.node).fadeOut("fast"); } }; });
  73. 73. jetpack.menu.context.page.add( function(c) { // この関数内で新しい // メニューの内容を作って返す。 // c が右クリックした対象。 } );
  74. 74. function(c) { return { // c.node で右クリックした対象の // DOM node が参照できる label: "hide <" + c.node.nodeName + ">", command: function() { $(c.node).fadeOut("fast"); } }; }
  75. 75. ソースはここにあ る http://jetpackgallery.mozilla labs.com/jetpacks/337 リンク
  76. 76. 2. 設定画面
  77. 77. Feature の動作を ユーザがカスタマ イズできるように したい
  78. 78. var manifest = { settings: [ { name: "message", type: "text", label: "Name", default: "" } ] }; jetpack.future.import( "storage.settings");
  79. 79. // 設定項目を定義する var manifest = { settings: [ // ここに設定項目を書く { name: "message", type: "text", label: "Name", default: "" } ] };
  80. 80. var manifest = { settings: [ // ... ] }; // manifest を定義した後に // import する jetpack.future.import( "storage.settings");
  81. 81. // これで参照できる var name = jetpack.storage. settings.message; // settings: [ // { name: "message", // この message に対応
  82. 82. これをふまえて
  83. 83. Twitter の Web 画面で Enter を 押しただけでつぶ やく Feature を 作る
  84. 84. jetpack.future.import("pageMods"); var manifest = { settings: [ { name: "needCtrlKey", type: "boolean", label: "Ctrl key", default: false }, { name: "needAltKey", type: "boolean", label: "Alt key", default: false } ] }; jetpack.future.import("storage.settings"); function isTweetKey(e) { if (jetpack.storage.settings.needCtrlKey && ! e.ctrlKey) { return false; } if (jetpack.storage.settings.needAltKey && ! e.altKey) { return false; } // 13 : Enter key code return e.keyCode === 13; } // ... 続く
  85. 85. ソースはここにあ る http://jetpackgallery.mozilla labs.com/jetpacks/341 リンク
  86. 86. 2つ設定項目をつくる var manifest = { settings: [ { name: "needCtrlKey", type: "boolean", label: "Ctrl key", default: false }, { name: "needAltKey", type: "boolean", label: "Alt key", default: false } ] }; jetpack.future.import("storage.settings");
  87. 87. Twitter ショートカット キーだったらつぶやく function callback(doc) { var textBox = $("#status", doc); textBox.keydown(function(e) { if (isTweetKey(e) && textBox.value !== "") { $("#update-submit", doc).click(); } }); }
  88. 88. 押したキーの種類を 判別する function isTweetKey(e) { if (jetpack.storage.settings.needCtrlKey && ! e.ctrlKey) { return false; } if (jetpack.storage.settings.needAltKey && ! e.altKey) { return false; } // 13 : Enter key code return e.keyCode === 13; }
  89. 89.  Jetpack とは  拡張を書く:基本編  拡張を書く:応用編  参考ページ
  90. 90. 英語ページ
  91. 91. MDC APIリファレンス かなり不十分 ... https://developer.mozilla.or g/en/Jetpack#API リンク
  92. 92. JEPs 新しい機能についてのド キュメント https://wiki.mozilla.org/Lab s/Jetpack/JEPs リンク
  93. 93. Jetpack Gallery Jetpack Feature がいっ ぱいある http://jetpackgallery.mozill alabs.com/ リンク
  94. 94. Jetpack ソースコード hg clone http://hg.mozilla.org/labs/ jetpack/ jetpack-src でソースコードを取得 http://hg.mozilla.org/labs/j etpack/ リンク
  95. 95. 日本語ページ
  96. 96. MDC API リファレンス 日本語版 https://developer.mozilla.or g/ja/Jetpack#API リンク
  97. 97. modest Jetpack ページ 参考になる https://dev.mozilla.jp/jetpa ck/ リンク
  98. 98. APIリファレンス 日本語訳 modest 版 https://dev.mozilla.jp/jetpa ck/api/ リンク
  99. 99. 参考になるブログ Jetpack カテゴリを チェック http://d.hatena.ne.jp/con_ma me/ リンク
  100. 100. ローカルの Jetpack Feature ファイルを インストールする Feature http://d.hatena.ne.jp/terama ko/20091201 リンク
  101. 101. 僕のブログ Jetpack カテゴリーを チェック http://d.hatena.ne.jp/mollif ier/ リンク
  102. 102. みなさんも Jetpack に 挑戦してみて 下さい
  103. 103. ありがとう ございました

×