【enchant.js】ローカル開発環境の構築 前半【環境構築】

twitterを見ていると時折「enchant.jsの開発環境」なんて言葉を目にします。「そんなん、enchant.jsをDLしてきて終わりじゃん」と思っていたのですが、jsdo.itやcode.9leapから入った方からしてみると、そうでもないようです。

ここはひとつ、初心に返って「ローカル開発環境の構築」なんてのをやってみましょう。

まずブラウザです。
enchant.jsはHTML5の機能を利用していますので、当然新し目のブラウザが必要になります。FirefoxChromeSafariのどれかをインストールしておきましょう。
(Windowsの場合、Safariは脆弱性が放置されたままなので止めましょう)
あとFirefoxの場合、Firebugというpluginを入れておく必要があるます。これはJavascriptのエラー情報などを表示するためのpluginです。ChromeSafariはデフォルトで持っているんですが、Firefoxは何故かplugin。

次にテキストエディタです。
これはUTF-8でファイル保存できるなら何でもOKです。Windowsのメモ帳でもね!(オススメはしません)
ちなみに私はWindowsではサクラエディタ、MacではSublime Text2を使っています。

さて、それではお待ちかね。
enchant.jsをDLしてきましょう。

f:id:v416:20121127181917p:plain
左メニューにあるDownloadをクリックです。
けっしてGitHubから直接DLなんてしちゃいけません!
あれね、うっかりすると本体のソースコードだけDLなんてことになっちゃうんでね、pluginないとか画像ないとか、サンプルないとか!
悲しい現実しか待っていないので、必ず上記のリンクからDLしましょう。

DL 終わったら解凍です。解凍場所はどこでもいいです。
すっかり解凍なんて言葉が定着してますが、本当は伸張っていうんです。

解凍が終わったら、サンプル*1のひとつを開いてみましょう。

wise9-enchant.js-xxxxxxx/examples/beginner/hellobear
 --- chara1.png
 --- index.html
 --- main.js

ではindex.htmlをダブルクリックしてみましょう。
……enchant.jsのマスコットキャラクター「エンちゃん」が右から左に一生懸命走っていく姿が表示されたかと思います。
おめでとう! これでenchant.jsの第一段階は終了です!

*1:サンプルの中には作られたのが古くて現行のenchant.jsでは動かないものもあるかもしれません。とりあえず動かないのを見つけたらenchant_jpにそっと教えてあげましょう。またChromeなどのベースになっているwebkitはMapと相性が悪かったりします。そんなときはニコッと笑って別のブラウザを立ち上げましょう。