「HTML5でFlashが不要になる」――。次世代Web標準規格「HTML5」でよく聞くのがこんなフレーズだ。ところが、実際にFlashで作ったコンテンツをHTML5（+JavaScript）で置き換えた、なんて話は（少なくとも日本では）ほとんど聞かない。本当にFlashコンテンツをHTML5で（しかも商用レベルで）置き換えられるのだろうか？
そう思っていたら、あの「ハンゲーム」を手掛けるNHN JapanがモバイルゲームのHTML5化を着々と進めていると聞き、同社の「HTML5勉強会」（2月25日開催）に行ってみた。勉強会では同社のエンジニアが、HTML5/CSS3によるオンラインゲームの開発事例について語った。
NHN主催のHTML5勉強会の様子。同社オフィス内にある、広々としたカフェで開かれた
Flashをプロトタイピングに利用、Canvasでアニメーションを実装
「FlashからCanvasへの移植は正直、とても大変だった」。NHN Japan UIT室Mobile UIチームの野津手 昌美さんは、シミュレーションゲーム「激闘！戦国絵巻」の開発をこう振り返った。
野津手昌美さん
野津手さんが手掛けた「激闘！戦国絵巻」は、もともとは携帯電話（フィーチャーフォン）向けのミニゲームアプリ。携帯電話版ではフロントエンドをFlash Liteで実装していたが、スマートフォンへの移植にあたってはHTML5を採用した。最近ではFlash Playerを搭載するAndroid端末も多いが、「iPhoneとAndroidの両方に対応することを考えると、HTML5が効率的」と判断。iPhone/Android版ともに外枠だけをネイティブアプリとして用意し、表示するゲームコンテンツそのものはHTMLを表示することで開発コストを下げた。
携帯電話版でFlash Liteが担っていたアニメーション処理は、HTML5のCanvasを使って実装した。CanvasはJavaScriptでビットマップ画像を描画するAPIで、今回のゲームでは背景画像を表示したCanvas上にキャラクター画像をタイムラインに沿って配置する処理を繰り返してアニメーションに見せている。「Flashをプロトタイピングとして使い、実際のアニメーションの動きを見ながらコードを考えた」（野津手さん）という。
HTML5を使った本格的なゲーム開発のノウハウはまだ少ないことから、開発にあたっては苦労も多かったようだ。APIが標準化されているとはいえ、環境によってレンダリング結果には違いがあり、Android OSの同一バージョンでも端末によって「透明効果が効かない」「画像がぼやける」などの細かな問題が発生したという。結局、国内で販売されているAndroid端末すべてで検証した結果、端末ごとに処理を書き分け、「ゲームの進行に直接関係ない違いはある程度割り切る」ことで乗り切った。
野津手さんは「手軽にアニメーションを作れるツールがない、ライブラリーが少ないなど、現状、CanvasはFlashに比べてマイナスの要素が多い」と話す一方、「時間が経てば解決できる要素も多い」と話す。「これからもHTML5/Canvasを使ったゲームを積極的に世に送り出していきたい」（野津手さん）。
HTML5とともに話題に上ることも多い「CSS3」についても、NHN Japanは採用を進めようとしている。Mobile UIチームの馬場宣孝さんは昨年、スマートフォン版の「対戦リバーシ」で、CSS3を使って石を描画・アニメーションさせるプロトタイプを作成した。ユーザーテストまで漕ぎつけたものの、テストの結果、ゲームが進むにつれて十分なパフォーマンスが得られないことが分かり、最終的にはJavaScriptと画像を使うことに。「スマートフォンではどこでJavaScriptを使うか、CSS3を使うか、見極めが重要。3か月から半年に一度は技術を見直していきたい」（馬場さん）という。
勉強会ではこのほか、実験中のプロジェクトとして、WebSocketを使ったリアルタイムコミュニケーションサービスのデモも紹介された。勉強会を主催したNHN JapanでもHTML5やCSS3を使ったゲーム開発はまだ試行錯誤の段階で、必ずしもFlashゲームをそのまますべて置き換えるような状況というわけではない。だが、スマートフォンの普及、特にiOSとAndroidのクロスプラットフォーム開発を考えると、同社のようにHTML5+JavaScript/CSS3を積極的に採用する動きが今後、ゲーム業界でも加速しそうだ。
