Web技術勉強会 第28回

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社)
認証
ブックマーク連携
データインポート