Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Web 2.0エフェクトとリッチクライアントアプリケーション

FlashやAJAXで可能になったWebエフェクトの進化

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/02/14 14:00

本稿では、Web UIエフェクトとエフェクトテクノロジの進化について論じ、Web 2.0エフェクトがどのようなものか、それらの作成にどんなツールキットを利用できるか、それらが人気サイトでどのように使われているかを説明します。

目次

はじめに

 市場には、ユーザーのWebエクスペリエンスを向上させるためのテクノロジが数多く存在します。インターネットが自社のビジネスモデルの不可欠な部分になっている企業の多くは、ユーザーベースを拡大したり、顧客をつなぎとめておくために、そうしたテクノロジを利用しています。たとえばYouTubeやAmazonやYahooは最近、ユーザーエクスペリエンスを向上させるために自社のメインWeb資産にAdobe Flashを導入し、動的なコンテンツを含むウィジェットを利用できるようにしました。このようなWebエフェクトはリッチクライアントアプリケーションとも呼ばれます。リッチクライアントアプリケーションの背景にあるアイデアは、クライアント側により多くのロジックを置いて、アプリケーションの応答性と対話性の両方を高めようとするものです。

 本稿では、Web 2.0ムーブメントと共に現れた種々の新しいWebエフェクトについて取り上げ、これらのWebエフェクトのいくつかを実際のプロジェクトに実装する方法を示します。これらのエフェクトは既存の標準規格に基づいているので、エンタープライズサイトでも個人サイトでも安心して使用できます。最近のAJAXフレームワークの多くは、AJAXを使用するものも使用しないものも含め、さまざまなWebエフェクトに特化した大きなモジュールを備えています。Web 2.0エフェクトは見た目が良いだけでなく、非常に機能的でもあり、次世代のWeb UIの代表的手法となっています。

Web UIの進化

 Webがまだ静的だった頃から、開発者たちはユーザーとWebサイトとの対話性を改善しようと努力し続けてきました。初期の例の1つは、バックグラウンドでロードされ、Webユーザーを楽しませる(または煩がらせる)単調なリズムのMIDI音楽ファイルです。もう1つの例は、複数のフレームをループさせてムービーのように見せるアニメーションGIFのような手法です。アニメーションGIFは一部のサイトではまだ使われていますが、ビデオプラグイン(Quicktime、DivX、WMA)やFlashのような現代的なテクノロジに徐々に置き換えられています。

 90年代末期におけるインターネットのドットコムバブルは、数々の現代的なWeb UIテクノロジの基礎を築きました。また、E-コマースサイトの急増によって動的Webが生み出されました。静的コンテンツと自動生成セクションが複雑に組み合わされるようになり、新しいWebエフェクトが爆発的に普及しました。このようなエフェクトの代表例がマウスロールオーバーやイメージマップ、ドロップダウンナビゲーションメニューなどで、その多くは現在のWeb 2.0サイトでは大幅に改良されています。

 Webエフェクトの多くは、ドラッグアンドドロップや透過性といったデスクトップアプリケーションのエフェクトを発展的改良するものですが、ユーザーとコンピュータとの対話性を全般的に向上させることに貢献しているものも少なくありません。たとえば、Google Mapsのドラッグ可能なイメージエリアなどは、Webメディアで考案されたもので、デスクトップアプリケーションには適用されないエフェクトです。

Web 2.0エフェクト、テクノロジ、フレームワーク

 さて、Web 2.0エフェクトとは何か、あらためて考えてみましょう。なぜ話題になっているのでしょうか。誰かが新しいエフェクトを紹介したときに、なぜブログ界が一斉に盛り上がるのでしょうか。Web 2.0エフェクトとは、サイトとその基本データをユーザーが操作するための方法を表すユニークな手法です。ナビゲーションを提供するエフェクトもあれば、Webページの表示領域を節約するためのエフェクト、データを独特の方法で表示するエフェクト、いくつかのアクションを組み合わせたエフェクトもあります。たとえばGoogleのGoogle Suggest機能は、よく行われるクエリをユーザーの入力中に自動補間することで、入力の手間を減らし、検索を容易にします。DellやAmazonのサイトには、ユーザーが現在のページから去らずに動的な(div要素による)ダイアログを開くことのできる小さなリンクがあり、それによってWebページの表示領域を節約し、ユーザーエクスペリエンスを高めています(Dellではショッピングカートとサイトログインに使用しており、Amazonではウィッシュリストに使用しています)。

 ソーシャルネットワーキングサイトでは、長時間のページリフレッシュを避け、ユーザーにサイトの対話的機能を数多く使ってもらうために、AJAXに大いに依存したWebエフェクトが利用されています。データはAJAXを通じてサーバーから非同期にフェッチされ、クライアント側でDHTMLとJavaScriptによって操作されます。リッチクライアントアプリケーションではAdobe Flash(およびFlex)も使用しており、それによって対話性に優れたアプリケーションを実現し、Webページの一部または全部を動的アプリケーションに置き換えています。たとえば、Fidelity LabsではFlashを多用してリッチクライアントアプリケーションを実現しています。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • Vlad Kofman(Vlad Kofman)

    ウォールストリート有数の企業でエンタープライズレベルのプロジェクトに携わる。また、米国政府の防衛関連の仕事も手がけている。特に関心を寄せているのは、オブジェクト指向プログラミング方法論、UI、デザインパターン。

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5