最速インターフェース研究会

先日のShibuya.js Techtalk#2では開発手法の話とかは(前回話したので)あまりしなかったのですが、そういう話を知りたいという人も多いようなので適当に公開していこうと思います。

http://la.ma.la/misc/js/mechanize/

WWW::Mechanizeと似たインターフェースでIEを遠隔操作するライブラリです。htaから呼び出してテスト用のツールを作ったりします。wshからも使えると思います。
機能的には最低限のものしか実装してません。ファイルのアップロードとかはJS側からいじれなかったと思うので多分無理です。

この手のツールではseleniumというのが有名なのですが、多機能すぎて使い方が良くわからないので自作しました。単純な動作確認や連投に使ったりします。

これを使ってアレをナニしたりしているのですがとてもここには書けません。

JavaScriptとXMLHTTPを組み合わせた動的ロード技術全般に、
なにやらAjaxなる名前がついたらしい。
http://antipop.zapto.org/docs/translations/ajax.html

概論のみではあるけれど、とてもわかりやすく、そして
今までウェブデザイナが何もしてこなかったということが良くわかる。
ここに来てようやく、JavaScriptは評価を高めつつある。
JavaScriptはJavaよりも優れていると、ポールグレアムも言っていることだし。

----
世間がBlogだのRSSだのと騒いでいる間、
JavaScriptばかりいじっていた頭のおかしい人間がここにいるわけで。
iTunes程度のインターフェースであればJavaScriptで作成できます。
http://la.ma.la/filer/

IE、Firefox、Operaで動作確認。CPUが遅いと動作きついかもしれません。検索は完全ローカル、タグの更新が画面遷移なしに動きますがXMLHTTPは使ってません。隠しIFRAMEです。
1GHz程度あれば、ストレスなく動くとは思います。
とりあえず検索が試せるようにダミーのファイルを置いてあります。
ソースは古臭い書き方で参考になりません。ほとんど力技。
説明書なんかはここに。
http://ma.la/mirrorman/wiki.cgi/%e3%83%95%e3%82%a1%e3%82%a4%e3%83%a9%e3%83%bc

デスクトップサーチとか大掛かりなものでなくても、
Ctrl+Fで出てくる検索がこんな感じなら便利なんじゃないかと思う。

検索→選択→タグ付けの流れはブックマークとか、
BlogやWikiのサイトナビゲーション、何にでも使えるような気がする。
一段落ついたら、ちゃんとリファクタリングする予定。

----
Ajax関係のリンク
http://piro.sakura.ne.jp/latest/2005/02.html#d23

「クライアントが貧弱でもサーバが強力なら、連携を密に取りさえすれば何だってできる」

クライアントとサーバー、そのバランスは自由に変えられる。どの処理をどちらにやらせるのかの判別は非常に重要なことになると思う。
GoogleMapsは今まで高価なアプリケーションサーバーにやらせていた「地図の合成」という作業をクライアント側に持ってきた。
アクセス数が増えても地図画像の断片を置くデータサーバーを増設するだけでいいし、今後、P2Pなんかを使ったスマートなキャッシング機構が普及すれば、それすらも不要になるだろう。

頻繁に通信を行うことになっても、うまくやれば通信量もサーバーの負担も減らすことが出来る。

----
俺が今までやってきたことや、これから考えてるのは、Ajaxとはまた少しばかり手法が違うような気がする。
サーバーは本当に単純なデータの受け渡ししか行わず、
むしろ逆にクライアントがデータを検索してサーバーに検索結果を送る、という
JavaScriptで分散コンピューティング的なことを、かなり真面目に考えている。
とりあえずWikiのオートリンクのキャッシュ作りなんかで、実際に使うことになりそうだ。

前回に続き、shibuya.jsでしゃべってきました。

プレゼン資料はこちら。諸事情により少しフォントが小さめです。
http://ma.la/files/shibuya.js/techtalk2.html

JavaScriptが無効でも閲覧できるように画像に変換しておきました。

いくつか補足
- APIは最初から全部できてるわけじゃなく、必要に応じて拡張していく感じ
- 最初はダミーのJSONを読み込ませたりする
- プログラマはクライアント側一人、サーバー側一人、の計二人
- UIを作るのは分業できない気がする。
- 「とりあえず動く」状態ものは10日ぐらいで出来た。3月の頭ぐらい。
- プロトタイプを発展させてって、そのまま本番用になった。
- APIは今のところPlaggerで使ってる例もあるけど(Plagger以外で使ってる例ないけど)、人間向けのサーバーにアクセスが来るのは良くないので、そのうち公式な形でやる予定。

トリガーのデモ。
イベントを一度にたくさんの要素の割り当てるのと同等のことが出来る。マシンが遅いとかなり差が出る。
http://la.ma.la/misc/js/trigger/demo1.html
http://la.ma.la/misc/js/trigger/demo2.html

使いどころが難しいけど強力。onclickとonmousedownとか、特定のイベントしか監視できないのが難点。

そんな感じです。

最近subscribe数晒しが流行っているのでスクリーンショットをとってみた。

全部で2149件。

あと既読も表示にしてレートごとの登録数出してみた。

高い方から271,344,105,12,20,1397件。

なんか数多いけど、未読件数じゃなくて登録件数。これはブックマークレットでも良いけど。

javascript:message([5,4,3,2,1,0].map(function(n){return subs.model.get_by_rate(n).list.length}))

普段はレートが5と4のフィードを読んで、レートの低いのは週末に全部読む。フォルダは使ってない。基本的に4、特に気に入ってるのは5、嫌いなやつは1、みたいな感じでレートをつけてる。上位二つの615件がちゃんと読んでるフィードで、それ以下は読んでも読まなくてもいいや、ぐらいの感覚。人のOPMLをインポートして、面白い記事があればレートを上げて、ノイズが多いと思ったら消す、みたいな事をしてる。

登録数が50とかそこらであれば、RSSリーダーなんて何使っても大差ないんだろうけど、たくさんの記事に目を通したいと思ったら他に選択肢がなくなる。まあ選択肢のある人らは好きなの使えば良いと思う。

検索ベースの使い方をするのであれば、そもそもこの数字自体に大して意味がないけど。(miyagawaさんはある意味bulkfeedsで400万件近いフィードを購読してるとも言えるので)

購読してるフィードを公開する機能とかは、そのうちやります。今別のプロダクトで忙しいので、少しお待ちください。

ref
http://sekimura.vox.com/library/post/how-many-feeds-do-you-subscribe-to.html
http://bulknews.vox.com/library/post/how-many-feeds-do-you-subscribe-to.html
http://antipop.typepad.com/blog/2006/06/how_many_feeds_.html

----
書き忘れた。

使ってるのはlivedoor Readerです。
二番目のスクリーンショットはFireBugです。

最近本棚晒しが流行しているようなので写真を撮ってみた。ちょうどいいサイズで会社の机の下に入れてある。


もちろんこれで全部じゃないけど家に大量に本があるというほどでもない。
本棚はAmazonで1980円で売ってるやつ。ギフト券使って980円で買った。

合わせて買いたいMacBookと本棚。

作った
http://la.ma.la/misc/aws/awasete.html

参考
http://aws.typepad.com/aws_jp/2004/12/ecs.html

タブとスペースの話

ところで、DamianセンセのPerl Best Practiceの影響なのか、最近のPerl界隈では「タブは使うな、スペース使え」と盛んに言われていますが、あえて断言しときます。こんなモンはバッドノウハウなんであって、ベストプラクティスでもなんでもない、と。

自分は行頭はタブで揃えて、それ以降の文字揃えが必要な場合はスペースを使うようにしている。で、萌ディタでタブ幅を動的に切り替えられるようにしている。
srcfile.javascript.txtにこんな風に記述。

var tab_width = 4;
function tab(num){
    App.Prop('srcfile', 'tab-width') = num
}
f.onKey4 = function(){
    tab_width > 1 && tab(--tab_width)
    App.balloon(tab_width)
}; 
f.onKey8 = function(){
    tab(++tab_width)
    App.balloon(tab_width)
};

最初はctrl+4でタブ幅を4に、ctrl+8でタブ幅を8にするようにしてたんだけど1桁ずつの増減にした。タブ幅を8以上にしても無視されるけど。普段は4にして、html書くときとかインデントが深すぎになった時は2にしたり、構造がわかりやすいように8にすることもある。

タブの幅を自分好みにしたいっていうと解決策は色々あるんだろうけど、一番手っ取り早いのはタブを使うことなんじゃないの？タブを使ってインデントしてればエディタの設定だけでファイルの内容に手を加えずに見た目だけ変えられるから楽。

なんかそもそもタブを使わずにスペース4で統一せよってのはフォントサイズをピクセル単位で指定したがるデザイナの言い分みたいで気に食わない。そういうことをプログラマが(多様性が美徳のPerlプログラマが)、言うことに、なんか引っかかりを感じる。行頭以外の箇所でタブを使ってるとひどいことになるけれど、それさえしなければ後は個人が好きにできるようにタブでインデントした方が良いんじゃないの？って思うんだけど。

作りました。
http://la.ma.la/misc/userjs/ldr_add_thumbnail.user.js

こんな感じに動きます。
http://la.ma.la/misc/img/ldr_add_thumbnail.png

SimpleAPIのウェブサイトサムネイル作成API
http://img.simpleapi.net/
を使ったサムネイル表示をlivedoor Readerに加えます。

:sa

もしくは

:simpleapi

で、フィードごとにサムネイルの表示/非表示を切り替えられます。(コロンを打つとコマンド入力ができるので続けてsaエンター)
全部に対して有効にするとSimpleAPIに対する負荷が高そうなのと、キャッシュが無くて画像が出ないことが多いので、フィードごとに設定できるようになってます。いったん設定すれば、次に同じフィードを表示した時にもサムネイルが表示されます。

