Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Try Jetpack

5 695 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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. ありがとう ございました

×