SET-TIMER::25min
GLOBAL-ALIGN::left
ALIGN::center
CHAPTER::拡張機能を作ってみよう
[[EM:Part2]]
----
HEADER::拡張機能を作ってみよう
拡張機能を
作ってみよう
----
の
前に
----
コードの量が多いので
ここで入力するコードの
入力済みの物を用意しました
----
ALIGN::right
[[https://piro.sakura.ne.jp/xul/doc/|https://piro.sakura.ne.jp/xul/doc/fxdevcon2007summer/samples.zip]]
[[fxdevcon2007summer/samples.zip|https://piro.sakura.ne.jp/xul/doc/fxdevcon2007summer/samples.zip]]
----
タイピングが
追いつかない人は
こちらをどうぞ


----
ALIGN::CENTER
Phase 1
テスト用に
インストール
してみる
----
教科書
33ページ
----
必要な
ファイルを
用意する
----
install.rdf
chrome.manifest
content/overlay.xul
----
install.rdf
----
[[PRE:
<?xml version="1.0" encoding="UTF-8"?>
<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:id>helloworld@piro.sakura.ne.jp</em:id>
    <em:type>2</em:type>
    <em:name>Hello, World!</em:name>
    <em:version>0.1</em:version>
    <em:description>My first extension.</em:description>
    <em:creator>Piro</em:creator>
    <em:homepageURL>https://piro.sakura.ne.jp/helloworld/</em:homepageURL>
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>2.0</em:minVersion>
        <em:maxVersion>2.0.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>
]]
01-install.rdf
----
別の書き方（意味は同じ）
[[PRE:
<?xml version="1.0" encoding="UTF-8"?>
<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:id="helloworld@piro.sakura.ne.jp"
    em:type="2"
    em:name="Hello, World!"
    em:version="0.1"
    em:description="My first extension."
    em:creator="Piro"
    em:homepageURL="https://piro.sakura.ne.jp/helloworld/">
    <em:targetApplication>
      <Description
        em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
        em:minVersion="2.0"
        em:maxVersion="2.0.0.*"/>
    </em:targetApplication>
  </Description>
</RDF>
]]
----
chrome.manifest
----
[[PRE:
content  helloworld  content/
]]
----
[[PRE:
content  helloworld  content/
]]

file:///c:/extensions/helloworld/content/
　　　↓
chrome://helloworld/content/
にバインドされる
----
[[EM:Chrome URL]]
・chrome://～ でアクセスされると
   最初からUniversalXPConnect
   特権がある状態になる
・環境非依存の絶対パスとして
   使える
----
[[PRE:
overlay  chrome://browser/content/browser.xul
            chrome://helloworld/content/overlay.xul
]]
----
[[PRE:
overlay  chrome://browser/content/browser.xul
            chrome://helloworld/content/overlay.xul
]]

browser.xulに
<?xul-overlay
   href="chrome://helloworld/content/overlay.xul"?>
と書くのと同じ効果
----
全体
[[PRE:
content  helloworld                            content/
overlay  chrome://browser/content/browser.xul  chrome://helloworld/content/overlay.xul
]]
02-chrome.manifest

----
overlay.xul
----
[[PRE:
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="helloworldOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <menupopup id="menu_ToolsPopup">
    <menuitem id="helloworldMenuitem"
              label="Hello, World!"
              insertbefore="sanitizeSeparator"/>
  </menupopup>
</overlay>
]]
03-overlay.xul
----
試しに
インストール
してみよう
----
テスト
インストール
----
1. ポインタファイルを作る
2. プロファイルフォルダへ移動
3. Firefox再起動
4. (ﾟдﾟ)ｳﾏｰ
----
[[EM:ポインタファイル]]
----
helloworld@piro.sakura.ne.jp
という名前の
[[EM:テキストファイル]]
----
内容
[[PRE:
C:\extensions\helloworld
]]
04-helloworld@piro.sakura.ne.jp
----
プロファイル内の
extensionsフォルダ
に移動
----
やって
みよう
----
Firefox
再起動






----
ALIGN::CENTER
Phase 2
時計機能を実装
----
教科書
35ページ
----
overlay.xul
----
menuitemに
oncommand
イベントハンドラで
挙動を記述する
----
oncommand="window.openDialog(
           'chrome://helloworld/content/clock.xul',
           'Clock','chrome,centerscreen,modal');"
----
全体
[[PRE:
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="helloworldOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <menupopup id="menu_ToolsPopup">
    <menuitem id="helloworldMenuitem"
              label="Hello, World!"
              insertbefore="sanitizeSeparator"
              oncommand="window.openDialog(
                         'chrome://helloworld/content/clock.xul',
                         'Clock','chrome,centerscreen,modal');"/>
  </menupopup>
</overlay>
]]
05-overlay.xul
----
clock.xul
----
[[PRE:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<dialog id="clockDialog"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        title="Clock"
        buttons="accept"
        onload="initClock();">
  <script type="application/x-javascript"
          src="clock.js" />
  <hbox align="center">
    <label value="Current Time:" />
    <textbox id="currentTime" />
  </hbox>
</dialog>
]]
06-clock.xul
----
clock.js
----
[[PRE:
function initClock() {
  showCurrentTime();
  window.setInterval(showCurrentTime, 1000);
}
function showCurrentTime() {
  var textbox = document.getElementById('currentTime');
  textbox.value = new Date().toLocaleTimeString();
  textbox.select();
}
]]
07-clock.js
----
Firefox
再起動
----
動かして
みよう





----
ALIGN::CENTER
CHAPTER::国際化
FOOTER::国際化
Phase 3
国際化
----
教科書
36ページ
----
現在：英語のみ
　　　↓
理想：日本語と英語の
　　　　自動切り替え
----
言語リソースを
分離してみよう
----
1. 国際化したい部分を特定
2. localeパッケージを作成
3. chrome.manifestを修正
4. localeを使うようにXULを修正
5. (ﾟдﾟ)ｳﾏｰ
----
1
----
国際化したい
部分を特定
----
今のclock.xul
[[PRE:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<dialog id="clockDialog"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        title="Clock"
        buttons="accept"
        onload="initClock();">
  <script type="application/x-javascript"
          src="clock.js" />
  <hbox align="center">
    <label value="Current Time:" />
    <textbox id="currentTime" />
  </hbox>
</dialog>
]]
----
日本語化したclock.xul
[[PRE:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<dialog id="clockDialog"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        title="時計"
        buttons="accept"
        onload="initClock();">
  <script type="application/x-javascript"
          src="clock.js" />
  <hbox align="center">
    <label value="現在時刻：" />
    <textbox id="currentTime" />
  </hbox>
</dialog>
]]
----
変わる部分が
国際化の対象
----
2
----
locale
パッケージ
を作成
----
locale/en-US/locale.dtd
locale/ja-JP/locale.dtd
を追加
----
locale/en-US/locale.dtd
[[PRE:
<!ENTITY helloworld.clock       "Clock">
<!ENTITY helloworld.currentTime "Current Time:">
]]
08-locale.dtd.en-US
抽象的な名前と実際の文字列のペアの定義
----
locale/ja-JP/locale.dtd（UTF-8)
[[PRE:
<!ENTITY helloworld.clock       "時計">
<!ENTITY helloworld.currentTime "現在時刻：">
]]
09-locale.dtd.ja-JP
抽象的な名前と実際の文字列のペアの定義
----
3
----
chrome.manifest
を修正
----
chrome.manifest に
[[PRE:
locale  helloworld  en-US  locale/en-US/
locale  helloworld  ja-JP  locale/ja-JP/
]]
を追記
----
[[PRE:
locale  helloworld  en-US  locale/en-US/
locale  helloworld  ja-JP  locale/ja-JP/
]]

locale/en-US/ または locale/ja-JP/
　　　↓
chrome://helloworld/locale/
にバインドされる
----
全体
[[PRE:
content helloworld  content/
overlay chrome://browser/content/browser.xul
            chrome://helloworld/content/overlay.xul
locale  helloworld  en-US  locale/en-US/
locale  helloworld  ja-JP  locale/ja-JP/
]]
10-chrome.manifest
----
4
----
localeを
使うように
clock.xul
を修正
----
ヘッダ部
[[PRE:
<!DOCTYPE dialog SYSTEM
          "chrome://helloworld/locale/clock.dtd">
]]
を追加
----
文字列部分を
dtdファイルで
定義した名前に
置き換える
----
[[PRE:
<dialog ...
        title="Clock"
        ...>
  ...
    <label value="Current Time:" />
...
]]
----
[[PRE:
<dialog ...
        title="&helloworld.clock;"
        ...>
  ...
    <label value="&helloworld.currentTime;" />
...
]]
----
全体
[[PRE:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<!DOCTYPE dialog SYSTEM "chrome://helloworld/locale/clock.dtd">
<dialog id="clockDialog"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        title="&helloworld.clock;"
        buttons="accept"
        onload="initClock();">
  <script type="application/x-javascript"
          src="clock.js" />
  <hbox align="center">
    <label value="&helloworld.currentTime;" />
    <textbox id="currentTime" />
  </hbox>
</dialog>
]]
11-clock.xul
----
Firefox
再起動
----
表示して
みよう


----
ALIGN::CENTER
CHAPTER::パッケージング
FOOTER::パッケージング
Phase 4
パッケージング
----
教科書
39ページ
----
1. jarファイルを作る
2. jarファイル用に
    chrome.manifestを
    更新する
3. XPIパッケージを作る
4. (ﾟдﾟ)ｳﾏｰ
----
1
----
jarファイル
を作る
----
jarファイル
----
ZIP形式の
アーカイブ
----
content/
locale/
　　↓
chrome/helloworld.jar
----
2
----
chrome.manifest
を更新する
----
chrome.manifest
----
[[PRE:
content helloworld  content/
overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
locale  helloworld  en-US  locale/en-US/
locale  helloworld  ja-JP  locale/ja-JP/
]]

通常の相対パスを……
----
[[PRE:
content helloworld  jar:chrome/helloworld.jar!/content/
overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
locale  helloworld  en-US  jar:chrome/helloworld.jar!/locale/en-US/
locale  helloworld  ja-JP  jar:chrome/helloworld.jar!/locale/ja-JP/
]]
12-chrome.manifest
Jar URLにする
----
Jar URL
----
例：　jar:chrome/helloworld.jar!/content/
|jar:|以下の内容はアーカイブ内のリソースを指す
|chrome/helloworld.jar|リソースを含んでいるアーカイブの相対パス
|!|区切り文字
|/content/|アーカイブ内のルート直下にあるcontentフォルダ
----
3
----
XPIパッケージ
を作る
----
XPIパッケージ
----
ZIP形式の
アーカイブ
----
install.rdf
chrome.manifest
chrome/
　　↓
helloworld.xpi
----
インストール
してみよう
----
1. ポインタファイルを待避
2. Firefox再起動
3. インストール