|
|---|
FacebookのGraph APIとJavaScriptライブラリー「jAction」を使ったFacebookモバイルアプリの作り方を解説する本連載。前回はFacebookアプリの開発に必要な登録手続きについて解説しましたが、今回は実際にコードを書いて簡単なモバイルWebアプリを作ってみましょう。
制作するのはシンプルな「ブロック崩しゲーム」です。ブロック崩しゲームにはインタラクティブなアプリに必要な要素が多く盛り込まれているので、jActionの使い方を学ぶのに最適です。
最終的にはFacebookと連携して遊べるアプリを作りますが、まずはアプリの核となるブロック崩しゲームの部分から作ってみましょう。
iPhoneやAndroidスマートフォンのブラウザーで遊べる「ブロック崩し」ゲーム。シンプルながらjActionの基本が学べる
以下に完成サンプルがあります。iPhoneまたはAndroidのスマートフォンでアクセスしてみてください。
HTML5+JavaScriptだけでこうしたゲームを作るのは手間がかかりますが、jActionを使えばとても手軽です。ゲームの作り方を手順を追って解説します。
Step 1：jActionの準備
ブロック崩しに使用する素材を以下からダウンロードしてください。
- ブロック崩し素材ファイル（ZIPファイル）
- http://tadashiku.sunnyday.jp/ASCII/downloads/start.zip
ZIPファイルにはゲームで使う画像ファイルなどのほかに、jActionの基本形である以下の3つのファイルが含まれています（ほかにもいくつかありますが今回は使いません）。
- index.html：HTMLファイル
- jaction.js：jActionの命令群が入ったライブラリー本体
- Main.js：jActionの命令を使ったJavaScripの処理を記述するファイル
1. index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>ブロック崩し</title>
<script src="jaction.js"></script>
<script src="Main.js"></script>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="position:relative;">
<div style="position:absolute;z-index:2;">
<script src="sound_swf.js"></script>
</div>
<div style="position:absolute;z-index:1;">
<canvas id="ja_canvas" width="320" height="480"></canvas>
</div>
</div>
</body>
jActionはHTML5を使ったインタラクティブコンテンツの開発を効率化するJavaScriptライブラリーです。現在のバージョンではcanvas要素を扱うための命令（メソッド）を中心に実装しています。canvasはHTML5で導入された要素で、HTMLで定義したcanvas要素（描画領域）に対してJavaScriptを使ってビットマップ画像を描画できます。
ブロック崩しゲームでも、このcanvas要素に対してJavaScriptでゲームの画面を配置したり、ブロックやボールを描画して動かしたりしていきます。そのため、「index.html」についてはほとんど書き換えることはありません。
以下でcanvas要素を定義しています。
<canvas id="ja_canvas" width="320" height="480"></canvas>
また、head要素ではjActionの本体である「jaction.js」、jActonの命令を書いていく「Main.js」を読み込んでいます。
<script src="jaction.js"></script>
<script src="Main.js"></script>
2. jaction.js
「jaction.js」はjActionの命令が書かれているライブラリー本体です。このファイルで定義された命令を呼び出して使っていくので、内容を参照したり書き換えたりすることはありません。
3. Main.js
ブロック崩しのプログラムを書いていくJavaScriptファイルが「Main.js」です。
Main = function()
{
//ここに命令を記述
}
jActionでは、このMainの中に命令を書いていきます。Mainの中に書いたjActionの命令がindex.htmlで定義したcanvas要素に対して実行されていきます。
