mizzy.org

最近、コトノハ にはまってます。シンプルさとゆるさが心地いいっす。こいうのは知り合いのを見るのが楽しいので、知人にも声をかけてるところだったりします。俺のコトリスト。

俺は主にランダムにコトを表示させて楽しんでいるのですが、ランダムのリンク位置が、コトの長さによって変わってしまうので、ポインタを動かさなきゃいけないことがあるのが不満でした。

で、不満があるなら、自分で出来る範囲でなんとかする、というのがポリシーなので、これを解消するための greasemonkey ユーザスクリプトを作成してみました。kotonoha_hotkeys.user.js

このユーザスクリプトは、別にリンクの表示位置を変えるわけではなく、r キーを押したらランダムに飛ぶ、というホットキー機能を追加します。これでマウスポインタの位置を気にする必要なし。

ついでに、p キーで前のコト、n キーで次のコトへも移動するようにもしてみました。満足。

2005/11/15 07:00 追記
たまたまタイミングが重なったのか、これを見て下さったのか、ホットキー機能がコトノハに組み込まれたようです。[f][b] で前後、[r] でランダムだけでなく、[y][n] で○×もつけられるようになってます。素敵です。実は、Firefox 1.5 の greasemonkey がうまく動かなくて、自分で作ったスクリプトが使えないというマヌケな状態だったので、大変ありがたいです。

2005/11/18 01:23 追記
オオヒダさんにお会いする機会があったのですが、全くの偶然だったようです。シンクロニシティってやつですかね。何か運命的なものを感じました（照）。

feedbringer用greasemonkeyユーザスクリプトから呼び出しているcssを若干変更。

今日のメンテナンスで、「このページのトップへ」というリンクが追加され、修正前のcssではこれが左上に表示されて邪魔なので、display: none; で消去。

たぶん、フィードを下まで読んでいって、読み終わったらページの先頭への移動がすぐにできるように追加されたんでしょうが、このcssでは全く使う必要がないので。

それにしても、HTMLがダメすぎ。「ああ、こういうのをdiv厨と呼ぶんだな」という典型的な例。しかも、今回追加されたリンクもに見られるように、classがalign-rightとか、nav-tab-rightとか、思いっきりレイアウトを意識したクラス名になってるし。HTMLやCSSに対して、この程度の理解しかないから、インターフェースもダメなんだろうなぁ、と妙に納得してしまった。（と、自分のことは棚に上げてみる。）

なんかひどいこと言ってますが、それだけ期待してるってことで。

feedbringer用greasemonkeyユーザスクリプトの白黒バージョンを修正しました。俺はこっちの方を常用してるので、今後は白黒バージョンしかメンテナンスしないつもりです。

修正点のひとつは、コードを見直し、少しすっきりさせたことです。（ほんの少しですが。）

それと、もうひとつ大きな修正は、titleに未読数を表示するようにしました。こうすることによって、タブに未読数が表示されるので、Notifier代わりになるかな、と。

こんなことやってても、そのうち本家が改善されて意味がなくなるかもしれませんが、まあJavascriptの練習ってことで。

feedbringer用greasemonkeyユーザスクリプトの白黒バージョンを修正しました。

白黒バージョンではアイコンを強引に入れ替えてるのですが、入れ替わるのが最初にページにアクセスした時だけで、15分毎のツリーメニューのアップデート時には、入れ替わらずにオリジナルの青いアイコンのままになってしまう、というバグを修正しました。

feedbringerはprototype.jsを利用しているので、Ajax.Updater.prototype.updateContentをオーバーライドするという強引な方法で対処しました。もっとスマートなやり方があると思うのですが、他に思い浮かばなかったので。

feedbringer用greasemonkeyユーザスクリプトの色違いバージョンを作成しました。色を考えるのがめんどっちいので白黒で。スクリーンショット。以下の2種類からお好きなものをどうぞ。

• 白ベース＋青バージョン（旧来のもの。微妙に色変えました。）
• 白黒バージョン

