このページの本文へ

MSとスクエニがHTML5でコラボレーション

HTML5でモーグリ投げ!FF13-2キャンペーンサイトの裏側

2011年12月21日 17時41分更新

坂本洋史/Web Professional編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

 12月20日、プレスを対象として、日本マイクロソフトとスクウェア・エニックスによる共同キャンペーン企画「モーグリのツイートキャッチ」の技術情報に関するラウンドテーブルが開催された。

001.jpg-記者会見風景

 モーグリのツイートキャッチは、マイクロソフトのブラウザー「Internet Explorer 9(IE9)」と12月15日に発売されたスクウェア・エニックスの新作ゲーム「FINAL FANTASY XIII-2(以下FF13-2)」のPRを目的としたWebアプリ。FlashやSilverlightといったプラグインを一切使わず、HTML5のみで表現されており、IE9のGPUアクセラレーションへの最適化をはじめ、Bing Map APIやWindows Azureといったマイクロソフトの提供するテクノロジー群で構築されているのが特徴。IE9の普及を狙う日本マイクロソフトがスクウェア・エニックスに提案して実現したもので、日本マイクロソフトでXbox関連以外のチームがゲームベンダーとコラボレーションするのはこれが初めて。

002.png-Webアプリ「モーグリのツイートキャッチ」
Webアプリ「モーグリのツイートキャッチ」

 キャンペーンサイトのWebアプリは、ゲームに登場するキャラクター「モーグリ」と、モーグリを「つかんで放り投げる」というゲーム中のギミックを模したTwitter連動型コンテンツ。SVGで描画されたモーグリをマウスドラッグで地図上に放り投げ、FF13-2に関するツイートとそのユーザーのアイコンを一緒に拾い集めるというもの。ツイート集めにはコレクション要素があり、集めた数によって壁紙などの特典をもらえる。

003.png-Webアプリ「モーグリのツイートキャッチ」
Webアプリ「モーグリのツイートキャッチ」

 ターゲットブラウザーはIE9、Chrome 12、Firefox 5。同サイトは「ピン留め」機能にも対応しており、IE9とWindows7の組み合わせならWebサイトをアプリのように起動することもできる。

004.png-キャンペーンサイト内で展開される登場キャラクターの紹介や、トレーラー映像といったプロモーションコンテンツもHMTL5で実装
キャンペーンサイト内で展開される登場キャラクターの紹介や、トレーラー映像といったプロモーションコンテンツもHMTL5で実装

 開発を担当した「クレアテック」は元々Flashでの制作を得意とする開発会社で、HTML5でのサイト構築は今回が初。開発にあたっては「SVG」「Canvas」「Geolocation」「CSS3」の4つを技術的な要点として位置づけ、「Flashにどこまで近づけるかがテーマだった」と話した。

005.png-株式会社クレアテックwebディレクターー十倉哲氏とテクニカルディレクター阿蘇健一氏
株式会社クレアテックwebディレクターー十倉哲氏とテクニカルディレクター阿蘇健一氏

 スクウェア・エニックス宣伝部シニア宣伝プロデューサーの大藤昭夫氏は、「これまでの自社のプロモーションサイトはFlashが主流で“カッコイイけど重い”という課題を抱えていた。また、PCだけでなくスマートフォン対応も視野に入れる必要もあり、PRサイトのHTML5化を検討しているところだった」とコメント、マイクロソフトからの技術提供が同社にとっても大きなメリットになったとした。また、今回のキャンペーンで、Twitter上でのユーザーコミュ二ティの活性化に手ごたえを感じつつも、「まだこれから。いろいろなアイデアがあり、できたコミュニティをどうやって広げていくかが新しい課題」として、更なる展開に意欲を見せた。

 一連のプロジェクトを受けて、日本マイクロソフトではMSDNのサイト内に特設ページを設置。「HTML5編」と「クラウド編」としてモーグリのツイートキャッチに関する技術情報を公開中だ。

006.png-メイキング・オブ・モーグリのツイートキャッチ
メイキング・オブ・モーグリのツイートキャッチ

カテゴリートップへ

ソーシャルランキング
  1. Google社員がSEOの質問に答える AMA with Google Search SMX West 2017 15
  2. クラウドは地方を救うか?KDDIウェブら「Cloud ON OKINAWA」を立ち上げ 4
  3. GoogleやLINEみたいなSMS二要素認証をTwilioでサクッと実装してみよう 2
  4. 「使いやすい」と言われたい!WordPressの編集画面にメタボックスを追加する方法 2
  5. LinkedIn、パーソナライズしたニュースストーリーを配信する新機能を提供開始 1
  6. 商業写真で首切りと串刺しがダメな理由 2324
  7. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  8. Sketch 3を使う3つの理由と10の魅力 633
  9. ボーナス支給日確定で新聞社を辞めた人に贈る本 551
  10. 5限目:「情報」を「コンテンツ」に変える 告知コピー制作メソッド 396
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング