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