WEBアプリをNode.jsで書いてHeroku上にあげた話[ 1 ]

これが作ったWEBアプリ
## [FireCommits](https://fire-commits.herokuapp.com/)
![スクリーンショット 2015-11-22 0.19.14.png](https://qiita-image-store.s3.amazonaws.com/0/85665/cc00c9bf-2b2a-1615-17c6-96a2db6328ce.png)
https://fire-commits.herokuapp.com/

エンジニアによるエンジニアのための草刈機です。草刈機って感じのゲームじゃないですが。githubの草を楽しく撃って撃って撃ちまくるゲームです。コミット数が多ければ多いほど、草がどす黒いほど強くて点数も高いので、凄腕エンジニアさんの草を全破壊してみんなで呟きましょう :laughing: 

サーバー側はNode.js, ゲーム実装はenchant.js, PaaSにheroku, DSにmilkcocoa, Frameworkにprimerを使った作品で、先日公開しました。ほとんど自分にとって公開するのが初めてだったので、公開して気づいた事やためになった事をここにまとめる。最初はほとんど自分の感想。

## 実装したアプリの挙動
作ったアプリ自体の挙動は簡単にこんな感じ 
1. github垢を入力
2. contributions(草)のデータ配列を取得。
3. enchant.jsでキャンパス上に描画して楽しくシューティング。
4. milkcocoaでランキングを実装。
5. heroku上にUPPPPPP :+1: 

### 1. github垢を入力
今回のはシングルページなので、そのページ自身('/')にformでusernameをGETで送ってそれを受け取る感じ。usernameを受け取ったら2に移行するし、受け取らなかったら2を飛ばして3に行く。なので、何もニュ力してないと、草が一切ない真っ白な意味不明なシューティングゲームになっちゃう仕様なので、その時はフォームに誰かのgithub垢を入力してやってください。

### 2. contributionsを取得
これは前に書いたので[Nodeで特定の人の草カレンダーを取得する](http://qiita.com/hyde2able/items/34ecbbd3b13809fd078c)を参考にしてください。httpsでリクエストして返ってきたデータをパースして色々ごちゃごちゃやるだけだったんですが、レスポンス形式がxmlで扱った事なかったので、少し戸惑いましたって話。jsonの方が好き :heart: 

### 3. enchant.js上に描画して楽しくシューティング
[たった99行でシューティングゲームを作る方法](http://wise9.jp/archives/5808)を参考にしました。enchant.jsは始めて使ったけど、面白いくらいシューティングゲームが簡単に実装できて、楽しかった。大学２年時にC言語だけでブロック崩しを作った時とは比べものにならないくらい楽だった。

### 4. milkcocoaでランキングを実装
スコアを記録するためのデータベースとして[milkcocoa](https://mlkcca.com/)を使用しました。これも初めて使ったんですが、恐ろしく簡単にデータの保存、更新、取得ができました。Node.jsをサポートしてるので、こんだけのコードでデータストアにプッシュできちゃったりします。

```node:
var milkcocoa = new MilkCocoa('app_id.mlkcca.com');
var dataStore = milkcocoa.dataStore('hoge');
dataStore.push({name: 'foo', company: 'bar'});
```

使う前に登録だけしてapp_idを取得しなきゃいけないんですが、無料で10000データぐらい保存できるので、小さなアプリケーション作る時はオススメです！[milkcocoaのドキュメント](https://mlkcca.com/document/api-js.html)がめちゃくちゃ分かりやすかったので、これ見たら一瞬です。ただ、今回はそれでランキングを実装...と書いたんですが、milkcocoaは簡単に使えるデータストアだけで無料版だとスコア順にデータをソートして取り出すとかは出来ません。古い順か新しい順かの二通りです。有料版はわかりません。なので、

一旦内部変数としてデータベースのランキングデータ(スコア順はばらばら)を取り出しておいて、ゲームが終わった時にそのランキングデータの中で一番スコアの低いものより今回のスコアが高ければ、その一番スコアの低いものを今回のスコアに置き換える

といった感じで擬似的に実装しています。この方法だと公開してから致命的なバグも見つかったのですが。これは後々。

### 5. heroku上にUPPPPPP :+1: 
作ったWEBアプリをいざ公開！ってことで、herokuが超簡単！らしいのでherokuを使いました。[Node.js + Express を Heroku で動かすまでの手順まとめ](http://tacamy.hatenablog.com/entry/2013/02/16/235127)を参考にして

```
git push heroku master
```
しました！しかし

```
heroku open
```
してみると...
![applicationerror.png](https://qiita-image-store.s3.amazonaws.com/0/85665/c2e474d6-3565-62ab-5f08-f3d4404a1856.png)

**Oh, My GOD!!!** :scream: :scream: :scream: :scream: :scream: :scream: 

log見ると、"Can't find module"って言われたんで調べたらpackage.jsonに今回使うnpmモジュールを全て書いていなかったので動かなかっただけでした。ただ、上で読んだブログでは載ってなかったことなので、ここにメモ書き。

```
npm install --save package_name
```
--saveするとpackage.jsonのdependenciesにバージョン付きでついでに書き込んでくれるので楽チンですね。ここだけ少しハマったので書いておきました。
実際に公開して、気づいたことやためになったことは次回書きますね。

### 追記
Frameworkはいつもbootstrap一択だったんですが、せっかくgithubの草を使うし！！ってことで、github製の[Primer](http://primercss.io/)を使ってみました！bootstrapより軽量だし、それっぽくgithub感出せたかなーって思うので、ぜひいつか使ってみてください！！
github感でてますよね。。。右っ側だけ。。でてないかな。。 :sweat: :disappointed_relieved: :weary: :pensive: :disappointed: 

ロゴは[SquareSpace](http://www.squarespace.com/logo)で作成しました。シンプルなロゴが無料で簡単に作れるのでオススメです！ただ、海外のサービスなので日本語対応のフォントは少ないです。

あと上げてから知り合いに『herokuは一時間アクセスがなきゃ寝ちゃうよー』って言われたので[Newrelic](https://newrelic.com/)をオススメされました。アプリを監視してくれるサービスらしく、登録したら何秒間隔かはわからないけど、アクセスしてレスポンス時間とか計測してくれるので、herokuさんが眠らないらしいです！Nodeだと導入も簡単だったのでGood :ok_hand: 
[New Relicでアプリケーションのパフォーマンス測定](http://dev.classmethod.jp/tool/newrelic/)

[WEBアプリをNode.jsで書いてHeroku上にあげた話 2](http://qiita.com/hyde2able/items/7af1ef2498789cd0890f)