カレンダー

« 2006年12月10日 »12345678910111213141516171819202122232425262728293031

2006年12月10日アーカイブ

Life is beautifulAjaxの本質、「非同期メッセージ型ウェブ・アプリケーション」のススメというエントリより

web2.0という言葉・概念が流行りだしてからだいたい1年くらい経った(と思う、詳しくは知らないが)。そして、web2.0とはAJAXであると思っている人はまだいるのだろう。

まぁ、使う人が言うのは何の問題もないのだが、問題は「web2.0」なアプリを作ろうと考える人達がそう思っているところにある。これはそもそもAJAXを利用したwebアプリが何故発生したのかをきちんと考えれば良い。

Ajaxの本質、「非同期メッセージ型ウェブ・アプリケーション」のススメではこう語られている。

Googleなどが進めている第二世代のウェブ・アプリケーションのアーキテクチャーの本質は、XHTMLやXMLやJavascriptにあるのではない。その本質は、

  • (1)アプリケーションの明示的なインストールが必要ない。
  • (2)サーバーとの通信を非同期に実行することにより、通信遅延によりUIをブロックしない。
  • (3)サーバーとのやり取りは、RPCではなく、メッセージで行う。
  • (4)データ・バインディングはサーバー側ではなく、クライアント側で行う。
  • (5)UIにインテリジェンスがあり、ある程度はサーバーに戻らずにユーザーとやり取りをする。

の5点にある。この5点さえしっかりと守れば、開発言語はJavaであろうとFlashであろうとも良いし、サーバーとのメッセージにXMLを使わなくともかまわない。その意味で言うと、Ajaxという名前(J=Javascript、x=XML)がそもそもふさわしくしくないとも言える。単に、「非同期メッセージ型ウェブ・アプリケーション(Asynchronous Message-driven Web Application)」と呼ぶ方がずっと明確だし、特定の言語にしばられなくて済む。

つまり、別に言語がどうだという次元での話ではないのである。
  • 今まではサーバ側で処理していた事をクライアント側で処理する
  • サーバでの処理もできるだけユーザのストレスがないようにする

これが重要なのだ。「今までとは違ってとても使いやすいwebアプリの作成」を考えて、その手段としてJavaScriptでのクライアントサイドスクリプトと、サーバ通信がよく使われているだけなのだ。それをちょっとこじゃれた命名をした為にその名前が先行して有名になり、違った意味に捉えられるようになってしまったのだろう。

僕は一応webアプリの作成も仕事の片手間にやっているのだが、きちんとこういった事を考えて作成していた訳ではなかった。とても為になる記事だったなぁ。これからはきちんと利用者の事を念頭に置いて開発するとしよう。AJAXであれば良い時代はもう過ぎたのだ。

昨日の夕方まではメインブラウザに「Sleipnir」を使っていた。理由はそれ以前に使っていた「firefox」がメモリを喰うっぽいから。

でも、会社の人(エンジニアさん)がfirefoxを使ってデバッグ(firebug)をしているのを見て即乗換えを決意。

最近、あまり詳しくないJavaScriptを勉強中なので、何かツールを入手しなければ、とは思っていたし、firefoxならついでにhtmlとcssのデバッグもできるようになるだろうと思ってさ。

んで、実はまだ「FireBug」はほとんど触っていないのだが、意外な事に、cssのデバッグが非常に効率がよくなった、というか今までで最強の環境ができた。

そのツールは「CSSViewer」と「Webdeveloper」の機能の一つである「EditCSS」。試してはいないけど、cssのデバッグ用なら「Webdeveloper」の代わりに別の拡張「EditCSS」だけでも良いくらいである。

手順としては、デバッグしたいページを開いて、「ツール」→「CSSViewer」でCSSViewerを起動して編集したい箇所のcss適応状況を「CSSViewer」で確認する。それで大体の症状が分かるはずなので「EditCSS」を開いて現在のCSSを編集。

ここで一つ注意。「EditCSS」は指定されているCSSファイルをそのまま読み込んでローカルで適応させる、という拡張なんだと思う。なので、実は背景等にURL指定している画像が相対パスで指定されていたらその箇所だけ適応されなくなってしまう。なので、

#head { background : #fff url(../img/head_back.gif); }
こういう記述を先に
#head { background : #fff url(http://hostname.com/img/head_back.gif); }

等に変更する必要がある。

これで変更箇所は分かりやすくなるし、その場で編集、確認ができる。

これ、かなり便利だ。

My Music

My Tunes

KDDI

My del.icio.us Tag

My emo

My iKnow!