Download to read offline
![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>](https://image.slidesharecdn.com/web28-090912000525-phpapp02/75/Web-28-20-2048.jpg)
![使い方
「マイコンフィグ」でAPIキー取得
マイコンフィグ」 APIキー取得
キー
→設定画面に登録
設定画面に
–tcliperのアイコン右クリックorアドオ
ンの[設定]で開く
–APIキーをコピペ
–キーボードイベントの設定もする](https://image.slidesharecdn.com/web28-090912000525-phpapp02/75/Web-28-37-2048.jpg)
Web技術勉強会 第28回
- 1. Firefoxアドオン入門 ～tcliper Firefoxアドオン版～ Web技術勉強会 第28回 Ryuichi TANAKA.
- 2.
- 3.
- 4. Jetpack Featureは微妙 そもそも問題点が そもそも問題点が多い 問題点 –セキュリティ的にあやしい(各所で 警告あり) –設定画面がすでにおかしい(俺だ け？メモリリークおこすんですが) –最近まったく話をきかない(流行っ てないっぽい)
- 5.
- 6. 原点に立ち返る Firefoxアドオンやるっきゃねえ！ Firefoxアドオンやるっきゃねえ！ アドオンやるっきゃねえ
- 7. アドオンのいいところ 制限なし 制限なし –グリモン、Jetpackもアドオン。理屈 ではこれらでできることは全部でき る。 –Firefoxさえあればインストール可 能。グリモン、Jetpackはあらかじめ アドオンを入れておかないといけ ない。
- 8.
- 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.
- 16. 開発の準備 ファイル名 重複しない一意の ファイル名を重複しない一意の しない一意 名前にする アドオンのIDになる) 名前にする(アドオンのIDになる) にする( IDになる 例：tcliper@summer-lights.dyndns.ws ファイルの中身に開発元へのポ ファイルの中身に開発元へのポ 中身 インタ(パス) インタ(パス)を書く 例：C:¥workspace¥tcliper_api¥addon¥tcliper¥
- 17.
- 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.
- 23.
- 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 <menuitemlabel=“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.
- 33. 簡単すぎ ZIPで めて、 xpiにリネーム ZIPで固めて、.xpiにリネーム –これだけ。楽ですね。 ちゃんとやりたい人へ ちゃんとやりたい人 –Ant使ったりして(手動でも可 能)content以下をjarにする。 manifestも書き換える必要あり。
- 34.
- 35. 使い方 tcliper本家でユーザ登録 tcliper本家でユーザ登録 本家でユーザ – http://summer-lights.dyndns.ws/tcliper
- 36.
- 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.