目次


Ajax と XML

Ajax の最高傑作から学ぶ

傑出した Web 2.0 アプリケーションから学ぶ、ユーザー・エクスペリエンスの改善方法

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: Ajax と XML

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:Ajax と XML

このシリーズの続きに乞うご期待。

今回の記事では、新種の Web アプリケーションのなかでも傑出したものをいくつか取り上げ、最上のものを真似るという誇り高き伝統に従って、そこから学べる教訓を説明します。ここで紹介するサイトも悪い気はしないことでしょう。結局のところ、模倣は最も誠意ある褒め言葉だからです。

ただし、主に技術的側面に話の焦点を絞るといったことはしません。Ajax でデータがどのように渡されるのかという点は重要ですが、技術的側面が常にサイトを成功に導くとは限らないためです。重要なのは、サイトが魅力的なユーザー・エクスペリエンスを作成するために、どのようにブラウザーの Ajax 機能と動的 HTML (DHTML) を使用しているかを検討することです。また、サイトがカスタマー・コミュニティーとの交流を可能にしている方法も見逃せません。これらから詳細を探っていくこれらの要因は、サイトを成功させる上では技術と同じく重要です。

Google マップ

「最も影響力の大きい Web 2.0 アプリケーション」に贈られるアカデミー賞やゴールデン・グローブ賞があったとしたら、それは間違いなく Google マップのものになるでしょう。私の同僚の何人かが、Google マップを初めて目にしたときの反応は、今でも鮮明に覚えています。それは、ブラウザーでそんなことができるのか、という驚きです。私が思うに、Web 2.0 の活動に弾みが付いたのは、カスタマーがブラウザーでのアプリケーションから何を期待するかという定義を塗り変えた Google マップがきっかけです。

読者が Google マップを使ったことがあるかどうかはわかりませんが、ともかくこのサイトを図 1 に記載します。

図 1. 現行バージョンの Google マップ
図 1. 現行バージョンの Google マップ
図 1. 現行バージョンの Google マップ

マップはクリックしてドラッグするだけでパンできるので、紙の地図を扱うのと同じくらいに簡単です。方向を定めると、表示が点滅したり (必要でない限り) 地図が動いたりすることなく、マップ上に枠で表示されます。実際、Google マップ機能のほとんどは、サーバーに戻って新しい HTML ページを取得するという動作を一切使わずに実行されます。

Google マップの登場以来、Ajax と DHTML という言葉が第 2 の Web 革命の言語に永遠に焼き付けられました。ですがおかしなことに、Google マップは厳密に言うと (Ajax を、XMLHTTP オブジェクトを使用した要求の送受信と定義する場合)、Ajax では実行していません。Google マップは動的に生成される <script> タグを使用して、サーバーとのデータの受け渡しを行います。これは、XMLHTTP オブジェクトより前から存在している手法です。

ですがどうして Google マップでは Ajax を使用しないのでしょう。この点に関して Googleのエンジニアを弁護することはできませんが、私の勘からすると、Google マップは最初から JavaScript の「マッシュアップ対応」を目指して設計されたのだと思います。

マッシュアップ

この記事の冒頭で、カスタマー・コミュニティーのサポートについて触れました。これが企業側の宣伝だということには同意しますが、それでも重要な点だと思います。マッシュアップはカスタマー・コミュニティーの究極のサポート方法です。マッシュアップでは、あるサイトの機能を使い、それを別のサイトの機能にマージして一層面白いものを作り出します。マッシュアップの好例は、Craigslist からレンタル・リストを取得し、Google マップを使ってこれらのリストをマッピングするサイトです。

MapMyRun.com も Google マップのマッシュアップの一例です。このサイトでは Google マップを使用してランナーが(あるいは他の誰でもが) マップ上でコースの走行距離がわかるようにしています。この機能を図2 に示します。

図 2. Map My Run のインターフェース
図 2. Map My Run のインターフェース
図 2. Map My Run のインターフェース

上記では、まず左ペインの入力フィールドにスタート地点を入力し、それからマウスを使ってコースの通過地点を指定します。クリックすると、左ペインが動的に更新されて距離が示されます。詳細を見るためにズームインすることも、コースが一般道路を外れた場合には衛星モードに切り替えることもできます。

マップの厄介な作業はすべて、Google マップによって行われます。MapMyRun サイトはマップの上にマウスのクリックを処理して距離を計算する JavaScript コードを重ね合わせているだけにすぎません。

成功する Web 2.0 アプリケーションを作成するということに関して、私は Google マップから以下のことを学びました。

  • ブラウザーを使用すること: Google マップは、今日の最新ブラウザーが持つ動的性質を大いに活用しています。こうしたブラウザーの機能を使用して、ユーザーがブラウザーの能力に驚くほどの、魅力的なエクスペリエンスを作成してください。
  • 純粋な Ajax であることは重要でないこと: Google マップが純粋な Ajax アプリケーションではないことに気付いている人はほとんどいませんが、それを真剣に気にする人もいないはずです。肝心なのはGoogle マップがユーザーに素晴しい機能を提供するということで、XMLHttp が使用されていないとしても問題ではありません。つまり、特定の技術手法に没頭しすぎるのは禁物です。
  • JavaScript のマッシュアップ: JavaScript コーディングを使用してあるサイトの機能を別のサイトに組み込めることができるのは、極めて大きな強みです。マッシュアップは、特定タイプの機能の主要なソースにアクセスできるという非常な有利な状況を実現します。

TaDaList

率直に言って、Google マップを基準に優れた Web 2.0 アプリケーションを定義するとなると、それはかなり高いレベルになります。ですが、Ajaxを使用すればアプリケーションに極めて大きな付加価値を簡単に付けることができます。その一例が、TaDaList です。TaDaList は非常に単純な (そして無料の) ToDo リストのマネージャーです。このサイトを説明するため、私はTaDaList にアカウントを設け、水泳トレーニングを継続するためにやらなければならないことの覚え書きとしてSwimming リストを作成しました。このリストを図 3 に示します。

図 3. Swimming リスト
図 3. Swimming リスト
図 3. Swimming リスト

ゴーグルを買う必要があるということを追加するため、テキスト・フィールドにその旨を入力し、Add to list をクリックしました。すると、ページはリフレッシュされることなく、すぐにこの項目がリストの所定の場所に追加されました( 図 4を参照)。

図 4. 「Buy New Goggles」が追加された状態
図 4. 「Buy New Goggles」が追加された状態
図 4. 「Buy New Goggles」が追加された状態

この機能はとりたてて目を見張るほどのものではなく、Ajax を使用すれば難なく実装できますが、デスクトップ・アプリケーションに期待するような優れたエンド・ユーザー感覚を提供します。

注目すべき重要な点は、TaDaList は Rails フレームワークで作成されているということです。実際、このアプリケーションは Rails を学ぶときに使用されるデモ用のアプリケーションで、Rails フレームワークはこのタイプの Ajax 作業を実に簡単なものにしてくれます。

実例を示すため、Rails を使って数分で、非常に初歩的な自分用の TaDaList を作成してみました。図 5 に、この ToDo リストの項目を示します。

図 5. ToDo リストの項目
図 5. ToDo リストの項目
図 5. ToDo リストの項目

Buy earplugs と入力して Add をクリックすると、この項目がリストに表示されます (図 6 を参照)。この際、ページのリフレッシュは行われません。

図 6. 「Buy earplugs」が追加された状態
図 6. 「Buy earplugs」が追加された状態'
図 6. 「Buy earplugs」が追加された状態'

このように動作させるためにまず作成したのは、ToDo リストの項目を保持するための小さなデータベースです。次に、リスト 1 に示す Rails コントローラーを作成しました。

リスト 1. Todo_controller.rb
class TodoController < ApplicationController
  def list
    @tasks = Todo.find(:all)
  end
  def add
    task = Todo.new
    task.name = params[:task][:name]
    task.save

    @tasks = Todo.find(:all)
  end
end

リスト 1 のコードでは、2 つのメソッドを使用しています。一方の list() はページを表示するためのメソッドです。もう一方のadd() メソッドは、新規項目をリストに追加してから HTML 形式のリストを返します。

