• Like
Web技術勉強会 第28回
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Web技術勉強会 第28回

  • 834 views
Published

Web技術勉強会 第28回

Web技術勉強会 第28回

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
834
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Firefoxアドオン入門 ~tcliper Firefoxアドオン版~ Web技術勉強会 第28回 Ryuichi TANAKA.
  • 2. 前から思ってたこと Firefoxのアドオンが作りたい。 Firefoxのアドオンが作りたい。 のアドオンが
  • 3. Greasemonkeyの限界 Greasemonkeyは制限が Greasemonkeyは制限が多い –Firefoxアドオンみたいにステータ スバーやメニューに対して実装で きない。 –GUIが作れない。 –ソースが実は汚い(←関係ない)
  • 4. Jetpack Featureは微妙 そもそも問題点が そもそも問題点が多い 問題点 –セキュリティ的にあやしい(各所で 警告あり) –設定画面がすでにおかしい(俺だ け?メモリリークおこすんですが) –最近まったく話をきかない(流行っ てないっぽい)
  • 5. 原点に立ち返る となると、やはり… となると、やはり…
  • 6. 原点に立ち返る Firefoxアドオンやるっきゃねえ! Firefoxアドオンやるっきゃねえ! アドオンやるっきゃねえ
  • 7. アドオンのいいところ 制限なし 制限なし –グリモン、Jetpackもアドオン。理屈 ではこれらでできることは全部でき る。 –Firefoxさえあればインストール可 能。グリモン、Jetpackはあらかじめ アドオンを入れておかないといけ ない。
  • 8. アドオンのいいところ かっこいい –グリモン、Jetpackよりかっこいい。 ステータスバーとかに出せるだけ でもうたまんねー。
  • 9. Firefoxアドオンのわるいところ 開発してる人 開発してる人が少ない してる –検索すればわかるが、該当ブログ はかなり少ない。 –頼れるのは公式ドキュメントのみ。 しかし、微妙に使えないという…
  • 10. Firefoxアドオンのわるいところ JavaScriptだけじゃ作 JavaScriptだけじゃ作れない だけじゃ –JavaScript以外に「XUL」の知識が 必須。 –それ以外にもinstall.rdfなど設定 ファイルを作らないといけない。 –パッケージ化しないといけない。
  • 11. ここからは、俺の体験記 ここからは、
  • 12. Spket IDE 開発環境を用意: 開発環境を用意:Spket IDE –Eclipse拡張(スタンドアロン版もあ る) –コード補完は使えるがあとは微 妙?(Antによるパッケージ化もでき るらしいが、俺の環境ではできず)
  • 13. プロジェクトを作る 選択すると、自動的に最低限必要なファイルを生成 Spketを使わない場合、手動で「install.rdf」、「chrome.manifest」や 「content」「default」「skin」「locale」フォルダを作る必要がある。
  • 14. 開発の準備 extensionsフォルダ探 extensionsフォルダ探す フォルダ –XPとVistaでは微妙に違うので注 意。 –Vistaの場合 C:¥Users¥(ユーザ名)¥AppData¥Roaming¥Mozilla¥Firefox¥Profiles¥ (ランダム文字列).default¥extensions –XPの場合 C:¥Documents and Settings¥(ユーザ名)¥Application Data¥Mozilla¥Firefox¥Profiles¥(ランダム文字列).default¥extensions
  • 15. 開発の準備 workspaceへのポインタファイル workspaceへのポインタファイル を作る –extensionsから開発元のフォルダ へのシンボリックリンクを張るため
  • 16. 開発の準備 ファイル名 重複しない一意の ファイル名を重複しない一意の しない一意 名前にする アドオンのIDになる) 名前にする(アドオンのIDになる) にする( IDになる 例:tcliper@summer-lights.dyndns.ws ファイルの中身に開発元へのポ ファイルの中身に開発元へのポ 中身 インタ(パス) インタ(パス)を書く 例:C:¥workspace¥tcliper_api¥addon¥tcliper¥
  • 17. 開発の準備 ソースの反映方法 ソースの反映方法 –install.idfを編集した場合のみアド オン自体一度アンインストールす る必要がある。 –それ以外のファイルの編集の場合 は、Firefoxの再起動で反映される。
  • 18. 開発の準備 デバッグ方法 デバッグ方法 –エラーコンソールで確認する。警 告は無視してよい。 –DOM Inspector(Firefoxアドオン)を 使う。たとえば特定の部分(ツール バーの右端とか)へのDOMのパス を抽出したいときに使う。
  • 19. ステータスバーにアイコン まず、ステータスバーにアイコン まず、 したい。 を出したい。
  • 20. install.rdf <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:name>tcliper</em:name> <em:version>0.0.3</em:version> <em:description></em:description> 固有ID(世界でひとつ) <em:creator>stay</em:creator> <em:id>tcliper@summer-lights.dyndns.ws</em:id> <em:targetApplication> <!-- Firefox --> <Description> 有効になるFirefoxバージョン <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.0</em:minVersion> <em:maxVersion>3.5.*</em:maxVersion> </Description> </em:targetApplication> <em:iconURL></em:iconURL> [アドオン]で表示される説明 ワンアクションでWebページをクリップ!</em:description> ワンアクションで <em:description>ワンアクションで ページをクリップ! ページをクリップ <em:creator>mapserver2007</em:creator> <em:homepageURL>http://summer-lights.dyndns.ws</em:homepageURL> <em:optionsURL>chrome://tcliper/content/manage.xul</em:optionsURL> </Description> </RDF>
  • 21. chrome.manifest # development content tcliper content/ skin tcliper classic/1.0 skin/ locale tcliper ja-JP locale/ja-JP/ 固有ID(世界でひとつ) overlay chrome://browser/content/browser.xul chrome://tcliper/content/tcliper.xul style chrome://browser/content/browser.xul chrome://tcliper/skin/tcliper.css content – JavaScript、xulを保存 skin – 画像、CSSを保存 locale – 各言語ごとの設定ファイル overlay – GUIを構成するファイル(初期状態で呼ばれる) style – 初期状態で呼ばれるCSS
  • 22. アイコン画像を入手 作る –無理です。フォトショ持ってないし つかえない。 探す –あった。Iconfinder万歳! http://www.iconfinder.net/
  • 23. 画像とCSSを保存 /skinに /skinに保存 こんなの
  • 24. tcliper.xul ステータスバーに表示するGUI ステータスバーに表示するGUI 表示する <statusbar id=“statusbar”> <statuspanel id=“tcliperPanel”> <image id=“tcliperPanelImage”/> </statuspanel> ここをCSSで参照し画像を表示する </statusbar> こんなの
  • 25. ステータスバーにでた! これだけで表示できた! これだけで表示できた! 表示できた
  • 26. コンテキストメニューをだす アイコンを右クリックしてメニュー アイコンを右 をだしたい
  • 27. tcliper.xul コンテキストメニューを表示する コンテキストメニューを表示する 表示 GUI <statusbar id=“statusbar”> <statuspanel id=“tcliperPanel”> <image id=“tcliperPanelImage”/> <popup id=“tcliperStatusMenu”> のページに移動 のページに移動” <menuitem label=“tcliperのページに移動 oncommand=“Tcliper.home();”/> <menuseparator/> キーを設定 キーを設定” <menuitem label=“APIキーを設定 oncommand=“Tcliper.apikey();”/> </popup> </statuspanel> </statusbar>
  • 28. コンテキストメニューがでた! これだけでできた! これだけでできた!
  • 29. 設定画面をだす 各種設定をするための 各種設定をするための ポップアップをだしたい
  • 30. manage.xul tcliper.xul <menuitem label=“APIキーを設定” oncommand=“Tcliper.apikey();”/> キーを設定 キーを設定 tcliper.js Tcliper.apikey = function(){ window.openDialog(‘chrome://tcliper/content/manage.xul, null, ‘chrome,titlebar,toolbar,centerscreen,model’); }; manage.xul 設定メニュー 設定メニュー” <prefwindow xmlns=“…” title=“tcliper設定メニュー button=“accept,cancel”> <prefpane> <preferences> <preference id=“tcliperConfig” name=“extensions.apikey” type=string/> </preferences> ここにフォーム、 ここにフォーム ボタン、チェックボックスとか) (ここにフォーム、ボタン、チェックボックスとか </prefwindow>
  • 31. これだけ(だいぶ苦労したが・・・) これだけ(だいぶ苦労したが・・・) 苦労したが・・・ できた。 でできた。
  • 32. よし、パッケージ化だ! アドオンの配布形式「xpi」を作る アドオンの配布形式「xpi」 配布形式
  • 33. 簡単すぎ ZIPで めて、 xpiにリネーム ZIPで固めて、.xpiにリネーム –これだけ。楽ですね。 ちゃんとやりたい人へ ちゃんとやりたい人 –Ant使ったりして(手動でも可 能)content以下をjarにする。 manifestも書き換える必要あり。
  • 34. アドオン版tcliper Greasemonkey版 Greasemonkey版と比べて –設定画面で設定が可能(グリモン 版はソースを直接修正) –ツールバーに専用アイコンが常駐 –クリップアクションがアニメーション –Ctrl、Alt、Shiftの同時押し設定を 追加
  • 35. 使い方 tcliper本家でユーザ登録 tcliper本家でユーザ登録 本家でユーザ – http://summer-lights.dyndns.ws/tcliper
  • 36. 使い方 「Private」ページからアドオンイン Private」 ストール→Firefox再起動 ストール→Firefox再起動 ココ ココ
  • 37. 使い方 「マイコンフィグ」でAPIキー取得 マイコンフィグ」 APIキー取得 キー →設定画面に登録 設定画面に –tcliperのアイコン右クリックorアドオ ンの[設定]で開く –APIキーをコピペ –キーボードイベントの設定もする
  • 38. 使い方 コピーする
  • 39. 使い方 ペーストする ついでのこの辺 の設定もする
  • 40. 使う クリップが成功 クリップが成功 クリップ済 クリップ済み
  • 41. 使う APIキーが間違っている APIキーが間違っている キーが間違 URLが URLが不正
  • 42. アドオンを作ってみて 思ったより敷居は低い ったより敷居は 敷居 –JSがわかれば後はどうにでもなる jQuery、prototype.jsに依存しきっている人はきつい? ネイティブJavaScriptしかつかえない。 一番のドキュメントは有名アドオ 一番のドキュメントは有名アドオ のドキュメントは有名 ンのソース – greasemonkey、FireGesture、Nicofoxあたり のソースを参考にした。
  • 43. 余談 実は会社の活動の一環 会社の活動の –ほとんどは自宅で開発してるけど、 会社でもやってた。 –公開とかになったらドキドキなのが ライセンス。画像とソース(一部グリ モンのまんま使ってる)でアウツな 予感…。(自宅SVNな時点でアウ ツ)
  • 44. 今後の予定 アドオン版tcliper機能追加 アドオン版tcliper機能追加 –メール通知機能 –アドオン自動アップデート対応 本家tcliper開発再開 本家tcliper開発再開 tcliper –外部サービス連携(L社、H社、Y社) 認証 ブックマーク連携 データインポート