2005-06-29

XMLはメタデータというより生データとしての利用価値が高まりつつあり、AjaxによるUIの切り離しがそれを加速する

全部まとめて色々書こうかと思ったのだけれど、どうにも上手くいかないので、少しずつ分割して書くことにする。

まず最初にこれなのだけれども
http://johnvey.com/features/deliciousdirector/

これは何かというと「JavaScriptで書かれたdel.icio.us APIのクライアント」である。最初に全てのブックマークを受信して、その後のタグによる絞込みなんかは全てJavaScriptで行う、というものだ。

とりあえず、実際にこのデモを見るのが早いだろう。
http://johnvey.com/features/deliciousdirector/demo.html

この方式では、ブックマークの件数が1万件を超えるようなケースになると破綻することがわかっている。

del.icio.usのAPIでは特定のタグを含むブックマークを取り寄せることも出来るので、いちいちサーバーと通信して絞り込んでいくような実装も出来たはずだが、なぜ最初に全件受信して通信せずに検索をやらせるかと言うと、そっちの方が速いしサーバーに負担もかからないからだろう。

使ってるマシンのCPUが遅くて、回線だけは光速で、del.icio.usのサーバーのCPUリソースが余りまくっているのであれば、サーバーサイドで検索をやらせたほうが速い、ということになるが、そういうケースの方が稀である。

実際は個人のブックマークの件数などタカが知れているので、最初に全部受信したほうが良い、ということになる。

----
重要なことは何か。

「del.icio.us direc.torはどこでも使える」ということだ。del.icio.usのキラーアプリケーションというような記述も見かけたが、何もこれは「del.icio.us専用」というわけではない。
例えば、この優れたタグブラウザをはてなブックマークで使いたいと思う人がいたとして、はてなブックマークがdel.icio.usと同じ形式で出力するAPIを備えていれば、後はチョコチョコと変更を加えるだけで、ほとんどそのまま動かすことが出来るはずだ。

あくまでも、APIが提供されていればの話だが「この程度」のインターフェースであれば、どこでも見かけることが出来るようになるだろう。

Ajaxと他のリッチクライアントの最も大きな違いはここにある。強制オープンソースであるゆえに、全てのコードとノウハウは簡単に使い回すことができ、そして、恐ろしい速度で進歩している。

ウェブサービスが共通のAPIを備えていて、XMLによる生データの提供がされていれば、Ajaxを使って最強に強まったユーザーインターフェースが、どこにでも移植可能である、ということ。

----
例えば検索エンジンであれば、検索結果をRSSで出力して、OpenSearchに対応させればいくらでもインターフェースは交換が利くようになる。
今はまだOpenSearchに対応することはA9で検索できるようになる程度にしか思われていないけれども、OpenSearch用のA9よりも使いやすい最強に強まったユーザーインターフェースが公開されたとすれば、OpenSearchに対応するということはリッチで使いやすいインターフェースをゼロコストで利用可能になるという極めて大きな意味を持つことになる。

ウェブサービスはあらゆる情報をXMLで提供し、ユーザーはそれを自分の好きな形にレンダリングして表示するようになる。
AjaxはつまるところXMLビジュアライザーであり、ユーザーインターフェースの交換装置なのである。今すぐ急いでAjaxに対応、などする必要はない。APIを公開して生データにアクセスできるように開放することと、Ajaxに対応することは実は殆ど同じである。

----
結局、何が言いたいのかというと
HTMLがメインのデータでXMLがメタデータ、という時代が終わり、XMLこそがメインのデータであり、HTMLはXMLを変換整形した結果に過ぎないという変化が起こりつつある、ということだ。それはごく限られた市場での話で、今はまだRSSリーダーを使ってる一部の情報ジャンキーぐらいしか実感していないことだけれども、確実に起こっている流れだ。
データとメタデータの主従逆転が起こっているのである。全文配信されるようになったRSSは、もはやメタデータというよりもRawDataとでも言うべきものであり、BlogがRSSを吐くのではなく、RSSをHTMLへ変換した結果が、いわゆる今見ているBlogなのである。

本来ならばHTMLは論理的なマークアップをしてやれば、後はブラウザがユーザーに合わせて勝手に見やすく整形してくれる、そういうものだったはずだが、いつからか1ピクセル単位で正確にレンダリングされることを求められるようになり、CSSによって文書構造とデザインが分離されるだの言ってもスタイルシートの切り替えボタンがデフォルトで見やすい位置にくっついているのはOperaだけだ。HTMLはすでにデータそのものを記述するには複雑怪奇になりすぎていて、その結果CSSとJavaScriptを駆使したバッドノウハウまみれのリッチインターフェースを構築するためのアプリケーションプラットフォームとして再利用されることが業界の主流となり、コンテンツそのものの記述はXMLが担うことになる。

