レポート

「第21回 HTML5とか勉強会」活動報告

この記事を読むのに必要な時間:およそ 2.5 分

猛暑と節電の夏を乗り越え,ようやく涼しくなってきました。2011年度もいよいよ後半に突入です。そんな中,HTML5とか勉強会も,前回の20回記念スペシャルイベントの余韻が冷めやらぬ中,9月27日に定例通り開催しました。

21回目となる今回は,現在のHTML5で最もホットな分野の,スマートフォンによるゲームアプリ開発にフォーカスをあて,様々な講演をしていただきました。HTML5というと,⁠いつから使えるの?」という声を各所から聞かれますが,ことスマフォゲームの世界では,すでに当たり前に使われている技術であり,take offしているといって過言ではありません。今回の講演で紹介いただいた数々のプラクティスは,ゲーム業界に身をおかずとも,HTML5に関心を持つ開発者や企画者には必聴のものでした。本稿では,その内容についてレポートします。

今回の会場は,サイバーエージェントさんの会議室をお借りし,その後のビアバッシュ含め開催しました。ボランティアベースで質の高い勉強会を開催できるのは,快く会場を提供いただける企業の方々の協力があってこそです。ここに厚く御礼を申し上げます。

画像

「スマホ向け HTML5 ゲームの作り方」

最初の講演は,DeNAの城戸さん。モバゲーのスマートフォン用Webアプリ開発について,様々なプラクティスを紹介していただきました。

モバゲーでは,フィーチャーフォンで展開しているFlashゲームを,HTML5を用い移植したWebアプリとしてスマートフォンで提供しています。この時の対応策は,大きく以下の3つに大別できるとのことです。

  1. CSS3アニメーションの利用
  2. Canvasの利用
  3. SWFをツール(ExGame)を用い,Webアプリに変換

この中から,本講演では,1と2について詳細を説明していただきました。

1.が適用されるのは,コマンドを入れると,アニメーションが動き,またコマンドを入れるといった類のゲーム。ロールプレイングゲームなどがそれに該当します。この時,ゲームシナリオをユーザーにハックされないよう,データ管理はすべてサーバーサイドで行い,クライアントはコマンド送信と結果の表示に徹することや,アニメーション制御を効率よくコーディングするために,タイムラインを記述する独自のフレームワークを利用していること,それぞれのタイムラインをbindするために,jsDifferedを用いた非同期制御を行っていることなどを示されました。

2.が適用されるのは,アクションゲームのような即時反応系のゲーム。こちらには,Arctic.jsと呼ばれる独自フレームワークを利用しているとのことでした。ActionScript3風にプログラミングできるのが特徴で,Flasherに優しいフレームワークであるとのこと。近日公開予定とのことです。お楽しみに!!

「スマートフォン版アメーバピグのつくりかた」

ひき続き,サイバーエージェントの原さんから,アメーバピグのスマートフォン版で用いたプラクティスを紹介いただきました。

アメーバピグのアバターは非常に多くのパーツを選択可能なため,普通に画像ファイルとして用意すると,そのファイル数は甚大となってしまいますし,容量も大きくなってしまいます。こうなると,ダウンロードにかかるコストは無視できないものとなってしまいます。特にスマートフォンのようなネットワークが細いモバイル環境では致命的です。そこで,数々のプラクティスを駆使し,タイムラグを感じさせないレスポンス性に富むサービスをどのようにして作ったかについて解説していただきました。

ポイントは,ファイル数を可能なかぎり削減し,ラウンドトリップタイムの影響を極小化しつつ,ダウンロード容量をいかに下げるか。画像ファイル数の削減で,真っ先に思いつくプラクティスはCSS spriteですが,前述のとおりアバターのパーツの数は大変多いため,このテクニックではダウンロード容量がボトルネックになってしまいます。このため,画像ファイルではなく,Canvasを用いたそうです。用いたツールは,イラストレーターのプラグイン。イラストレーターで描いた画像ファイルをプラグイン(Canvas変換ツール)でJSに変換した後,座標データを取り出し,効率よくJSONデータ化することで,容量の削減に成功したそうです。このテクニックにJSのminimizeとgzipを組み合わせることで,結果的に88%の容量削減に成功。レスポンス性の高い,サイトの開発を達成しました。

さらに,画面遷移については一つのHTMLでhashchangeを用いたり,URI-schemaをloadアイコンに利用したり,CSSスプライトを使う部分はSassを用いることで効率的なコーディングを行ったりといった,数々のプラクティスを用いることで,開発効率に優れ,かつ高速なサイトを作り上げたとのこと。⁠確かに面倒ではあるが,プロである以上はこだわりたい」という言葉がとても印象的でした。

著者プロフィール

小松健作(こまつけんさく)

NTTコミュニケーションズ 先端IPアーキテクチャセンタ リサーチエンジニア。家系をこよなく愛するラーメン好き。元々はネットワークエンジニアだったが,Ajaxの登場以来,今後のサービスはWeb(Javascript)を中心に回ると確信。その魅力にとりつかれる。WebSocketに衝撃を受け,リアルタイムWebの到来を信じ,html5の世界に足を踏み出した。Google公認 API Expert(HTML5)。Microsoft Valuable Professional(IE)。好きな言語は,JavascriptとRuby。

Blog:http://blog.livedoor.jp/kotesaki/

Twitter:@komasshu

コメント

コメントの記入