リスト 2 に、list() メソッドの RHTML を示します。

リスト 2. List.rhtml
<html>
<head>
<%= javascript_include_tag :defaults %>
</head>
<body>

<div id="results">
<% @tasks.each { |t| %>
<%= t.name %><br/>
<% } %>
</div>

<%= form_remote_tag :url => { :action => 'add' }, :update => 'results' %>
<%= text_field :task, :name %>
<%= submit_tag 'Add' %>
<%= end_form_tag %>

</body>
</html>

このページは form_remote_tag を使用して、単純なフォームのコンテンツをコントローラーのadd() メソッドにサブミットします。add() メソッドは単に項目を表に追加した後、その結果の<div> タグの新しいコンテンツを返します。このコードはリスト 3 のとおりです。

リスト 3. Add.rhtml
<% @tasks.each { |t| %>
<%= t.name %><br/>
<% } %>

TaDaLists から学んだことは何かというと、第一に、ほんのわずかな Ajax が、Web アプリケーションのデスクトップ感覚の改善にとても役立つということです。第二に、正しい Web フレームワークを選択することによって (特に Ajax を採用するフレームワーク)、このような作業が至って簡単になります。

Campfire

Campfire は TaDaLists の関連サイトで、同じグループ (37signals) によって開発されました。このアプリケーションの場合は、オンライン・チャットをホストして簡単にファイル転送を行えるようにすることによって、リモート・チームの仮想グループ・チャットをシミュレートするように作られています。

トライアル・アカウントをセットアップして、画像のアップロードを使ったチャットを行ってみました。結果は図 7 のとおりです。

図 7. リモート・チームの仮想グループ・チャット
図 7. リモート・チームの仮想グループ・チャット
図 7. リモート・チームの仮想グループ・チャット

表示の左側は単純なチャット・ウィンドウで、ここには誰もがいつでも新しいメッセージを投稿できます。右側には、オンラインのユーザー、そしてファイルのアップロード場所が表示されます。

ファイルのアップロードは、ファイルのアップロード・プロセスを監視する JavaScript コードによってその場で行われます。つまり、別のページに移動してチャットから立ち去ることなく、ファイルと画像を追加できるということです。

Campfire には、いくつかの興味深い教訓があります。まず、Campfire は大胆にも、ユーザーが以前デスクトップ・アプリケーションに期待していたようなチャット・サービスを置き換えていますが、グループ・ミーティングというコンテキストでチャットをホストするという方法で成功しています。それと同時に、Campfire がビルドするシステムはデスクトップ・アプリケーションと比べると機能は限られていますが、ミーティングというコンテキストだけで使用されるために一層価値あるものとなっています。

2 つ目の教訓は、通常はページのリフレッシュにつながるファイルのアップロードなどの操作が、ページのロードが必要にならないように処理されているという点です。つまりユーザーは目前のタスクから注意をそらされることがないので、デスクトップ・アプリケーションの感覚が一層強くなります。

YourMinis

今まで紹介したサイトでは Web 2.0 を一部で少ししか使用していないとしたら、Webでウィジェット/ガジェット・サイトになりつつある YourMinis はその正反対の例です。YourMinis では、多種多様なウィジェット (Microsoftの専門用語を使うなら、ガジェット) をホストするページを作成し、カスタマイズすることができます。これらのページはダッシュボードのように機能し、タイムリーな情報を印象的な方法で表示します。

図 8 は、ページ上で Rottentomatoes の映画ウィジェットをドロップした後のサイトです。

図 8. 映画のレビューが表示された YourMinis
図 8. 映画のレビューが表示された YourMinis
図 8. 映画のレビューが表示された YourMinis

Rottentomatoes は趣向を凝らした映画のレビュー・サイトです。このサイトは数百の映画レビューからの得点を集計し、その得点をパーセンテージとして表示します。成績が 60% 以上の映画はフレッシュ (つまり優秀) ということになります。このケースでは、見たい映画として「Bridge To Terabithia」を選択し、郵便番号を指定するだけで同じウィジェットに上映時間が表示されています。表示結果を図 9 に示します。