つまるところ大切なことはXMLによる生データを提供することで、それを視覚化する方法としてHTML+JavaScript(つまりAjax)を使うのはバッドノウハウまみれだけれど悪くない選択肢で、むしろ普及率や実行速度、開発の容易さなどを考えるとベストである。

ここらへんはあくまで個人的な意見だ。

2005-06-27

[Ajax] エントリの動的ロード

鬱陶しくなるだろうと思って、やらないつもりだったが、やってみると案外そうでもないかな、と思ったのでつけてみた。

JavaScript有効の場合に表示される(はずの)プルダウンメニュー、もしくは、右側のエントリ検索の結果にマウスオーバーするとエントリを読み込んで表示する。

blosxomの場合、各エントリがプレーンテキストで保存されているので、それを直接読み込んで表示している。サーバーに負担はほとんどかからない。画像を読み込むのと同程度。

エントリ一覧のロードは、今までIFRAMEを使っていたのをXMLHttpRequestを使うようにした。ついでに、カテゴリの記事件数集計を正確にしておいた。

XMLHttpRequestが使えない環境では、IFRAMEHttpRequestを使う。Opera7.54で動くことを確認。
http://ma.la/mirrorman/wiki.cgi/IFRAMEHttpRequest
プレーンテキストの読み込みに関しては、ほとんど問題なさそうだ。

大体問題はないと思うけど、いきなりブラウザが落ちるなど、やばめの不具合があれば教えていただければありがたい。

2005-06-25

JavaScriptにBlogの全文検索をやらせてみる

というのを作ってみました。
http://la.ma.la/search.html

----
http://kengo.preston-net.com/archives/002021.shtml
http://johnvey.com/features/deliciousdirector/

これ見てすげーなーと思って同時にここ数ヶ月のもやもやしていたものを文章に書き起こそうという気になったので明日にでもアップします。

2005-06-23

GoogleAutoPagerというのを作りました

息抜きにGreasemonkeyスクリプトを作ってみました。逐次ロードを使った、もっと読むインターフェースの試作です。Trixieでも動きます。

リンクを右クリックしてInstall User Script
http://la.ma.la/misc/userjs/GoogleAutoPager.user.js

動いてる様子(Flash)
http://la.ma.la/misc/demo/googleautopager.htm

動かせない人も多いと思うので、どんな感じなのかわかるようにスクリーンキャプチャも作りました。あんまり作りこんでないですがとりあえず公開。GPLライセンスにします。

任意の位置をダブルクリックで有効/無効が切り替わります。スクロール位置を定期的に検知し、下のほうまでスクロールしたら次のページを自動でロード、現在表示中の検索結果に継ぎ足していきます。

電子辞書でよく見かける、どこまでもスクロールしていける画面のような感じです。

----
あんまり関係ないですが、Googleがpure JavaScriptによるXPath/XSLTライブラリをBSDライセンスで公開しています。
http://goog-ajaxslt.sourceforge.net/

XPathを使うとDOM走査をしなくても一発で要素選択できるので、コードの量が短くわかりやすくすっきりします。これを使えばGreasemonkeyスクリプトをIEやOperaに移植するのが楽になるんじゃないかと思ったのですが、なんかファイル足りなくてそのまま動きません。

GoogleMapsで使われていたものっぽいので、ファイルかき集めてくれば動くのかも。
とりあえず様子見。

----
追記 2005-12-15
Firefox1.5と最新版のGreasemonkeyで動かなくなってます。
色々機能追加しようかと思ってますが、とりあえず修正版作ってくれた方がいるのでそちらをどうぞ。

http://beerboy.org/article.php?id=146

2005-06-20

Amazon最速検索を作ってみた

デモここから。
http://la.ma.la/misc/aws/demo.html

説明書はこれ。
http://la.ma.la/misc/aws/

-IE6、Firefox、Opera8で動作確認しています
-Safariではスクリプトの動的ロードが出来ない関係で、動きません。
-IFRAME内にパラメタ渡したCGIでscriptタグ生成とかやれば出来ないことも無さそうだが面倒なのでパス。

このエントリで書いた
http://la.ma.la/blog/diary_200504140039.htm

>検索エンジンがJavaScriptで検索結果を出力するインターフェースを備えていれば、CGIが使えないサーバーでも、クライアント側の制御だけで動的に検索結果を読み込むことができるようになります。

