July 26, 2014

AngularJS と Laravel による Instagram の写真を使ったカルタを Heroku にデプロイしてみた

ふと、Instagramの写真でカルタできそうだなと思いついたので、作ってみました。

アプリケーションのURLは以下になります。
http://igkaruta.herokuapp.com/

ソースは以下で公開しています。
https://github.com/mamor/igkaruta


以下、遊び方。


1.
Login with Instagram > Play KARUTA と進みます。

2.
対象ユーザを選択して "GET PHOTOS" を押します。対象ユーザの写真有無チェックはまだしていないので、写真が取れなかったら別のユーザを選んで下さい。

3.
写真が表示されたら "START" を押します。カルタが始まります。


4.
"STOP" で一時停止、"START" で再開ができます。

5.
"GET PHOTOS" で、所謂ニューゲームになります。


以下、開発周り。


サーバサイドにはLaravelを使いました。が、InstagramのAPI(認証含む)の実行程度なので、大したことはしていません。尚、雛形には、ちまちまとオレオレ化させている https://github.com/mamor/laravel を使っています。

Herokuへのデプロイは
http://madroom-project.blogspot.jp/2014/07/herokuphppackagejsonnodejs.html
http://madroom-project.blogspot.jp/2014/07/herokuapplication-error.html
https://github.com/mamor/igkaruta/commit/462461e50c7a81dec00a2fddcf10f8760537491f
みたいな感じです。

クライアントサイドにはAngularJSを使いました。一番最初に勉強がてら作った TroubleClinic https://github.com/mamor/TroubleClinic の頃と比べて、少しはAngularJS力がついたかなぁと思います。ディレクトリ構成やソースの書き方は、Yeomanを参考にしています。

ちなみにYouFMもAngularJSで作っています。コイツもよろしくお願いしますw
https://chrome.google.com/webstore/detail/youfm/gbpebippikipomjijplmbepmginobjbj

テストはそれぞれ、PHPUnitとJasmine(+ gulp.js + Karma)で行っています。何かの参考になれば幸いです。


P.S.
アイデア等、PR歓迎です。誰か神経衰弱作って下さいw

No comments:

Post a Comment