Jetpack Workshop

1,867 views

Published on

Kanasan.JS Jetpack ワークショップでの発表資料

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

No Downloads
Views
Total views
1,867
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jetpack Workshop

  1. 1. Jetpack ワークショップ  2009/12/06  mollifier  http://d.hatena.ne.jp/mollifier/
  2. 2. Jetpack を 始めよう
  3. 3.  Jetpack とは  Jetpack Feature の例  Jetpack Feature の 作り方  参考ページ
  4. 4.  Jetpack とは  Jetpack Feature の例  Jetpack Feature の 作り方  参考ページ
  5. 5. Firefox の 拡張機能(Addon) の一種
  6. 6. お手軽に「拡張機 能みたいなもの」 が実行できるよう になる
  7. 7. この「拡張機能み たいなもの」を Feature と呼ぶ
  8. 8. 特徴
  9. 9. jQuery を使って サクサク書ける
  10. 10. FirefoxのUIを 操作できる
  11. 11.  ステータスバーに ボタンを追加  右クリックメニューに 追加
  12. 12.  Jetpack とは  Jetpack Feature の例  Jetpack Feature の 作り方  参考ページ
  13. 13. Jetpack Gallery で色々な Feature が公開されています
  14. 14. Jet Lagged インストールページ
  15. 15. 選択部分を Google 翻訳で翻 訳する
  16. 16. Thumbtabs インストールページ
  17. 17. 今開いているタブ の一覧を スライドバーにサ ムネイル表示する
  18. 18. Magnifying Glass インストールページ
  19. 19. 拡大鏡
  20. 20. Jetstatus インストールページ
  21. 21. みんな大好き Twitter クライアント
  22. 22.  Jetpack とは  Jetpack Feature の例  Jetpack Feature の 作り方  参考ページ
  23. 23. サンプルコードを 4つ紹介
  24. 24. 1. Hello World!
  25. 25. jetpack.tabs.onReady(function() { jetpack.notifications.show( "Hello Jetpack!"); });
  26. 26. jetpack.tabs.onReady( コールバック関数 ); この形で、ページを開い たときにコールバック関 数が呼ばれる
  27. 27. インストール用に HTML ページが必要
  28. 28. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <!-- ここが大事 --> <link rel="jetpack" href="hello.js" name="Hello Jetpack" /> <title>Hello Jetpack install page</title> </head> <body> <h1>Hello Jetpack install page</h1> </body> </html>
  29. 29. 2. Hello Jetpack in Statusbar
  30. 30. ステータスバーに パネルを追加する例
  31. 31. jetpack.statusBar.append({ html: "Hello", width: 45, onReady: function(widget){ $(widget).click(function() { jetpack.notifications.show( "Hello Jetpack!"); }); } });
  32. 32. onReady: function(widget){ $(widget).click(function() { // 何か処理 }); }  onReady : 新しいパネルが作られた 際のコールバック  widget : パネル要素  $ : jQuery の $
  33. 33. 3. Disable Hatena Keyword
  34. 34. Greasemonkey っぽく動作する例
  35. 35. jetpack.tabs.onReady(function(doc) { if (doc.defaultView.frameElement) { return; } if (doc.location.href.search( /^http://d.hatena.ne.jp//) !== -1) { $(doc).find("a.keyword"). each(function() { $(this).replaceWith($(this).html()); }); } });
  36. 36. ポイント 1
  37. 37. jetpack.tabs.onReady(function(doc) { if (doc.defaultView.frameElement) { // frame または iframe の場合 return; } }); frame, iframe を ロードした時も コールバックが呼び出される
  38. 38. ポイント 2
  39. 39. jetpack.tabs.onReady(function(doc) { // doc が読み込んだページの // document オブジェクト $(doc).find("a.keyword"). // 略 ... }); document でドキュメントオブ ジェクトが参照できない。 なので、$(cssセレクタ) とい う書き方は不可。
  40. 40. 4. Info
  41. 41. Ajaxの例
  42. 42. 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.tabs.focused.contentWindow. alert(info); }); }); } });
  43. 43. ポイント 1
  44. 44. onReady: function(widget) { // 略 ... $.get( "http://www.google.co.jp/search", {q: word}, function(data) { var info = $(data, widget). find("#resultStats").text(); コンテキストを指定する 必要がある。 $(data) ではうまくいかない。
  45. 45. ポイント 2
  46. 46. Firefox は タブブラウザ
  47. 47. タブごとに Window オブジェ クトがある
  48. 48. 今表示しているタブ の Window オブジェ クト jetpack.tabs.focused. contentWindow
  49. 49. alert する場合 jetpack.tabs.focused. contentWindow.alert
  50. 50. 今表示しているタブ の Document オブ ジェクト jetpack.tabs.focused. contentDocument
  51. 51.  Jetpack とは  Jetpack Feature の例  Jetpack Feature の 作り方  参考ページ
  52. 52. 英語ページ
  53. 53. Jetpack Gallery Jetpack Feature がいっ ぱいある http://jetpackgallery.mozill alabs.com/ リンク
  54. 54. APIリファレンス かなり不十分 https://developer.mozilla.or g/en/Jetpack#API リンク
  55. 55. JEPs 新しい機能についてのド キュメント https://wiki.mozilla.org/Lab s/Jetpack/JEPs リンク
  56. 56. チュートリアル https://jetpack.mozillalabs. com/tutorial.html リンク
  57. 57. Jetpack ソースコード 一番信用できる http://hg.mozilla.org/labs/j etpack/ リンク
  58. 58. 日本語ページ
  59. 59. modest Jetpack ページ 参考になる https://dev.mozilla.jp/jetpa ck/ リンク
  60. 60. APIリファレンス 日本語訳 modest 版 https://dev.mozilla.jp/jetpa ck/api/ リンク
  61. 61. APIリファレンス 日本語訳 微妙に古い http://screw- axis.com/jetpack/jetpack- api-referencejetpack-api- reference/ リンク
  62. 62. チュートリアル 日本語訳 微妙に古い http://screw- axis.com/jetpack/tutorial/ リンク
  63. 63. 参考になるブログ 実践的な記事が多い http://d.hatena.ne.jp/con_ma me/ リンク
  64. 64. 30分で作るJetpack Feature (1) 概要 CommentsAdd Star http://d.hatena.ne.jp/lesamo ureuses/20090715/1247637734 リンク
  65. 65. ローカルのJetpack Featureファイルを インストールするFeature http://d.hatena.ne.jp/terama ko/20091201 リンク
  66. 66. 僕のブログ ちょっと入門記事書いた http://d.hatena.ne.jp/mollif ier/ リンク
  67. 67. この資料で出てきたサンプ ルコード http://gist.github.com/molli fier リンク
  68. 68. これを参考にして 作ってみよう
  69. 69. ありがとう ございました

×