脚注をその場で表示するスクリプトをAutoPagerize／AutoPagerlikeに対応

はてなダイアリー／ウィキペディアの脚注をその場で見るスクリプトを、AutoPagerize(for Firefox)およびAutoPagerlike(for Sleipnir)に対応してみました。
■Greasemonkey＆SeaHorse

脚注をその場で表示

これで、はてなダイアリー上でページを追加表示した場合も、脚注をその場で表示出来るようになります。

ついでにAutoPagerlikeにバグを発見(苦笑)。最新版(ver.0.03d以降)をお使いください。

Firefox版の方は、Greasemonkeyの並び替え機能により、AutoPagerizeの方を先に実行するようにしてください。

元ネタは、
■2008-03-30 - Kei_9 なげやりにっき
脚注をその場で表示：expandFootNote.user.js

チョット残念なのが958さん作のAutoPagerize for SeaHorseで追加表示された部分に対しては機能してくれないコト。
はてな謹製のquick_pagerボタンで表示されたモノに対しては有効なのですけどね・・・
試したことナイのですけどコレって風柳亭さん作のAutoPagerlikeなら動作するんでしょうかしらん？

脚注を見るスクリプトを作ったのがAutoPagelike作成どころかAutoPagerizeの存在すら知らない時期だったため(つまり、存在を知ってからまだ半月も経っていない(苦笑))、当然のように対応していませんでした。
私も不便に思って対応を考えていたところだったので、ちょうどよいタイミングでした。
ただ残念ながら、958さん作のAutoPagerize for SeaHorseには未対応です。
AutoPagerize.addFilter()で追加したフィルタ(コールバック関数)の呼ばれるタイミングがオリジナル（の最新版：version 0.0.26）と異なっているので、マウスクリック等のイベントが登録し難くなってるのですよね……。

AutoPagerize for SeaHorseの方のaddFilter()で追加したコールバックが呼ばれるタイミングは、オリジナルのaddDocumentFilter()で追加したもの相当(＝追加ページをドキュメント化したタイミング：createHTMLDocumentByString()後)になっていて、オリジナルの方のaddFilter()で追加したもの相当(＝ページ上に要素を追加したタイミング：addPage()後)で実行させる術が無いように見えます。
当方の読みが浅いだけかもしれませんが……。

AutoPagerlike： バージョンアップ

拙作AutoPagerlike（AutoPagerizeもどき）をバージョンアップしました(ver.0.03a)。
■SeaHorseスクリプト(Sleipnir専用)

AutoPagerlike：SeaHorse版AutoPagerize(もどき) AutoPagerlike：SeaHorse版AutoPagerize(もどき)
AutoPagerlike用設定ファイル

とりあえず、オリジナルにある機能のほとんどは網羅できたかと思います。

といっても機能を勘違いしている可能性は大いに有る……。

初版(ver.0.01)からの追加機能は、

1. SITEINFOをCACHE_EXPIRE[msec]の期間はキャッシュするようにした。
2. 右上にアイコンとヘルプが表示されるようになった。
   
   • アイコン内に読込み中／読込完了したページ数を表示[AutoPagerize for SeaHorseの機能取り込み]。
   • アイコンにマウスカーソルをのせるとヘルプ表示。
   • アイコンクリックでページング有効／無効の切替。
   • ヘルプの"clear cache data"をクリックすれば、SITEINFOキャッシュをクリアした上でページをリロード[独自]。
3. API関数を提供。
   【window.AutoPagerlike／window.AutoPagerize配下の関数】
   • addDocumentFilter(function[,siteinfo_url])
     オリジナルのaddDocumentFilter()と同等
     第2引数にSITEINFOで定義されたurlを指定することにより、特定サイトのみ対象と出来る[拡張]。
     
   • addFilter(function[,siteinfo_url])
     chgAddFilterMode()によりオリジナルと同等もしくはAutoPagerize for Sleipnir同等のどちらかになる(デフォルトはSleipnir版互換)
     第2引数にSITEINFOで定義されたurlを指定することにより、特定サイトのみ対象と出来る[拡張]。
     
   • addElementFilter(function[,siteinfo_url])
     オリジナルのaddFilter()と同等[独自]。
   • chgAddFilterMode(mode)
     addFilter()の機能をオリジナル互換(true)かAutoPagerize for Sleipnir互換(false)か選択する[独自]。
     
     AutoPagerize for SleipnirのaddFilter()は、動作的にはオリジナルのaddDocumentFilter()相当になっているように思われるため。
   • clearCache()
     SITEINFOキャッシュをクリアする[独自]。
     
   【window配下の関数】
   • xpathGetElements(XPATH,object)
     object配下より、XPATHで指定した要素を配列で取得。
   • xpathGet1stElement(XPATH,object)
     object配下より、XPATHで指定した要素を1つ取得。
