実録！HTML5でモバイルWebアプリ開発 ― 第1回

WebSocketでスマホ用対戦ゲームを作ってみた

2011年06月20日 10時00分更新

ハン☆スタ制作委員会／マインドフリー株式会社

ツイートする

　スマートフォンの流行でいま注目を集めるモバイルWebアプリ開発。関西発のイノベーションカンパニー「マインドフリー」の開発チームが、WebSocketやHTML5 Canvasといった最新技術を使ったモバイルWebアプリ開発のポイントを解説します。（編集部）

　HTML5がものすごい勢いで盛り上がっています。SafariやChrome、Firefox、Operaに加えて、Internet ExplorerでもついにHTML5のサポートが始まり、最近ではHTML5を使ってマークアップされているWebサイトも少しずつ増えてきました。「そろそろHTML5を使って何か作ってみたい」と考えるWeb開発者も少なくないでしょう。

　HTML5の「実験」にオススメなのが、スマートフォン向けWebアプリケーションの開発です。特にiPhone/Android端末のブラウザーではHTML5や関連技術の実装が進んでいますし、画面領域の違いなどからスマートフォンはPCとは分けて考えられることが多いので、最新の技術を試すにはとてもよい環境です。

　マインドフリーではHTML5のさまざまな技術を駆使して、実際にスマートフォン向けのWebアプリケーションを開発しました。本連載では、HTML5アプリ開発の裏側を紹介しながら、HTML5の“使いどころ”と実装のポイントを解説します。

最新技術であのレトロゲームを再現！

　さっそくですが、今回開発したアプリを紹介しましょう。マインドフリーが開発したiPhone 4専用のモバイルWebアプリ「Handy Stadium」です。

Handy Stadium（iPhone 4専用）: http://bb.mindfree.co.jp/

　Handy Stadiumは、2台のiPhone 4で通信対戦できるモバイルWebアプリ（ブラウザーゲーム）です。昔懐かしの野球盤を模したゲームで、攻撃と守備に分かれてプレイします。守備側のプレーヤーが画面をタップするとピッチャーが投球し、攻撃側のプレーヤーが画面をタップするとバッターがバットを振ります。うまくタイミングが合うと球は内外野に向かって飛んでいく、というシンプルなゲームです。

　このHandy Stadiumを開発するにあたっては、「HTML5/CSS3とその関連技術を利用しながらモバイルWebアプリの可能性を探る」というコンセプトを定めました。具体的には、以下のようなHTML5/HTML5関連技術がiPhone 4では利用できます。