SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

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

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

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

本稿では、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を多用してリッチクライアントアプリケーションを実現しています。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ケーススタディ: グラスシャドウエフェクト

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

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

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Vlad Kofman(Vlad Kofman)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2126 2008/02/14 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング