今日はグリモンスクリプトから対象のウェブページに設定されたイベントハンドラを呼び出す方法を簡単にご紹介したいと思います。

例えば以下のような HTML をグリモンの処理対象とした場合、

<a href="http://www.example.com" id="target">www.example.com</a>

グリモンからウェブページ上の onclick イベントハンドラを、以下のように呼び出すことはできません。

var obj = document.getElementById('target');
obj.onclick();

できない理由は XPCNativeWrapper – MDC に書かれているとおり、XPCNativeWrapper の on* プロパティを設定したり読み込もうとすると例外が送出されるためです。

グリモンスクリプトから on* プロパティを呼び出すには、Document Object Model (DOM) Level 2 Events Specification に定義されている方法で、イベントハンドラを呼び出す必要があります。具体的にはこんな感じです。

var obj = document.getElementById('target');
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, false);
obj.dispatchEvent(e);

これは JavaScript で obj.onclick() と書くのとほぼ同じことを、DOM Level 2 のイベントを使ってコーディングしてるだけで、id=”target” のオブジェクトに対してマウスクリックが発生したことを表すイベントを送出してます。

DOM Level 2 イベントは、

1. document.createEvent を使ってイベントオブジェクトのインスタンスを取得する
2. イベントオブジェクトは initEvent を使って初期化する
3. dispatchEvent でイベントを送出する

という順で使用します。

createEvent の引数にはイベントオブジェクトの種類を指定します。initEvent で指定する、発生させるイベントの種類により、使用するイベントオブジェクトは変わります。どのイベントを発生させるときにどのイベントオブジェクトが必要かについては Document Object Model (DOM) Level 2 Events Specification をご覧ください。

initEvent の第一引数には送出するイベントの種類を指定します。イベントの種類には onclick なら ‘click’ 等、JavaScript のイベントハンドラと対応した名前が付いてます。こちらも詳しくは Document Object Model (DOM) Level 2 Events Specification をご覧ください。第二引数にはイベントバブルの可否を指定します。true なら可です。第三引数にキャンセル可否を指定します。こちらも true なら可です。

DOM Level 2 イベントを使うと、イベント発生を伴う JavaScript での処理をグリモンにより自動化することができます。

使い道は色々あると思いますが、さくら的には例えば田代とか、正確に言えば田代砲とか、いずれにしてもロクな利用方法は思いつきませんでしたww

まあウェブアプリのテストとかなら使えるような気もしますけど、テストツールならもっと良いアドオンがあったと思いますので、やっぱりロクな利用方法が(ry

さくら

個人的なアレでちょろっと GreaseMonkey のスクリプト書いてみたんだけどすごいハマっちゃったりしました。なんでこれから GreaseMonkey を始める方に、あまりハマらずに GreaseMonkey プログラミングを始めるためのネタを書いときたいと思います。

まあ GreaseMonkey 始めたのが昨日の今日なんで、内容に多少問題があるかもしれませんがご了承をww

とりあえずインスコしてない人はこちらからどうぞ。

GreaseMonkey でできること

GreaseMonkey を使ったことがある方なら大体のイメージは沸くと思いますが、プログラミングする側から見ると GreaseMonkey は特定の URL に対して保存しておいた JavaScript を自動的に実行するためのアドオンというような感じになります。

たぶんブックマークレットがイメージ的に GreaseMonkey と近いと思いますが、ブックマークレットを実行するにはブラウザからブックマークレットを呼び出したり URL として入力しないといけないのに対して、GreaseMonkey では特定の URL に対してアクセスがあると JavaScript が自動的に実行されます。

GreaseMonkey の JavaScript は、若干の制限があることを除き普通の JavaScript です。

ですので JavaScript を知っていれば、簡単にスクリプトを作ることができると思います。また GreaseMonkey でできることも、普通に HTML に JavaScript 埋め込む時と同じようなことになります。

JavaScript を多少ご存知の方は結構いらっしゃると思いますが、その辺の知識があれば簡単に使うことができると思います。

プログラミングする前にブクマしといた方がいい URL

基本的には JavaScript なので、その辺をご存知の方から見ればそんな難しいものでは無いと思いますが、ご多分に漏れず GreaseMonkey 特有のハマる要素がありますので、とりあえず困ったときの参考資料を用意しておいた方がいいと思います。さくらが参考にしたのはこの辺です。

1. Greasemonkey – Mozilla Firefox まとめサイト
   実を言うとわざわざ自分で記事を書かなくても、だいたいのことはここに載ってるという感じなのですが、それを言い出すと書くこと何にも無くなっちゃうのでご勘弁をw
   つーことで GreaseMonkey の基本的なことは、だいたいこちらのサイトに載ってますです。
2. DOM – MDC
   FireFox の DOM 実装に関する説明です。基本的に GreaseMonkey スクリプトでは DOM を使ってコーディングしていくことになりますので、FireFox でどのように実装されているかを調べる必要がたまに出てきます。
3. Document Object Model (DOM) Specifications
   W3C の DOM のリファレンスへの目次です。FireFox の DOM は割と W3C の DOM に忠実に実装されていたと思いますので、リファレンス目的で調べるにはこちらも便利だと思います。

とりあえず書いてみる

習うより慣れろということで、GreaseMonkey のサンプルスクリプトを作ってみました。

新しくネタを考えるの面倒なので、【無料版】はてな自動リンクブックマークレットの GreaseMonkey 版にしてみました。ページ上のすべてのリンクに被はてブ数を表示する GreaseMonkey スクリプトです。

// ==UserScript==
// @name Hatebu Num
// @description Display number of hatena bookmarks for all links in the page.
// @include http://*
// @include https://*
// /==UserScript==

var b = 'http://b.hatena.ne.jp/entry/';
var vec = [];
var i;

for (i = 0; i < document.links.length; ++i) {
    vec.push(document.links.item(i));
}

for (i = 0; i < vec.length; ++i) {
    var e = vec[i];
    var a = document.createElement('a');
    a.href = b + e.href;
    a.innerHTML = '';
    e.parentNode.insertBefore(a, e.nextSibling);
}

実際に動かすとこんな感じ。このスクリプトによって、ページ上のリンクの横にはてブしてるユーザー数が埋め込まれます。

実際に使ってみたい人は、GreaseMonkey をインスコしてから hatebunum.user.js をクリックするとスクリプトがインスコされます。ただ対象のページによってはかなり重いんでご注意を。

JavaScript 自体は普通の JavaScript だしかなり短いんで見りゃ分かると思うから説明は省略して、上のスクリプトにも含まれている GreaseMonkey スクリプトとしての必須要件について説明します。

1. まず GreaseMonkey スクリプトのファイルの拡張子は .user.js です。単なる .js だと GreaseMonkey が GreaseMonkey スクリプトだと認識しません。
2. 次に GreaseMonkey スクリプトには // ==UserScript== で始まり // /==UserScript== で終わるヘッダを含めることができます。ヘッダは無くても構いませんが、スクリプトを実行対象にする URL の制限を @include 等で行えますので、とりあえず中身無くても付けといた方が良いと思います。ヘッダのちゃんとした説明は mozdev.org – greasemonkey: authoring をご覧ください。

以上の二点を満たすと、その JavaScript ファイルは、GreaseMonkey スクリプトとなります。長々と説明しましたが、要は拡張子を .user.js にしろってことで、長官たんww

GreaseMonkey スクリプトの制限

最初にすごいハマったと書いたんですが、GreaseMonkey にはスクリプト中で使用可能な JavaScript に制限があって、その辺のことが原因でトラブってたもんで解決するのにえらい時間がかかってしまいました。具体的な話はまた今度書きたいと思いますが、とりあえず今日は GreaseMonkey スクリプトの制限について簡単にご説明を。

GreaseMonkey に制限があるというよりも、FireFox が特権（chrome）モードで動くスクリプトに対して制限をかけており、それが GreaseMonkey にも適用されると言う方が正確なのですが、いずれにせよ普通のウェブサイトに置くような JavaScript とまったく同じスクリプトを書くと実行できないことがあります。

まず FireFox が chrome モードで動くスクリプトに対して課す制限について。FireFox は ウェブページの DOM オブジェクトに対する chrome モードからのアクセスは XPCNativeWrapper を経由してのアクセスに制限します。XPCNativeWrapper はセキュリティ上の理由で実装されており、この辺の理由等については Safely accessing content DOM from chrome – MDC をご覧ください。

XPCNativeWrapper を経由して対象 DOM オブジェクトへアクセスすると、DOM レベル 0 で定義されているインタフェース以外はアクセスできなくなります（何が DOM 0 かは上の DOM のページをご覧ください）。また単に DOM 0 以外のアクセスできないだけでなく他の制限もあります。これに関するGreasemonkey スクリプトから利用する観点からの説明もあります。

とりあえず DOM 0 相当のコードを書いておけばオッケーと覚えとくのが良いかと思いますが、イベント回りは DOM 2 event 相当が実装されているようですので、こっちはそっちに合わせとかないといけないような感じでなかなかカオスな感じですww

まあこの辺の制限にひっかかるのは、単にウェブページの見た目を変えるだけでは無いようなスクリプトを書いたときだと思いますので、いきなり問題が発生する方がまれかもしれませんが、そういう制限があるということを頭の片隅に入れておくと、トラブった時の問題の切り分けがだいぶ簡単になると思います。

ということで皆様も、GreaseMonkey であんなことやこんなことを自動化されると色々イイ感じだと思いますので、お暇があればぜひ一度お試しをwww