feedbringer用greasemonkeyユーザスクリプトを修正。コンテンツ表示領域をスペース/バックスペースキーで順/逆スクロールできるようにした。

まだまだ調整すべきところはあるけど、これでbloglinesから完全に乗り換えできるかな。

greasemonkeyによるfeedbringer remix用のcssを色々いじってみました。cssを適用したスクリーンショット。オリジナルのものと見比べてもらえれば、違いは一目瞭然だと思います。

オリジナルから一番大きく変えた点は、ツリーメニュー表示欄とコンテンツ表示欄をfixにして、別々にスクロールできるようしたことですね。これだけでだいぶ使いやすくなる気がします。

あとは多少レイアウトを変えたり、見やすいように色を変えたりしてますが、まだまだ調整は必要な感じ。というか、自分色のセンスがないので、誰か代わりにやってくんないかなぁ…

このremixによる弊害としては、スペースキーでのスクロールができなくなることですね。どうもfirefoxだと、heightを固定してoverflow: autoでスクロールさせるようにすると、スペースキーがきかなくなるようです。

が、そこはgreasemonkeyなので、Javascriptでなんとでもできるでしょう。今後はその辺りに手を入れていこうと思ってます。

俺はbloglinesを常用しているのですが、動作が重かったり、bloglinesおじさんがしばしば登場したりしても、他に魅力的なウェブベースのフィードアグリゲータがなかったので、特に乗り換えは考えていませんでした。

そんな俺が、はじめて乗り換えてもいいかな、と思えるアグリゲータに出会いました。 ソーシャルブックマーク経由で知ったfeedbringerというやつです。

まだできたてのαサービスということもあり、色々不満はあったりしますが、ベースの部分は非常に自分好みなので、今後の改良に期待しつつ、期待するだけでなく自分でremixして使いやすくしていこうかな、と考えていたりします。

そこでremixの初手として、cssを入れ替えるためのgreasemonkeyスクリプトを作ってみました。まずは見た目から、ってことで。feedbringer.user.js

user cssでやってもいいんでしょうけど、単一のサイトに適用するのであれば、greasemonkeyの方がやりやすいですし、javascriptをつかえば、デフォルトで適用されたスタイルを全部無効にできるので、こちらの手法を採用しました。

とはいうものの、まだ全然cssの方は書いていないのですが…今後cssを書きつつ、javascriptで機能面のremixもしていこうかな、と考えています。いつもの通り、途中で投げ出すことも大有りですが、feedbringerを常用するようになれば、継続的にremixしていけるかな、と。そのためには、魅力的なサービスの提供をぜひお願いしたいです。＞ feedbringer開発元様

とりあえずは、HTMLがdiv厨っぽい感じなので、これを何とかしてもらいたいなぁ…

feedbringer 使うのやめた、とか言っておきながら、feedbringer remix ネタ。別に feedbringer じゃなくても良かったのですが、 ONJava.com: AJAX: How to Handle Bookmarks and Back Buttons を見てたら実験したくなったのと、そういや feedbringer 使うのやめた理由のひとつは、「戻る」「進む」ボタンが使えないからだったなぁ、ということを思い出したので、上記 URL にあるテクニックを feedbringer に適用してみることにした。

いつものごとく、greasemonkey で remix です。 feedbringer_enable_back_and_forth.user.js

実験ということもあり、自分のスキル不足もあってかなりいいかげんなスクリプトですが、簡単に解説を。

// feedbringer_enable_back_and_forth.user.js から抜粋

var js = document.createElement("script");
js.language = "javascript";
js.src = "http://mizzy.org/js/dhtmlHistory.js";
document.body.appendChild(js);

まずこの部分では、上記 ONJava.com サイトで紹介されている、 Really Simply History framework のdhtmlHistory.js を読み込んでいます。

// dhtmlHistory.js から抜粋

dhtmlHistory.initialize();
dhtmlHistory.addListener(historyChange);

function historyChange(newLocation, historyData) {
    $('main').innerHTML = historyData;
}