設定はGM_setValueでローカルに保存されるので複数PCで使う場合には、それぞれ設定してやる必要があります。(もしくはabout:configから設定をコピーするなどしてください)

例によって本体側の仕様変更でいきなり動かなくなる可能性もありますが、よろしければどうぞ。

先日注文したMacBookの黒いやつが今日届いた。

なんか速かったのでムービーとってYouTubeにアップしてみた。
http://www.youtube.com/watch?v=-NkpYMPa3YY

速いとしか言いようがないです。

「Safariでの動作確認を超高速化する裏技」ってタイトルにしようかと思ったんだけどフィッシング詐欺みたいなのでやめた。




なんとかドアポイントで買わないと購入補助が出ないのでアフィリエイトで元を取ろうと思います。
なんとかドアポイントじゃなくても補助がでるみたいですが、アフィリエイトで元を取ろうと思います。

ピンを付けたページ、vまたはctrl+enterで開いたページを全部Google Bookmarksに保存します。
ラベルはLDRとフォルダと2006-05形式の年月を付けるようにしてみた。ここら辺は好みでカスタマイズしてください。
http://la.ma.la/misc/userjs/ldr_gbsaver.user.js

Google Bookmarks
http://www.google.com/bookmarks/

注意
- あらかじめGoogleにログインしておく必要があります
- Google側の仕様が変われば動かなくなる可能性があります
- 削除は外部から叩けないみたいなので、ピンを外しても削除はされません

メリット
- ブックマークしたページがGoogleにインデックスされている場合は全文検索ができる（多分）
- パーソナライズド検索を有効にしたときGoogleの検索結果にラベルが表示される
- IE用のGoogle Toolbar4(beta)からアクセスできる
- Firefox用だとGoogle Bookmarks Buttonという拡張でツールバーからアクセスできます

参考にしたページ
livedoor Reader の、ピンの状態をローカルマシンに保存する greasemonkey スクリプト
http://d.hatena.ne.jp/antipop/20060504/1146730450

Greasemonkey 用スクリプト - Google My Cache
http://espion.just-size.jp/archives/06/094172028.html

----
更新履歴

2006-05-07
- GM_xmlhttpRequestを使うように修正。速くなったはず。
- GM*使えない環境に移植する場合は古いバージョンを参考に。

とりあえず作ってみた。for nazoking.

これ以上スクロールできなかったらホイールで前後のフィードに移動。
次のフィードに移動するまでの閾値を入れられるようにしてある。
http://la.ma.la/misc/userjs/ldr_wheelhack.user.js

あるいは、ほんとに読むことに特化するなら、もうこんなのでいいんじゃないかという気もする。
任意箇所左クリックで次、右クリックで前。
http://la.ma.la/misc/userjs/ldr_clickhack.user.js

要望とかは基本的にブログに書いてくれたほうがありがたいのですが、調子に乗ってあれこれ書かないでください。

そのうち設定インターフェースができるんじゃないかと思いますが、待ちきれない方はGreasemonkeyスクリプトでカスタマイズできます。

Google readerみたいにj/kだけで全部読みたい

Control.go_nextに次のエントリまたは次のフィード、という機能を当ててます。
http://la.ma.la/misc/userjs/ldr_keyhack_jk.user.js

ブックマークレットでもできます。これをアドレスバーにコピペ。
javascript:Keybind.add("j",Control.go_next);void(0)

全てのキーバインドを無効化

Keybind.clear()で全てのキーバインドを無効にできます。
http://la.ma.la/misc/userjs/ldr_keyhack_clear.user.js

はてなブックマークのページにジャンプ。

http://la.ma.la/misc/userjs/ldr_keyhack_h.user.js

----
はてブページにジャンプとか公式にやるのはアレなので、アンオフィシャルな機能はGreasemonkeyでやってください、という感じになるんじゃないかと思います。
本体のスクリプトの更新で、いきなり動かなくなったりする可能性がありますが、よろしければどうぞ。

Shibuya.jsでJavaScriptの開発環境の話なんかをしゃべってきました。

プレゼン資料はこちら。少し内容削ってます。
http://ma.la/files/shibuya.js/techtalk1.html

- ページめくり s/a or space
- 行移動 j/k or enter

Webrickのソースは結構適当でadhocにルールを追加したりしてる。なんかsecondlifeがYAMLで設定かけるようなのを作ったとか何か言ってた。
プレゼン資料だけだとわかりづらい部分があるのであとで個別にエントリを書きます。

http://la.ma.la/misc/js/delicious_bookmarklet.html

作った。

肝心のブックマークレットが無いような気がしたので。
http://subtech.g.hatena.ne.jp/miyagawa/20060412/1144846549

これ参考にした。
http://ejohn.org/blog/super-fast-delicious-bookmarklet/

オリジナルは自動で閉じるポップアップウィンドウを使ってるんだけど、なんかimgタグでもできた。まあいいや。こんにちは。