4. 個別ページに「次へ」リンクが無いケースでも対応可能とするため、SITEINFOのnextLink記法を拡張(詳細はこちら)。
5. オプション設定を別ファイル化。

といったところです。

AutoPagerlike： 『次へ』リンクが無い場合の対処方法を考える

AutoPagerizeでは、各ページに『次のページへのリンク 』があることを前提とした動作になっていますが、

• 個別ページには次のページへのリンクが無い。
• インデックス(目次)ページは存在する。

というようなサイトに対応させる方法はないかなぁ？と思ったので、とりあえず拙作のAutoPagerlike

AutoPagerlike：SeaHorse版AutoPagerize(もどき)

の方にそのような機能を追加してみました。

需要があるかどうかは疑問ですが。

具体的には、SITEINFOのnextLinkについて、通常は

nextLink : '//div[@class="kakolog"]//a'

のようにXPathのみを書く所を、

nextLink : ['//div[@class="kakolog"]//a','ascend']
もしくは
nextLink : '[\'//table[@class="mokuji1"]//a\',\'descend\']'

のように配列（もしくはeval()により配列となる文字列)を指定してやることで、各ページの次リンクを見る代わりに、最初のページ(インデックスページ)で配列[0]のXPathにより取得したリンクを次々とめくっていくような動作となります（配列[1]は昇順('ascend'：HTML上の上→下)、もしくは降順('descend'：HTML上の下→上)切り替え)。

具体的には、インストール後に畑 健二郎（サンデーまんが家BACKSTAGE）を見てみてください。

ひとえに、↑のページを読み返すのにいちいちクリックするのが嫌になったから対応した、というのは秘密です（ｗ

AutoPagerlike： Sleipnir＋SeaHorse版 AutoPagerize(もどき)

メインブラウザとして使っているSleipnirでAutoPagerizeが使えないのが悔しかったので(?)、トライしてみました。
■SeaHorseスクリプト(Sleipnir専用)

AutoPagerlike：SeaHorse版AutoPagerize(もどき) AutoPagerlike：SeaHorse版AutoPagerize(もどき)
AutoPagerlike用設定ファイル

SeaHorseの使い方については、例えばこちらとかこちら。

これで、とりあえず Google はじめ、いくつかのサイトでページの追加表示が可能となりました。

オリジナルで対応しているサイトであっても、うまく表示出来ないことも多いと思います。ご了承下さい。