この理論を実際に実践してみた、といったところです。

Ajaxというよりむしろ、ブラウザベースのJSON-RPC的な何かという感じで、俺がAdaptive Pathなら新しい名前をつけてやる所なのですが、とりあえずAjaxで。Ajaxでいいと思います。

開発期間は最初のバージョンに7時間、後は微調整に1日ぐらいです。
注目すべき点はこれがCGIを全く使わずに動いているという点で、総ファイル数は2つ。htmlファイル(8KB)とxslファイル(6KB)、合わせて15KB以内です。後は全部Amazon任せで、他のライブラリも一切使っていません。

問題としてはブラウザからAmazonに直接クエリを投げるやり方だと、不特定多数のユーザーから使われた場合に検索回数の制限をオーバーする可能性があるので、実際はサーバーサイドでのキャッシュをつけるのが望ましいだろうとは思うのだけれど、とりあえず、現時点でのバージョンをデモンストレーションとして公開することにします。
もしAmazonのサーバーリソースが無限であるならば、こういうやり方もアリ、だと思います。

現在のバージョンはあくまでデモンストレーションです。実際は、JavaScriptだけで動いてるなどと言っても、一般大多数にとってはどうでもいいことなので、アフィリエイト作成支援や、素早くクリッピングして本棚作成とか、そういうサーバーサイドの処理と組み合わせて完成形、ということになると思います。

まあ技術的に面白いとか仕組みが面白いとかそういうことを書くのは技術者の悪い癖で、一般ユーザーにとっては、結局何ができるのかにしか興味がないわけで、けれども、あえてそういうことを書いていきたい。

この不完全で中途半端な段階で公開するのは、たかだか15KBでも、高価なサーバーが無くても、少ない労力でも、それなりのものを作ることが出来るということを広く知って欲しいと思うからです。

----
ついでに、ライセンスのこと

ライセンスはArtistic Licenseにします。訳文参照。
http://www.opensource.jp/artistic/ja/Artistic-ja.html

自分専用に改造したり、改造したものを名前を変えて公開したり、
あるいは参考にして全く別のものを作るのは完全に自由です。
変更点がどうとかはソース見ればわかるので、あんまり気にしなくて良いと思う。

よくmisc以下に置いてある、単発のJavaScriptで作った簡単なアプリとかは
基本的に著作権とか主張する以前の、単なるサンプルのようなものなので
好き勝手改造して公開したり、なんかに組み込んだり、
必要だと思うならオリジナルにリンク張るなりしてくれればいいです。
あなたの作ったものはあなたのものです。好きにしてください。

今回のはアソシエイトIDやらデベロッパートークンやらをソースに含んでいる関係で、コピーしたものをそのまま公開されると困るな、と思ったのでライセンスを明記することにしました。そんな感じです。

2005-06-16

ミュージカルバトン

なんか回ってきたようで、
http://antipop.gs/mt/archives/001318.php
http://d.hatena.ne.jp/nekoprotocol/20050616/1118873842

全力でスルーしようかと思ったんだけれども、
http://hxxk.jp/2005/06/14/2210

こんなの見せられたら真面目に答えるよりもむしろ、こいつを自動化するツールを作って答えるべきなんじゃないかと、俺の使命はそれなんじゃないかと。そんなわけでミュージカルバトンに答えたエントリのURLを入れていくだけで自動でgraphvizみたいにリンク関係を視覚化して、ついでにちゃっかりアソシエイトIDを書き換えてボロ儲けするウェブサービスを作ってみましたとか書きたいのはやまやまなのだけれども、まだ出来てません。

まあそれはそれでいいとして、アフィリエイトのテストも兼ねて書いてみようかと思って、一応書いてみたのですがAmazonに売ってないものばっかりになってしまったので仕方なくドラゴンボールとか混ぜることにしました。以下回答。

----

「今パソコンに入っている音楽ファイルの容量」
-ギガバイト以上テラバイト以下

「最後に買ったCD」
-とんねるず「これが出光のまいどCDだ。」
--非売品、ワゴンセールで20円ぐらいだったと思う。

「今聴いている曲」
-集中できないので音楽は聴かないことにした。

「よく聴く、または特別な思い入れのある5曲」
-猟奇が街にやって来る 人間椅子
--プログラマなら人間椅子聴くよな。仕事中はもっぱらこれでした。

-人面瘡 人間椅子
--だらだらどろどろ血みどろじんめんそー。これも仕事中よく聴いていました。

-遺言状放送 人間椅子
--これもよく聴いてたな。

