Hatena::Groupchronicle

記憶する部屋

2009-03-06

[]はてブ新着エントリーやお気に入りページで閾値を追加するGreasemonkey

はてなブックマークの新着エントリーなどでは、users数を決めることができます

これは、設定などから3usersか5usersか決められるのですが、そもそもどういう設定かというと新着エントリーに表示する最低ブックマーク数(閾値)を指定するというものです。

3usersなら、最低3人以上がブックマークしたエントリーを新しい順に並べて表示という意味ですね。もちろん5usersなら最低5人以上という具合。で、実はこの最低人数の指定は3と5users以外にも、もっと自由に指定することが可能です。

http://b.hatena.ne.jp/entrylist?sort=hot&threshold=5

これが5usersの場合の指定、末尾の5という数字を変えてみると

http://b.hatena.ne.jp/entrylist?sort=hot&threshold=10 10users

http://b.hatena.ne.jp/entrylist?sort=hot&threshold=25 25users

http://b.hatena.ne.jp/entrylist?sort=hot&threshold=50 50users

という具合に、最低人数の指定を自由に変えることができるわけです。

こうやって人数を絞り込むことで、基準を上げ注目されている情報を得るとか、またこの指定は新着エントリーだけでなくURL検索したページやタグキーワードのページでも同様に使えますから

という具合に情報を選別することも自由にできます。



とは言え、毎回毎回usersの数字を打ち直すのはメンドイですよね。

なので、こういうGreasemonkeyを作ってみました。

はてブ新着エントリーやお気に入りページで閾値を追加するGreasemonkey

画像の通り、新着エントリーのページでusers数の部分に3users、5users以外にも追加します。

インストール

http://userscripts.org/scripts/show/43636

インストールはこちらから


概略

適用するページは

http://b.hatena.ne.jp/entrylist

http://b.hatena.ne.jp/entrylist/fun

http://b.hatena.ne.jp/entrylist?url=http://sample.com/

http://b.hatena.ne.jp/t/tag

http://b.hatena.ne.jp/keyword/keyword

新着エントリーカテゴリ別新着エントリーURL検索タグ別・キーワード別の新着エントリーになります。

また各ユーザーごとのお気に入りのページでも同様に、users数を追加します


http://b.hatena.ne.jp/userID/favorite

こちらの場合は、新着エントリーよりは人数の指定を細かくしています*1

この人数の指定ですが

menu.entrylist = [ 10,25,50,100 ];	// ex. http://b.hatena.ne.jp/entrylist*

menu.favorite = [ 4,5,8,10 ];		// ex. http://b.hatena.ne.jp/sample/favorite*

Greasemonkeyエディタなど開いて、こちらで設定できます。上が新着エントリーでの指定、下がお気に入りページでの指定になります。

もうちょっと数が多い方がいい、とかありましたら項目を追加・変更してみてください。

例えば

menu.entrylist = [ 10,30,50,80,100,150,200 ];	// ex. http://b.hatena.ne.jp/entrylist*

こんな風にもできます。


おまけ機能

個人的にはこの欄の並び

フィルタ: 3users 5users なし 人気順

の「なし」の位置が気になってます。

この「なし」はブックマークされた順番に並べる、……つまりフィルタが1usersということで、最低人数が1人以上のブックマークという意味でもあるのですが、並んでいる位置がおかしくね?と思ったので、このGresemonkeyでは行頭に順序を変更しています。

その機能が必要でない場合は

var eid_sort = true;

を false にしてください。


[どうぞご利用ください。]


関連リンク

はてなブックマークの新着/注目/人気エントリーページに新着ブックマークページへのリンクを付けるGreasemonkeyスクリプト - つれずれなるままに…

こちらは id:Yuichiroud:id:YuichirouさんによるGreasemonkey

ちょっとややこしいのですが、はてなブックマークには新着エントリーと新着ブックマークがあります。新着エントリーエントリー時系列に並んだページになりますが、新着ブックマークは文字通り、エントリーではなくブックマーク時系列で並んだページです。

具体的には

http://b.hatena.ne.jp/bookmarklist?url=http://www.nicovideo.jp/

このページなら、ニコニコ動画ブックマークしたユーザーコメントなどが見れるわけです。

ただページへの導線がリニューアル前のはてなブックマークには用意されていたのですが、現在はなくなったのでそれを補うというGreasemonkeyです。今回、users数を追加するGreasemonkey制作するのに参考にさせていただきました。

もちろん、このGreasemonkeyとの併用も可能です。

*1:お気に入りに登録する人数にもよるのですが、仮に100人のユーザーをお気に入り登録していたとしても、25usersの指定だと相当絞り込まれるのであまり有益ではない……だろう、と考えました。

美雨美雨2009/12/10 21:32インストールしてみました。
人気順を追加したいのですが、どのように修正すればいいですか?

rikuorikuo2009/12/10 22:11> 美雨さん、コメントありがとうございます。

> 人気順を追加したい
こちらは、エントリー文中の

> 関連リンク
以降のことでしょうか?こちらは、Yuichirouさんのユーザースクリプトですから
http://d.hatena.ne.jp/Yuichirou/20081223#1230034075
こちらからインストールしてください。

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:この仕様はそれはそれで問題だよなぁ