はじめに

2018年五月祭でプログラミング教室をするにあたって、開発をしたのでその際に使ったライブラリや技術などをつらつら書いていこうと思います。リポジトリは、こ↑こ↓。

ライブラリ決め

まず、プログラミング教室用に迷路ゲームを開発することが決定した。
ゲームを作るにあたってblocklyを利用することは決まっていた。小学生低学年以上を対象にしていたため、キーボードやアルファベットを使えなかったからだ。で、後はゲーム（の描画など）側のライブラリを決めたのだが、僕が雑に調べてenhcnt.jsというライブラリにした。このライブラリ、かなりよくなかったので使わないほうがいいと思う。AnimationとかSpriteとかenhcntの用意したクラス、すごい不便だった。

言語決め

家に帰ってからも遊べるようにブラウザ上で動くゲームにしようということだったので、javascriptが話題に上がった。が、僕は生のjavascriptを書きたくなかったので、typescriptを推した。そうしてtypescriptを使って開発することになった。まあ、javascriptで開発していたよりはマシだったと思う。
だが、blockly、enchantともに型定義ファイルを公式で配布していなかったので、有志の作ったものを拾ってきて、足りない部分を書き加えて修正してとかなり大変だった。もうやりたくない。

開発環境

yarnを使ってパッケージ管理し、browerify、watchify、tsifyなどを使ってできるだけ開発環境を整えた。eslintも設定していたし、それなりにまともな開発基盤を整えていたと思う。

バージョン管理、CI

バージョン管理はgitとgithubを使った。CIに関してもJenkinsを用いて、毎回ビルドとテストをさせていた。これで少なくとも軽率なPRのmergeでmasterが死ぬ、みたいな状況は少なかったし、github上から現在のゲームをプレイできたのでテストがしやすかった。当日もJenkinsでビルドしたものを使った。

複数ブラウザ対応

IEとかいうブラウザ、かなりゴミで最近のjavascriptの文法がほぼ使えない。各ご家庭では未だにIEを使っているところも多いとのことなので、これに対応する必要があった。最終的に、babelをbrowerifyから使い、かつpolyfillをimportすることでなんとかIEやEdgeでも動くようにした。

ゲームの設計

これが一番難しかったかもしれない。「小学生低学年が楽しみながらプログラミングの考え方を学ぶゲームにする」という、お前はかぐや姫かみたいな難題に取り組まなくてはならなかった。
最終的には小学生でも分かるものになり、ゲーム性も非常に高い良いものが出来たと自負している。ただ、逆にゲーム性が高すぎて、限られた時間の中で十二分にそのゲーム性を楽しむのは難しかったかなとも思う。

反省

いっぱいあるが、開発進行的な反省はここでは割愛する。
やっぱりチュートリアルをもっとゲーム内で行うべきだった。当日、席にお客さんを案内して最初にゲームの概要を説明をするという工程が非常に人員コストを必要とした。ここをゲーム内で行ってしまえればよかったと思う。
あと、タイマー機能の実装。混んでる時間帯は、プレイ時間の長い人から退席を促していたのだが、その時間管理をアナログで「どのタイミングにどの席に人が入った」みたいな感じで行っていた。かなり無理があるので、可能ならゲームとサーバを通信させて自動でそこらへんをやれるようにするべきだった。