猛暑と節電の夏を乗り越え、ようやく涼しくなってきました。2011年度もいよいよ後半に突入です。そんな中、HTML5とか勉強会も、前回の20回記念スペシャルイベントの余韻が冷めやらぬ中、9月27日に定例通り開催しました。
21回目となる今回は、現在のHTML5で最もホットな分野の、スマートフォンによるゲームアプリ開発にフォーカスをあて、様々な講演をしていただきました。HTML5というと、「いつから使えるの？」という声を各所から聞かれますが、ことスマフォゲームの世界では、すでに当たり前に使われている技術であり、take offしているといって過言ではありません。今回の講演で紹介いただいた数々のプラクティスは、ゲーム業界に身をおかずとも、HTML5に関心を持つ開発者や企画者には必聴のものでした。本稿では、その内容についてレポートします。
今回の会場は、サイバーエージェントさんの会議室をお借りし、その後のビアバッシュ含め開催しました。ボランティアベースで質の高い勉強会を開催できるのは、快く会場を提供いただける企業の方々の協力があってこそです。ここに厚く御礼を申し上げます。
「スマホ向け HTML5 ゲームの作り方」
最初の講演は、DeNAの城戸さん。モバゲーのスマートフォン用Webアプリ開発について、様々なプラクティスを紹介していただきました。
モバゲーでは、フィーチャーフォンで展開しているFlashゲームを、HTML5を用い移植したWebアプリとしてスマートフォンで提供しています。この時の対応策は、大きく以下の3つに大別できるとのことです。
- CSS3アニメーションの利用
- Canvasの利用
- 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を用いることで効率的なコーディングを行ったりといった、数々のプラクティスを用いることで、開発効率に優れ、かつ高速なサイトを作り上げたとのこと。「確かに面倒ではあるが、プロである以上はこだわりたい」という言葉がとても印象的でした。
「HTML5 Game with Web UI」
メインセッションの最後に登壇いただいたのは、GREEの米川さん。GREEでも、フィーチャーフォンでのFlashゲームをスマートフォンへHTML5を用いた移植を行っており、swfをcanvasやCSS3 transitionなどへ変換するツールを利用するなど、既存資産やワークフローを活用しているとのことでした。
開発技法については簡単な紹介にとどめ（先の2つのセッションで講演がなされたこともあり）、主にWeb UIとネイティブ機能をハイブリッドに組み合わせる「Web UI アーキテクチャ」について、紹介いただきました。HTML5のメリットとして、マルチプラットフォーム対応が容易であることや、A/Bテストが簡単にできること、また、キャンペーンやイベントに応じ、コンテンツを改変することが容易であることを言及され、このような特徴からゲームの部分はWebアプリとして開発されているとのことです。一方、HTML5だけではできないことも存在し、特にデバイス機能を使いこなすにはGapが多いことを指摘されました。
このため、ブラウザで動いているゲームをネイティブアプリでラップするハイブリッドアプリの形態でサービスを提供していると紹介されました。例えば、スクリーンショット付きのひとことを共有したり、Push Notificationを利用したり、アプリ内課金をしたりといったことはWebアプリでは困難であり、こういった部分はネイティブアプリとして実装し、ゲームの部分は、Web UIを用いているとのこと。このような技法は、FacebookやGoogle+などでも採用しており、メジャーなムーブメントであると述べられました。このWeb UIアーキテクチャによるフレームワークを現在開発中で、いずれ公開する予定であるとのことです。
「JSクイズゲームの作り方（HTML5実力テストの紹介）」
3つのメインセッションが終わった後、2つのショートセッションを講演いただきました。最初に講演いただいたのは、面白法人カヤックの吾郷さん。先ごろ公開され話題となった、「HTML5実力テスト」について紹介いただきました。「HTML5実力テスト」は難問ぞろい、W3Cの仕様書などをつぶさに調べ作成されたということで、作った本人ですら100点を取るのが難しかったとのことでした。 「クイズは作るものではなく、やるもの」という言葉から、問題の作成に際し苦心されたことが伺われます。
実は、このテスト、もともとは「裏HTML5実力テスト」としてさらに難問ぞろいのものを作成しつつ、特に公開していなかったものがきっかけとなっていたそうです。こちらの裏テストのURLが講演資料の中に掲載されていますので、われこそはと思う方は、是非チャレンジしてみてください。
「enchant.js HTML5 + Javascript Based Game Engine」
ショートセッションの2つ目、最後の講演として登壇いただいたのは株式会社ユビキタスエンターテインメントの伏見さん。HTML5+JSのゲームエンジン「enchant.js」について紹介していただきました。
enchant.jsは、2011年4月にオープンソースとして公開された国産のゲームエンジン。「早くて、軽くて、気持ちよく」短いコードでゲームを開発できるのが特徴です。拡張性が高く、プラグイン開発も可能となっており、XHRやWebSocketなどの通信サポートも容易。6時間あれば、ミニゲーム1本は十分開発可能とのことでした。
講演の後半では、live codingも披露され、実に簡単に楽しくゲームプログラミングが可能なことを示されました。10月にはenchantPROを公開予定で、NativeアプリでのARも簡単に開発できるとのこと。こちらも楽しみですね（講演資料は、こちらで公開されています）。
最後に
レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら、twitter（@komasshu）で気軽につぶやいていただければと思います。本勉強会は、毎月第3水曜日または第3木曜日に開催していますので、興味を持たれた方は是非参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。開催のアナウンスはhtml5 developers jpのMLで行われますので、登録されていない方は、是非登録ください。また、コミュニティサイトも"html5j.org"として新しくサイトリニューアルされました。是非、こちらも確認してみてください。来月も開催予定です。お楽しみに。
