【enchant.js】ローカル開発環境の構築 前半【環境構築】
twitterを見ていると時折「enchant.jsの開発環境」なんて言葉を目にします。「そんなん、enchant.jsをDLしてきて終わりじゃん」と思っていたのですが、jsdo.itやcode.9leapから入った方からしてみると、そうでもないようです。
ここはひとつ、初心に返って「ローカル開発環境の構築」なんてのをやってみましょう。
まずブラウザです。
enchant.jsはHTML5の機能を利用していますので、当然新し目のブラウザが必要になります。Firefox、Chrome、Safariのどれかをインストールしておきましょう。
(Windowsの場合、Safariは脆弱性が放置されたままなので止めましょう)
あとFirefoxの場合、Firebugというpluginを入れておく必要があるます。これはJavascriptのエラー情報などを表示するためのpluginです。ChromeとSafariはデフォルトで持っているんですが、Firefoxは何故かplugin。
次にテキストエディタです。
これはUTF-8でファイル保存できるなら何でもOKです。Windowsのメモ帳でもね!(オススメはしません)
ちなみに私はWindowsではサクラエディタ、MacではSublime Text2を使っています。
さて、それではお待ちかね。
enchant.jsをDLしてきましょう。
左メニューにある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の第一段階は終了です!