JavaScript
enchant.js
jsdo.it
code9leap

enchant.js 開発環境比較 - ブラウザ上での開発

enchant.jsはとても使いやすいライブラリです。私は業務でというより、講師の仕事でHTML5ベースのプログラミングを教えたりオブジェクト指向の理解のために使っています。ブラウザ上での開発のために現在主に利用している2つのプログラミング環境を比較したいと思います。そのため、Visual Studioは除外しています。
(後日もう少し修正・加筆するかもしれません。)

はじめに

enchant.jsについて

enchant.jsは、HTML5 & JavaScriptでゲームを開発するためのライブラリです。
株式会社UEIによって開発されましたが、2016年に既存事業を株式会社UEIソリューションズに移管したあたりからアップデートやサポートなどは行われていないようです。ですが、学習目的でもあり今でも十分に役に立つライブラリです。個人的には、プログラミングの基礎に加え、クラスの概念やイベントドリブンについて実習しやすい点が気に入っています。enchant.jsに関する書籍が出版されており、授業用テキストとして使える点も助かっています。
JavaScriptのライブラリですから、monacaを使ってアプリ化する手もあります。先日簡単なプロジェクトをmonacaに読み込みテストし無事動作しました。ただし全ライブラリが動くかどうかというのは検証していません。
また、以前は公開されていたAR対応のアプリのダウンロードが現在は終了しているのが非常に残念です。
enchant.js公式サイト
monaca公式サイト

1.code9leap http://code.9leap.net/

特徴

code9leapは、enchant.jsを開発したUEIによるオンラインの開発環境です。

メリット

(1)すぐにスタートできる。
サイトでユーザー登録(メールアドレス不要)をするだけで、すぐにプログラミングをスタートできます。enchant.jsライブラリのインクルードの手間などは必要ありません。画像素材も用意されています。

(2)チュートリアルがある
チュートリアルが用意されていますので、学習しやすい。

(3)フォークができる
既存のプロジェクトをコピーして、新たなプロジェクトとして作業できます。授業ではひな形プロジェクトからフォークして作業をスタートすることが多いです。

(4)シェアしやすい
プロジェクトページのURLの最後の6文字(数字6文字)が分かれば簡単にプロジェクトアクセスできます。前述のひな形プロジェクトやサンプルプロジェクトの配布に便利なだけでなく、学生のプログラムをチェックするときも、URLの最後6文字を教えてもらいアクセスし、フォークすればチェックやテスト作業がすぐに行え便利です。QRコードによるシェアもできます。

(5)ダウンロードできる。
開発したプロジェクトはダウンロードできます。zipファイルで保存されます。
そのままmonacaへ読み込ませることもできました。(だだしmonacaへ読み込み後、少しだけ変更を加える必要があります。)

(6)投稿サイト9leapがある
9leapに簡単に投稿し公開できます。

デメリット

(1)入力機能
Visual Studioのような入力中に候補が表示されるような機能がないため、慣れないうちはタイプミスによるバグが発生しやすい

(2)デバッグ環境
デバッグのヒントは一応出るのですが、あまりあてにはならない。またこれはcode9leapに限りませんが、デバッグはブラウザのデバッグ機能(ChromeのF12キーで表示される)に頼るため、特に初心者は使いにくいと思われる。

(3)他のライブラリファイルなどのアップロードは出来ない
画像や音声ファイルはアップロードしプロジェクトに追加できるが、スクリプトファイルはアップロードできない。ただしJQueryなどネット上にあるものであればHTMLファイルのlinkタグで設定すればよい。

2.jsdo.it http://jsdo.it/

enchant.jsに限らずオンラインで様々なHTML5プログラミングができる。JQueryなど他のライブラリも合わせて使いたい場合などはjsdo.itの方がやりやすい印象。

メリット

(1)enchant.jsがすぐに追加できる
ライブラリの追加のメニューにenchant.jsが載っているため、すぐに追加できる。ただしバージョンは最新ではない(ver.0.8.0)ため、音声ファイルの再生をしたい場合などは最新バージョンのenchnat.jsを追加する必要がある。
(Add LibraryのInput URLで、usenameを「.sudo」、codepathを「JS83」と入力しAddボタンをクリックでver0.8.3が追加できます。)

(2)他ライブラリと合わせた開発が可能
JQuery、Three.jsなど他のJavaScriptのライブラリを併用したい場合はこちら。ただし、ファイルのアップロードという形ではなく、ライブラリのプログラムをそっくりコピペする作業となったため、高度な開発がやりやすいかどうかは多少疑問。

(3)チュートリアルがある
チュートリアルが用意されていますので、学習しやすい。

(4)フォークができる
こちらもフォークできます。便利です。

(5)シェアしやすい
ユーザー名とURLの最後の4文字(英数字)が分かれば簡単にプロジェクトアクセスできます。enchant.jsよりは受け渡しする情報が少々増えます。

(6)ダウンロードできる。
プロジェクトはダウンロードできます。zipファイルで保存されますが、一緒にダウンロードされないライブラリもあるので注意。

(7)投稿サイトjsdo.it gameがある。
http://games.jsdo.it/
投稿されたプログラムで実際に遊び、気になったらプログラムも見ることができる。フォークすることも可能。

デメリット

(1)HTMLのheadタグ内が編集できない
HTMLの画面ではbodyタグ内しか表示されず、headタグ内などは直接編集できない。
操作勝手は良いので、HTMLやCSSの学習ツールとしても使えたらと思う。

(2)enchant.jsのチュートリアルがない
クラスでは私のプロジェクトからフォークするので特にデメリットではないのですが、一人で学習する人はcode9leapの方がはじめやすいでしょう。

(3)入力機能
code9leapと同様です。入力候補の表示機能がない。

(4)デバッグ環境
code9leapと同様です。デバッグはブラウザのデバッグ機能(ChromeのF12キーで表示される)に頼る。

なぜ「enchant.js+ブラウザ上での開発」なのか

まずenchant.jsを使うと数十行のプログラムでシンプルなゲームなら出来上がります。すぐに動くことはモチベーションにつながります。90分の授業の中で動作確認やデバッグまでできるため、理解も深まります。
また、特にプログラミングを学び始めて日の浅い学生には、困ったことや疑問があったらすぐに解決し、何事も短いスパンでどんどん先に進んでいく方が、授業を楽しめます。学生のプロジェクトに私がすぐアクセスできるオンラインでの開発が欠かせません。もちろんクラスメイト同士の助け合いにも使えます。

注意事項

使用ブラウザ

enchant.js,jsdo.itともに推奨ブラウザはGoogle Chromeです。

キー入力受け付け

code9leap、jsdo.it共通です。ブラウザ上で開発中、プログラム入力エリアとゲーム画面のエリアがあるため、キー入力を受け付けたい場合はゲーム画面のエリアにフォーカスを移動しておく必要があります。

// enchant.jsの初期化処理前にフォーカス取得する。
window.focus();

// enchant.js 初期化処理
enchant();

関連ページ

enchant.js
http://enchantjs.com/ja/
code9leap
http://code.9leap.net/
jsdo.it
http://jsdo.it/