アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » NEWS & REPORT » レポート » 「Web Directions East 2008」カンファレンス レポート » #3 ジェレミー・キース氏『Bulletproof─使い勝手と見やすさを両立するAjaxを使ったサイト設計』

「Web Directions East 2008」カンファレンス レポート

#3 ジェレミー・キース氏『Bulletproof─使い勝手と見やすさを両立するAjaxを使ったサイト設計』

「Web Directions East 2008」のカンファレンス,3番目のトラックでは,Jeremy Keith(ジェレミー・キース)氏による,『Bulletproof─使い勝手と見やすさを両立するAjaxを使ったサイト設計』と題した講演が行われた。

写真1 ジェレミー・キース氏

写真1 ジェレミー・キース氏

キース氏ははじめ,「巷ではAjaxが至る所で見られるようになりました。最近では,ちょっとしたアニメーションや,javascriptを使った DOMScriptingでさえAjaxだと誤解している人もいます。Ajaxはなんでしょう? 私はここに,Ajaxをもう一回再定義したいと思っています。Ajaxとは,サーバーとコミュニケーションし,新たな情報をユーザーに提供しつつ,ページがリフレッシュされないことだと考えています」と, 『Ajax』という言葉の濫用を指摘した。

そして,「リフレッシュされないページ遷移は,ユーザを錯覚させあたかも早くなったかのように感じる」と述べ,「これらの考え方はframeやifarameなどのフレームレイアウト,そしてFlashにおいて,ページ全体が更新されないことにおいて共通しています」とし,「Ajaxにおいて,これらをサポートするのはXMLHttpRequestにあります。この技術はIE 5ですでに存在していた固有のものでした。しかしなぜ今になって流行したのか。それは様々なブラウザが登場し,それらがサポートしたために,やっと一般化してきたのです」と,Ajaxの歴史を紐解いた。

写真2 IE 5の時代に,XMLHttpRequestはあった

写真2 IE 5の時代に,XMLHttpRequestはあった

「これによってさまざまな処理がブラウザでできるようになりました。しかしこれは間違いであると思っています。なぜなら,ブラウザはあくまで表示するためにあるべきもので,これらの処理は本当はサーバーで行うべきものだと私は考えるからです。 「Progressive enhancement」という考え方があります。技術を分散し区別することで,ひとつの技術を失ったとしてもコンテンツを提供できるという考え方です。構造をHTMLが持っているように,見栄えをCSSで持っているように,動きや振る舞いをjavascriptによって実装するのです。私はあえて,AjaxをHijaxと呼びたい。つまり,Ajaxありきになってはいけないということです。まず,今までやってきたことと同じようにシンプルなウェブサイトを作ってから,ajaxを実装するべきです。重要なことは,javascriptを使えない環境であっても,ユーザーがリクエストを完遂できるように作ることです」と,Ajaxサイト作成においての注意を話し,呼びかけた。

写真3 Webにおける「Progressive enhancement」

写真3 Webにおける「Progressive enhancement」

写真4 Hijaxについて説明するジェレミー・キース氏

写真4 Hijaxについて説明するジェレミー・キース氏

写真5 Rich clientに対する,Ajaxの概念図

写真5 Rich clientに対する,Ajaxの概念図

写真6 Deceptively rich clientに対する,Hijaxの概念図

写真6 Deceptively rich clientに対する,Hijaxの概念図

「Ajaxを実装する場面はどうしても大きなコンテンツばかりでしょう。ですが,私は細かいところ,ほんの少ししか変化しないようなところにこそAjaxが威力を発揮すると思っています。そして,それこそが非常に重要であると思います。たとえば,ブログにおいてコメントを投稿します。もしページがリフレッシュされずに,コメントが投稿されたら,ユーザーはリフレッシュするページとは比べ物にならない速度を体感できるでしょう。あくまで,錯覚ではあるのですが」。キース氏は,ユーザーが時間をとられてしまうところにこそ,Ajaxを用いるべきだと語る。

写真7 Ajax/Hijaxを利用したほうが良い場面は,今までのWebサイトを検証すればパターン化されるのが見て取れると言及した

写真7 Ajax/Hijaxを利用したほうが良い場面

「Ajaxを必要と,非同期通信が発生した時に注意しなければならないことは,必ずユーザーに対して何が起きたのか,何が起きているのかということを明確に伝えることである。些細な変化は,ユーザーは気づきにくい場合が多い。たとえばプログレスバーを付ける,背景が切り替わる,カーソルを砂時計にするなど,ユーザーに変化を知らせることが重要だ。」とし,このようなちょっとした配慮が大事であることを参加者に示した。

さらに,「戻るボタンが利かなくなったり,お気に入りに追加しにくいなど欠点も多い。使いどころには注意しなければならない」と促し,「ドラッグアンドドロップなど,デスクトップで行われている処理をAjaxで再現する場合には,中途半端に実装するのは間違っている。実装するのなら,完璧に再現しなければならない。そして,これらのアクションがユーザーにとって必ずしも使いやすいものではないし,これ以外の選択手段がないという状況は避けなければならない」と言及した。彼は最後に,「ユーザーテストに時間をかける必要はないが,できるだけすることも重要である」と,ユーザーテストの重要性について説いた。

写真8 ユーザーテストの重要性について説く,ジェレミー・キース氏

写真8 ユーザーテストの重要性について説く,ジェレミー・キース氏

キース氏の講演は,Ajaxを利用する制作者に警鐘を鳴らした。Ajaxは非常に革新的な技術だといえるだろう。だがしかし,使い方を誤ればユーザービリティを壊す結果にもなりかねない。Ajaxはあくまでプラスアルファとして付け加えるもの。決して,現在の環境やユーザーのスムーズな閲覧を妨げる結果になってはならないのだ。

著者プロフィール

加茂雄亮(かもゆうすけ)

株式会社ロクナナにて,ActionScriptを伴うFlashコンテンツや,AjaxコンテンツなどRIA開発に従事するフロントエンドエンジニア。テクニカルライターとしての一面を持ち,WEB・雑誌・書籍、媒体問わず執筆。また,イベントやセミナーでの講演など,精力的に活動している。

URLhttp://log.xingxx.com/
URLhttp://rokunana.com/

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

ActionScript 3.0で始めるオブジェクト指向スクリプティング

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

Ubuntu Weekly Recipe

Ubuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。

C/C++プログラマのためのDTrace入門

よくカーネルのチューニングや解析で活用されるDTraceですが,実はユーザプログラムの開発においても非常に有用です。連載ではC/C++プログラマやテストに関わる方向けにDTraceの使い方を解説します。

Blogopolisから学ぶ計算幾何

計算幾何学は,図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では,ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら,計算幾何の初歩を実践的に学習します。

検索エンジンはいかにして動くのか?

本連載では, 今や誰もが利用している検索エンジンの中身を,全体の仕組みやデータ構造,アルゴリズムから分散インデックスまで,最近の研究事例も交えて紹介します。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス