HTML5やクラウドなどを使えばここまでできる「モーグリのツイートキャッチ」

一見するとフツーのよくあるキャンペーンサイトですが、Flash・Silverlight・Javaといった追加プラグイン的なものを一切使っておらず、その裏側ではHTML5のCANVAS・SVG・Geolocation要素など使えるものを使いまくっており、しかもクラウドやCDN(コンテンツデリバリネットワーク)をバックグラウンドで使用、見た目よりもはるかに技術的にがんばりまくっている……というサイトがこの「モーグリのツイートキャッチ」です。

モチーフとしては、「FinalFantasy XIII-2」にてモーグリを投げ飛ばして遠方のお宝を探索させる「モーグリ投げ」をちょっと違う形で再現しており、このモーグリ投げによってネット上からTwitter上のツイートを集めてくることが可能になっています。もちろんツイートを集めるためにAPIを叩く際にもがんばっていろいろ工夫しています。

Internet Explorer - モーグリのツイート キャッチ
http://www.microsoft.com/ja-jp/windows/internet-explorer/campaign/ff13-2.aspx

Final Fantasy XIII-2
http://www.ff13-2-ie9.com/

HTML5に対応していないブラウザ(Internet Explorer 8など)でサイトに行くと、IE9をインストールするように薦められます。

こちらがHTML5対応ブラウザでアクセスした場合。ユーザーの物理的な位置はマップ表示で利用されます。

ゲームを遊ぶためには、ツイッター連携が必要です。IDとパスを入れてログイン。

あとはマウスでモーグリをつかんで、マップの中の明るくなっている部分(加速領域)へ向けて放り投げるだけ。

すると、モーグリが異空間を通ってツイートを集めてきてくれます。

FF XIII-2に関連したツイートが5件集まりました。面白いツイートがあればここから直接返信してもOK。

ツイートを25件集めるごとにシートが埋まり、プレゼントがもらえます。

まず1つめをゲット。

お宝の中身は実際にダウンロードして確認してみて下さい。

さらに続けて50件に到達。

「まだまだ集めるクポ！」ということで、プレゼントをもらうにはツイート数が足りないようです。

また、モーグリはときどきツイートではなくプレミアムアイテムを拾ってくることがあります。アイテムはプレミアムビンゴカードに記録され、ビンゴが揃うと超レアなお宝が手に入るとか……。

個別のプレミアムアイテムはTwitter用のアイコンです。右クリックで保存して、すぐに使えます。

このゲームは前述の通り、HTML5のCanvasとGeolocation、CSS3といったWebの最新技術がてんこ盛りのコンテンツです。一体、この裏側はどうなっているのかを、マイクロソフトが自ら技術解説しています。

メイキング・オブ・モーグリのツイートキャッチ | MSDN
http://msdn.microsoft.com/ja-jp/hh670630

まずはHTML5編。画面上を動き回っているモーグリはSVGで描画しています。SVGとは「Scalable Vector Graphics」の略で、XMLで記述されているベクターグラフィックスのフォーマット。ベクター画像なので拡大や縮小をしても画像が綺麗なままで、地図のような精細なイメージの表現に適しています。SVGのグラフィックスデータはgタグで記述されていますが、複数のタグを用意してJavaScriptで次々に呼び出すことでアニメーション表現も可能になります。今回のモーグリは、FFXIII-2の本編用に作られた3DモデルをMayaからSVGで描き出し、最適化したそうです。

「モーグリのツイートキャッチ」はBing Mapsを背景として、その上にレーダーや流れる雲、コンパスやコンパスの針が描画されていますが、これにはCanvasが用いられています。Canvasとは、JavaScriptを用いて図形を描くために用意されたHTML要素です。アニメーションはモーグリと同じように、フレームの描画データを事前に用意しておいて、それをJavaScriptで次々に処理して実現。スピーディーに描画するためのコツは、描画データを整数として記述すること。小数点付きデータだと処理が重くなるそうです。

