もしかして: 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 を切り替えるようにしました。

の pipes 作った。
http://pipes.yahoo.com/irons/hatebu_favorite

説明
はてなブックマークのお気に入り機能で、お気に入りユーザが3人以上ブックマークした記事に絞りたいときとかは、http://b.hatena.ne.jp/parkbench/favorite?threshold=3 にアクセスすれば表示できるのに、その RSS が欲しくて http://b.hatena.ne.jp/parkbench/favorite.rss?threshold=3 にアクセスしても、すべてのブックマークが出てきてしまう。RSS だと人数で絞る機能が有効になってないようだ（idea:22487）。その機能が有効になるまでのつなぎとしてこの pipes を作成。

注意
ページをスクレイピングしているのですが、「お気に入りの表示記事数」が 50 件とかだとページサイズが大きすぎて pipes がエラーとなってしまうようです。その場合は表示記事数を少なめに設定するとうまくいくかもしれません。

その他
はてなブックマークお気に入りの全コメント表示フィードパレット
というのもあったんですが、自分の ID で試してみたらなぜか 404 Not Found になってしまって残念。

を作った。

http://labs.irons.jp/search.html

このページを iPhone でブックマークして、ホーム画面に追加して使う（WebClip というらしい）。
検索エンジンを選んで、キーワードを入力して、検索。
単語の意味を調べたいときとかに便利！

ソースを見ると分かりますが、やってることは単純です。
検索エンジンの種類などをカスタマイズしたい人は、コピペして改造して自分のサイトに置くなどしてください。

iPhone を購入しました。ヨドバシカメラで 16 GB ホワイト一括。
まだ操作に全然慣れず、3GS の性能を持て余しています。

au から MNP で iPhone に乗り換えたんですが、アドレス帳を引き継いでもらえませんでした。なんかソフトバンクショップに行けば、サーバを経由して iPhone に移せるらしいです。

Windows な人で au な人なら、MySync Biz を持っていれば、Outlook 経由で iPhone にアドレス帳を移行できます。

1. まず MySync Biz を使って、au の携帯と Outlook のアドレス帳を同期
2. 次に iTunes を使って、Outlook  と iPhone のアドレス帳を同期

以上の手順で iPhone にアドレス帳が移行できました。

作った。
Pipes: Twitter Timeline Viewer

Twitter、前は他の人がどんなタイムラインを読んでいるのか見ることが出来た。でもいつの日からか出来なくなった。

この pipes を使えば、指定したユーザのフレンドタイムラインを見ることが出来る。キーワード検索も可。
他の人の post を見ていて、話の流れがわからないときとかに使うと便利！

注: 単純にその人の following の RSS を全部取ってきているので、following が多い人は表示されるまでに時間がかかります。

注: ときどきエラーとなって何も表示されないことがあります。時間をおいてから再度試してみてください。

追記: UserIcons というサービスを利用させてもらって、ユーザのアイコンが出るようにしました。
追記: rss じゃなくて atom を使えばアイコンのURLが取れることに気づいたので、修正（Fetch Data で取るようにした。Fetch Feed だとアイコンのURLが取れなかったので）。