Fx0買いました！Firefox OSでゲームアプリを動かしてみる！
～（4）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応 2）～
余白をどうにかしたい対応の続きです。
余白が広がる原因（つづき）
前回まででgetbananaのHTML要素の構成とサイズは以下のようになっていて、
body部の内容ついてはJavaScriptで作成しているらしいことがわかりました。
<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
<body>
</body>
JavaScriptの解析
ファイルの構成
今回はJavaScriptを見ていきます。getbananaに含まれるJavaScriptのファイルは以下の3ファイルです。
1.enchant.js
2.nineleap.enchant.js
3.main.js
1、2のファイルはenchant.jsフレームワークのファイルになります。
よって1、2は機能を提供する役割、main.jsがフレームワークを使ってゲームを作る役割を担っているという関係になるかと思います。
main.jsは全部で85行しかなく、日本語のコメントも入っているのでゲームの全体の作りが分かりそうです。
サイズの設定箇所
今回は画面下の余白をどうにかすることが目的なので、HTML要素のサイズを設定しているところを探します。
まずはmain.jsの4行目で「new Game(320, 320);」をコールしていて、これがHTMLののサイズと一致しています。
enchant();
window.onload = function() {
game = new Game(320, 320);
次に画面表示サイズの計算に使いそうなwindow.innerWidthをフレームワークのJavaScriptで検索すると、、enchant.js内で見つかりました。
scale = Math.min(
window.innerWidth / width,
window.innerHeight / height
);
これらの処理が起動時に動作すると予測されますね。
デバッグ用メニューを使用しての動作確認
それでは続いて、これらが本当にgetbanana起動時に動作するかデバッグ用メニューを使って確認してみます。
デバッガにて行番号の左をクリックしてbreakpointを設定します。
[インストールして実行]ボタンを押してgetbananaを起動します。
breakしました！ やはり、予想した処理が起動時に動いたことが分かります。
この時点でのwidth,heightの値は**320**（new Game(320, 320)と同じ）となっていますね。
breakした箇所のコールスタックを確認すると、main.jsのwindow.onload()内のnew Game(320, 320)がスタートだとわかりますね。  getbananaの起動時に予想した通りに処理が動いていることが確認できました。
それでは実際の値に当てはめてみます。 インスペクタのコンソールにてwindow.innerWidth と window.innerHeightを確認すると、それぞれ**360**と**616**になっていますね。  width,heightの値は**320**だったことは確認したてあるので、 これらの値を先ほど記載したこちらのソースコードに当てはめて見ます。
scale = Math.min(
window.innerWidth / width,
window.innerHeight / height
);
こうなりますね。
scale = Math.min(
360 / 320,
616 / 320
);
要するに、、、こういうことですね。
scale = Math.min(
1.125,
1.925
);
Math.minは最小値を返すので、scaleには1.125が設定されます。
これは、前回に記載したHTMLの要素の拡大サイズと一致します。
覚えてますか？？この部分ですよ。
<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
よって、これがサイズを計算する処理と考えられます。
##### **これまでのまとめ** ・HTMLの要素のサイズはJavascriptで計算している。 ・main.jsのnew Game(320, 320)でベースとなるサイズを指定している。 ・フレームワークのenchant.jsにてwindow.innerWidth、window.innerHeightを見てサイズを計算している。
フレームワーク部分のenchant.jsに対する修正はしたくないので、余白の対応はmain.jsのnew Game(320, 320)のベースのサイズを変更することよって対処したいと思います。
次回は、実際にmain.jsを修正して余白を消したいと思います。
（1）enchant.jsを使ってみる
（2）enchant.jsで作ったアプリをFx0で動かしてみる
（3）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応1）
[（5）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応3）] (http://qiita.com/onaona/items/8ebe91b3f82d4dff6797)