GLOBAL-ALIGN::left
ALIGN::center
拡張機能
開発の
基礎知識
[[EM:Part1]]

----
HEADER::拡張機能開発の基礎知識
CHAPTER::自己紹介と概要
発表者：
　下田洋志 / "Piro"

　自己紹介（略歴）
----
2001
　Mozilla用拡張機能の開発に手を出し始める
　"コンテキストメニュー拡張"
　　（"ContextMenu Extensions"）公開
2002
　"タブブラウザ拡張"
　　（"Tabbrowser Extensions"）公開
2006
　書籍 "Firefox(1.5)を究める256のテクニック" 上梓
　でもFirefox 2が出てobsoleteになってしまいました……
----
ALIGN::center
本日の
概要
----
[[EM:Part1]]
　Firefoxの構造と
　それを支える技術を知る

[[EM:Part2]]
　拡張機能と
　プラグインの違い

[[EM:Part3]]
　拡張機能開発の
　チュートリアル









----
CHAPTER::関連技術の解説
HEADER::
ALIGN::center
Firefoxの構造と
それを支える
技術を知る
----
Firefoxは
一般的なアプリケーション
よりも
[Webアプリ]
にとても近い
----
HEADER::Firefoxの構造とそれを支える技術を知る
[[image src="01.jpg" width="800" height="555"]]
----
いくつかの
キーワード
----
・XUL
・CSS
・JavaScript
・XPCOM







----
CHAPTER::XUL
FOOTER::XUL
ALIGN::center
XUL
----
[[EM:X]]ML-based
[[EM:U]]ser-interface
[[EM:L]]anguage
----
ALIGN::center
XMLベースの
構造記述言語
----
FirefoxのGUIの
大まかな形を作る
----
[[PRE:
<vbox>
  <hbox>
    <label value="選択してください"/>
    <menulist>
      <menupopup>
        <menuitem label="項目1" selected="true"/>
        <menuitem label="項目2"/>
        <menuitem label="項目3"/>
      </menupopup>
    </menulist>
  </hbox>
  <checkbox label="チェックしてください" checked="true"/>
  <hbox>
    <label value="入力してください"/>
    <textbox size="15"/>
  </hbox>
</vbox>
]]
----
・HTMLに似通っている

・HTMLのフォーム関連要素のような
　GUI部品（widget）

