2015-10-30

Firepoker を Cloud Foundry で動かす

「Cloud Foundry 百日行」第90日目、本日はアジャイル開発等のストーリーポイントを決定する際に利用する Planning poker を ブラウザ上で実行できる Firepoker です。

アジャイル開発のチケットのポイント決めも開発メンバーが１箇所に揃っていれば、その場で「せーの！」でカードを見せ合ってポイント決定ということが出来ます。しかし最近の開発スタイルでは１箇所に全員集合というのは少ないかもしれません。
そんな時にこのツールを利用すればメンバーが何処にいても実施できます。またコメントや条件を入れ合って再度実施も可能です。一度試してみてはいかがでしょうか。

基本情報

手順の概要は以下の通りです。

  • 1) ソースコードの取得
  • 2) アプリのデプロイ
  • 3) 動作確認

1. ソースコードの取得

まずはソースコードを取得します。

$ git clone https://github.com/Wizehive/Firepoker
$ cd Firepoker
Firepoker$ ls
app  bower.json  CNAME  Gruntfile.js  karma.conf.js  karma-e2e.conf.js  LICENSE  package.json  README.md  test

2. アプリのデプロイ

README にも書かれていますがソースコードダウンロード後の手順は以下の３つです。

  • Install with NPM: npm install
  • Install with Bower: bower install
  • To run the local server: grunt server

では手順通りすすめていきましょう。

2.1 npm installとbower install

出来れば手元の環境でのインストール作業は極力さけたいことろですが、 cf push の -c オプションで実施するにはいろいろと修正が必要そうなので今回はあきらめて手元の環境で実施します。
その為、インストール前に node -v , npm -v , bower -v でそれぞれのコマンドが利用出来ることを確認しておいて下さい。

Firepoker$ npm install
Firepoker$ bower install

それぞれ準備された package.json と bower.json に沿ってインストールが実行されます。
その後フォルダを確認すると node_modules と app/components が作成されています。

2.2 index.htmlの修正

app/index.html の中で bower でインストールされたファイル名の指定に誤りがあるので修正します。

Firepoker$ vi app/index.html
Firepoker$ git diff
: 
diff --git a/app/index.html b/app/index.html
index a1d574d..bc46819 100644
--- a/app/index.html
+++ b/app/index.html
@@ -54,7 +54,7 @@
     <script src="components/angular-sanitize/angular-sanitize.js"></script>
     <script src="components/angular-truncate/src/truncate.js"></script>
     <script src="components/firebase/firebase.js"></script>
-    <script src="components/angularfire/angularfire.js"></script>
+    <script src="components/angularfire/angularFire.js"></script>
     <!-- endbuild -->
  
     <!-- build:js scripts/scripts.js -->

2.3 Gruntfiles.jsへの編集

今回もデフォルトではポート番号が9000固定になっています。環境変数からポート番号を取得する必要があるので Gruntfiles.js に修正を加えます。
また grunt で起動する際に --force を加えてもいいのですが compass と open のエラーによる起動の中断をさける為に compass と open をコメントアウトします。そして外部からアクセス出来るように hostname の修正もあわせて実施します。

Firepoker$ vi Gruntfile.js 
Firepoker$ git diff
diff --git a/Gruntfile.js b/Gruntfile.js
index 7a5ca60..475cc23 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -45,9 +45,9 @@ module.exports = function (grunt) {
     },
     connect: {
       options: {
-        port: 9000,
+        port: (process.env.VCAP_APP_PORT || 9000),
         // Change this to '0.0.0.0' to access the server from outside.
-        hostname: 'localhost'
+        hostname: '0.0.0.0'
       },
       livereload: {
         options: {
@@ -270,10 +270,10 @@ module.exports = function (grunt) {
   grunt.registerTask('server', [
     'clean:server',
     'coffee:dist',
-    'compass:server',
+//    'compass:server',
     'livereload-start',
     'connect:livereload',
-    'open',
+//    'open',
     'watch'
   ]);

2.4 マニフェストの作成

最後に manifest.yml を作成します。指定するのは -c　のコマンドオプションと time です。

Firepoker$ vi manifest.yml
Firepoker$ cat manifest.yml 
---
applications:
- name: firepoker
  command: npm install grunt-cli -g && cd /home/vcap/app/ && grunt server 
  time: 180

grunt コマンドを実行する為に必要となる grunt-cli を追加インストールして grunt server コマンドで起動します。
なお cd は Gruntfile.js が存在するディレクトリに念の為、移動しています。

2.5 デプロイの実行

では cf push しましょう。

Firepoker$ cf push
Using manifest file /home/k-nagai/work/Firepoker/manifest.yml
 
Creating app firepoker in org k-nagai / space work as k-nagai...
OK
 
Creating route firepoker.10.244.0.34.xip.io...
OK
 
Binding firepoker.10.244.0.34.xip.io to firepoker...
OK
 
Uploading firepoker...
Uploading app files from: /home/k-nagai/work/Firepoker
Uploading 28.8M, 9760 files
Done uploading               
OK
 
Starting app firepoker in org k-nagai / space work as k-nagai...
-----> Downloaded app package (26M)
-------> Buildpack version 1.3.1
       Node.js Buildpack v64
-----> Reading application state
       package.json...
 
:
:
       WARNING: Avoid semver ranges starting with '>' in engines.node
       WARNING: Avoid checking node_modules into source control
       WARNING: No Procfile, package.json start script, or server.js file found
-----> Uploading droplet (31M)
 
1 of 1 instances running
 
App started
 
 
OK
 
App firepoker was started using this command `npm install grunt-cli -g && cd /home/vcap/app/ && grunt server`
 
Showing health and status for app firepoker in org k-nagai / space work as k-nagai...
OK
 
requested state: started
instances: 1/1
usage: 256M x 1 instances
urls: firepoker.10.244.0.34.xip.io
last uploaded: Tue Oct 20 04:32:14 UTC 2015
stack: cflinuxfs2
buildpack: Node.js
 
     state     since                    cpu    memory           disk      details   
#0   running   2015-10-20 01:33:09 PM   0.0%   130.7M of 256M   0 of 1G

動作確認

ブラウザでURLへアクセスします。

Play now をクリックして Create a new game でストーリー等を作って行きましょう。

その後に取得したURLをメンバーに共有します。

メンバー各々が join してストーリーに対してポイントを選択し終えるとカードの値が表示されます。

未選択のユーザがいる場合は相手のカードは裏返した状態で見えません。

動作は問題ないようです。

おまけ

今回のアプリでステータスはスタート状態になったのにブラウザでアクセスしたら画面が真っ白という方へ。
まず１つは bower install 。単純なことなのですがインストール途中にインストールするバージョンを聞いてきたりします。アプリによっては新しいバージョンを入れる場合が正しいこともあるのですが、今回は bower.json に書かれたバージョンを選択して下さい。
もう１つは手順の index.html の修正。初歩的な問題として Cloud Foundry の実行環境は Ubuntu がベースになっているので、Windows がベースのアプリを動かしたい場合は大文字・小文字に注意しましょう。特に今回のアプリのように読み込みファイルのアドレスがエラーになってしまうと元も子もありません。
最後に別のブラウザでもアクセスを試して下さい。検証中に「別のブラウザだったら見えた」ということもありました。

今回使用したソフトウェア