Web技術勉強会 第28回
- 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
- 16. 開発の準備
ファイル名 重複しない一意の
ファイル名を重複しない一意の
しない一意
名前にする アドオンのIDになる)
名前にする(アドオンのIDになる)
にする( IDになる
例:tcliper@summer-lights.dyndns.ws
ファイルの中身に開発元へのポ
ファイルの中身に開発元へのポ
中身
インタ(パス)
インタ(パス)を書く
例:C:¥workspace¥tcliper_api¥addon¥tcliper¥
- 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
- 24. tcliper.xul
ステータスバーに表示するGUI
ステータスバーに表示するGUI
表示する
<statusbar id=“statusbar”>
<statuspanel id=“tcliperPanel”>
<image id=“tcliperPanelImage”/>
</statuspanel> ここをCSSで参照し画像を表示する
</statusbar>
こんなの
- 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>
- 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>
- 39. 使い方
ペーストする
ついでのこの辺
の設定もする
- 42. アドオンを作ってみて
思ったより敷居は低い
ったより敷居は
敷居
–JSがわかれば後はどうにでもなる
jQuery、prototype.jsに依存しきっている人はきつい?
ネイティブJavaScriptしかつかえない。
一番のドキュメントは有名アドオ
一番のドキュメントは有名アドオ
のドキュメントは有名
ンのソース
– greasemonkey、FireGesture、Nicofoxあたり
のソースを参考にした。