【enchant.js】ローカル開発環境の構築 後半【環境構築】
さて。後半です。
先日はenchan.jsをDLしてサンプルを動かしてみるところまでやりました。今日は、前回実行したサンプルが入っているフォルダをデスクトップにコピーするところから始めましょう。何故そんなことを？ と疑問に思われるかもしれませんが、まあ、まずやってみて下さい。
まずはフォルダごとファイルをデスクトップにコピーして、そしてもう一度サンプルを動かす――あれ？ 動きませんね。どうしたんでしょう。
原因を調べるために、まずエラーコンソールを開いてみましょう。
Firefoxなら「F12」を、Safariなら「Command」＋「Option」＋「C」、Chromeなら「Ctrl」＋「Shift」＋「J」を押して下さい。ブラウザの下部にエラーコンソールが表示されます。もしかしたら、htmlファイルを読み込み直す必要がある旨のメッセージが出力されるかもしれません。その時はリロードボタンを押して読み込み直して下さい。
エラーコンソールには以下のように表示されているかと思います。
ReferenceError: enchant is not defined enchant();
enchantなんて知らねーよと言われていますｗ
ここでindex.htmlをエディタで開いて下さい。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <script type="text/javascript" src="../../../dev/enchant.js"></script> <script type="text/javascript" src="main.js"></script> <style type="text/css"> body { margin: 0; padding: 0; } </style> </head> <body> </body> </html>
ここでポイントとなるのは以下の２行です。
<script type="text/javascript" src="../../../dev/enchant.js"></script> <script type="text/javascript" src="main.js"></script>
２行目のmain.jsはindex.htmlは同一フォルダにありますよね。でも、enchant.jsの方は……？
そう！ 先程のエラー、実はenchant.jsが見つからなかったために出たエラーなんですね。enchant.jsが読み込めなかったから、その中に記述されている関数enchant()も呼び出せない……。
ではどうすれば解決するのでしょうか？
まずindex.htmlでenchant.jsを読み込んでいる部分を以下のように書き換えて下さい。
<script type="text/javascript" src="enchant.js"></script>
その上でenchant.jsを同一フォルダにコピーし、index.htmlをブラウザで開いて下さい。どうですか。動いたでしょう。冒頭でゲームが正しく動かなかったのは、index.htmlかenchant.jsへのパスが正しく指定されていなかったからです。
このパスの問題は結構根深くて、特にplugin周りで多発しています。私が今回の記事を書こうと思い立った要因の一つは自在カフェさんのこちらの記事なんですが、やはり問題だったのは画像ファイルへのパスでした。
ソースコードの中身をのぞけばたちまち解決する問題でもあるんですが、enchant.jsを触り始めたばかりの人、特にプログラミングそのものが初めてという人には、あまりに高いハードルです。この辺のフォローは、是非公式でやっていただきたい。
さてさて。
環境構築の話もこれで終わりです。
ゲーム開発が進めば、pluginや画像、音声ファイルを追加する時も来るでしょう。そんな時はまず同一フォルダにファイルを置いて下さい。
よりよい開発環境を目指すとなると、テキストエディタの問題や統合開発環境、そも、ブラウザは？ と話が多岐にディープになっいきます。そこは最終的には個人個人で異なるところなので、ご自分で調べて下さい。