dhtmlHistory.js の最後に、上の6行を追加しています。本来であればユーザスクリプト側に書くべきなんでしょうが、dhtmlHistory.js を読み込み終わってから実行しないエラーとなるため、面倒なのでこっちに書いちゃいました。読み込み完了してから実行する方法がよくわからんし。

ここは dhtmlHistorty オブジェクトの初期化処理ですね。 dhtmlHisotry.addListener が重要なとこで、「戻る」「進む」ボタンを押した時に、どういった処理を実行するのか定義します。ここでやっていることは、後ほど出てくる dhtmlHistory.add によって記録された historyData を、 id が main であるコンテナに書き戻す、ということをやっています。

// feedbringer_enable_back_and_forth.user.js から抜粋

Ajax.Updater.prototype.extend(Ajax.Request.prototype).extend({
  ...
  updateContent: function() {
     ...
     if (receiver) {
       if (this.options.insertion) {
         new this.options.insertion(receiver, response);
       } else {
         receiver.innerHTML = response;
         
         var date = new Date();
         dhtmlHistory.add('key' + date.getTime() , response);
         
       }
     }
  ...

ユーザスクリプトで prototype.js の Ajax.Updater を上書きしています。太字の部分を追加しただけですね。xhtmlHttpRequest のロードが完了した時点で、dhtmlHistory.add を実行して、 location.hash の値と、それにひもづくデータを historyStorage オブジェクトに格納、でもって location.hash をここで指定された値に書き換える、ということをやってます。

スクリプトの解説は以上です。これで「戻る」「進む」ボタンを押すと、最初の方に出てきた dhtmlHistory.addListener で指定された historyChange が実行されて、変更された location.hash にひもづく historyData を historyStorage オブジェクトから引っ張り出して、id が main であるコンテナに書き戻す、という具合になります。

今回の例では id=main コンテナ決めうちで書き換えしてますが、 dhtmlHistory.add で格納できる historyData は、 文字列だけじゃなくオブジェクトも指定できるので、 やろうと思えばもっと複雑なこともできますね。

上記 ONJava.com サイトによると、Backbase や Dojo なんかは、こういったヒストリフレームワークが実装されているようです。prototype.js にも実装してほしいっすね。

「ブログのサイドバーをパーソナライズ」につづく、読者によるカスタマイズシリーズ第2弾。

ブログエントリの表示で、概要だけ表示して「続きを読む」で全文にリンクするようなやり方は、読む立場としては自分はあまり好きじゃなかったりします。が、書く立場としては、文章が長すぎるから、まずは概要だけ表示した方が親切だろう、とか、ネタバレがあるからいきなり表示しちゃまずいだろ、とか、色々と配慮して概要だけ表示しているものと思われます。

この辺りは一長一短もあり、好みの問題もあるため、一概にどちらがいいとも言えませんよね。それならば、読む側が全文/要約表示を選択できるようになれば、どちらがいいとか悩む必要がなくなるよな、ってことでちょいと実装してみました。

エントリ一覧が表示されるページのサイドバーに、「表示オプション」というのをつけて、ここで選択できるようにしています。（個別エントリページでこれをご覧の方は、トップへ移動してみてください。

デフォルトでは全文表示になっていますが、「要約表示」を選択すると前半だけ表示して、（続きを読む）リンクが現れます。

実装はseemoreプラグインをちょっとカスタマイズして、Javascriptでページ切り替えとcookieのハンドリングをしています。

自分自身は最初に言っている様に、「続きを読む」があまり好きではなく、このブログは基本すべて全文表示なので、ここで実装するのはあまり意味がないのですが、「こんなのどう？」というのをただ言葉で言うだけではなく、実装してみることに意味があると思ってます。

最近のブログって、管理する側にとってはどんどん高機能化していってるけど、読む側に利便性を提供するような機能はまだまだだ不十分だと思うんですよね。その辺りを今後も問題提起して、言葉で指摘するだけじゃなく、実際に実装してみせる、ってことをやっていきたいな、と。