enchant.jsで作ったゲームをアプリ化しよう(monaca)

enchant.jsで作ったゲームは、ブラウザ上でそのまま動きますが、せっかくならアプリにしたい。
そこで、先日monacaを使ったアプリ化のテストを行ったので備忘録として書いておきます。

#主な手順
1.作ったゲームをダウンロード
2.monacaにアップロード
3.monacaデバッガでテスト
4.ビルドしてアプリ化

今回はjsdo.itで作ったブロジェクトをアプリ化する手順を説明します。

##1.作ったゲームをダウンロード
Downloadボタンをクリックすると、zipファイルでプロジェクト内のファイルがダウンロードされます。

jsdo.itの場合、ダウンロードされるのは、html、js、cssのファイルのみなので、必要な画像ファイルやライブラリファイルは別途準備しておく。
##2.monacaにアップロード
###1)インポート
インポートボタンをクリックし、zipファイルをそのまま指定して新規プロジェクトとして読み込みます。

（GitHubの連携もサポートされています）
###2)ファイル追加
画像ファイルやライブラリを、ドラッグアンドドロップでwwwフォルダに追加します。
追加前

追加後

###3)「保存」ボタンをクリックし更新します。
###4)index.htmlの修正
修正前

index.html

<script type="text/javascript" src="http://jsdo.it/lib/enchant.js-0.8.0/js"></script>

修正後：追加したenchant.jsファイルを参照するように変更しました。

index.html

<script type="text/javascript" src="enchant.js"></script>

###4)index.jsの修正

// 修正前
var IMAGE_BG = 'http://jsrun.it/assets/K/j/g/A/KjgAq.png';
var IMAGE_BEAR = 'http://jsrun.it/assets/i/b/H/X/ibHXq.png';
var IMAGE_ICON = 'http://jsrun.it/assets/q/P/4/w/qP4wF.png';

// 修正後：追加した画像ファイルを参照するように変更しました。

var IMAGE_BG = 'bg1.png';
var IMAGE_BEAR = 'chara1.png';
var IMAGE_ICON = 'icon1.png';

#3.ｍｏｎａｃａデバッガでテスト
スマホやタブレットにmonacaデバッガアプリをインストールしておくと、「実機デバッグ」ボタンでスマホやタブレットでの動作確認が簡単にできます。
#4.ビルドしてアプリ化
##Androidアプリのデバッグ向けビルド
###1)ビルド方法の選択
今回はデバッグビルドを行いました。

###2)ビルド完了後apkファイルをダウンロード

###3)動作テスト
今回はNoxPlayerを使いました。

#monacaのプラン比較
無料プランの場合、いくつか制限事項がありますので、利用の場合は事前の確認をお勧めします。
https://ja.monaca.io/pricing-detail.html