• ホーム
• 購読申込
• ヘルプ
• アーカイブ

Adobe AIRによるWebコンテンツの新発想
Adobe MAX CUPの興奮を伝えるウィジェット

アドビシステムズが主催し、IT関連企業のフットサルチーム合計8チームが参加するフットサル大会「Adobe MAX CUP 2007」。この大会の模様を伝えるWebサイトにアクセスすると、「Adobe MAX CUPウィジェット」というAdobe AIRアプリケーションがダウンロードできます。しかしこれは、これまでのAIRアプリケーションとは少しだけ違っており、Flashで作られたWebサイト上の各コンテンツと対を成すAIRウィジェット（部品要素）が用意され、まるでWebサイト上のパーツを切り取って自分のデスクトップアプリケーションにするという動きを見せてくれます。

この仕組みを開発した株式会社サイトフォーディーに、 Adobe MAX CUPウィジェットを通じて得られたAdobe AIRによる開発ノウハウを語ってもらいました。

WebとAIRを繋ぐ「AIRボール」の妙

─ まず今回、Adobe MAX CUPウィジェットを開発するに至った経緯を教えてください。

アドビが「Adobe MAX Japan」と同時開催で、同業他社とのフットサルトーナメントを開催するという点に非常に興味を覚えました。それと同時に“アドビのテクノロジーを介して世界に発信する”というミッションもありましたので、それも含めて設計する必要があることを当初から感じていました。

特に、Adobe AIRの魅力を訴求するためのツールが、アドビ社内でも必要としていることが伺えましたので、MAX CUPのサイト自身が、試合のプロモーションだけでなく、Adobe AIRのプレゼンテーションツールとして大会終了後も機能するというコンセプトを作りました。

─ Adobe MAX CUPウィジェットはAdobe AIRで設計されていますが、ウィジェットにはどのような機能が盛り込まれていますか？

まず、Adobe MAX CUP 2007のWebサイトは、すべてウィジェットとしてダウンロード可能なパーツで構成されているのです。MAX CUP自身の告知に必要な要素を「MAX CUPウィジェット」と呼ばれるメインのウィジェットに集約し、ビデオプレイヤー、画像スライドショー、検索など大会終了後も楽しめるコンテンツは、ウィジェットとしての汎用性を高めています。これによって、MAX CUPが終了しても、サイトの存在意義は残せると考えています。

加えて、Webブラウザにあるグラフィックを自分のデスクトップに保持するという行為は、現状ではあまり馴染みのあるものではありません。誰しも、自分のお気に入りをいつまでもコレクションしたいという気持ちはあるはずですが、Webではなかなか実現しないのが実情です。それを、今回はブラウザRIAとデスクトップRIAのシームレスな連携という形で実現しようとしたのです。

シナリオとしてはこのようになります。まず、サイトに訪れると、メインエリアに大会キャラクターの対決イメージと共に大会日程を閲覧でき、選手の画像や試合の映像が見られます。また、速報性の高いニュース記事の表示や、決勝戦までのカウントダウン機能もあり、ライブ感のあるトップページを楽しむことができます。

─ WebサイトとAIRアプリケーションの連携というところで、とてもユニークなアイデアを実現されているそうですが、それはどういうものでしょう？

Adobe MAX CUP 2007のWebサイトで一般的なサイトインタフェイスと異なるのが、私たちが“AIRボール”と呼ぶオブジェクトの存在です。最初、サイトに訪れた際には、大会日程などのMAX CUPの情報が集約されているメインエリアの下部にのみ、“AIRボール“が置かれています。これをクリックすることで、ベースとなる「MAX CUPウィジェット」がインストールされます。

インストール後にサイトを訪れると、今度はサイト中にある、先ほどまでグレーだった“AIRボール”が赤く発色しています。これが、ダウンロード可能であることのサインとなり、サイト中のパーツがウィジェットとしてデスクトップに置くことができるようになるのです。あとは、欲しいと思ったパーツの“AIRボール“をクリックしていくだけで、次々とAdobeウィジェットをコレクションしていけます。さっきまでサイトにあったパーツが、次の瞬間にはデスクトップにある、という体験は、かなり驚きのある嬉しさに繋がっていますね。

単に、ウィジェットの配布を考えた場合には、まとめてダウンロードさせたり、機能の説明を加えたりすると思いますが、最初からそういう方向では位置づけていませんでした。Adobe AIRという存在、そしてアプリケーション自身のインストールの流れ、ブラウザとデスクトップアプリケーションの利点を併せ持ち、かつ共存し連携できるというメリットを、一連の流れのなかで体験できるよう設計しています。

