Fx0買いました！Firefox OSでゲームアプリを動かしてみる！
～（3）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応 1）～
前回はFx0でenchant.jsのサンプルアプリのgetbananaが動作することが確認できました。
が、、画面下に白い余白が広がっていて、なんとも見栄えが悪かったですね。。
余白の領域がわかり易い様に黒枠で囲っています。
今回はこの余白をどうにかしたいと思います。
余白が広がる原因
まずは現状の動きを理解するために、getbananaの画面の作成方法を調べてみます。
getbananaのファイル構成から確認してみましょう。
ファイル構成
getbananaは他のファイルは参照していないので、こちらの10ファイルで構成されています。
構成ファイルを種類別にまとめると、このような感じです。
| 種類 | ファイル名 |
|---|---|
| html | index.html |
| JavaScript | main.js、enchant.js、nineleap.enchant.js |
| 画像 | chara1.gif、icon0.gif、bg.png、end.png、start.png |
| アプリマニフェスト | manifest.webapp |
では、どのようにしてgetbananaを起動しているのか調べてみましょう。
起動方法
まず、アプリマニフェストを見て起動のやり方を確認します。
これを見ると、launch_pathがindex.htmlになっています。
"launch_path": "/index.html",
では次にindex.htmlの中身を確認します。
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="nineleap.enchant.js"></script>
<script type="text/javascript" src="main.js"></script>
index.htmlはjs(JavaScript)を参照しています。
つまり、getbananaはindex.htmlから起動され、jsファイルが制御することによって動いているということになります。
画面の構成
次は画面の構成を見てみましょう。
getbananaが動いているときのHTMLを見ていきます。
前回やったようにWebIDEとFx0を接続してgetbananaを起動します。
そこでWebIDEのデバッグボタンを押すとデバッグ用メニューが表示されます。
デバッグ用メニューの中のインスペクタを使ってHTMLの情報を確認してみます。
指定した対象に対してのHTMLの構造が表示されます。
HTML body部の構成とサイズを抜き出すと以下のようになっています。
320x320のcanvasにゲームを描画し、360（320x1.125）に拡張して表示しているようです。
<div id="enchant-stage"> ← width:360px, height:360px
<div> ← width:360px, height:360px （★360に拡張している transform: scale(1.125)なので320x1.125=360）
<canvas> ← width:320px, height:320px
canvas要素にマウスカーソルを合わせるとcanvasに描画されている画像を確認できます。
試してみたらgetbananaのゲーム画面になっています。
動作中のHTMLを見てgetbananaの画面の構成を見ました。
HTMLの元になるindex.htmlを見てみるとbody部はなんと空になっています。
つまり、getbananaの画面構成となるbody部はHTMLでは無くてJavascriptにより作られていることがわかります。
<body>
</body>
本日はこの位にして、次回はJavaScript部分を見ていきます。
（1）enchant.jsを使ってみる
（2）enchant.jsで作ったアプリをFx0で動かしてみる
（4）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応2）
（5）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応3）