HTML5 CanvasやWebSocketなどの最新技術を駆使して作ったiPhone 4用のブラウザーゲーム「Handy Stadium」。もう遊んでみましたか？

最新技術を使って作ったiPhone 4専用レトロゲーム「Handy Stadium」（画像をクリックするとゲームサイトへ移動します）

　Handy Stadiumを公開してから1カ月が経ちましたが、もっとたくさんの人に遊んでもらえるようにマインドフリーでは日々改良を続けています。

改良点その1： Chrome ウェブストア対応

　iPhone 4専用だったHandy StadiumをGoogle Chromeにも対応させ、Chrome ウェブストアに公開しました（インストールは無料）。 ウェブストアでの公開にあたってChrome向けに最適化したデザインを用意し、サーバーサイドでユーザーエージェントを識別して切り替えています。

　Chromeに対応するにはゲーム画面サイズの調整やタッチ操作からクリック操作への変更が必要ですが、今回はJavaScriptとCSSを用意するだけで済みました。デバイスごとに開発言語や技術が変わるネイティブアプリと違い、OSやデバイスが変わっても同じ技術で開発できるのはWebアプリの大きなメリットです。

改良点その2：英語対応

　海外のユーザーにも楽しんでもらえるように、ポップアップやヘルプのテキストを英語化しました。ブラウザーの言語設定から日本語と英語を切り替えられます。

改良点その3：Tweet、いいね、友達紹介機能追加

　友達と対戦したい方のために、「Tweetボタン」「いいね！ボタン」「Facebookの友達を誘うボタン」を用意しました。友達を誘うボタンを押すと、ユーザーを選択するウィンドウがポップアップで表示され、リクエストを送信できます。

　iPhoneの場合はブラウザー上でTwitterやFacebookにログインしていないユーザーも多いので、代わりに「メールで友達を誘うボタン」を追加してあります。

　以上、これまでに実施した主な改良点を紹介しました。さまざまな改良によってますます遊びやすくなったHandy Stadium、まだプレイしていない方はぜひ試してみてください。

今回はパフォーマンスチューニングの方法を紹介

　さて、ここからが今回の本題です。WebSocketとCanvasを使ってリアルタイム性の高いゲームを作ってみると、PC上のChromeでは快適に動いていても、iPhone 4は動作が遅く、ゲームにならない場合があります。

　iOSのモバイルSafariでは、（1）WebSocketのプッシュ通信にタイムラグがある、（2）描画の処理速度が遅い、のが原因です。今回は、これらの問題を解決するためにHandy Stadiumで実施したパフォーマンスチューニングの方法を紹介します。

ソーシャルリアクション

この連載の記事

• 第4回  CSS3 AnimationsとJSの連携でキャラクターを制御
• 第2回  node.jsとWebSocketで作る野球盤ゲームの裏側
• 第1回  WebSocketでスマホ用対戦ゲームを作ってみた
• この連載の一覧へ

この記事の編集者は以下の記事をオススメしています

• iOS 4.2の新機能で作るHTML5+JSアプリ

• Flash→HTML5移植は本当か？　ハンゲームの事例

• 実践！iPhone＆Androidサイト制作ガイド

はてブ注目ランキング

1. 世界を変える方法は山川の教科書に書いてある638 users

2. 10分でわかる！ jQuery Mobileのキホン103 users

3. iBooks AuthorでHTML5の電子書籍作ってみた77 users

4. HTML5要素のブラウザー実装状況を調べてみた39 users

5. コンテンツを依頼するときのSEOチェックリスト1738 users

6. 40分で覚える！jQuery速習講座2225 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2151 users

8. もう配色には困らない！「Adobe Kuler」1683 users

9. 30分でできる！Webサイトを高速化する6大原則1498 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1217 users

最新記事

• 「サイトアドバイザー」でネットの危険を神回避！

  

• iTunes in the Cloudだけじゃない 担当者が教える5つの新機能

  

• au版iPhoneのキャリアメールが3/13からリアルタイム受信対応

  

• REGZAサーバー録画中の「できること」と「できないこと」

  

• 「Pogoplug」で超簡単マイクラウドストレージを構築する技