iPhone 用検索ページ
に検索エンジンの編集機能を付けました。
最近のブラウザ（Firefox 2+、Safari4、IE8）に搭載されている DOM Storage というデータ保存機能を使って、設定を保存しています。ブラウザを再起動しても設定は消えません。
DOM Storage は Cookie と違って、毎回にサーバに送ろうとしない、5MBとか比較的大きなデータを保持できるらしいです。
文字列でしか保存できないので、json2.js を使って JSON 形式に変換して保存しています。
ということで、並べ替えたり、好きな検索エンジンを追加できます。
URL 中の %s の部分にクエリが入ります。URL を空にすると、グループ分けの名前になります。
target（新規ページで開くかどうか）、method（GET or POST）、文字コードの設定機能も付ける予定です。
ユーザ名をカンマ区切りで指定してリストが作成できます。
入力するものは「自分のtwitter id」、「リストの名前」、「公開範囲」、「リストメンバーの twitter id （CSV形式、カンマ区切り）」です。
twitter 上だと、ユーザを一人ずつリストに追加して行くしかなさそうなので作成。同様のツールはありそうだけど。
twitter の List API を使ってます。ユーザ名とパスワードは twitter.com に直接送られるので、こちらのサーバには送られません。
良かったら使ってください。
API の返り値のチェックをしていません（iframe を作って、そこに向けて form を submit することで API を叩いているので、返り値のチェックができない）。そのため、うまくリストが作成できていないことがあります。途中で止まることもあります。。アルファ版ということでご了承ください。。
リストにメンバーを追加する API は、数字のユーザ ID を使うので、screen_name からユーザ ID に変換する API を自前で用意して使っています。
JRA の各レースの出馬表ページで使うブックマークレット。
対戦成績表を表示
使うと、ページの一番下にこんな感じの表が表示されます。
各馬の過去4走成績を時系列上に表示します。
馬番やレース名にマウスオーバーすると、馬名やレース詳細が表示されます。
こういう風に表示すると、出走馬同士の関連がわかりやすくていいと思います。
Yahoo!スポーツ 競馬にも対戦成績表があるけど、対戦してない馬のレースは表示されないので、このブックマークレットとはちょっと違います。
まだとりあえず動く程度の出来です。
追記: うまく動いてなかったので修正しました。
よく使うものやときどき使うものやほとんど使ってないものを列挙。
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 を切り替えるようにしました。