・DHTMLでは作るのが大変だった
　様々なGUI部品を標準で利用できる
　（ドロップダウンメニューや
　　スクロールバー、切り替え式のタブなど）
----
例
----
[[RAW:
<vbox pack="center">
  <hbox align="center">
    <button label="ボタン"/>
    <radiogroup orient="vertical">
      <radio label="ラジオボタン1"/>
      <radio label="ラジオボタン2"/>
      <radio label="ラジオボタン3"/>
    </radiogroup>
    <checkbox label="チェック"/>
  </hbox>
  <menulist label="ドロップダウンリスト項目1" flex="1">
    <menupopup>
      <menuitem label="ドロップダウンリスト項目1"/>
      <menuitem label="ドロップダウンリスト項目2"/>
      <menuitem label="ドロップダウンリスト項目3"/>
    </menupopup>
  </menulist>
</vbox>
]]
----
これは
HTMLにもある
----
[[RAW:
<hbox>
<scrollbar orient="vertical" maxpos="300"/>
<scrollbar orient="vertical" maxpos="30"/>
<vbox pack="center">
  <vbox align="center" flex="1">
    <tabbox flex="1">
      <tabs>
        <tab label="タブ1" selected="true"/>
        <tab label="タブ2"/>
        <tab label="タブ3"/>
      </tabs>
      <tabpanels flex="1">
        <tabpanel flex="1">
          <label value="内容1"/>
        </tabpanel>
        <tabpanel flex="1">
          <label value="内容2"/>
        </tabpanel>
        <tabpanel flex="1">
          <label value="内容3"/>
        </tabpanel>
      </tabpanels>
    </tabbox>
  </vbox>
  <splitter orient="vertical"/>
  <textbox value="テキストフィールド" flex="1" style="height:100px" multiline="true"/>
  <vbox flex="1">
    <hbox>
    <menulist editable="true"
       label="編集可能なドロップダウンリスト" flex="1">
      <menupopup>
        <menuitem label="ドロップダウンリスト項目1"/>
        <menuitem label="ドロップダウンリスト項目2"/>
        <menuitem label="ドロップダウンリスト項目3"/>
      </menupopup>
    </menulist>
    </hbox>
    <hbox>
      <colorpicker type="button"/>
    </hbox>
    <scrollbar maxpos="5"/>
    <scrollbar maxpos="40"/>
  </vbox>
</vbox>
<scrollbar orient="vertical" maxpos="50"/>
<vbox>
  <arrowscrollbox orient="vertical" style="max-height:150px;">
      <button label="ボタン1"/>
      <button label="ボタン2"/>
      <button label="ボタン3"/>
      <button label="ボタン4"/>
      <button label="ボタン5"/>
      <button label="ボタン6"/>
      <button label="ボタン7"/>
      <button label="ボタン8"/>
      <button label="ボタン9"/>
      <button label="ボタン10"/>
  </arrowscrollbox>
  <toolbar>
	<toolbarbutton label="ボタン"/>

	<toolbarbutton label="ボタン" type="menu">
		<menupopup>
			<menuitem label="項目1"/>
			<menuitem label="項目2"/>
			<menuitem label="項目3"/>
			<menu label="サブメニュー">
				<menupopup>
					<menuitem label="項目1"/>
					<menuitem label="項目2"/>
					<menuitem label="項目3"/>
					<menu label="サブメニュー">
						<menupopup>
							<menuitem label="項目1"/>
							<menuitem label="項目2"/>
							<menuitem label="項目3"/>
							<menu label="サブメニュー">
								<menupopup>
									<menuitem label="項目1"/>
									<menuitem label="項目2"/>
									<menuitem label="項目3"/>
								</menupopup>
							</menu>
						</menupopup>
					</menu>
				</menupopup>
			</menu>
		</menupopup>
	</toolbarbutton>

	<toolbarbutton label="ボタン" type="menu-button">
		<menupopup>
			<menuitem label="項目1"/>
			<menuitem label="項目2"/>
			<menuitem label="項目3"/>
		</menupopup>
	</toolbarbutton>
  </toolbar>
  <toolbar>
  <menubar>
	<menu label="メニュー">
		<menupopup>
			<menuitem label="項目1"/>
			<menuitem label="項目2"/>
			<menuitem label="項目3"/>
			<menu label="サブメニュー">
				<menupopup>
					<menuitem label="項目1"/>
					<menuitem label="項目2"/>
					<menuitem label="項目3"/>
					<menu label="サブメニュー">
						<menupopup>
							<menuitem label="項目1"/>
							<menuitem label="項目2"/>
							<menuitem label="項目3"/>
							<menu label="サブメニュー">
								<menupopup>
									<menuitem label="項目1"/>
									<menuitem label="項目2"/>
									<menuitem label="項目3"/>
								</menupopup>
							</menu>
						</menupopup>
					</menu>
				</menupopup>
			</menu>
		</menupopup>
	</menu>
	<menu label="メニュー">
		<menupopup>
			<menuitem type="checkbox" label="項目1"/>
			<menuseparator/>
			<menuitem type="radio" radiogroup="test" label="項目2-1"/>
			<menuitem type="radio" radiogroup="test" label="項目2-2"/>
		</menupopup>
	</menu>
  </menubar>
  </toolbar>
</vbox>
</hbox>
]]
----
これは
XULならでは
----
このプレゼン
ツール自体も
XUL製
----
「外見」というよりは
「構造」を定義する
（色や文字サイズなどは
　次に紹介する[[EM:CSS]]で定義）
----
利点
----
コードの状態で
構造を把握しやすい
----
Javaでメニューバーを定義する例
[[PRE:
fileMenu = new JMenu(resbundle.getString("fileMenu"));
fileMenu.add(new JMenuItem(newAction)):
fileMenu.add(new JMenuItem(openAction)):
fileMenu.add(new JMenuItem(saveAsAction)):
mainMenuBar.add(fileMenu);
editMenu = new JMenu(resbundle.getString("editMenu"));
editMenu.add(new JMenuItem(undoAction)):
editMenu.addSeparator();
editMenu.add(new JMenuItem(cutAction)):
editMenu.add(new JMenuItem(pasteAction)):
editMenu.add(new JMenuItem(clearAction)):
editMenu.addSeparator();
editMenu.add(new JMenuItem(selectAllAction)):
mainMenuBar.add(fileMenu);
]]
[読み解かないと構造を把握できない]
----
XULでは、見ただけで構造が把握できる
[[PRE:
<menubar>
  <menu label="&fileMenu.label;">
    <menupopup>
      <menuitem label="&fileMenu.new.label;"/>
      <menuitem label="&fileMenu.open.label;"/>
      <menuitem label="&fileMenu.save.label;"/>
    </menupopup>
  </menu>
  <menu label="&editMenu.label;">
    <menupopup>
      <menuitem label="&editMenu.undo.label;"/>
      <menuseparator/>
      <menuitem label="&editMenu.cut.label;"/>
      <menuitem label="&editMenu.paste.label;"/>
      <menuitem label="&editMenu.clear.label;"/>
      <menuseparator/>
      <menuitem label="&editMenu.selectAll.label;"/>
    </menupopup>
  </menu>
</menubar>
]]
----
GUIでレイアウトする
よりは直感的でないけど
----
プログラムでごちゃごちゃ
書くよりは直感的
----
ALIGN::center
小まとめ
|            |~構造
|普通のアプリ|~C++など
|Webアプリ   |~HTML
|Firefox     |~XUL



