Cocos2d-x + Travis CI

このエントリーは、エキサイト 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に作成したプロジェクトをコミット

f0364156_09480786.jpg
こんな感じ


Step 3. Travis CIと連携


連携はすごい簡単でTravis CIのサイトに行き「Sign in with GitHub」でログインし、「My Repositories」に追加するだけです。
f0364156_09592733.png
追加されると、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が動き出します。
f0364156_10345245.png
エラーになりました、エラーを確認してみましょう。
f0364156_10350337.png
jsの構文チェックをESLintを初期化していなかったので、初期化時の設定ファイル「.eslintrc.json」もコミットしておきましょう

f0364156_10470178.png
今度は成功しました。
まだエラーの場合、eslintのルールに則っていない場合はが多いいので、エラーメッセージを確認後修正してみて下さい。
最後にcocosのビルドが実行され、ミニマイズされたjsが吐き出されます。

cocos compile -p web -m release


今回は、eslintしかチェックを行っていませんが、テストコードを書いて実行させたり、プルリク時だけCIを実行させたりと色々できますので、各プロジェクトに合わせて設定するといいと思います。
今後、技術の進歩と共にエンジニアの開発における負荷も減ってくる日が近い将来やってくると思いますが、まだまだ先の話になりそうなので、日々コードレビュー、コードレビュー、コードレビューですね


明日はiOSについてです( ´ ▽ ` )ノ

[PR]
by ex-engineer | 2016-12-06 10:00