htsign's blog

ノンジャンルで書くつもりだけど技術系が多いんじゃないかと思います

はてなダイアリーでキーワードポップアップ

JavaScript

Greasemonkey用スクリプト「キーワードポップアップ」の配布について - はてなダイアリー日記

ずいぶん昔の記事ですが、はてなさんはこんなの出してたんですね。
これを他のブラウザでも動くようにちょちょいと改造しましたよっていうのが今回のエントリ。
詳しく調べてないのでよく知りませんが、きっと俺以外にもやった人はたくさんいると思います。

本当はこのスクリプトをこのはてダに貼り付けたかったんですが、やってみたらはてなさんから「スクリプト埋め込みは許可してねーよ」って怒られたので仕方なしにコードだけ置いとく。

本当にごく一部しか触ってなくて、コードの99%くらいははてなさんのオリジナルのままです。
やったことと言えば、

  • MozOpacityとかいうクソベンダプリフィクス付きプロパティをopacityに直した
  • op = parseFloat(popup.style.opacity);みたいなコードをop = parseFloat(getComputedStyle(popup).opacity);に直した
  • setTimeout(loadKeyword, 600, rssurl, aTag.innerHTML);をsetTimeout(function(){ loadKeyword(rssurl, aTag.innerHTML) }, 600);に直した
  • 一部のイベントハンドラをイベントリスナに直した
  • NodeListオブジェクトに対してArray.prototype.slice.callした

くらいです。

IEの場合、9以降でないと動かないと思います。
ただし addEventListener for IE8 のようなスクリプトを実行するか、

var addEvent = function(target, evt, func){
  if (window.addEventListener) {
    return target.addEventListener(evt, func, false);
  }
  else if (window.attachEvent) {
    return target.attachEvent("on" + evt, func);
  }
  else {
    target["on" + evt] = func;
  }
};

こんな感じのスクリプトを実行して、イベント関連の記述をちょこっといじれば古いIEでも動くかもしれません。
CSSのopacityプロパティは古いIEでは解釈できないのでfilter:progid:DXImageTransform〜みたいなクソめんどくさいIE独自プロパティを追加してあげる必要もあります。


このスクリプトをはてダ上で実行して、キーワード上にマウスカーソルを持って行くとキーワードの説明がポップアップします。

こんな感じです。結構便利です。

ブログパーツみたいに貼り付けられたらもっと便利だったんですけどねー。


追記：試してないけど、古いIEならCSSのbehaviorプロパティでスクリプト埋め込めるかもしんない。