Theory of the DOM
Douglas Crockford on the “Theory of the DOM”
Douglas Crockford, discoverer of JSON and JavaScript evangelist/veteran has given a training on the theory of the DOM lately and the videos are available on the web.
DOMについて、約30分程の動画3本。
資料[PPT]
The Theory of the Dom
Firefox拡張作成方法
拡張作成用Firefoxを用意する
Firefoxがインストールされているディレクトリ($FIREFOXDIR)にあるchromeディレクトリに移動してjarファイルを展開する。
$ cd $FIREFOXDIR/chrome $ for file in *.jar; do unzip $file; done
Firefoxがjarファイルではなく展開したファイルを使用するようにmanifestファイルを修整する。
$ perl -pi.orig -e "s/jar:[^\.]*\.jar\!/resource\:\/chrome/g" *.manifest
Firefoxのtoolsメニューに "Hello World!" アラートダイアログを表示するメニューを追加する
展開されたディレクトリ($FIREFOXDIR/chrome/content/browser)に移動する。
helloWorldOverlay.xul, helloWorldOverlay.js の2つのファイルを作る。
helloWorldOverlay.xul
<?xml version="1.0"?>
<overlay id="helloWorldOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://browser/content/helloWorldOverlay.js" />
<menupopup id="menu_ToolsPopup">
<menuitem id="menu_helloWorld" label="Hello World!" accesskey="H"
oncommand="helloWorld.hello();" />
</menupopup>
</overlay>helloWorldOverlay.js
var helloWorld = {
hello : function() {
alert("Hello World!");
}
}browser.xulに helloWorldOverlay.xul を追加する。
browser.xul
<?xml version="1.0"?> <?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?> <?xml-stylesheet href="chrome://global/skin/toolbar.css" type="text/css"?> <?xml-stylesheet href="chrome://global/skin/findBar.css" type="text/css"?> <?xul-overlay href="chrome://browser/content/baseMenuOverlay.xul"?> <?xul-overlay href="chrome://browser/content/helloWorldOverlay.xul"?> <!DOCTYPE window [ <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd" > ...
きちんと動作することを確認して、パッケージング作業に移る。
作成したファイルをパッケージングする
作業用ディレクトリ($WORKDIR)に移動して chrome/content ディレクトリを作成する。
$ cd $WORKDIR $ mkdir -p chrome/content
作成した helloWorldOverlay.xul, helloWorldOverlay.js ファイルを $WORKDIR/chrome/content ディレクトリにコピーする。
cp $FIREFOXDIR/chrome/content/browser/helloWorldOverlay.* $WORKDIR/chrome/content/
helloWorldOverlay.xul のuriを修正する。
<?xml version="1.0"?>
<overlay id="helloWorldOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://helloworld/content/helloWorldOverlay.js" />
<menupopup id="menu_ToolsPopup">
<menuitem id="menu_helloWorld" label="Hello World!" accesskey="H"
oncommand="helloWorld.hello();" />
</menupopup>
</overlay>$WORKDIR/chrome ディレクトリに移動してパッケージングする。
$ zip -r0 helloworld.jar content/ adding: content/ (stored 0%) adding: content/helloWorldOverlay.js (stored 0%) adding: content/helloWorldOverlay.xul (stored 0%) $ ls content/ helloworld.jar
$WORKDIR ディレクトリに戻って chrome.manifest, install.rdf ファイルを作成する。
chrome.manifest の句切りはタブを使う。
chrome.manifest
overlay chrome://browser/content/browser.xul chrome://helloworld/content/helloWorldOverlay.xul content helloworld jar:chrome/helloworld.jar!/content/
install.rdf 作成スクリプト
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:id>{88fb121f-0313-4fc9-8541-9f8c3646418e}</em:id>
<em:name>helloworld</em:name>
<em:version>1.0</em:version>
<em:type>2</em:type>
<em:description>show hello world message</em:description>
<em:creator>iNo</em:creator>
<em:homepageURL>http://www.eonet.ne.jp/~wdf/</em:homepageURL>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>
<em:file>
<Description about="urn:mozilla:extension:file:helloworld.jar">
<em:package>content/</em:package>
<em:locale></em:locale>
<em:skin></em:skin>
</Description>
</em:file>
</Description>
</RDF>出来上がったファイルをxpiファイルにパッケージングする。
$ zip -r9 helloworld.xpi chrome.manifest install.rdf chrome/helloworld.jar adding: chrome.manifest (deflated 44%) adding: install.rdf (deflated 59%) adding: chrome/helloworld.jar (deflated 52%)
xpiファイルをFirefoxのウィンドウにドラッグ&ドロップしてインストールする。
インストール前に $FIREFOXDIR/chrome/content/browser/browser.xul に追加したオーバーレイの記述を削除しておくこと。
Apache2でsuEXECを無効にする
suexecファイルをリネームしてApache2を再起動する。
$ cd /usr/lib/apache2 $ sudo mv suexec suexec.STOP $ sudo /etc/init.d/apache2 restart
Firefoxのスマートキーワードでブックマークレットを実行する(part2)。
ブックマークレットに引数を与えて実行するサンプル(HTMLタグを明示する)
ブックマークレットにキーワードを指定します。
urlbarにキーワードとタグ名と色名を入力してEnterキーを押します。
該当タグがボーダーでハイライトされ、id、class、name属性が表示されます。
ブックマークメニューから実行すると、タグ名と色名を入力するプロンプトが表示されます。
コード
javascript:(function(){var temp_str = %22%s%22;if (escape(temp_str).replace(/%u/g, '\\u').replace(/%/g, '\\x').match(/\\x25s/)) {temp_str = prompt('\u30BF\u30B0\u3068\u8272\u540D\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002\uFF08\u534A\u89D2\u30B9\u30DA\u30FC\u30B9\u3067\u533A\u5207\u308B\uFF09');if (!temp_str) {return;}}var args = temp_str.replace(/%E3%80%80/g, ' ').split(' ');var color = 'red';if (args[1]) {color = args[1];}if (args[0]) {var tag = args[0];var elems = document.getElementsByTagName(tag);if (elems.length > 0) {for (var i=0; i<elems.length; i++) {var elem = elems[i];elem.style.border = '1px solid ' + color;elem.style.padding = '1px';showAttrName(elem, color);}} else {alert('There is NO %22' + tag + '%22 tags.');}}function showAttrName(elem, borderColor) {var attrArray = new Array(%22CLASS%22, %22ID%22, %22NAME%22);var titleText = ' ';for (j=0; j<attrArray.length; j++) {if (elem.getAttribute(attrArray[j])) {var attrValue = elem.getAttribute(attrArray[j]);var attrText = document.createTextNode('[' + attrArray[j].toLowerCase() + ' : ' + attrValue + ']');var attrElem = document.createElement('SPAN');attrElem.appendChild(attrText);var es = attrElem.style;es.color = '#222';es.backgroundColor = '#FFFFE1';es.fontSize = '80%';es.fontStyle = 'italic';es.fontWeight = 'normal';es.border = '1px solid ' + borderColor;es.padding = '1px';es.margin = '1px';elem.appendChild(attrElem);titleText += '[' + attrArray[j].toLowerCase() + ' : ' + attrValue + '] ';}}elem.setAttribute('TITLE', titleText);}})();
Greasemonkey 0.6.6
Greasemonkey 0.6.6を試してみた。
ユーザースクリプトのインストール時にダイアログが表示されるようになっている。
Firefox2.0 RC2にインストールできるようになったし、これで2.0を常用できるかな。
Ubuntu(Dapper)にvim7をインストールする
/etc/apt/sources.list に次の行を追加する。
deb http://www.freshnet.org/debian/ dapper/
