Kentaro Kuribayashi's blog

Software Engineering, Management, Books, and Daily Journal.

greasemonkey で、どこでもあれこれポップアップ

この Blog でも使わせていただいている、ありみかさとみさん作の「あれこれポップアップ」。どんなものかってーと…。

ウェブページ (HTML) にて、マウスポインタの下にある任意の箇所(要素)の情報(属性値)あれこれをポップアップに出す、 JavaScriptCSS のセット。 Web サイトの製作運営者向けの一種の「素材」。(中略)

(中略)

多くの典型的なブラウザでは、 title 属性に何か書いてある要素部分にマウスポインタをかざすと、その title 属性値がツールチップとしてポップアップしますよね。あれのゴージャス版と思ってもらえればよいです。典型ブラウザ本来のポップアップとの違いは、ポップアップするのが title 属性だけではない点。それと自分で言うのも何だけど、見てくれがカコイイ事(笑)

あれこれポップアップ

すでにお気づきの方も多いかと思いますが、たとえば上の引用箇所にマウスポインタをかざすと、どういうものかわかると思います。ここでは、この「あれこれポップアップ」を、Web サイトの製作運営者向けの一種の「素材」としてのみならず、Firefox の拡張 greasemonkey を用いることによって、ユーザサイドでも使えるようにしてみました。

といってもたいしたことをするわけでもなく、「川o・-・)<2nd life - bookmarkletの文字数制限を無くす」で述べられている方法を greasemonkey に適用し、ページロード時に外部 JavaScript(この場合は、あれこれポップアップ本体の ArekorePopup.js)と、画像の指定等を記述したスタイルシートを読み込むようにしただけ。

greasemonkey をすでにインストールしているならば、上記リンク上で右クリックして出てくるコンテキストメニューに、"Install User Script..." というメニューが出てくると思います。それを選択してインストール。これだけでオケ。たとえば、以下ははてなダイアリー日記にて動作している例。なかなかかっけーよね。

どこでもあれこれポップアップ

詳しくは先述の「あれこれポップアップ」のドキュメントを見ていただくとして、たとえば title 属性や cite 属性が指定されている要素の上にマウスポインタをかざすと、リッチなポップアップが出てくるようになります。

ここで注意。上にリンクした user.js は、この Blog を置いてあるサーバのドメイン上の JavaScript ファイルを、greasemonkey スクリプトが実行される場所の権限で読み込んで動作させることになります。よって、上の user.js をそのままいじらずにインストールすると、僕が悪いことをしようと思えばなんだってできちゃうということになります。じゃーどうすりゃいいのよ、ってことになるわけですが、常用しようという奇特な方は、その場でインストールするのではなく必ずダウンロードして user.js の該当箇所を適宜書き直してインストールし、また、あれこれポップアップ一式を自分の利用しているサーバにでもおくようにしてください。セキュリティ上の問題に加え、あれこれポップアップは設定項目が多岐にわたりますので、自分の好みに合わせて使う方がよりよいとも思います。

あと、遠くにあるサーバにおくよりも、ローカルにおいてそこから読み込めばいいじゃないか(file: スキームで)、ってんでちとやってみたのですが、ローカルファイルをリモートサイトの権限で読み込むことになり、セキュリティ上のエラーが出てだめでした。回避できるのかもしれないけど、めどいので放置。まぁそんなこんなで、単に外部 JavaScript をざくざく読み込むだけでも、あれこれ便利に使えたりする greasemonkey マンセーということで。