今回は理解をもう少しだけ深めるために、別のアドオンを作ってみよう。
今回作るのは、「入力文字列内にURLがあれば、それに自動的にリンク(aタグ)を貼った文字列を出力するアドオン」である。
このアドオンは、オートリンク機能を搭載していないブログシステムを使っている人には少しだけ役に立つかも知れない。
アドオンIDは適当に autolink@yourdomain.com とした。
今回開発に使った環境は、 Firefox 11.0 と Windows7 である。
というわけで、まずはファイル構成から。
autolink@yourdomain.com/
index.rdf
chrome.manifest
chrome/
content/
autolink.xul
firefoxOverlay.xul
locale/
en-US/
autolink.dtd
ja-JP/
autolink.dtd
skin/
各ファイルの中身は以下の通りだ。
index.rdf
<?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>autolink@yourdomain.com</em:id>
<em:name>autolink Extension</em:name>
<em:version>1.0</em:version>
<em:creator>Your Name</em:creator>
<em:description>Autolink Extension Add-on.</em:description>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>3.0</em:minVersion>
<em:maxVersion>11.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
chrome.manifest
content autolink chrome/content/
locale autolink en-US chrome/locale/en-US/
locale autolink ja-JP chrome/locale/ja-JP/
skin autolink classic/1.0 chrome/skin/
overlay chrome://browser/content/browser.xul chrome://autolink/content/firefoxOverlay.xul
chrome/content/firefoxOverlay.xul
<?xml version="1.0"?>
<!DOCTYPE overlay SYSTEM "chrome://autolink/locale/autolink.dtd">
<overlay id="autolinkOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menupopup id="viewSidebarMenu">
<menuitem key="key_openAutolink" observes="viewAutolink" />
</menupopup>
<keyset id="mainKeyset">
<key id="key_openAutolink" command="viewAutolink"
key="&openAutolink.commandkey;"
modifiers="&openAutolink.modifierskey;" />
</keyset>
<broadcasterset id="mainBroadcasterSet">
<broadcaster id="viewAutolink"
label="&autolink.title;"
autoCheck="false"
type="checkbox"
group="sidebar"
sidebarurl="chrome://autolink/content/autolink.xul"
sidebartitle="&autolink.title;"
oncommand="toggleSidebar('viewAutolink');" />
</broadcasterset>
</overlay>
chrome/content/autolink.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?>
<!-- ローカリゼーション -->
<!DOCTYPE page SYSTEM "chrome://autolink/locale/autolink.dtd">
<page id="sbSidebarExample"
title="&autolink.title;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox flex="1">
<!-- 入力用テキストボックス -->
<textbox id="t1" multiline="true" rows="20"/>
<!-- 出力用テキストボックス(Read Only) -->
<textbox id="t2" multiline="true" readonly="true" flex="1"/>
<script type="application/x-javascript"><![CDATA[
/*
入力用テキストボックスからカーソルが外れた時(onblur)にオートリンクを貼った文字列を表示するイベント処理を追加
*/
var t1 = document.getElementById("t1");
t1.addEventListener(
"blur",
function(){
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
t2.value = t1.value.replace(
/(http:\/\/[\x21-\x7e]+)/gi,
"<a href=\"$1\" target=\"_blank\">$1</a>"
);
}
);
/*
出力用テキストボックスにフォーカスがセットされた時(onfocus)に文字列が全選択されるイベント処理を追加
*/
var t2 = document.getElementById("t2");
t2.addEventListener(
"focus",
function(){
this.select();
}
);
]]></script>
</vbox>
</page>
入力用テキストエリアに textarea ではなく、textbox を使っているところがポイントだ。XULでは両方とも textbox で表現できるのである。詳しくはこちらを参照のこと。
chrome/locale/en-US/autolink.dtd
<!ENTITY autolink.title "Autolinker">
<!ENTITY openAutolink.commandkey "E">
<!ENTITY openAutolink.modifierskey "shift accel">
chrome/locale/ja-JP/autolink.dtd
<!ENTITY autolink.title "オートリンカー">
<!ENTITY openAutolink.commandkey "E">
<!ENTITY openAutolink.modifierskey "shift accel">
以上である。
今回はスタイルシート(skin/)は省略した。
動作テストや配布パッケージの作り方についても、前回のエントリを見ていただけると分かると思うので今回は省略する。
参考になるサイト
XUL - MDN
こちらはXULで使えるコントロールの一覧などの情報である。今回使ったtextboxなどの他にも多くの便利なコントロールがあるのでこちらを見て勉強すると良いだろう。
Firefox 3 Hacks ―Mozillaテクノロジ徹底活用テクニック
posted with amazlet at 12.04.07
江村 秀之 池田 譲治 下田 洋志 松澤 太郎 dynamis
オライリージャパン
売り上げランキング: 395037
オライリージャパン
売り上げランキング: 395037
PR:お買い物はAmazonで