図 9. 地元の上映時間が表示された映画ウィジェット
図 9. 地元の上映時間が表示された映画ウィジェット
図 9. 地元の上映時間が表示された映画ウィジェット

インターフェースは簡潔で反応がよく、広く普及しているブラウザーで順調に機能します。また、サイト作成者のブログをはじめ、さまざまな場所でウィジェットをホストすることも可能です。

このサイトの他、YourMinis にはユーザーのブラウズを監視する Firefox 拡張機能もあります。この拡張機能は、RSS フィードや MP3 など、YourMinis で使用できそうなものが見つかると、リソースが利用可能であることをユーザーに通知します。ブラウザーとのこういった類いの統合は、比較的容易であり、皆さんのサイトをユーザーのデスクトップに一層緊密に統合させる手段として理想的です。

YourMinis には、Web 2.0 に関する教訓が他にもいくつかあります。その 1 つは、mini とフレームワークは Macromedia Flash に実装されているという点です。これはユーザーの視点からするとあまり問題ではありません。つまり、前にも指摘したように、特定のどの技術を選択するかは、結果としてユーザーが得る利益ほどには重要でないということです。

また YourMinisでは、開発者たちが自分たちの独自のページ設計をコミュニティーにコントリビュートすることによって、コミュニティーとしての連帯感を持つよう働きかけています。これはカスタマー・コミュニティーとの協力についての別の見解で、コミュニティーによって、まったく想像していなかった方向にサイトを発展させることが可能になっています。

Lightbox

特定のサイトを取り上げるわけではありませんが、ここで、最近のサイトでは Lightbox の手法が大活躍しているという点を指摘したいと思います。lightbox は、ユーザー・インターフェース技術とそこに加えられた Ajax の組み合わせです。図 10 の Web ページの例を見てください。

図 10. Lightbox JS のホーム・ページ
図 10. Lightbox JS のホーム・ページ
図 10. Lightbox JS のホーム・ページ

画像をクリックすると、ページ全体が薄暗くなり、ページ中央にボックスが現れて、そこに選択した写真がズームインされて表示されます。このボックスを図 11 に示します。

図 11. 画像をクリックすると表示される lightbox
図 11. 画像をクリックすると表示される lightbox
図 11. 画像をクリックすると表示される lightbox

この手法には多くのメリットがあります。まず、ユーザーの注意をページの他の部分からそらし、選択したものに一層関心を引かせるようにできます。また、ユーザーはClose をクリックすれば通常のブラウズ操作に戻れるため、ページ上でのユーザーの位置をそのまま維持して詳細を表示する方法となります。

この lightbox の手法は、画像やビデオに役立つだけでなく、テキストのコンテンツにも有効です。私が定期的にアクセスするコンテンツ・サイトの 1 つは、lightbox の手法を使用して、ホーム・ページ上の各記事の概要をその場で見られるようにしています。ただし、概要がロードされるのはユーザーが lightbox リンク (Ajax を使用) をクリックした場合だけです 。つまり、ユーザーは複数の記事の概要を 1 つのページで読むことができます。ユーザーがすべてを読まないとしても大量のページをビルドするということがないため、サーバーの帯域幅を節約できます。これは、ユーザーとサーバーの両方にとって願ってもないことです。

lightbox を作成するには、いくつかのオープン・ソース JavaScript ライブラリーを使用できます。上記に記載したのは、Lightbox JS バージョン 2 です。

その他の Web 2.0 サイト

この記事を書く上で私が検討した Web 2.0 サイトはかなりの数に上ります。ほとんどのサイトは上記に説明したサイトには及びませんでしたが、いずれも価値のあるものです。特にGoogle には傑出したオファリングがいくつもあります。例えば Google Documents and Spreadsheets は、ブラウザー内で WYSIWYG 編集をいかに活用できるかを実証しています。Google Reader は RSS フィードをどのように取得できるかを示す実例で、ホスト型ソリューションを提供してユーザーがあらゆる場所からニュースを見られるようにしています。そしてGoogle Mail は、Google マップだけでなく Ajax、JavaScript、DHTML も使用しています。