【追記】って、既にAutoPagerize for SeaHorseという、そのものずばりのものが公開されていることに公開してから気付いてこ(rya…… orz。

【2008/03/30追記】
設定ファイルを独立させました。
これは、本体と同じところ(デフォルト：C:\Program Files\Fenrir & Co\Sleipnir\plugins\seahorse)に置いておきます。
ユーザがローカルでSITEINFOを追加したい場合などは、このファイル(!!autopageroptions.user.js)を書き替えます。

バージョンアップ時には、本体(!autopagerlike.user.js)のみを上書きすればよく、設定ファイル(!!autopageroptions.user.js)は上書きしなくてすむようにしたわけです。

■謝辞
AutoPagerize作者のid:swdyh さん、すばらしいツールを世に出してくださってありがとうございます。

• 公式サイト：AutoPagerize – Userscripts.org
• SITEDATA：AutoPagerize (swdyh)
• スクリプト更新情報

id:amachangさん、IE系ブラウザでも簡単に使えて高速に動作する XPath 実装を公開してくださって感謝します。

• 公式サイト：JavaScript-XPath - CodeRepos::Share - Trac
• JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記

■覚書など

• オリジナルにはついているメニューは未作成。時間があれば、作るかも。
  というか、停止がないと、下の方にメニューやリンクがあるサイトだと大変だということにさっき気付いた(笑)
  • 【2008/3/30】メニューを追加。とりあえず、機能のON/OFFは出来るようになった。
• SITEINFOデータの取得方法。Greasemonkeyならドメイン越えてページが取得出来るみたいなのだが、SeaHorseではやり方がわからない……。
  →JSONPに変換して取得するようにした。
  なのでリアルタイムではない。定期的な自動更新しようかと思ったが、オリジナルのページが大人気のせいか重くて取得出来ないことも多く、ちょっと危険なのでしばらく手動で様子見。
  • 【2008/3/30】JSONPデータは1時間毎に更新するようにした。
• SITEINFOはXPathが使われているので、そのままではIE系では使えない。
  →ActiveXObject("MSXML2.DOMDocument")を使ってXML→HTMLのオブジェクトマップを作って対応しようとしたが、HTMLをloadXML()に通せるようなXMLファイルへと整形するのがやたら面倒。一応作ってはみたが、処理時間もかかるしで断念。
  →結局、素直にJavaScript XPath(http://coderepos.org/share/wiki/JavaScript-XPath)を使うようにした。
  最初からそうすればよかったなぁ……。
• XMLHttpRequestで取得したresponseTextから要素を切出す方法もしばし悩む……document.implementation.createDocument()って、IEになかったよなぁ……。
  →よく使っている、div要素に流し込む方法だと、JavaScript XPathでちゃんと要素の取得が出来ない(やり方悪いだけかもしれないけれど)。
  →で、iframe要素のcontentWindow.documentをopen()して、write()することに。これならJavaScript XPathで指定した要素が正しく取れる。
  →取れた要素は今度は親document配下には追加出来ない……仕方なく、一旦outerHTMLから要素を作りなおしたものを追加するようにした。
  もっとスマートな方法があるんだろうなぁ……。
  • 【2008/3/22】iframeの代わりにActiveXObject('htmlfile')を使用するようにした。
• ページによってはXMLHttpRequestで取得したresponseTextが文字化けしてしまう……orz。
  →仕方がないので、document.charsetがutf-8以外なら、iframeのsrcで読ませることにした。ページの読込みが完了しないとcompleteにならないのと、ナビゲーション開始音がうざいけれども(音の方はコントロールパネルで消せばよいが)。
  • 【2008/3/22】UTF-8以外はsleipnir.CreateObject('ADODB.Stream')を使用して変換(ActiveXObject("ADODB.Stream")はNG)。

ウィキペディア（Wikipedia）の脚注もその場で見る

はてなダイアリーの脚注をその場で見るためのGreasemonkey／SeaHorseについて、考えてみれば、はてなダイアリーの脚注よりも、ウィキペディア(Wikipedia)の脚注の方がさらに認知コスト高い気がする……ということで、そちらにも対応してみました(ver.0.01c)。

【追記】
きっと似たようなのは既にあるだろうなとちょっと探してみたところ、やっぱりありました。

• Wikipedia Inline Footnotes – Userscripts.org
• はてなダイアリーの脚注を見やすくするブックマークレット - mayokara memo

はてなダイアリーの脚注をその場で見るためのGreasemonkey／SeaHorse

はてなダイアリーの脚注リンクをクリックするとにマウスオーバすると、その場に脚注の内容が表示されるようにするGreasemonkey/SeaHorseです。

【追記】(2008/03/15)
ウィキペディアにも対応してみました。

■実行イメージ

↑脚注リンクをクリックにマウスオーバすると……

↑のように、その場で脚注の内容が表示されるようになります。
【2008/12/21追記】
現行バージョン(ver.0.01h)は、デフォルトで

1. リンク(*n)のマウスオーバで脚注表示。
2. 脚注表示中にリンクをクリックすると非表示。

という動作になります。
動作を変えたい場合は、スクリプトソースの最初の方に有る Parameters の 'clicktoggle'／'autolock' を書換えてください。

• デフォルト：clicktoggle=false; autolock=true
  　→マウスオーバで脚注表示、クリックで非表示。
• ver.0.01f互換：clicktoggle=false; autolock=false
  　→マウスオーバで脚注表示、そのままだとマウスアウトで非表示。脚注表示状態でクリックするとロック状態(マウスアウトしても表示したまま)、再クリックで非表示。
• ver.0.01e互換：clicktoggle=true(autolockはdon't care)
  　→クリックで脚注表示、再度クリックで非表示。

【2008/04/03追記】
若干操作を変えてみました(ver.0.01f)。

1. リンク(*n)のマウスオーバで脚注表示、マウスアウトで非表示。
2. 脚注表示中にリンクをクリックするとロック（状態保持・マウスアウトしても表示のまま)。再度クリックすると非表示。

前のバージョン(ver.0.01e)はこちら。

■Greasemonkey＆SeaHorse

脚注をその場で表示

Seahorseの使い方については、例えばこちらとかこちら。 Greasemonkeyの使い方については、例えばこちら。

↓のような記事をみかけたので、解決策のひとつとして。
■はてダでは無駄に注釈が使われすぎな件 - 編集UIと閲覧UIの関係 - Prepared Mind

読むには認知コストが高くつく。特にはてダの注釈はスクロールをしないと読めない場合が多いので、書籍なんかで同ページ内に入っている注釈よりかなり余計にコストが高い。

確かに、リンク先に飛ぶことで視点が移動し、戻ってくるにはまたクリックしないといけない……というのは意外と煩わしく感じますね。

ところで……はてなダイアリーの脚注って、どうやってつけるんですか？（サゲ

ああ、これか(苦笑)

■更新履歴

• [2008/11/11](ver.0.01h)
  1. スクリプト内にclicktoggle/autolockパラメータ追加、動作を変更可能に。
• [2008/11/06](ver.0.01g)
  1. ver.0.01fの動作（マウスオーバで脚注表示／マウスアウトで脚注非表示）だと表示がばたつくことがあるため、マウスアウトでは非表示にはしない(展開したまま・クリックで非表示にする)仕様に変更。
• [2008/04/03](ver.0.01f)
  1. クリックで表示/非表示だったのを、マウスオーバ/マウスアウトで表示/非表示に変更、クリックはロック(表示固定)/ロック解除(非表示)に。
• [2008/03/31](ver.0.01e)
  1. AutoPagerize for SeaHorse(ver 0.34以降)に対応。
• [2008/03/30](ver.0.01d)
  1. AutoPagerize(本家)/AutoPagerlikeに対応。
• [2008/03/15](ver.0.01a～c)
  1. 脚注表示方法の微調整(ver.0.01a)。
  2. はてなダイアリーのquick_pager（のクリック）で追加表示された記事に対応(ver.0.01b)。
  3. ウィキペディア対応(ver.0.01c)。
• [2008/03/14](ver.0.01)
  1. 初版リリース

【JavaScript】onmouseover/onmouseoutの振る舞い

マウスイベントである onmouseover／onmouseout はそれぞれあるオブジェクトに対してマウスが重なった／外れた場合に発生するイベントですが、どうも動作が直感的じゃないなぁ、と感じていたので、少し調べてみました。
どういうことかというと、例えば、

A

B

C

のように、親オブジェクトAの中に子オブジェクトB、孫オブジェクトCがいるような場合。
Aに対してonmouseover／onmouseoutを設定したとすると、直感的には、

1. Aの外から内側に入った場合にのみ、overイベントが発生。
2. Aから外に出た場合にのみ、outイベントが発生。

という動作を期待してしまいますが、これは期待通りになりません。
というのは、A～B間、B～C間の境界を移動した場合にも、当該イベントが発生してしまうからです。
たとえば、A→Bに動くと、一旦 out が発生してから改めて over が発生します。
つまり、一旦領域外に出てから、改めて入ったかのように振る舞ってしまうわけです。
さらに、A・B・C全てに対してonmouseover/onmouseoutを設定した日には、かなりいやらしい動作となってしまいます。

B→Cへと移動した日には、"OUT-B OUT-A OVER-C OVER-B OVER-A"と、都合5回のイベントが発生します（ｗ。

そこで、もう少し直感的な動作に近くなるように、onmouseout/onmouseover専用のイベントハンドラ登録関数を作成してみました。
■動作サンプル

■サンプルソース

(function(){
var w=window,d=w.document;

w.setEventHandler=(function(){
    if (w.addEventListener) {
        return function(obj,evt,handler){obj.addEventListener(evt,handler,false)};
    }
    else if (w.attachEvent) {
        return function(obj,evt,handler){obj.attachEvent('on'+evt,handler)};
    }
    else {
        return function(obj,evt,handler){var org=obj['on'+evt];obj['on'+evt]=function(){if(typeof org=='function')org();handler()}};
    }
})();   //  end of setEventHandler()

w.setMouseHandler=function(obj,evt,handler) {
    var mouseHandler=function(curEvent,e) {
        if (!e) e=w.event;
        if (!e) return;
        var prop=obj._MouseProp_;
        var curStatus=prop.status;
        if (curStatus==curEvent) return;
        if (curStatus=='out') { //  outer to inner
            var fncArrayOver=prop.fncArrayOver;
            for (var ci=0,len=fncArrayOver.length; ci<len; ci++) {
                fncArrayOver[ci].apply(obj,[e]);
            }
        }
        else {                  //  inner to outer
            var chkNode=e.toElement||e.relatedTarget;
            while (chkNode) {
                if (chkNode==obj) return;
                chkNode=chkNode.parentNode;
            }
            var fncArrayOut=prop.fncArrayOut;
            for (var ci=0,len=fncArrayOut.length; ci<len; ci++) {
                fncArrayOut[ci].apply(obj,[e]);
            }
        }
        prop.status=curEvent;
    };
    var prop=obj._MouseProp_;
    if (!prop) {
        prop=obj._MouseProp_={status:'out',fncArrayOver:[],fncArrayOut:[]};
        w.setEventHandler(obj,'mouseover',function(e){mouseHandler('over',e)});
        w.setEventHandler(obj,'mouseout',function(e){mouseHandler('out',e)});
    }
    if (evt=='mouseover') {
        prop.fncArrayOver[prop.fncArrayOver.length]=handler;
    }
    else if (evt=='mouseout') {
        prop.fncArrayOut[prop.fncArrayOut.length]=handler;
    }
    else {
        w.setEventHandler(obj,evt,handler);
    }
};
})();

setEventHandler(object,event,handler)は、単にaddEventListener()やattachEvent()のラッパ関数です。
setMouseHandler(object,event,handler)の方が、mouseover/mouseout専用のイベントハンドラ登録用関数になります。

eventは'on'をとったものを使います('onmouseout'→'mouseout')。

作りとしては単純で、

1. デフォルト(ハンドラ登録時)は"外"にいるものとして初期化。
2. "外"において発生した'mouseover'により、"外"→"内"に移動したものとみなす。
3. "内"にいるときに発生する'mouseover'は無視。
4. "内"にいるときに'mouseout'が発生した場合、移動先のオブジェクトをevent.toElement(IE)もしくはevent.relatedTarget(Firefox他)で取得し、そこから親を辿っていって、イベントを設定したオブジェクトが見つからない場合にのみ、"外"へと移動したものとみなす。

としています。

で、例によって作ってから気付きましたが、IEの場合はonmouseenterやonmouseleaveというのもあるみたいですね。もしかするとわざわざ↑のようなことをしなくても、これでできるのかな？（試していませんが）。

【ココログ】特定の記事に対する最近のコメントをRSSで取得(Yahoo!Pipes版)

ココログの記事についたコメントをRSSフィードとして取得する試みのその2、Yahoo!Pipes版。

ココログのコメントをRSSで取得

↑のブックマークレットをブラウザのお気に入り(ブックマーク)に登録しておき、ココログの個別記事のページで実行すると、一番上の方に『RSS』というリンクが表示されます。 これをご自分のRSSリーダに登録しておくことで、該当の記事についた最近のコメントをRSSリーダで読むことが出来るようになります。

取得できるのはデフォルトでは新しい順に10件までです。ブックマークレットのn=10を変更すれば件数を変えられます。

以前公開したものと比較して、以下のような特徴があります。
■メリット

• 投稿時間・コメントへの個別リンク(アンカー)・投稿者サイトへのリンクも反映される。
• 個人のサーバ(共用サーバ)に負荷をかけない（ｗ。また、ココログサーバへの負荷も比較的軽いはず(Pipes自体にキャッシュする仕組みがあるらしい)。
• 比較的動作が軽い。
  というより、以前のものはココログの携帯用のサーバからデータを取得しているのだが、これが重過ぎ(_ _;)/

■デメリット

• RSS全体のタイトルを記事毎に変えられない("Cocolog Comment Feed"で固定)。
  なんでこんな基本的なところを変えられないんだろう？＜Pipes。マッシュアップしたRSSなんて再配信するなってことか（ｗ。
• 総コメント数が非常に多い場合（～1ページあたりのサイズが大きい場合）は取得出来ない。
  これはPipesのFetch Page（ページを取得する部品）の容量制限みたいなので、いかんともしがたい。
• 元記事のフォーマット(ココログの設定・テンプレート)によっては正しく取得出来ない。
• 投稿時間(pubDate)が変になるっぽい……タイトルにも日付は入っているし、まぁ相対的な時間はわかるってことで。
  pubDateに設定されるのがPSTだったりPDTだったり。JSTとの時差もおかしい気がする（し、安定していない）。

デメリットも多く、公開すべきかちょっと迷いましたが、まぁ習作ってことで。

ちなみに作成したPipeへのリンクはこちら。

『はてブBOX』で、はてブコメントにはてなスターを付ける！

はてブコメントビューア『はてブBOX 』を改修し、はてブコメントにはてなスターを付けられるようにしてみました(ver.0.01d)。
こころにくいあんちくしょうのコメントに星をふりまいてあげましょう(笑)。

■実行イメージ

1. コメント表示箇所にスターを、BOX部分に"Add Star"アイコンを、それぞれ表示するようにしてみた。
   "Add Star"のところにマウスカーソルをおいて、マウスホイールでコメントを読んでいき、気に入ったらそのままスターを付ける、という流れで操作が可能。
2. コメントされた日付を表示してみた。
3. Operaでもマウスホイールに対応してみた。
4. その他、細々とした修正あり。

タイムリーなエントリを見つけたので、追記。
■304 Not Modified: はてなスターをもっと使おう！

はてなスターはストーキングツールである

これは（ｗ。

ぜひ、自分のはてなスターのサイト（http://s.hatena.ne.jp/ユーザID/）を見てください。自分のFriendsが、最近はてなで行ったことがすべて分かるのです。

はてなスターは自分の行動を見せ付けることのできるツールなんですよ！

はからずも、ストーキング補助ツールを作っちゃったってことですか、私(笑)。
さぁあなたも、はてブ界のスターをおっかけましょう（ｗ。

あ、特定の人をおっかけるような機能は『はてブBOX』にはありませんよ？念のため……。

マウスホイールではてブコメント流し読み！『はてブBOX』(ブックマークレット/Greasemonkey/SeaHorse)

変わリ種はてブコメントビューア第3弾！
今回の『はてブBOX』はこれまでの『はてブニコす』や『はてブぽっぷ』と比べ、実用性も高いと思います。はてブコメントファンの方はぜひお試しを！

【追記：2008/03/07】……って、Greasemonkey＆SeaHorseのリンク、はてブポップになっていた……丸一日そのまま放置、すみません。
あとついでに、日付・時刻も表示するように修正しました(ver.0.01a)。
が、Yahoo!Pipes経由でとると、ときどき時間が9時間ずれる……いつもならともかく、ときどきというのが、謎(?_?)。
↓
【追記：2008/03/09】結局、y:publishedではなくdc:dateから取ることにした。
あと、履歴は今後記事の最後にまとめることにした。
ブックマークレットの方はともかく、Greasemonkey/SeaHorseは更新の都度インストールしなおしになるのが難点。外部スクリプト呼出し専用のを作ってもいいんだけど……。

■特徴

1. 見ているページにはてブコメントがついていたら、右下にコメント数付きのBOXを表示。
2. BOXのあたりにマウスカーソルを当てると、はてブコメントを付けているユーザのアイコンを読込んで表示。
   アイコンが多いと下にはみ出して見えなくなりますが……仕様です（ｗ。
3. アイコンにマウスカーソルを当てると、そのユーザのコメントをポップアップ表示。
4. マウスホイール、もしくは[←][→]のカーソルキーで、コメント切り替え。
5. BOXのクリックでそのページのはてなブックマーク画面を、アイコンのクリックでそのユーザのはてなブックマーク画面を、それぞれ呼出し。
6. はてブコメントにはてなスターをつける機能付き。

要は『はてブぽっぷ』のけれん味(笑)をなくして、操作性を向上させたものですな。
マウスホイールやキー操作によって、スクロールすることなく次々とコメントを切り替えられるので、なかなか快適！だと自分では思ってます(笑)。

IE7とFirefox2.0.0.12でしかテストはしてません……あ、Operaだとマウスホイールが効かないみたい……そのうち余裕があれば調べてみよう。
↓
【追記：2008/03/09】OperaはDOMMouseScroll未対応だったか。onmousewheel使うしかないみたい。修正してみたつもり。

■実行イメージ

■ブックマークレット

はてブBOX

ブックマークレットの登録方法等はこちら→【Web】ブックマークレットのブラウザ毎の登録方法

■Greasemonkey＆SeaHorse

はてブBOX

Seahorseの使い方については、例えばこちらとかこちら。 Greasemonkeyの使い方については、例えばこちら。

以下、個人的な覚書。

• IE7だと"keypress"ではカーソルキーが取得出来ない……"keypress"でとれるのは文字入力出来るキーだけ？
• キー入力のイベント、Firefoxだと"keydown"は単発、"keypress"はリピート可、なのかな？
• キー入力イベントを設定する対象となるオブジェクトはdocumentでいいのかな？IE7だとdocument.bodyでもいいみたいだけれど。他のオブジェクト(divとか)だとダメっぽい。
• キー入力イベントを使うときは気をつけないと思わぬ副作用が……[→]カーソルキーで横スクロールしちゃったりとか(笑)。
• イベントをキャンセルするには、ハンドラ内に細工するのが有効か。
  IE7だとハンドラの戻り値をfalseにするか、event.returnValueにfalse設定。
  Firefoxだとevent.preventDefault()[イベントキャンセル]、かな。
• event.stopPropagation()[伝播抑制]は多分、IE7のevent.cancelBubble=true相当。 IE7はイベントバブリング(子要素→親要素)固定(?)だけど、FirefoxはaddEventListenerの第3引数で切り替え出来る(true：イベントキャプチャリング)……と思ってよいのかな？

■更新履歴

• [2008/03/09](ver.0.01e～f)
  1. IEでページによってはDOMオブジェクトの挿入時にエラーとなる不具合修正(document.body.insertBefore(DOM object,document.body.lastChild)→document.body.appendChild(DOM object))(ver.0.01e)。
  2. [Shift]キーを押しながらBOXからマウスカーソルを外すと、コメント表示を維持したままになるように修正(ver.0.01f)。
     これにより、コメント部分に移動して☆を付けた人を確認したり、コメントから引用部分を選択してから☆を付けたり、コメントを付けたりすることが出来るようになった。
  3. Firefoxでコメントを切替えるときに一瞬消えてから再表示されていたのを改善(ver.0.01f)。
• [2008/03/08](ver.0.01d)
  1. はてブコメントに対してはてなスターを付ける機能追加。
  2. 日付取得をentry['y:published'].utimeから行っていたのをentry['dc:date']からに修正。
  3. その他バグフィックス。
• [2008/03/07](ver.0.01a～c)
  1. コメント日付・時刻表示(ver.0.01a)。
  2. 細かいバグフィックス(heigth→heightとか(ｗ)(ver.0.01b)。
  3. Operaのホイール対応(ver.0.01c)。
• [2008/03/06](ver.0.01)
  1. 初版リリース。