『Greasemonkey』でどこでも『あれこれポップアップ』

事の発端は 試行錯誤 というエントリでした。あれこれポップアップのクールさが非常に気に入ったので自分用に Firefox の拡張にしてどのページでも表示できないものかという言葉に出来るかもなんて思ってしまったのがいけなかった。身の程を知れというのだ。私よ。

最初に考えたのが JavaScript Actions で埋め込む方法です。以前CSSを読み込むための要素を生成してユーザCSSを利用する方法を 書いた のでその要領でCSSファイルとJSファイルを読み込んでやれば良いのではないかという発想です。しかしそれ以前にscript要素を生成する為の書き方がわからない。仕方がないので Traversing the HTML Table with JavaScript and DOM interfaces を読みながら勉強しました。これを応用するのに相当の時間が掛かりました。それで出来上がったのが以下のソース

var mybody=document.getElementsByTagName("head").item(0);
			myjs = document.createElement("script");
       mybody.appendChild(myjs);
       myjs.setAttribute("src","http://raraweb.fc2web.com/ArekorePopup.js");
       myjs.setAttribute("type","text/javascript");

あまり理解していないのだけれどこれで動くのだから良しとします。このスクリプトを引き下げていざ JavaScript Actions に導入しようと試みたのですが敢無く失敗。まだ試行すべき事は残っていますが、疲れてきたので greasemonkey を利用してみる事にしました。しかしここでも greasemonkey用のスクリプトの書き方がわからないという問題が発生。また勉強のし直しなのかと諦めようと思いましたが、とりあえずそのまま入れてみようと実験。書き方は パソコン遊戯さんの User JavaScript for Mozilla Firefox をそのまま参考にさせて頂きました。それで書き上げたのが以下です。

// ==UserScript==
// @name            DokodemoArekorePopup
// @namespace       http://harmony.blog5.fc2.com/
// @description     You can achieve 'ArekorePopup' anywhere. 
// @include         *
// ==/UserScript==

(function() {			
 if(document.all)
  document.createStyleSheet('http://raraweb.fc2web.com/ArekorePopup.css');

 else if(document.styleSheets){
  var nLink=document.createElement('LINK');
  
  nLink.rel="StyleSheet";
  nLink.type="text/css";
  nLink.href="http://raraweb.fc2web.com/ArekorePopup.css";
  var oHEAD=document.getElementsByTagName('HEAD').item(0);
  oHEAD.appendChild(nLink);
}
var mybody=document.getElementsByTagName("head").item(0);
			myjs = document.createElement("script");
       mybody.appendChild(myjs);
       myjs.setAttribute("src","http://raraweb.fc2web.com/ArekorePopup.js");
       myjs.setAttribute("type","text/javascript");

})();

先頭は greasemonkey 用の書式です。続くのが <link rel="StyleSheet" href="" type="text/css"> という要素を生成し挿入する為の物で、最後の部分が前述したスクリプト（<script src="" type="text/javascript"></script>）を埋め込む為の物です。簡単に説明すると あれこれポップアップの設置マニュアル に書かれているとりあえず設置のHTML記述例を全てのページに挿入させるためのスクリプトです。このスクリプトを greasemonkey にインストールすれば殆どのページであれこれポップアップを動作させる事が可能です。ご利用になられる方は上記ソースをメモ帳などのテキストエディタに写した後に、強調部分のURIをご自分であれこれポップアップの一式を置いた場所に書き換え、適当な名前（DAP.user.js）を付けて保存し、それを greasemonkey にインストールして下さい。

導入方法と注意点

• とりあえず greasemonkey が無いと動きませんので greasemonkey より拡張をインストールして下さい。
• あれこれポップアップ を任意のサーバに準備します（設定まで全て完璧に）。
• 上記スクリプトをテキストエディタに写した後に、強調部分のURIをご自分であれこれポップアップの一式を置いた場所に書き換えます。
• そうしたら適当な名前（DAP.user.js）を付けて保存します。
• ファイル名はどこでもあれこれポップアップの頭文字。.user.jsというのはその必要があるようなので。
• 保存した DAP.user.js を greasemonkey にインストールして下さい。
• 完了したら greasemonkey と JavaScript の両方が有効になっているのを確認した後に任意のページに移動して確認してください。
• ちなみに当サイトでは既に導入済みなので実験の場としては適当ではありません。
• 宜しければ 本家サイト や 別館 でどうぞ。
• オンとオフの切り替えは 適用サイト利用者向け FAQ の方法で行うか、JavaScript をオフにするか、もしくは greasemonkey の設定で簡単に行えます。
• もちろんgreasemonkeyを組み込んだFirefox限定
• でも user.js が使用できるならばOperaでも少々の書き換えで行けるかも
• 同様にIEは無理でもSleipnir辺りならなんとかなるかも

サンプル

一時的にどのような挙動になるのか試したい方は以下のスクリプトを greasemonkey にインストールすると簡単に確認できます。ただし多くの方が利用されますとサーバに負荷が掛かると思いますのであくまでも一時的な利用に限ります。また、あれこれポップアップの設定についても私が指定したものになります。

• DAP.user.js

使用にあたっての幾つかの注意

再三申し上げています通り、私は JavaScript で Hello, world! を表示させる事すら説明を読みながらでないと危ういというほどの知識しか有しておりません。よって上記スクリプトにおいてどのような問題が発生したとしても何の責任も持てませんのでご利用は自己責任でお願い致します。また、あれこれポップアップをこのように使用してよいのか確認を取っていませんので怒られたら直ぐに消します。「娘娘飯店しるきぃうぇぶ」について を読むと流用という箇所について限りなく黒に近い気がします。

残っている課題など

• あれこれポップアップの作者である ありみかさとみさん に許可を得る
• greasemonkey用スクリプトの正常化（誰か）
• 特に他のスクリプトとの競合が心配
• ローカルに置いたファイル（あれこれポップアップ）を読み込めるか実験する
• 通常ブラウジングがJavaScriptオフでも動くようにしたい
• JavaScript Actions で動かせるようにもう少し実験
• greasemonkey 無しでも動かせたら
• 拡張化なんていうのも面白いかもしれない

感じたことや呟き

• スクリプト要素を生成する為のスクリプトが簡単に書ければこんなに時間は掛からなかった。これに異常なほどの時間と労力を費やした。
• だってわざわざ DOM Inspector まで導入して確認したのに不具合が見つからずにずっと動かなかった。
• 必要もないのに 拡張を創る勉強 もしたので時間が掛かった。
• greasemonkey を怖がっていたのは間違いでした。
• JavaScript で可能な事ならば本当に全てが可能っぽい。
• 難しい書き方をしなくても上のような方法で外部から直接読み込んでしまえば無問題。

参考サイトなど

• あれこれポップアップ
• Traversing the HTML Table with JavaScript and DOM interfaces
• パソコン遊戯 - User JavaScript for Mozilla Firefox

追記（2006年01月22日12時20分）

『はてブ』のコメントで知りました。本当にごめんなさい。一度でも 検索してみるべき でした。申し訳ございません。