もしかして: blog.iron's.jp

HatebuFriends の棒グラフの UI を改善しました。

ビフォー

アフター

三角形のアイコンを棒グラフの横につけました。

アイコンかグラフをクリックすると、こうなります。

そして共通のブックマークの一覧が表示されます。

今までもグラフがクリック可能だったのですが、そう見えないのが問題でした（マウスカーソルを載せてやっと気づく感じ）。しかもグラフが短いとクリックしづらいのが難点でした。

三角形のアイコンを表示したことによって、クリック可能なのがわかりやすくなったと思います。 またクリックできる領域も広がったので、グラフが短くてもクリックしやすくなりました。

以下、実装方法の話。

1 つの棒グラフの HTML と CSS はこのようになっています。

<div class="setlabel">
<div id="bar_XXXX" class="bar bar_base" style="width: 8.5%;">
<div class="bar" style="width: 3.5%;">

(width は共通のブックマークの割合によって変わる。長いのが水色部分、短いのが青い部分)

div.setlabel {
position: relative;
}
div.setlabel div.bar {
position: absolute;
height: 12px;
right: 0px;
top: 20%;

background: #0033cc;
cursor: pointer;
margin-top: 2px;
}
div.setlabel div.bar.bar_base {
background: #99b3ff;
margin-top: 0px;
border: 0px solid #fff;
border-width: 2px 0 2px 2px;
}
div.setlabel div.arrow {
position: absolute;
height: 16px;
width: 16px;
top: 20%;

margin-right: 2px;
cursor: pointer;
background: no-repeat transparent 0px 0px url(http://labs.irons.jp/img/arrow-right-down.png);
}

div.setlabel.expanded div.bar_base {
border-color: #ffe372;
}
div.setlabel.expanded div.arrow {
background: transparent -16px 0px url(http://labs.irons.jp/img/arrow-right-down.png);
}

三角形のアイコン

JavaScript 部分は以下のようになっています。
div.setlabel の中の 3 つの div の onclick で以下の処理が走ります。

var bar = document.getElementById('bar_' + name);
bar.parentNode.className += ' expanded';

再度クリックしたり、別の場所をクリックすると以下の処理が走ります。

var bar = document.getElementById('bar_' + before_name);
bar.parentNode.className = bar.parentNode.className.replace('expanded', '');

以上のように、親の div.setlabel に対して .expanded というクラスを追加・削除して、On/Off を切り替えるようにしました。

学生時代に研究・卒論からの現実逃避の一環で作り、去年の10月頃公開（1度移転）した HatebuFriends について今更書いてみたいと思います。
(more…)

単にHatebuFriendsのおすすめページのRSSを表示させるだけです。こうなります。

「設定」→「デザイン編集」画面の「ページのヘッダ」欄に以下のタグを追記。

<hatena name="rss" url="http://labs.irons.jp/hatebufriends/parkbench/recommended?range=d1&mode=rss" listlimit="5">

URL中の parkbench は、自分のIDに書き換えてください。
range パラメータは推薦するページの対象期間で、例えば d3 にすると3日以内にブックマークされたページを推薦します。d （n日以内）, w （n週間以内）, m （n月以内）, y （n年以内） または all が使えます。

はてなrssモジュールの使い方はこちら

移転して名前が変わりました（スペースが無くなっただけ）．
「Hatebu Friends」→「HatebuFriends」
「Hatebu Sets」→「HatebuSets」
重い動作は変わらず…．時間があればMySQLかPostgreSQLを試してみようと思います．
HatebuFriendsは推薦ページのRSSが出力されるようになりました．
どうぞご利用ください。

HatebuFriends

好みが似ているはてブユーザを探します．
ブックマークが先か後かの割合によって，Friends，Following，Followersに分けて表示．この名称はTwitterにインスパイア．