ブログにはてブのコメントを組み込む その２

注)最新の情報はインポートはてブスクリプト(設置方法と注意点)を参照。

あまりにもブサイクだった、はてブのコメント取り込み表示。
※参考

やはり見た目は大事なので、綺麗にしようと思ったんだが、いかんせん俺はデザイン能力がかなり低い。
最近では、CSSのみでグラフ表示されたり、表作られたりしてるんだが、そのグラフや表の使い道がうまく思い浮かばない程度の俺が取れる手段はただ一つ。

そうだ！本家のデザインを拝借しよう！

ってな訳で、ちょっぴりインスパイアーってやつです。
んで、できたのがこれ。

はてブユーザーのプロファイル画像もリンクして、見れるレベルにはなったと思う。

作ったCSSはこれ。

/* HatenaBookmark */
.zero_hatebu_title {
font-family: Arial, Sans-Serif;
color: #66c;
font-size: 16px;
font-weight:bolder;
border-bottom: 1px solid #5279E7;
}
.zer0_hatebu_menu {
color: #66c;
margin: 2px 10px 2px 10px;
font-size: 80%;
text-decoration: underline;
cursor: pointer;
}
.zero_hatebu_box {
background-color: #fff;
}
.zero_hatebu_body {
color: #000;
}
.zero_hatebu_box ul {
border-top: 1px solid #5279E7;
background-color: #edf1fd;
list-style-type: none;
padding: 5px;
margin: 0px;
list-style-type: circle;
list-style-position: inside;
font-size: 90%;
line-height: 120%;
}
.zero_hatebu_dtm {
font-size: 80%;
}
.zero_hatebu_img {
border:none;
}
.zero_hatebu_name {
}
.zero_hatebu_tag {
font-family: Arial, Sans-Serif;
color: #66c;
font-size: 60%;
text-decoration: none;
}
.zero_hatebu_comment {
color: #666;
font-size: 12px;
}

これをファイルにしてインポートするなり、ブログデザインのCSSに付け足すなりして下さい。

あ、そうそう。XML(RSS) → JSON する時に、デフォルトではdrk7.jpさんのサービス使ってるんだけれども、どうもキャッシュの時間が長いので、自分で cgi 設置できる人は XML 読み込んで JSON 返せば幸せになれます。
その時のCGI側の仕様は

param1 ･･･ var
param1 ･･･ url
response ･･･
print "if (typeof($var) == 'undefined') $var = {};\n";
print $json;
print "if (typeof($var.onload) == 'function') $var.onload($var.data);";
呼び出し例 http://hogehoge.com/xml2json.cgi?var=AAA&url=http://fugafuga.com/rss

みたいな感じで、var に変数名を取り、onload がコールバックされるようにしてネ！

追記:2007/10/10 これ作った後(2006/09/21)に、
はてなブックマークコメントその場で表示ライブラリとは – はてなダイアリー
が発表されたので公開終了
追記: 2006/08/27 00:30 hatebu_comment-1.2.0.jsから、自分のサイトの cgi 使うようにしたので、proxy 属性は基本的にいらないです！javascript も css も直接リンクしてくれてもいいです！詳しくはインポートはてブスクリプト(設置方法と注意点)で。(ってか、誰か組み込む人いるのだろうか!?)

で、昨日の div タグに属性 proxy 属性を入れれば OK。

<div id="hatebuComment" url="http://fugafuga.com/permalink"
proxy="http://hogehoge.com/xml2json.cgi?" ></div>

これが設置、設定までの簡単な概要。

んで、ここで話は一転。
実はこれって、FireFox の Greasemonkey って機能使えば簡単にできちゃったりする。
っていうか、いぬビームさんが既に全サイトはてブ化・その場コメント・ワンクリブクマなるものを作ってるから、個人で楽しむにはこんな事する必要がない。

では、何故わざわざ自分で作成するのかというと。。。

FireFoxが好きになれないんだ！

こんな事を言うと、「ふっ、いまや Google も全面バックアップしてる FireFoxも使いこなせない雑魚め！」とか言われそうだけども。
そんな俺も、反Microsoft ＆ 反IE の時代があって、Netscape使ってみたり、Opera使ってみたり、FireFoxが出た当時は使ってみたりもしたもんだ。。。
でも、業務アプリ作ってると必ず思う事が一つあるはず。

IE以外のブラウザなんか消えてなくなっちゃえばいいんだ！

だって、テストめんどくさい。。。

あと、plug-in でごちゃごちゃ自分設定できるのは、凝ってるときは楽しいんだけれども、会社や出先や自宅のデスクトップやノートを渡り歩いてると設定統一するのがめんどくせぇぇええ。
かの有名なはまちちゃんも

ぼくも Firefoxとかチョイチョイって感じでかっこよくつかいこなしたりして、
「ははは。まだ IE なんてつかってるひといるの？ はははは」
なんて感じで、ちょっぴり見栄はっちゃったりしたいです！

だれかたすけて！
Firefox を好きになれない 3つの理由

と言っている。

おれもたすけて＞＜

* 関連記事
ブログにはてブのコメントを組み込む その１
インポートはてブスクリプト(設置方法と注意点)