アドビにとっては、このサイトを通してAdobe AIRをプレゼンテーションできるというメリットはありつつ、一般ユーザに対してのサイトの役割は、やはりMAX CUPの情報取得です。あくまでもそのプラットフォームとしてアドビのソリューションを介しているというバランスに配慮し、Adobe AIRそのものやウィジェットの説明をし過ぎないというバランスにも注意しました。ユーザがサイトを楽しみつつ、自然とAdobe AIRに触れていたという体験が残ればと考えています。

ウィジェット開発のチャレンジポイント

─ 開発にあたって、FlashやFlexを利用されたと思いますが、開発にかかった時間はどれくらいでしたか？

UIデザインに約1週間、開発に約2週間というスケジュール感でした。ただ、全ページ、全パーツをあらかじめデザインカンプとして用意したわけではなく、ベースとなる数ページをデザインし、残りはFlashやFlexでオーサリングしながら、パーツ単位で仕上げていくという方法で進めました。これは、アプリケーションの開発の場合、実際にテストプログラムを動かしながら、デザイナーとエンジニア双方が話し合いつつ、早期にUIの問題点を発見していくプロセスが、最も効率的で精度が高いという経験則に基づいています。

例えば、予想より多くの情報を格納しなければならなくなった場合に「スクロールバーをつけた方がいいかも」といったことや、ウィジェットをダウンロードするボタンを押した瞬間、何が起こったかわからないから「事前事後にメッセージを出した方がいいかも」などといったやりとりを口頭ベースで行い、ユーザビリティを向上するための機能を追加し、改善しています。そうったことをあらかじめ設計書や仕様書に落とすことは可能ですが、デザイナーやエンジニア自身の生きた体験からはそれを上回る提案が出やすいものです。そういった化学反応的なコラボレーションのある制作現場になるよう、設計者から出す仕様も、なるべく手書きを多用し、アイデアを増幅しやすいものにしています。

ただ、今回はAdobe AIRによるブラウザRIAとデスクトップRIAの連携という、ほとんど事例のないプロジェクトのため、開発中はさまざまな課題に直面しました。

─ AIRによる開発とサービス提供を進めるうえで、気をつかわれた点はどういったところでしょう。

まずはAdobe AIRが10月1日にベータ２にバージョンアップされた事に伴い、以前のバージョンとの相違点調査／検証が必要でした。情報の少ない中、実際に動作させての検証を繰り返しながら進めていきました。

ブラウザRIAとデスクトップRIAの連携という点については、FlashとAdobe AIR間でデータ連携を行うためのSharedObjectというファイルに対し、アプリケーションの違いによりデッドロックが発生する状況は無いのか、Flash側のページが複数起動している状態でウィジェットを起動させた場合にはどのような挙動をするのかなど、それぞれ単体のアプリケーションで起動していた場合には気に掛けずに済んだ点も検証しながら進めていく必要がありました。

また、今回はベースとなる「MAX CUPウィジェット」が各パーツのウィジェットを制御する形態を取っているため、インストールを一括で行った後にFlashページと連携を取って起動設定を行ったり、設定情報の保存を統合して行わなければならない点やオフライン起動時の各ウィジェットの挙動も検討しながら総合的に作成する必要がありました。

─ このウィジェットはAdobe MAX CUP以外にもさまざまな応用が考えられると思います。今後の御社のビジネスにつながるような展望、将来野望を最後に教えていただけますか。

ソリューションの本質を捉え、潜在能力を引き出していくというアプローチはSiTE4Dが得意とするところです。特にAdobe AIRは今後のビジネスシーンを変えていくほどの影響力を持っているため、今後もいままで見たことないと思わせるようなものづくりができると思います。

SiTE4Dは顧客企業のビジネスに貢献することを主旨としているため、今後もクライアントの抱える問題解決のために、日々研究をし、技術力を高めていくつもりです。私たちの活動によって、UIデザイナーやエンジニアの活動の場が広がり、結果的にあらゆる人々が生活のなかでより心地よい体験を増やしていければ良いと思っています。

幅広い方々にライブストリーミングの体験を提供するために開発されたAdobe MAX CUPウィジェット。そしてその真価が発揮されるのが、2007年11月1日（木）、まさにAdobe MAX Japanが開催されるのと同日に行われる決勝戦です。東京・銀座deフットサル大崎スタジアムでの決勝戦の模様を株式会社Ｊストリームの協力のもと、Adobe Flash Media Server技術を使って11月1日18:40よりストリーミング配信されます。もちろんAdobe MAX Japan 2007会場でもストリーミング中継で観戦できますので、皆さんで大いに盛り上がりましょう。

‹ 戻る