2013年4月10日

userContent.css で無理矢理スクリプトを走らせる

特定のページでスクリプトを動作させる方法には色んな方法があります。アドオンを作るとか、GreaseMonkey のスクリプトを作るとか。

それを userContent.css だけでやっちゃおうというオハナシ。

まず、userContent.css にスクリプトは書けません。だって CSS ですから。じゃあどうするのかというと、XBL を使います。

例として、 unmht.org の「あ」を落下させてみましょう。

userContent.css には以下のようにして、「あ」に対して -moz-binding を指定します。

@-moz-document domain(www.unmht.org) {
img[src="/parts/a.png"] {
  -moz-binding: url("userContent.xml#fall");
}
}

さてスクリプトの実体はというと、userContent.xml というファイルに書きます。別にこのファイル名である必要はなくて、-moz-binding でそう書いたから、というだけです。userContent.xml の後の #fall は fall という id の binding を使うという事で、名前を変えれば1つのファイルの中に複数の動作を書けます。

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="fall">
    <implementation>
      <constructor>
<![CDATA[
var target = this;
var y = 0, vy = 0;
var update = function () {
  y += vy;
  vy += 1;
  target.style.top = y + "px";
  if (y < 1000) {
    setTimeout (update, 100);
  }
};
update ();
]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

スクリプトの中では、スタイルを指定した要素は this でアクセスできます。

この2つのファイルを作って Firefox を再起動させてから、 www.unmht.org を開くと「あ」が落下します。userContent.css の反映には Firefox の再起動が必要なのでちょっと面倒ですね。xml の方は書き換えれば即座に反映されます。

スタイルからスクリプトを走らせる事のメリットとしては、動的なサイトにも簡単に対応できるという事です。ページロード時に走るタイプのスクリプトでは、その後にページ内容が追加された場合に対応するのがタイヘンなのですが、スタイルであれば要素が追加されたら即座にスタイルが解釈され、結果スクリプトが実行されます。

注意点としては、-moz-binding は重複指定できないという事。つまり自分が使うとなると他の場所での指定が無効になっちゃうので、場合によってはデフォルト動作に問題が起きるかも。

て事で、本格的な用途では使えないかもしれない豆知識でした。

0 件のコメント:

コメントを投稿