July 29, 2014

AngularJSで一文字ずつフェードインして表示するディレクティブのメモ

以下がサンプルです。 ポイントは、一文字ずつバラしてspanタグで囲み、1spanタグずつdelay()させつつfadeIn()させる感じです。(あんまりAngularJS関係ない。。。)

先日作ったインスタグラムカルタで使っていて、テスト(spec)は https://github.com/mamor/igkaruta/blob/master/spec/directives/myFadeInCharsSpec.js みたいな感じで書きました。

Travis CIでPHPUnitを実行して、Coverallsでカバレッジを表示するメモ

メモです。

大雑把な手順は
1. Coveralls でアカウント作成と対象レポジトリの登録
2. satooshi/php-coveralls のインストール
3. .travis.yml を編集
4. .coveralls.yml を作成
になります。

1. Coveralls でアカウント作成と対象レポジトリの登録
https://coveralls.io/ から特に問題なく出来たので割愛します。

2. satooshi/php-coveralls のインストール
Travis CIとCoverallsの連携にしか必要ないので、composer.jsonには書かずに.travis.ymlでインストールするようにしました。"before_script" で "composer require satooshi/php-coveralls:0.* --dev" とかすればOKです。

3. .travis.yml を編集
"phpunit --coverage-clover build/logs/clover.xml" として、PHPUnit実行時にカバレッジファイルを出力するようにします。また "after_script" で "php vendor/bin/coveralls"として、Coverallsに通知します。

4 の.coveralls.ymlは
src_dir: .
coverage_clover: build/logs/clover.xml
json_path: build/logs/coveralls-upload.json
としました。

まとめると
https://github.com/mamor/igkaruta/commit/99c1492f9862000bd70e6a974c72ea209413f088
みたいな感じです。

後は、README.mdにバッジのURL(Coveralls側でわかります)を書けば https://github.com/mamor/igkaruta#karuta-for-instagram のように表示することが出来ました。

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

Herokuで"Application Error"が出た

Herokuで以下のエラーが出ました。


公式ドキュメントの https://devcenter.heroku.com/articles/error-codes#h14-no-web-dynos-running を参考に
heroku ps:scale web=1
したら解決しました。

HerokuにPHPアプリをデプロイ時、package.jsonがあるとnode.jsアプリと認識されるっぽい

HerokuにPHPアプリをデプロイしようとしたら、node.jsアプリと認識されてしまいました。

composer.jsonもcomposer.lockもあるのですが、雑多なタスクをまとめるためにpackage.jsonもあったので、それが原因なんだと思います。

なので、BUILDPACK_URLを設定してみると、解決出来ました。
heroku config:set BUILDPACK_URL=https://github.com/heroku/heroku-buildpack-php