----
CHAPTER::CSS
FOOTER::CSS
ALIGN::center
CSS
----
[[EM:C]]ascading
[[EM:S]]tyle
[[EM:S]]heets
----
人間の理解しやすい形で
XML文書の表示を指定する
スタイル言語
----
[[PRE:
#content {
  font-size: 10pt;
  border-width: 1pt;
  border-color: red;
  border-style: solid;
}
]]
----
HIDDEN::true
[[EM:カスケーディング]]
　衝突する指定は優先順位が
　一番高いものが適用され、
　それ以外は無視される仕組み
----
HIDDEN::true
[[PRE:
box {
  height: 100px;
  border: 2px solid white;
}

box#content {
  height: 200px;
  border-width: 3px;
}
]]
　↓
[[PRE:
{
  height: 200px;
  border-style: solid;
  border-color: white;
  border-width: 3px;
}
]]
----
XULも
CSSで整形
----
[[PRE:
button[type="menu-button"] {
  -moz-box-align: center;
  -moz-box-pack: center;
  margin: 0;
  border: none;
}

.button-menu-dropmarker,
.button-menubutton-dropmarker {
  margin: 1px;
  background-image: url("chrome://global/skin/arrow/arrow-dn.gif");
  background-repeat: no-repeat;
  background-position: center center;
  min-width:11px;
  min-height:11px;
}
]]
----
XULで骨格を作り
CSSでお化粧する
----
Webページ
と同じ
----
利点
----
構造と外観が
コード的に綺麗に
分離されている
----
ので
----
それぞれを簡単に
差し替えられる
----
→Firefoxの
　[テーマ]機能
----
ALIGN::center
小まとめ
|            |構造   |~外観   
|普通のアプリ|C++など|~C++など
|Webアプリ   |HTML   |~CSS    
|Firefox     |XUL    |~CSS    
----
FOOTER::
次




