[&] Web Directions East 08 (Jeremy Keith)

Adactio: Jeremy Keith

Web Directions East 08
-----------------------------
Jeremy keith- Bulletproof Ajax
http://adactio.com/ clearleft社所属。

Ajax サイトのデザインの課題に関して。

Ajax とは？JavaScript でかっこいい効果があれば、すべて Ajax?
それは必ずしも Ajax とは限らない DOM Scripting かもしれない。
サーバーとコミュニケーションするが、ページ全体が更新されないで実現する。
ページの一部分のみが更新されるもの。スピードがあり、速いという感覚を与える。

frames
iframe
Flash もページ全体が更新されないことでは同じ
XMLHttpRequest

XMLHttpRequest は Microsoft から発祥。 IE5 から。1999年。
なぜ急に話題になるようになったのか？
Mozilla Safari Opera 主要なブラウザが XMLHttpRequest をサポート。
実質上デファクト。W3C 標準化の途上。

synchronous 。Webのモデルを変えた。
あたかも速いような幻想を得る。

browser <<>> XHR <<>> server
display <<>> <<>> storage
processing <<>> <<>>

クライアント側に処理を持ってこない。サーバー上でコントロールする。
たくさんのブラウザがあると、たくさんの作り込みを行なわなければいけない。

progressive enhancement の考え方。
content が一番大切。web ページの contents は何なのか？
structure 構成を与える。あるコンテンツをどう見せたいのか？
コンテンツがいかに振る舞うのか？

behavior -- JavaScript
presentation -- CSS
structure -- HTML
content

あるテクノロジーが OFFにされている場合でもコンテンツを伝えられる。
Ajax が導入されて、progressive enhancement を気にしなくて良いと言われるが、
リクエストとともに考える。

Hijax
通常の Web サイトを作る。FORM は Web の誕生からあったので、
それを使うべき。
リンクのクリック、フォームの入力の情報を解析。送り出す。
Ajax が使えない場合。JavaScript が使えなくても普通の使い方ができる。
Ajax のサイトであり、Ajax で無いサイトを同時に実現できる。

deceptively rich client
モジューラ化されたアーキテクチャであること。
Ajax を使うこと、サーバの仕組みを最初から考えておくこと。
ただ、最後に Ajax を実装する。JavaScript が OFF の時にも動くように。

pattern recognition
よくある事例から考えることができる。
ほんの一部だけ変化しているところがあれば、そこが Ajax / Hijax を使うところ。
sign up の箇所、ユーザが待ち時間を減らせるところ。
add to cart の箇所、非同期型のやりとりを実現。ページ全体が更新されるのを待たなくていい。
rate this の箇所、バックグラウンドで行なっている方が良い。
add a comment の箇所、変わったのは追加された部分だけ。
search results?、検索の結果ページで使うのは適切でない。
pagination?　

google maps や Gmail だけでなく、
web の細かいところの使い勝手を良くできる。
あまりやりすぎないように。検索結果など。
いつ使うのが妥当なのか？全ページ更新をどこで使うのが適切か？

feedback
何かが起きたのを知らせなければいけない場合。
今何が起きているのか、何が起きたのか、
全てのデザインでフィードバックは重要。
イギリスの信号、振り返らないと青信号が分からない。

conventions
status indicators
砂時計、プログレスバー
ユーザーを安心させる。
yellow fade (37 signals) ページの一部分だけ更新していることが分かるように。
drag'n'drop もともとデスクトップで使っているから分かりやすい？と思われがち。
dnd 以外に操作の選択肢が無いと利用が困難。

beyond the browser
ページの部分的なところを更新すると、履歴の意味が無くなる。
the back button : バックボタンがきかない
bookmarking: ブックマークがしにくい。

user test
統計を見る。誰を対象にしているのか？
ユーザテストを行なわないといけない。

adactio.com/