「モーグリのツイートキャッチ」で最初に出てくる位置情報取得に許可を与えると、ゲーム中、Bing Mapsが現在地にズームインしていきます。これはGeolocationというAPIを使用しています。たとえGPS機能がない端末でも、端末のIPアドレスやWi-Fiの情報で位置情報を取得できるので、ちゃんと場所が表示されるというわけです。GPS機能を持つ端末であれば、さらに精度の高いデータ取得が可能です。

モーグリを投げるときにレーダーが左右に行き来していますが、このグレーで表現されている部分は半透明です。これはCSS3で透過率を設定しています。また、モーグリが集めてきたツイートを拡大表示するときもCSS3のtransformプロパティを活用しています。これらはあくまでブラウザの標準機能を使っているため、同じような処理を行うjQueryよりも処理スピードが早くできます。

ここからはクラウド編。「モーグリのツイートキャッチ」のサーバー側処理は、PHPで生成されたコードをWindows Azureで動かしています。サーバー環境のセットアップはEclipse上でEclipse上で Azure PHP プロジェクトを動かすだけ。環境設定のパラメーターはデフォルトのままでOKで、あとはEclipseでPHPコードを記述し、パッケージングとデプロイを行えば、サイトが立ち上がります。

表示されているツイートはTwitterから直接取得しているのではなく、事前に収集・保存してカテゴライズしたもの。処理はWindows Azureのワーカーロールで実行されています。収集されるツイートの数は1時間あたり2000～3000件、1日あたりでは数万件。収集されたツイートは、ツイート時刻や内容によってリアルタイムでカテゴリ分けされ、データベースに格納されています。

データベースにはSQL Azureを使用しています。サーバーにデータベースソフトウェアを導入する手間が必要なく、運用管理の負担もほとんどありません。利用時に指定するのはデータベースの最大容量だけ。負荷が上昇した場合でも自動的に処理能力が拡張されるので、スケーラビリティに対する不安はありません。またデータバックアップも自動的に行われているので、バックアップ運用も不要です。LAMP環境向けに作成されたPHPコードでも、データベースアクセスにPDOを使っていれば、簡単な設定変更でSQL Azureに対応できます。今回のデータベース実装も「驚くほど順調でした」と、開発担当者から高く評価されているそうです。

「FINAL FANTASY XIII-2」の本編紹介コンテンツには、数多くのビデオコンテンツが用意されています。これらの配信には、Windows Azure content delivery network(CDN)が活用されています。CDNとは、よりユーザーに近い場所にデータのコピー(キャッシュ)を配置し、配信パフォーマンスと信頼性を高める技術。多数のユーザーに大容量データを配信する場合に、特に大きな効果を発揮します。Windows Azureにはこの機能がオプションとして用意されていますが、CNDの設定を有効にするだけで使うことができます。CDN を有効にするとキャッシュ配置が自動的に行われるので、サーバー管理者は細かい構成を意識する必要はありません。

このようにしてもうやれるだけのことはやりまくっており、「HTML5でここまでできるのだ！クラウドとかも使いまくればこんなことだってできるぜ！」というのを証明しまくっており、今までのようなインタラクティブさも保ちつつ、しかもソーシャル的な双方向性までをもカバーしていこうという姿勢の中には明らかに今後のネットの方向性、あるいはこういうサイトを作ればこういったこともできるのだ、というショーケース的な意味合いまで含めて、いろいろと技術的にもバックグラウンド的にも参考にすることができる力作となっています。

それにしても驚くべき徹底的な解説っぷりですが、その理由は、日本マイクロソフトがもっと手軽に技術に慣れ親しんでもらうための取り組みとして「Start Something! つくりたいを誰でもすぐに」を立ち上げていて、この「メイキング・オブ・モーグリのツイートキャッチ」が目玉コンテンツだから。

クラウドサービスを擬人化したクラウディアさんのマンガ「クラウドガール」が始まったときには「どうしたマイクロソフト！？」という感じがありましたが、それも「Start Something!」の一環だったわけです。

「Start Something!」では無料で使える開発ツールもたくさん用意されているので、サイトを参考にしつつ何か新しいことを初めてみるというのもよいのではないでしょうか。

メイキング・オブ・モーグリのツイートキャッチ | MSDN
http://msdn.microsoft.com/ja-jp/hh670630