-レッドリボンアーミー ドラゴンボール 全曲集
--レッドリボン軍を称える歌です。カラオケに入ってないのが残念です。

-ベジータ様のお料理地獄 ドラゴンボールZ コンプリート・ソングコレクションII
--寝付けないときはこれを聴きます。

「バトンを渡す相手5人」

inamode4

・ロリコンは死ぬべきだ、が持論の人
・プリキュアをやめるべきか悩み中の人
・プリキュアンじゃなくてこっそり転職活動中の人
・大二病という単語がメジャーな単語だと勘違いしている人
・リンクを張ってるだけのページを延々と続ける人
・感動された人

にバトンを渡したいと思います。
あれ6人だ、まあいいか。

テンプレートエディタを作ってみた

こんなのを作ってみました。
http://la.ma.la/misc/tmpledit/

HTMLソースを貼り付けて、ページの構造をダンプすることが出来ます。
とりあえずどんな感じかわかるように、このBlogのアドレスを入れてあるので取得ボタンを押すと出て来る様になってます。XMLHTTPでソース受信してるので外部ドメインのソース取得は無理です。ローカル保存+IEの場合は外部ドメインのソースも解析できます。

こういう感じの作るやつ、と言えばわかりやすいかも。
http://d.hatena.ne.jp/kamioka/20050609/1118324980

まあ、これがやりたかっただけなのですが、ついでにCSSの編集もできるようにしてみました。CSS編集モードに切り替えると、タグ名とクラス名とIDを確認しながらプレビューしつつその場でCSSを編集できます。

CSS適用ルーチンはこれの丸パクリ。
http://tokyoenvious.xrea.jp/b/javascript/css_editor.html

実際のHTML表示を見ながらやるよりも、普段表示されないクラス名やID名とかを可視化した状態で編集したほうが、脳にかかる負担は軽いかな、といった具合。そういうテンプレート編集に特化したCSSエディタみたいなのがあっても良いかなーなんて思って作ってみた次第ですが、保存とかつけてないので現状あまり使い物になりません。Firefoxの拡張でCSSをその場で編集とかそんなのがあった気もするけど、作ってしまったのでいいや。
IEの場合は中途半端にtabが使えます。

CSSの自動整形をやらせたくて、JavaScriptにCSSパーサー移植というのを、少し前に作りかけて放置しているので、気が向いたらそこら辺を組み込んでアップデートするかも。

----
6/15追記
ちょこちょこ更新。
ダンプ結果を印刷、保存用に新規ウィンドウで表示できるようにしました。

あと説明書書いた。
http://la.ma.la/misc/tmpledit/readme.txt

それと、アフィリエイト始めることにする。(今さら)

2005-06-15

JavaScriptでエディターを作っている

スタイルシートとJavaScriptで行番号付きのエディタがほぼ完成。
想像以上にうまくいった。

後はヒストリ管理や、変更行強調あたり実装したい。
Wikiの編集手法に関して、少し違ったアプローチが出来そう。
WYSIWYG編集へ逃げない。

2005-06-08

続・JavaScriptでBloglinesWebServiceを使う

なんか今、Bloglinesの言語設定を日本語にするとエラーが出るようになっていて、
誰か文句言ってすぐに直るだろうと思ってたら、夜になっても全然ちっとも直ってなくて困った状況になってしまったので
この前作ったBloglinesWebServiceの簡易クライアントをちょっと改造して記事本文も読めるようにしてみました。

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

ファイルをローカルに保存して、IE及びIEコンポーネントブラウザで開いて使うことができます。
通信を非同期にしてなかったり、結構いい加減な実装だったりですが、とりあえず直るまでの繋ぎということで。
不満のある人は適当に改造して使ってください。改造・再配布はご自由にどうぞ。

あと、ローカルファイル名をリファラとしてbloglinesに送ってしまうのですが、
相手がbloglinesなのであんまり気にする必要もないと思いますが一応、気になる人は使わないでください。
デスクトップに保存して使うとWindowsのユーザー名なんかがバレます。bloglinesに。

日本語を含んでるフィードで変なRSSを吐く現象が前々からあるので、responseTextを正規表現でパースするようにしてみました。
汎用性はないけど今のところエラーもなく安定して使えてる様子。

Bloglinesから送られてくるRSSのソースを見るとわかるのですが、
RSS2.0のpubDateが「水, 8 6 2005 12:03:00 GMT」とかになっていて、水はないだろう水は。

----
ちょこちょこ直したり。
しかし、このエントリが読まれるのは
bloglinesが直ってからだろうな。