[珈] 汎用ポップアップ Greasemonkey "PopTip" を作ったよ。

■ [web]汎用ポップアップ Greasemonkey "PopTip" を作ったよ。

こんにちは、ちょっと便利な Greasemonkey 作りました。どんな機能かというと

任意の Web サイトで
任意の要素にカーソルをのっけたとき
任意の中身のツールチップっぽい小窓を出せるようにできる

というヤツです。これを使うと、たとえばこんなことができます。

Flickr やはてなフォトライフや pixiv で、サムネイルにカーソルを当てるだけで写真や絵が見られる
SNS で、コミュニティのアイコンにカーソルを当てると、最新のトピック一覧を見られる
Twitter や mixi で、ユーザアイコンにマウスを乗せるだけでプロフィールが見られる (足跡はつくのでそのへん気をつけてね。)
Amazon のリストマニアや検索結果で、本の画像にマウスを乗っけるだけで本の概要が飛び出す
はてなブックマークのホッテントリの「XX users」にカーソルを合わせると、エントリのサマリーが飛び出す
はてなダイアリーで、キーワードにカーソルを合わせると、その場で意味がわかる

(これらのサイト用のルールは、デフォルトで入れておきました。) mixi で旧友を探していたら、プロフィールページを開くのに疲れました、とか、Flickr ですてきな写真のサムネイルがずらっと並んでいるのを見てたら、ついついタブが30枚40枚開いてました! とか、そういう労力を大いに削減することができます。
必要なモノは、Firefox と、Greasemonkey と、あとはほんのちょっと XPath が解ると、なお良いです。で、使い方。

ソースを開くと、25 行目から "SITEINFO" っていうのが書いてあります。こんなのが並んでます。

    {
        description: 'Hatena Bookmark',
        url: '^http://b.hatena.ne.jp/*',
        linkElement: '//div[@class="entry-footer"]//*//a',
        popupElement: 'id("entry-info")//blockquote',
        delay: 1000,
        style: {
            fontSize: '80%'
        }
    },

(↑ちなみにこの例は、はてなブックマークでサマリーを出すためのルール。)
ここに、サイトごとの、ポップアップ動作のルールをずらずらと書いていきます。書き方はこんなかんじ。

url (必須)(正規表現): そのルールの適用される URL です。ページの URL がこれとマッチした場合に、そのルールが発動します。
linkElement (必須)(XPath 表記): この XPath にマッチした a タグの要素に、ポップアップ動作が付加されます。もちろん、複数の要素がヒットするような指定のしかたでかまいません。ここで指定した要素の href 属性の値が、読み込む URL になります。
popupElement (必須)(XPath 表記): 読み込んだ先のページの中の、どの要素をポップアップ小窓に出すかを、XPath で指定します。複数の要素がマッチした場合には、その要素がすべて小窓に表示されます。これを工夫すると「読み込んだ先から最初の3枚だけ画像を表示する」とかいうこともできるわけです。
targetElement (XPath 表記): linkElement で指定した要素以外から、ポップアップ動作を発動したい場合に使います。たとえば、a タグで囲まれていない画像を踏んだときに発動させたい! とかいうときに使います。これも、複数の要素がヒットするような書き方でかまいません。ここでヒットした要素にカーソルを当てると、linkElement で指定したものの中から同じインデックスの要素の href 属性の値が読み込まれます。
linkReplaceRule: 取得する URL は、linkElement 要素で選択した a タグの href の値になります。が、これだけで取得できない場合 (たとえば、href は "hoge.pl?uid=XXXXXX" だけれど、"fuga.pl?uid=XXXXXX" を読み込ませたい、などなど) は、~~ここに関数をベタ書きしてください。たとえば linkReplaceRule: function(url){return url.replace('hoge.pl','fuga.pl');} といった具合に。~~置換ルールを正規表現で書いていってください。linkReplaceRule : {pattern:'hoge\.pl', replacement: 'fuga.pl'} みたいな感じで。
style: ポップアップ窓のスタイルです。基本、CSS で使える属性はなんでも使えます。style: {width:400px; backgroundColor:white;} みたいな感じで、書いてください。
delay: 指定した要素にカーソルが触れてからポップアップ動作が始まるまでの時間を、ミリ秒で指定します。書かない場合、デフォルトは400msecになります。ゆっくりした動作にしてほしいときには、ここを1000msecくらいにすると良いかも。
containerHTML: ポップアップする小窓のデザインをカスタマイズしたい場合、しかもスタイルだけでは解決しない場合は、ここに HTML を書いてください。<popup:container/>と書いたところにに、取得した要素が挿入されます。<popup:container/>がどこにも含まれていない場合は、デフォルトの挙動として、いちばん最後に挿入されます。
disabled: ここを true にすると、そのルールは使われなくなります。デフォルトは false となります。消したくないけれど一時的に機能を止めたい場合に。
stripe: これの値を true にしておくと、ポップアップできる要素の横にちっちゃいアイコンがくっつきます。(hao_yayoi さんによる追加機能)

XPath を使うやり方とか、AutoPagerize を参考にしました。(ってか、そもそも AutoPagerize に色々とインスパイヤされて作ったんだけどね。)

色んなルールをみんなで共有して便利にしていこう! とかいうことも考えていたんですが、こういうツールは、人によっていろんな使い方があると思うので、そうホイホイも共有できないかなぁ。たとえば、SNS でアイコンにカーソルを合わせたときに、プロフィールが見られるとうれしい人もいれば、その人の参加コミュニティ一覧が見たい人もいるだろうし。このへんは、ちょっと、悩み中です。

バグ報告・便利なルールを書いたよ報告・改良要望とかはお気軽に。

では、ゆっくりカスタマイズしていってね!

20080821 Ver. 0.0.5: linkReplaceRule を関数ベタ書きから正規表現に変更 (JSON 形式で共有しやすいように、あと、悪い人が悪い関数を書いていかないように)
20080821 Ver. 0.0.5: disabled オプション
20080822 Ver.0.0.6: hao_yayoi さんによる修正を適用して、ポップアップできる要素にアイコンをつけられるようになりました。SITEINFO に "stripe: true" っていうオプションをつけると、ポップアップできる要素にアイコンがつきます。
課題・問題: ・別サイトのページを読みにいかせることはできないみたい(セキュリティ上しょうがないか)
・読み込み失敗したときにも何か出したい
・きちんとルールが効いているかどうか確認できるようデバッグモード整備
・ SITEINFO共有のためのアレやコレ
・そのためにまずは wedata をチェックしてくるとするか
・ Opera 対応
・小窓の中身を XSLT で整形できちゃったりするといいんじゃないか、とか
・ Greasemonkey じゃなくて普通の拡張にしたほうがいいんじゃないか、とか
・夢がひろがりんぐ!

追記 : wedata で SITEINFO を共有できるようにデータベース作ってみたのですが、API使って自動で取得してごにょごにょするとかいうのは、やってません。便利そうな SITEINFO を思いついたら書いていってもらえるといいなー。 / 対応サイト増やしてみました、Goo 辞書とか 2ch のアンカー表記とか。

ダウンロード&インストール poptip.user.js (Ver. 0.0.6)

ふるいほう (Ver. 0.0.6)

コーヒーサーバは香炉である

2008年08月20日

■ [web]汎用ポップアップ Greasemonkey "PopTip" を作ったよ。