OTCHY.NET

はてブエントリーページを旧仕様っぽくする Greasemonkey である、はてブエントリーページ旧仕様化 を公開しました。

リリース直後から、様々な非難を受けていた現仕様のはてブエントリーページですが、あれほどの反応にもかかわらず、リリースから 2 ヶ月経っても、旧仕様を選べるようにするなどの対応は取られていないようです。

個人的な感想で言うと、旧仕様の時もスターの数を頼りに流し読みする事もあったし、完全否定という立場ではないのですが、はてブの伸びを表すグラフとか良く見てたので、それが見れないのと、やはり多くの指摘にあるように、時系列でブコメを追いたい時にいちいち違うページを開くのが面倒という思いがありました。

そして 2 ヶ月。1 クリックごとのフラストレーションが、徐々に溜まり続けました。

2 ヶ月経ってもはてなからは特に動きが無いので、これはもう「こっち (運営) でやる気はないから、どうにかしたいならそっち (ユーザ) で何とかしな！」というはてなからの挑戦だと受け取り、上記のスクリプトを書きました。

単に、「すべてのブックマークを見る」にリダイレクトするのではなく、現状のエントリーページの中に、全てのブックマークをスムーズに統合して、出来る限り (記憶にある限り) 旧仕様に近づけているのが特徴です。
「人気のブックマークコメント」情報はあっても良いかと思ったので、項目自体は残しつつ、不要な時は閉じられるように配慮しています。

当初、もう少し簡単に出来るかなと思っていた部分が、案外難しく、はてブ側のスクリプトの中にまで手を入れて実現している機能とかがあります。
はてなで作って使っている JavaScript のライブラリに妙に詳しくなったりしつつ、試行錯誤を繰り返し、ようやく公開出来るレベルにまでなりました。

現仕様のエントリーページに苦々しい思いを持っている方は、是非おためし下さい。

はてなの方へ

上で色々と生意気な事を書きましたが、公式に対応して旧仕様を選べるようにしてもらえるのがベストに決まっています。
公式に対応されればこちらでもアナウンスして、公式機能の利用を促すようにするので、サーバに負荷をかける部分もあって恐縮ですが、公式対応までの間はお目こぼし頂けるととても嬉しいです。

参考にしたページなど

2011-04-05 – はてなブックマーク日記 – 機能変更、お知らせなど
はてなブックマークのエントリーページ改良が何を狙っているのか – 没個性テーマパーク
はてブのエントリーページ“改良”に疑問の声 – さまざまなめりっと
はてなブックマークのUIが大幅リニューアル(個人的に改悪)な件 – y-kawazの日記
新しいはてブが不評と聞いたので、全てのブックマークを見るグリモンスクリプトを作ったよ！（使えるかもしれないものが出来たので追記あり） – 不動産屋のラノベ読み

旧版である、Greasemonkey で 超お手軽に jQuery を使うスニペット は Firefox で使用する分には問題ないのですが、Chrome ではセキュリティ上の都合か、Greasemoneky 上における unsafeWindow が unsafe では無いようで (？) unsafeWindow.jQuery などに Greasemoneky からアクセスすることが出来ません。

そこで、Chrome 対応版のスニペットを用意しました。
ただ、いわば Chrome のセキュリティを回避した書き方になるため、旧版にあった、「該当ページですでに jQuery が読み込まれていればそれを利用」という特徴が失われてしまっています。
逆に言えば、常に自分で指定したバージョンを利用できるので、jQuery の新しい機能を使ったスクリプトを書く場合などは、こちらのほうが優れています。

スクリプト

(function (d, func) {
    var h = d.getElementsByTagName('head')[0];
    var s1 = d.createElement("script");
    s1.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js");
    s1.addEventListener('load', function() {
        var s2 = d.createElement("script");
        s2.textContent = "jQuery.noConflict();(" + func.toString() + ")(jQuery);";
        h.appendChild(s2);
    }, false);
    h.appendChild(s1);
})(document, function($) {
    // ここにメインの処理を書く
    $('#button').click(function(){
        alert('clicked!');
    });
});

複数のパネルが上下に並んでいるようなデザインで、上下の位置を入れ替える UI はよく見ますが、それをぬるっとアニメーションさせるための jQuery プラグインです。

こんな感じに動きます。

詳細は以下の専用ページよりどうぞー。
jquery.smoothswap.js

[を] Google Chart API で日本の都道府県に自由に色が塗れる！すごい！ っていう記事で、Google Map API で日本地図が作れるらしい事を知ったので、さっそくジェネレータを作ってみました。

色を指定した都道府県がその色で塗られた地図を、Google Chart API で作り出します。
ざっくりなので適当ですが楽しんで頂ければ。

ちなみにカラーピッカーは、右下の虹色の丸いアイコンで確定です。ちょっと分かりにくいですよねー。

それにしても Google Chart API すげーなー。

1ミリオンは何万？1ビリオンは何億？

英語で数字を表現する時、当然の事ながら「万」「億」「兆」という単位は使わず、「ミリオン」「ビリオン」などの単位を使いますが、日本語では 4 桁で数字を区切って表現するのに対し、英語では 3 桁で区切って表現します。
会計などで金額を扱う際、カンマを打つ時も 3 桁ごとです。
メモリや HDD の容量でおなじみの SI 単位系も、「キロ」「メガ」「ギガ」と、10³ 区切りです。

これが慣れない。どうしても直感的に変換できない。というかそもそも「直感的」な話ではないですね。
必要になる度に、毎回数字にばらして、桁を数えて…などとしてました。
ですが、いい加減面倒になったので、数値単位変換 っていうツールを作りました。

「1ミリオン→100万」も、「1兆→1トリリオン」も思いのままに変換できます。
同じ悩みのある諸氏は是非ご活用下さい！

技術的な話

とりあえず大きな数を扱うから BigInt だな、という話なんですが、BigInt 同士の演算とか特に不要でしたし、ツールのキモになるのはむしろ「1兆」＝「1,000,000,000,000」というパーサ部分だったので、既存の BigInt ライブラリは特に使わず、独自に実装する事にしました。
効率よりもわかりやすさ重視で、パースしやすいデータ構造を持たせた感じです。

で、肝心のパーサなんですがこれがなかなか大変でした。

「千」だけでも「1,000」ですが、「一千」と書いても「1,000」ですね。
「千百十万」も「1110万」も同じ「11,100,000」です。
さらに、英語の「eleven」はその 1 単語で 2 桁分の「11」を表したりします。

そんなこんなの難問を解決した結果、「1ミリオン」でも「100G」でも「10000000000000000」でも「999億9万9000」でも「壱億弐仟参佰泗拾伍萬陸仟漆佰捌拾玖」でも「fifteen millions and four thousands three hundreds twenty one」でも、正しくパースできるようになりました。

もはや当初の目的を超えて作り込んでしまった感じですが、面白かったので良しとしましょう。