マインドフリーが作ったiPhone 4用ブラウザーゲーム「Handy Stadium」。みなさんはもう楽しんでいただけましたか？

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

　前回紹介したように、Handy Stadiumは、WebSocketやHTML5 Canvasといった最新の技術を使って開発したWebアプリケーションです。今回はHandy Stadiumが実際にどのような技術で実装されているか、詳しく解説しましょう。

Hello! node.js

　Handy Stadiumで使われている技術の1つが、「node.js」です。node.jsはサーバーサイドJavaScriptフレームワークの1つで、Handy Stadiumでもサーバー側の処理はnode.jsで実装しています。本連載はnode.jsの入門記事ではないので詳しくは説明しませんが、利用方法を少しだけ紹介しておきましょう。

　今回は、「cygwin」を利用し、node.jsとnpm（node package manager）をインストールして環境を整えました。導入方法の詳細は以下にまとまっていますので参考にしてください。

　npmはnode.jsのモジュールをインストールするためのツール（パッケージマネージャー）です。npmでインストールできるモジュールは大量にあり、以下のサイトにまとめられています。

　今回使用したパッケージを紹介しましょう。

　Webアプリを作成する場合に便利なのが「Express」です。Expressはnode.js用のWebフレームワークで、Webアプリの雛型を簡単に作成できます。以下のようにしてインストールします。

$ npm install express

　Expressは雛型として扱うテンプレートエンジンを選択できます。デフォルトのテンプレートエンジンは「jade」です。jadeは以下のようにしてインストールします。

$ npm install jade

　jadeはXML形式でなく、インデント形式で記述します。jade以外にも、EJSやCoffeeKup、Hamlなどのテンプレートがありますので、好みで選びましょう。HTML形式で書きたい場合はEJSを選択するとよいでしょう。

　Expressとjadeをインストールしたら、実際にWebアプリの雛形を作ってみましょう。

$express sample
create : sample
create : sample/app.js
create : sample/logs
create : sample/pids
create : sample/public/images
create : sample/public/javascripts
create : sample/views
create : sample/views/layout.jade
create : sample/views/index.jade
create : sample/public/stylesheets
create : sample/public/stylesheets/style.css
create : sample/test
create : sample/test/app.test.js
- make sure you have installed jade: $ npm install jade

　expressコマンドを実行すると「sample」フォルダが作成されます。sampleフォルダ以下にはアプリのテンプレートが入っています。sample/publicフォルダが画像やHTML/CSSファイルを、sample/viewsフォルダがテンプレートを、sample/testフォルダがテストを置く場所です。「sample/app.js」がプログラムのルートになります。

　サンプルをさっそく実行してみましょう。

$cd sample
$node app.js
Express server listening on port 3000

　http://localhost:3000/ にアクセスすると、作成したサンプルのWebページが表示されます。

ソーシャルリアクション

この連載の記事

• 第4回  CSS3 AnimationsとJSの連携でキャラクターを制御
• 第3回  WebSocket＆Canvas パフォーマンス最適化のコツ
• 第1回  WebSocketでスマホ用対戦ゲームを作ってみた
• この連載の一覧へ

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

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

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

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

• HTML5のゲーム開発を効率化！国産ライブラリー

• Facebook連動スマホアプリが作れるJSライブラリー

はてブ注目ランキング

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」で超簡単マイクラウドストレージを構築する技