OTCHY.NET

カッとなって書いた。後悔はしていない。

ブックマークレット版
Gsmall

javascript:(function(d,s){s=d.createElement('link');s.rel='stylesheet';s.type='text/css';s.href='data:text/css;base64,LnB3LC5mTiwuQmt7Zm9udC1zaXplOjkwJX0uQWssLnhZLC5uTSwudkJ7Zm9udC1zaXplOjgwJX0uV3IsLlQtSSwuSi1NLC5ha2h7Zm9udC1zaXplOjEycHh9';d.body.appendChild(s)})(document.getElementById('canvas_frame').contentWindow.document);

2011-12-14 追記

Greasemonkey 版が上手く動いたり上手く動かなかったり、多分タイミングの問題とかあって対応が面倒なので取り下げます。
個人的には Gmail 画面は一回開いたら開きっぱなしなので、ブックマークレット版だけで十分だったりするのです。
それと、ブックマークレット版は CSS の短縮化と適用範囲の拡大を行いました。

Greasemonkey 版
インストール

// ==UserScript==
// @name           Gsmall
// @namespace      http://www.otchy.net/
// @include        https://mail.google.com/mail/*
// @version        1.0.0
// ==/UserScript==

(function (d, func) {
	var h = d.getElementsByTagName('head')[0];
	var s = d.createElement("script");
	s.textContent = '(' + func.toString() + ')(document);';
	h.appendChild(s);
})(document, function(d) {
	var d = d.getElementById('canvas_frame').contentWindow.document;
	var s = d.createElement('link');
	s.rel = 'stylesheet';
	s.type = 'text/css';
	s.href = 'data:text/css;base64,LnB3e2ZvbnQtc2l6ZTo5MCV9LnhZe2ZvbnQtc2l6ZTo4MCV9Lm5Ne2ZvbnQtc2l6ZTo4MCV9LnZCe2ZvbnQtc2l6ZTo4MCV9Lldye2ZvbnQtc2l6ZToxMnB4fS5ULUl7Zm9udC1zaXplOjEycHh9LkotTXtmb250LXNpemU6MTJweH0uYWtoe2ZvbnQtc2l6ZToxMnB4fQ==';
	d.getElementsByTagName('head')[0].appendChild(s);
});

Gresemonkey (など) のスクリプトをインストールすることなく任意のサイトでちょこっと試すためのブックマークレット。
起動すると、user.js の URL を聞いてくるので、入力すると今開いているページにそのスクリプトを読み込みます。
単にその user.js をそのページに追加するだけの単純な仕組みなので、GM_* 等への対応はありません。

任意のサイトを対象とした user.js を書くにあたって、自分のテストを楽にするために書きました。

GM Test

javascript:(function(d){var%20a=prompt('Enter%20script%20URL.');if(a){var%20s=d.createElement('script');s.src=a;d.getElementsByTagName('head')[0].appendChild(s);}})(document);

現在の Google の SERPs に対応した GoogleFloatingForm を公開しました。
検索結果をスクロールしても検索窓がついてくるっていう例のアレです。

旧版までは、アニメーションとか使ってそれらしく見せていたんですが、今バージョンからは単に position:fixed で固定しています。Google のデザインがどんどんシンプルになっていくので、それに合わせたというか、ぶっちゃけていうと DOM が大きく変わったのでそれに追随するのが面倒だったというか。

なので実装としては、動的に CSS を追加しているだけなので、そんなんユーザスタイルシートとかでやれよ、ってのはごもっともな指摘ですが、まあ誰でもワンクリックで適用出来るっていうメリットが大きいのでいいのです。

ところで、ずっと Chrome で動作確認していて、使いながらバグを取ってそろそろいいかな、と思ったので公開に踏み切ったわけですが、最後に Firefox で確認してみるとこれが予想以上にぼろぼろでした。
position: fixed の挙動に関して、そんなに違いがあるんでしょうかね？

SERPs の DOM の入れ子の状態が、見た目から予測される入れ子と大きく違っていたせいで、色々と position をいじり倒しているせいかもしれません。
なので、Firefox の方はごめんなさい。上手く動いてません。

はてブエントリーページを旧仕様っぽくする 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!');
    });
});