A Better Project@はてなダイアリー(インポート版)

基本的にここは更新されません。詳細はaboutへ。

はてダの過去の日記一覧ページの各エントリに、はてブのユーザー数とコメント展開アイコンをつけるgreasemonkeyスクリプトを修正

適用するべき URL の設定が完全ではなかった点を修正しました。以前の版では、月別や日数指定の一覧ページで適用されず、また、archive の文字列を含むエントリページにも適用されるという設定になっていました。観察力と検証が足りなかったです。
http://potappo.sakura.ne.jp/greasemonkey/hd_archive_hb.user.js
参考として、以前の版と今回の版の適用 URL 設定を載せておきます。

//以前の版
 // @include     http://d.hatena.ne.jp/*/archive
//今回の版
 // @include     http://d.hatena.ne.jp/*/archive*
 // @exclude     http://d.hatena.ne.jp/*/*/archive*

ちなみに、以前の版を作ったときのメモがd:id:potappo2:20061205:1165318265にあります。potappo2 削除に伴い、下に転載しました。基本的なことですが、何かの参考になれば。

2013-03-31 追記

potappo2 削除に伴い、開発メモをこちらに転載します。今は動かないスクリプトですし、リンク先がもうなかったり、開発手法も Firefox が進化しているせいで変わっていますが、何かの参考になれば。

開発メモ

メインブログの方にカテゴリがあったり、巡回先に「 # 」付きの日記があったおかげで、変なところはないはず。追記:あったorz参照:d:id:potappo:20061214:1166096126今回の greasemonkey スクリプト製作で学んだことを無駄にしないために以下に記録しておく。基本的なこともまじっているけど、徹底する意味で。

XPath はなるべく深く狙いを定める。

浅く取得し過ぎたせいで、for 構文を何重にも書き、果てには、無限ループになってしまった。なんかすごそうな階層になっていても、意外と取得できるもの。

Firefoxが暴走しているときは無限ループを疑え。

原因は前項の通りなのだけど、なんでフリーズするのか最初わからなかった。問題を細かく絞っていって、 a 要素の配列の取得の繰り返しにより、無限ループになっていることに気付いた。無限ループなんて書かないだろうと思っていたけど、書いてしまうものなのだなと実感。

FireFoxが暴走していなくても動作しないときは、エラーコンソールのエラーを見る。

基本だけど。エラーコンソールは、greasemonkey スクリプトファイルの行数をきちんと出してくれるので、vim なら、エラー行数 + G ですぐにエラー箇所に移動できる。他にもデバック方法は色々あるみたいだけど、エラーコンソールは Firefox にデフォルトでついているので手軽。

element の後ろに newElement を追加するには、element.parentNode.insertBefore(newElement, element.nextSibling);。

Dive into GreaseMonkey (リンク切れ)
今回はDive into GreaseMonkey (リンク切れ)をだいぶ参考にした。Dive into GreaseMonkey (リンク切れ)に基本 Tips がまとめられている。

複雑なHTML要素を手早く追加するには、innerHTMLを使う。

これもDive into GreaseMonkey (リンク切れ)より。
DOMでも出来ないことはないけど、HTMLを直接記述できるのは楽。エスケープに多少の慣れが必要なので、もう少しスマートな書き方をした方が良いかもしれないが。

はてなブックマークのブックマーク数を画像で取得する API」を使うときは URL 中の # をエスケープしなければならないが、「はてなブックマークコメントその場で表示ライブラリ」を使うときはURL中の # をエスケープしてはならない。

ブックマーク数を画像で取得する API の公開について - はてなブックマーク日記 - 機能変更、お知らせなどとd:keyword:はてなブックマークコメントその場で表示ライブラリ参照。この挙動の違いが無ければ、ブックマーク数画像を呼び出す a 要素に rel 属性を追加して、initCreateRelAfterIcon() で行けるのだけど。これはあくまでも URL に # を含まない外部サイト用のお手軽設定ってことなのかな。
ちなみに、コメント表示のオプション設定は面倒なのでしなかった。デフォルトで不便そうだったら、設定するかもしれない。

マッチ判定だけなら、RegExp オブジェクトの test メソッドを使う

あえて日本語で書くと、「正規表現オブジェクト.test(正規表現オブジェクトでマッチするか調べたい文字列)」として使う。マッチ結果を必要としない場合は、こっちの方が処理が速いらしい。参照:http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Guide:Regular_Expressions
こういうのを書いておかないと忘れそうだし、まとめることで、ただやるよりも習得度は上がるかなと思う。
月間予定表HTMLソース出力JavaScriptのまとめ - A Better Project@はてなダイアリーなんてのも、書いたっけ。ここに付け加えることがあるとすれば、CSSは、デザイン力がないとどうにもならないってことかな。ここ最近、少しでもデザインセンスをつけようと、他のサイトや外で見かけるもののデザインをよく気にするようになった。
今日は、久しぶりに物作りしたなあという感じ。最近、寒さとかで空回りしていた感があったので。