----
CHAPTER::JavaScript
FOOTER::JavaScript
JavaScript
----
Firefoxは
JavaScriptで
制御されている
----
・[[ECMAScript（ECMA-262）|http://www.ecma-international.org/publications/standards/Ecma-262.htm]]
　第3版に準拠した
　プロトタイプベースの
　オブジェクト指向言語

・Javaとは無関係

----
FirefoxのJavaScript

・JavaScript [[EM:1.7]]
　（Firefox 2）
　ECMAScript Ver.3の拡張
・[[EM:E4X]]
　（ECMAScript for XML）
　に対応
----
・Cに近い文法（学習が容易）
・自由度が高い
・変数の型が無い（に近い）
・ガベージコレクションがある
・Javaほどガチガチでない
　　　　　　　　　　　etc.
----
使いどころを
わきまえれば
----
なかなか
便利



----
FOOTER::XULとJavaScript
ALIGN::center
XUL
と
JavaScript
----
[[EM:DOM]]に
よって連携
----
[[EM:D]]ocument
[[EM:O]]bject
[[EM:M]]odel
JavaScriptの
オブジェクトとして
XML文書を操作
----
プロパティを介して属性を操作
[[PRE:
var checkbox =
        document.getElementById('check');
check.checked = true;
]]
----
メソッドを介して状態を操作
[[PRE:
var textbox =
        document.getElementById('input');
textbox.focus();
]]
----
XUL要素の生成と追加
[[PRE:
var button =
        document.createElement('button');
button.setAttribute('label', 'ボタン');
box.appendChild(button);
]]
----
動的に変化する
メッセージなど
----
これで実現
----
ALIGN::center
小まとめ
|            |構造   |外観   |~動的な処理            
|普通のアプリ|C++など|C++など|~C++など               
|Webアプリ   |HTML   |CSS    |~JavaScript<br/>JScript
|Firefox     |XUL    |CSS    |~JavaScript            
----
FOOTER::
次



----
CHAPTER::XPCOM
FOOTER::XPCOM
XPCOM
----
[[EM:Cross(X)]]
[[EM:P]]latform
[[EM:C]]omponent
[[EM:O]]bject
[[EM:M]]odel
----
プラットフォームに依存しない
コンポーネントの開発のための
[[EM:フレームワーク]]
----
それに基づいて開発
された[[EM:コンポーネント]]
----
そのコンポーネントが
提供する[[EM:機能]]
----
の総称
----
・プラットフォームに依存しない
　コンポーネントの開発のための
　フレームワーク
・それに基づいて開発された
　コンポーネント
・そのコンポーネントが提供する
　機能
----
XPCOMの例：
[[EM:nsIFile::create(
  in unsigned long type,
  in unsigned long permissions
)]]

・ファイルを生成する働き
・二つの引数を取る
　　[ファイルタイプ（File or Directory）]
　　[パーミッション（UNIX形式）]
　→[第2引数は環境によっては無視される]
----
Firefoxに
おける役割
----
3つ
----
[[EM:1]]
言語の違いを気にせず
開発できる
----
[[EM:2]]
プラットフォームごとの
差異を吸収する

単一のAPIで複数の
プラットフォームに対応
→[Firefoxの開発を容易にする]
----
[[EM:3]]
ある言語では
実装が難しい処理を
他の言語で実装する
----
・JavaScriptから
　　C++製XPCOMを呼ぶ
・C++から
　　JavaScript製XPCOMを呼ぶ
・Javaから
　　C++製XPCOMを呼ぶ
　...
----
言語の特性を
活かして
----
処理を分担
----
処理をブラック
ボックス化
----
Firefox
の場合
----
・[速度が必要]な部分

・[プラットフォームと直に接する]
　部分

　でC++を多用
----
ALIGN::center
||開発|コンパイル|プラットフォーム<br/>への依存性|実行速度
|JavaScript|~楽|~不要|~低い|遅い
|C++|大変|必要|~高い|~速い
----
しかし
----
JavaScriptへ
今後ますます
移行を進める
という噂
----
閑話
休題



----
FOOTER::JavaScriptとXPCOM
ALIGN::center
JavaScript
と
XPCOM
----
[XPConnect]
で連携
----
[[EM:XPConnect]]
JavaScriptから
XPCOMを利用する
仕組み
----
例：
JavaScriptから
XPCOMを呼び出して
テンポラリフォルダを
生成する
----
[[PRE:
const nsILocalFile = Components.interfaces.nsILocalFile;
var file = Components.classes['@mozilla.org/file/local;1']
                     .createInstance(nsILocalFile);
file.initWithPath('C:\\');
file.append('temp');
if (!file.exists()) {
  file.create(nsILocalFile.DIRECTORY_TYPE, 0755);
}
]]
----
利点
----
クロスプラット
フォームである
（これに尽きる）
----
ALIGN::center
小まとめ
|                 |構造   |外観   |動的な処理            |~特殊な処理
|普通の<br/>アプリ|C++など|C++など|C++など               |~COM<br/>.NET Framework<br/>etc.
|Web<br/>アプリ   |HTML   |CSS    |JavaScript<br/>JScript|~ActiveX<br/>CGIスクリプト
|Firefox          |XUL    |CSS    |JavaScript            |~XPCOM




----
FOOTER::
ALIGN::center
まとめ
----
[[image src="02.jpg" width="780" height="555"]]



----
CHAPTER::比較
類似の
取り組みと
比べてみる


----
FOOTER::他の技術との比較
ALIGN::center

|          |実行時の<br/>プラットフォーム<br/>との親和性|プラットフォーム<br/>への依存性|基盤
|ネイティブ|高い                            |高い                     |-
|Java      |低い<br/>（SWTを使うと高くなる）|低い<br/>（要ランタイム）|オープン
|Flash     |低い<br/>（設計者のオレ節炸裂） |低い<br/>（要プラグイン）|クローズド
|WPF/E     |？                              |低い<br/>（要ランタイム）|クローズド
|~XUL      |~わりと高い                     |~低い<br/>（要Gecko）    |~オープン
----
WPF/E
----
[[EM:W]]indows
[[EM:P]]resentation
[[EM:F]]oundation
[[EM:E]]verywhere
----
Windows Vistaの
画面描画APIを
マルチプラット
フォームで
利用可能に
----
|       |構造|外観|動的な処理      |特殊な処理
|Firefox|XUL |CSS |JavaScript      |XPCOM
|XPF/E  |XAML|XAML|JScript<br/>etc.|ActiveX
----
Windowsだけでなく
MacでもLinuxでも
動く（ようになる）
らしい
----
最近テクノロジー
プレビューが出た
----
見てみましょう
----
SUGEEEEEEEEEEEEEEE
----
開発環境も充実
（ベクトル画像
　からXAMLを生成
　するなど）
----
ALIGN::center
強敵
（とも）
----
どころの問題じゃない
----
むしろ
----
勝負にならなくね？
----
XULｵﾜﾀ＼(^o^)／

Firefoxｵﾜﾀ＼(^o^)／
----
完
----
いや
終わっちゃ駄目だし
----
Microsoftは
確かに凄い
----
倒す相手が
いるときは
----
えげつない
勢いで猛攻
----
でも
----
ALIGN::center
一人勝ちしたら
それっきり
(´･ω･`)
----
思い出せ
----
ALIGN::center
IE6の
停滞
----
ALIGN::center
技術の進歩の
ためにも
----
ALIGN::center
カウンター
は必要
----
ALIGN::center
XULは滅びぬ、
[[img src="musuka2.png" width="376" height="305"]]
何度でも甦るさ！！
----
XULﾊｼﾞﾏｯﾀ＼(^o^)／

Firefoxﾊｼﾞﾏｯﾀ＼(^o^)／


----
CHAPTER::問題
FOOTER::問題
さて
----
XULベースでの
アプリケーション
開発の問題点
----
ALIGN::center
問題点
1
----
統合開
発環境
が無い
----
なに？
----
ALIGN::center
ジョジョ
[[img src="jojo.png" width="342" height="418"]]
----
それは
逆に考え
るんだ
----
「統合開発環境なんて
　無くてもいいさ」
　と考えるんだ
----
使い慣れたテキスト
エディタ一本で始める
XULプログラミング
----
じつに
マニアック
----
玄人
志向
----
もとい
----
いつでも
どこでも
誰でも
開発できる
----
すばらしい
----
と思う事にしよう


----
ALIGN::center
問題点
2
----
ドキュメント
が不足
----
ソースコードを
読まないと
詳しい情報が
手に入らない
（ことがある）
----
ソースコードが
ドキュメント……
----
ALIGN::center
[[img src="maeda.png" width="264" height="324"]]
だが、それがいい
----
ALIGN::center
英語
わから
なくても
----
C言語で
JavaScriptで
----
異文化
コミュニ
ケーション！
----
とはいえ
----
最近では
MDCのドキュメントも
割と充実してきてます
----
[[EM:D]]etroit
[[EM:M]]etal
[[EM:C]]ity
----
[[img src="dmc.jpg" width="240" height="240"]]
----
違
----
MDC
----
[[EM:M]]ozilla
[[EM:D]]eveloper
[[EM:C]]enter
----
[[http://developer.mozilla.org/ja/]]
----
アカウント
さえ作れば
誰でも編集
できるWiki
----
みなさん是非
参加しましょう






----
CHAPTER::締め
HEADER::
FOOTER::
つまり
言いたいのは
----
XULだと簡単に
アプリケーション
を作れるYO！
----
Agile
Application
Development
with [[EM:XUL]]!!
----
OK 兄者
----
それは
分かった
----
疑問
----
これらの
技術で
どうすれば
「拡張機能」
を作れる？
----
そこで
----
[[EM:Part2]]
につづく