Cocos2d-x + Travis CI
2016年 12月 06日
このエントリーは、エキサイト Advent Calendar 2016 の 12/06 の記事です。
エキサイトとしては初のAdvent Calendar参戦です。
今回はCocos2d-xを使って開発したwebAppを、Travis CIを使ってコードチェックの自動化を行いたいと思います。
Cocos2d-xはご存知の通り、オープンソースのゲームフレームワークでiOS、Android、WebApp…など様々なアプリの開発を行うことができます。
一方Travis CIはテストやコードチェックを自動で行ってくれるサービスです。
日々の開発の中で、テストやコードレビューは時間もかかるし、非常に面倒でやりたくない作業の一つです。それが少しでも軽減されるのであれば、これほど嬉しいことはありませんね。
では早速やってみようと思います。
今回はCocos2d-xでスマホのアプリではなくwebAppで試してみます。
Step 1. Cocos2d-xでHello World
コマンドラインで下記を実行し、プロジェクトを作成します。
cocos new -l js WebGameこんな感じで出来ました。
moriwaki@dev-game-web:~/WebGame$ ls -l
total 36
-rw-r--r-- 1 moriwaki users 5394 Dec 2 23:53 CMakeLists.txt
drwxr-xr-x 5 moriwaki users 4096 Dec 2 23:53 frameworks
-rw-r--r-- 1 moriwaki users 3296 Dec 2 23:53 index.html
-rw-r--r-- 1 moriwaki users 3645 Dec 2 23:53 main.js
-rw-r--r-- 1 moriwaki users 364 Dec 2 23:53 manifest.webapp
-rw-r--r-- 1 moriwaki users 320 Dec 2 23:53 project.json
drwxr-xr-x 2 moriwaki users 4096 Dec 2 23:53 res
drwxr-xr-x 2 moriwaki users 4096 Dec 2 23:53 src
ついでに起動してみましょう
cocos run -p webブラウザで起動したURLにアクセスすると、Hello Worldが表示されると思います。
Step 2. GitHubに作成したプロジェクトをコミット
こんな感じ
Step 3. Travis CIと連携
連携はすごい簡単でTravis CIのサイトに行き「Sign in with GitHub」でログインし、「My Repositories」に追加するだけです。
Step 4. Travis CIの設定ファイルを追加
プロジェクトのレポジトリに「.travis.yml」を追加します。
language: node_js
node_js:
- "6"
# Handle git submodules yourself
git:
submodules: false
before_install:
# node - npm install -g eslint# cocos setup
- git clone http://github.com/cocos2d/cocos2d-x.git
- cd ./cocos2d-x
- python download-deps.py -r yes
- git submodule update --init
- mkdir ~/.cocos
- cp ../local_cfg.json ~/.cocos/local_cfg.json
- cat ~/.cocos/local_cfg.json
- cd ./tools/cocos2d-console/
- python download-bin.py -r yes
- cd ../../
- export COCOS_CONSOLE_ROOT=`pwd`/tools/cocos2d-console/bin
- export PATH=$PATH:$COCOS_CONSOLE_ROOT
- export COCOS_TEMPLATES_ROOT=`pwd`/templates
- export PATH=$PATH:$COCOS_TEMPLATES_ROOT
- export ANT_ROOT=/usr/share/ant/bin
- export PATH=$PATH:$ANT_ROOT
- cd ..
- echo `pwd`
- printenv
- cocos -v
script:
- eslint 'src/*.js'
- cocos compile -p web -m release
追加すると自動的にtravisが動き出します。
エラーになりました、エラーを確認してみましょう。
jsの構文チェックをESLintを初期化していなかったので、初期化時の設定ファイル「.eslintrc.json」もコミットしておきましょう
まだエラーの場合、eslintのルールに則っていない場合はが多いいので、エラーメッセージを確認後修正してみて下さい。
最後にcocosのビルドが実行され、ミニマイズされたjsが吐き出されます。
cocos compile -p web -m release今回は、eslintしかチェックを行っていませんが、テストコードを書いて実行させたり、プルリク時だけCIを実行させたりと色々できますので、各プロジェクトに合わせて設定するといいと思います。
今後、技術の進歩と共にエンジニアの開発における負荷も減ってくる日が近い将来やってくると思いますが、まだまだ先の話になりそうなので、日々コードレビュー、コードレビュー、コードレビューですね
by ex-engineer
| 2016-12-06 10:00
