Hatena::Groupchronicle

記憶する部屋

 | 

2009-03-01

はてなブックマークコメント欄仕様について整理してみた

はてなブックマークコメント欄仕様について、Greasemonkeyなどを制作していて色々と気がついたことがあったので、メモがてら。同じくユーザースクリプトユーザースタイルシートなどを制作されるときに参考になるかなとまとめておきます。

はてなブックマークコメント欄については、ログイン時・ログアウト時でもページの構成や広告の有無などで異なるのですが、

(例えばユーザー登録していないと表示される説明文とか)

今回は特にユーザーコメント部分での違いについて解説していきます。


あくまで簡略的に書いてみましたが、コメント部分は基本的にはこういう構成ですね

<ul class="userlist bookmark-list" id="bookmarked_user">
	<li id="bookmark-user-ユーザーID">
		<a href="/ユーザーID/"><img /></a><!-- ユーザーアイコン -->
		<a href="/ユーザーID/yyyymmdd#bookmark-ID" class="username">ユーザーID</a>
		<span class="tags"><a>タグ1</a>, <a>タグ2</a></span>
		<span class="comment">コメント</span>
		<span class="timestamp">yyyy/mm/dd</span>
		<!-- はてなスター -->
		<span class="hatena-star-comment-container" style="display: none;"><img></span>
		<span class="hatena-star-star-container">
			<img class="hatena-star-add-button" />
			<a><img class="hatena-star-star"/></a>
				:
		</span>
	</li>
</ul>

なんですが、li要素のclass属性ブックマークの状態に応じて、色々と追加されるのでそこに今回は注目してみました。


コメントがある場合

まァまず基本的な状態

<li id="bookmark-user-mereco">
	<a href="/mereco/"><img /></a><!-- ユーザーアイコン -->
		:	<!-- 略 -->
</li>

コメントがあり、且つコメントしたユーザーとは閲覧ユーザーが異なる場合は特にclass属性はつきません。


コメントがあり、また自分コメントの場合

<li id="bookmark-user-rikuo" class="self">
	<a href="/rikuo/"><img /></a><!-- ユーザーアイコン -->
		:	<!-- 略 -->
</li>

この場合は、「self」が指定されています。

他のユーザーと区別しやすいようにユーザー名が太字になるなど、一部独自の設定がされています。


コメントがない場合

<li id="bookmark-user-sample" class="nocomment">
	<a href="/sample/"><img /></a><!-- ユーザーアイコン -->
		:	<!-- 略 -->
</li>

コメントが書かれていない場合は、「nocomment」が設定されています。

ですので、ユーザースクリプト等でコメントの有無を判別するには、class属性をチェックするのが簡単でしょう。


お気に入りでハイライトの場合

<li id="bookmark-user-zonia" class="bookmark-list-highlight">
	<a href="/zonia/"><img /></a><!-- ユーザーアイコン -->
		:	<!-- 略 -->
</li>

お気に入りに登録しているユーザーブックマークしていたとき、コメント欄の上部「お気に入り」の欄でポップアップでそのコメントを見ることができます。このとき、色がついているコメント部分には一時的にclass属性に「bookmark-list-highlight」が設定されています。


まぁ、ここまでは比較的分かりやすいのですが、なかなか気が付き難いケースとして、はてなブックマークプライベートで利用しているときの状態です。

プライベートの場合

class属性の説明の前に、ややこしいのでまずはプライベートモードの説明について

プライベートモードだと、錠前アイコンが表示されています)

はてなブックマークは誰にでも見れるパブリックな状態の他に、非公開・プライベートでも利用することができます。つまり誰にも見せないブックマークというわけですね。しかし、自分以外のユーザーにも公開範囲を限定してプライベート、というSNSっぽいこともできます、

その設定範囲とは

という2種類の設定になります。


で。


それを踏まえて、

通常プライベートで利用しているときブックマークコメントを書いても、コメント一覧には表示されないのですが*1、このとき「閲覧許可グループ」を

設定した場合にはこのように表示されます。

(id:LastWillは私のサブアカウント

というわけですげぇ複雑なんですが、このとき

<li id="bookmark-user-LastWill" class="private">
	<a href="/LastWill/"><img /></a><!-- ユーザーアイコン -->
		:	<!-- 略 -->
</li>

class属性に「private」と設定されます。

ちなみにこれは前述の通り、閲覧者が「閲覧許可グループ」に入っているというケース。ここではg:chronicleが許可グループに設定されていますから、参加メンバーであるid:rikuoでログインしていたときのclass属性です。

再度整理すると

という条件が重なると、class属性に「private」と設定されます。


プライベートでさらに自分の発言だったとき

プライベートユーザー自身が閲覧者の場合は

<li id="bookmark-user-LastWill" class="self self-private private">
	<a href="/LastWill/"><img /></a><!-- ユーザーアイコン -->
		:	<!-- 略 -->
</li>

自分の発言なので「self」

プライベートなので「private」

さらに、プライベート自分の発言なので「self-private」

の3つが設定されるというわけです。


というわけで

このような仕様になっています。

当然、それぞれの組み合わせもありますから

コメントなしで自分ブックマークの場合
<li id="bookmark-user-hoge" class="self nocomment">
プライベート自分ブックマークで、ハイライトの場合
<li id="bookmark-user-hoge" class="nocomment self self-private private bookmark-list-highlight">

という感じなります。


まとめ

以上がブックマークコメント欄での仕様の解説でした。

特にプライベート辺りがちょっと難しく気が付き難いので、不具合がありそうですからこうやってエントリーにまとめた次第。またプライベートモードでは「閲覧許可グループ」を使わない状態であってもコメント一覧に表示する仕様の方が便利だと思うんですが、なんでこんな仕様なんだろう?




ちなみに、以前(リニューアル直後には)はあったのに現在はなくなったclass属性もあります

以前はあったclass属性

<ul class="userlist bookmark-list" id="bookmarked_user">
	<li id="bookmark-user-ユーザーID" class="odd">
	<li id="bookmark-user-ユーザーID">
	<li id="bookmark-user-ユーザーID" class="odd">
	<li id="bookmark-user-ユーザーID">
	<li id="bookmark-user-ユーザーID" class="odd">
	<li id="bookmark-user-ユーザーID">
	<li id="bookmark-user-ユーザーID" class="odd">
	<li id="bookmark-user-ユーザーID">
		:
</ul>

という感じで、「odd」という設定もありました。

oddとは奇数という意味で、その通り奇数番のli要素にそれぞれつけられていましたね。うろ憶えなので奇数の基準が上からだったか、下からだったかはちょっと定かではありませんが。

これはCSS3でいうところの

li:nth-child(odd){
	background-color: color;
}
li:nth-child(even){
	background-color: color;
}

といった指定が簡単にできる、ということでしょう。

おそらくそうした構想が当初はあったのだと思われます。具体的には、コメント一覧が全て同じ色よりも奇数のときだけ背景色が少し変化があると、可読性が向上するという効果が考えられます。

(これはイメージ図)

ただ実際には使われることなかったので、廃止されたようですね。



*1:この仕様はそれはそれで問題だよなぁ

 |