More than 5 years have passed since last update.

Fx0買いました！Firefox OSでゲームアプリを動かしてみる！～（3）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応 1）～

Last updated at 2015-03-31Posted at 2015-03-10

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になっています。

manifest.webapp

"launch_path": "/index.html",

では次に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のゲーム画面になっています。