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

JRA の各レースの出馬表ページで使うブックマークレット。
対戦成績表を表示

使うと、ページの一番下にこんな感じの表が表示されます。

各馬の過去4走成績を時系列上に表示します。
馬番やレース名にマウスオーバーすると、馬名やレース詳細が表示されます。

こういう風に表示すると、出走馬同士の関連がわかりやすくていいと思います。

Yahoo!スポーツ 競馬にも対戦成績表があるけど、対戦してない馬のレースは表示されないので、このブックマークレットとはちょっと違います。

まだとりあえず動く程度の出来です。
追記: うまく動いてなかったので修正しました。

よく使うものやときどき使うものやほとんど使ってないものを列挙。

どこでも

Shorten with bit.ly (via bit.ly Tools ページ)

delicious を表示 (via delicious ヘルプページ)

はてブを表示

はてブでブックマークする (via はてブ設定ページ)

Google  で関連ページを検索

HatebuSets で関連ページを検索

このページをはてなアンテナに追加 (via はてなブックマークレット)

このページを含むはてなアンテナ

tako3

パックマン （読み込み後にダブルクリックでスタート）

ブログ用

livedoor Reader に登録 (via livedoor Reader ブックマークレット)

Google Reader に登録 (via Google Reader 設定ページ)

LDRLens で関連フィードを検索

RSSバトラーで対戦

twitter 用

ふぁぼったーを表示

favstar.fm を表示 (参考: favstar.fm の bookmarklet ページ)

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