Google が得意とするもう 1 つの分野は、モバイル機器対応です。Google のサイトにはいずれも、電話などの小型機器で有効に機能する縮小版があります。Google のアカウントを持っていれば、Web 用と電話用それぞれにカスタマイズされたホーム・ページを持つことができます。

Ajax を見事に活用しているのは Google だけではありません。Meebo はホスト型チャット・アプリケーションの素晴しい一例で、Ajax で機能する、単純ながらも洗練されたインターフェースを備えています。また、カレンダー作成アプリケーションのKiko では DHTML をカレンダーの編集用に、Ajax を新しい予定や、連絡先、関連情報でのサーバー更新に非常に賢く利用しています。

まとめ

この記事で紹介したすべてのサイトから学ぶことは実にたくさんあります。なかでもとりわけためになるのは、非常に賢い技術的裏技です。こられのサイトすべてに共通している 1 つの要素は、HTML と JavaScript コードの組み合わせが持つ威力に対する畏敬の念です。JavaScript コードは最近、プログラミングの世界で酷評されていますが、それは不当だと思います。私が聞いた欠点のほとんどで言われているのは、JavaScript 言語そのものについてではなく、ブラウザーの DOM (Document Object Model) 対応だからです。私にとって明らかなのは、人を魅了する Web 2.0 アプリケーションを作成したいのならば、JavaScript を言語として採用し、それに値するだけの尊敬の念を持たなければならないということです。業界のナンバーワンはそれを実践しています。

冒頭で述べたように、技術だけがすべてではありません。魅力的なユーザー・エクスペリエンスを作成することも要点です。この記事で選んだすべてのサイトは、この分野に新しい境地を開きました。単純なフォームに複雑さを包み隠したサイト (Google マップ) もあれば、簡単な Ajax の手法でインターフェースをシームレスに拡張したサイトもあります。

Web 2.0 アプリケーションはコミュニティーも取り込みます。Google マップではユーザーがそれぞれ独自のアプリケーションで使用できるように技術をマッシュアップできるようにしています。Campfire のようなサイトでは、コミュニティー・エクスペリエンスに集中した強化を行っています。

多くのことを学べるのは確かですが、有難いことに、JavaScript と DHTML アプリケーションを作成する上での容易さが、Web 2.0 アプリケーションを作成するという経験全体を一層快適なものにしてくれます。


ダウンロード可能なリソース


関連トピック

  • developerWorks XML ゾーン: developerWorks XML ゾーンで XML のすべてについて学んでください。
  • Meebo: ほとんどどこからでもインスタント・メッセージを送信できるホスト型チャット・アプリケーションの詳細を学んでください。
  • Google マップ: Google のマッピング・アプリケーションで、ロケーション間のルート作成やビジネス検索など、さまざまなことができます。
  • GMail: Google 検索技術とメガバイト規模のストレージが組み込まれた Google の Ajax対応 E メール・アプリケーションを調べてください。
  • Campfire: 37signalsによるグループ・チャットおよびファイル交換アプリケーションについて学んでください。
  • Kiko: この Ajax カレンダー作成アプリケーションを調べてください。
  • Map My Run: 著者のお気に入りの Google マップのマッシュアップでは、コースを指定して正確な走行距離を調べられます。
  • TaDaList: 37signals の共有予定表システムで何ができるかを試してみてください。
  • YourMinis: ホスト型ウィジェット/ガジェット・サイトで、自分なりのダッシュボードを作成して独自のウィジェットに役立ててください。
  • Ajaxian: Ajax、そして Ajax を使用するフロント・エンドのウィジェットについての最新開発情報を入手してください。
  • IBM XML 認証: XML や関連技術の IBM 認定開発者になる方法について調べてください。
  • XML Technical library: 広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM レッドブックについては、developerWorks XML ゾーンを参照してください。
  • IBM トライアル・ソフトウェア: developerWorks から直接ダウンロードできるトライアル・ソフトウェアで、次の開発プロジェクトを構築してください。

コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=XML, Web development
ArticleID=249241
ArticleTitle=Ajax と XML: Ajax の最高傑作から学ぶ
publish-date=04242007