« WEB+DB PRESS Vol.27に執筆させていただきました | main | 日本帰ります »
2005年06月26日
はてなブックマーク用のグリースモンキーを作る注意点
はてなブックマーク用のグリースモンキーを作ろうとしたら、まったくもってHTMLの構造が微妙でつっかえまくるので、メモ。
・idが存在しない
ヘッダーやメニュー等のユニークな要素がIDを持っていない。getElementByIdが使えないので、代替物としてgetElementsByClassNameを自力で実装する必要がある。せっかく、はてなグリースモンキーを作ってもここで挫折する人が多いと思う。
・各ブックマークにコンテナとなるタグが存在しない
各ブックマーク毎のタグ構造が、３つの並列なタグで構成されている。
＜dt class="bookmark"＞＜/dt＞
＜dd＞日付、ドメインキーワード等＜/dd＞
＜dd class="comment"＞タグとコメント＜/dd＞
この為、ブックマークを抽出するには、全てのdtタグを抽出→クラス名がbookmarkのものを抽出、日付等は dtノードの.nextSilbling, コメント等はdtノードの.nextSilbling.nextSilblingを指定しなければならない。
勿論それから先に全部のノードを地道にパースする必要がある。この手法では要素が一個増えたり順番が入れ替わるだけで動かなくなので、ここは３つのタグを格納するコンテナを持つべき。
・タグ付けがしてある場合、コメント部分のテキストノードの頭に"] "というゴミがつく。
投稿者 Taka : 2005年06月26日 20:31
book
bookmark
trackbacks
this entry's trackback URL:
http://www.fladdict.net/cgi-bin/mt3/mt-tb.cgi/243
comment
implementation in DOM3 XPath for Firefox、だとこんな感じでしょうか。
const resolver = document.createNSResolver(document.documentElement)
// ブックマーク項目を得る
var bookmarks = document.evaluate('/descendant::*[local-name() = "DT" and @class = "bookmark"]', document.documentElement, resolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < bookmarks.snapshotLength; i++)
{
var bookmarkItem = bookmarks.snapshotItem(i);
var keywords = document.evaluate('following-sibling::*[1]/descendant::*[local-name() = "DD" and @class = "keyword"]', bookmarkItem, resolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var j = 0; j < keywords.snapshotLength; j++)
alert(keywords.snapshotItem(j).textContent);
var timestamp = document.evaluate('following-sibling::*[1]/descendant::*[local-name() = "DD" and @class = "timestamp"]', bookmarkItem, resolver, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
alert(timestamp.singleNodeValue.textContent);
}
by Piro : 2005年06月26日 21:51
＞ここは３つのタグを格納するコンテナを持つべき
とは言ってもDLエレメントはDTとDDしか包含できません
一つしかDTを持たないのであればdefinition listsの意味がありませんし
by Anonymous : 2005年06月27日 17:24
>Piroさん
返信遅れてしまって申し訳ありません。実はFFのエクステンション作ったときにちょくちょくサイトで勉強させていただいてました。
そうXPathを使ってしまえば問題なのですよね。油猿はFFだけ考慮すればよいということを、メチャクチャ失念していました。
>Anonymousさん
うーん、僕的にはここでDLタグを使って定義リストにする意味がよくわからないのです。DLを使うメリットがあまりないような。
by Taka : 2005年07月05日 13:06
＞ここでDLタグを使って定義リストにする意味がよくわからないのです
確かに定義リストは使いにくいですが
ブックマークをページのリストと考えれば定義リストが適当かと思います
HTMLの範囲で意味を記述しようと思ったら特に
Firefoxのブックマークも定義リストを使ってますね
by 上のAnonymous : 2005年07月08日 06:39
>確かに定義リストは使いにくいですが
>ブックマークをページのリストと考えれば定義リストが適当かと思います
>HTMLの範囲で意味を記述しようと思ったら特に
>Firefoxのブックマークも定義リストを使ってますね
確かに、セマンティックにいくとDLなのかなぁ…
ただW3Cのタグ自体、一部が現在のスタイルについていけなくなっている気もして、難しいです。
rssのitemのような方法で囲む処理があったらいいなぁ、と思うのですがなんとかならないもんでしょうか。
by Taka : 2005年07月09日 15:39