【Codepatch #02】PhantomJSを使ってスクリーンキャプチャを自動化、他
最近Goodpatchに入社した、フロントエンドエンジニアのmigiです。
Goodpatch内のHTML5やiOS・Androidアプリ開発についてや業務中の疑問を共有する場としてのフロントエンド定例、そこで出た内容の一部を皆さまに共有する「CodePatch」の第二回目をお送りします！
前回の記事「【CodePatch #01】グッドパッチのフロントエンド定例で話題になった技術を不定期で配信してみます。」には多くの反応をいただきまして誠にありがとうございました！
自分たちが興味を持っている技術に対して全国数千万人(推定)のフロントエンド愛好家の皆さまにも同じく興味を持っていただけたようでとても嬉しく思います。
それでは今回もさっそく、今週のフロントエンド定例で話題に上がった話をご紹介していきます！
目次
今週のフロントエンド定例で出た話
PhantomJSを使ってスクリーンキャプチャを自動化
PhantomJSとは、JavaScriptで操作を行う、画面を持たないWebブラウザです。任意のタイミングでスクリーンショットを撮ったり、JavaScriptを実行したりすることが可能です。
それらを利用することで、Webブラウザを操作せずともWebページの見た目の確認作業の一部を自動化することが出来ます。
今回はPhantomJSを扱いやすくしたユーティリティである、CasperJSを使って、Prottのスクリーンショットを撮ってみました。どちらもbrewでインストール可能です。
そのコードは以下のようになります。CasperJSはCoffeeScriptも実行可能なので、CoffeeScriptで書いてみました。
# prott.coffee
casper = require("casper").create
viewportSize:
width: 1440
height: 900
casper.start "http://0.0.0.0:9000/users/sign_in", ->
@fill "form#new_user",
"user[email]": "user@prottapp.com",
"user[password]": "hogehoge"
, true
.then ->
@capture "all_projects.png"
.thenOpen "http://0.0.0.0:9000/app/#/projects/53d8bd3b4d61733d0f180000", ->
console.log "open project edit page"
.wait 3000, ->
console.log "3000ms passed"
.then ->
@capture "edit_project.png"
console.log "took snap shot"
casper.run()
これを
$ casperjs prott.coffee
としてスクリプトを実行すると、スクリーンショットを次々と撮影し、保存してくれます。
例えばedit_project.pngは以下のように撮影されました。
しかし一部が正しく表示されていません…。
どうやらProttのようなAngularJSで作られたWebアプリケーションは、Protractorというテストツールを使うほうが良いらしいです。
https://github.com/angular/protractor
それから、PhantomJSもバージョンアップが進んでいるようです。
https://github.com/ariya/phantomjs/wiki/PhantomJS-2
次回のフロントエンド定例では、その辺りについて共有したいと思います。
hue APIを利用して照明を自在に操ってみた
{"on": true,"hue": 50000,"effect": "colorloop", "alert":"none"}
いきなりなんの連想配列かと思うかもしれませんが、上記の一文だけで、hueの照明が操作できちゃいます！
hueはAPIが公開されている為、家を出たら照明が消える、雨が降り始めたら青くなるなど様々なことができます。デバッグツールも用意されていて上記の一文を送信すると簡単に照明をコントロールすることができます。
Goodpatchでやるとしたら何がいいかなーと考えていたのですが、Goodpatchは毎日朝礼と終礼をやっているのですが、ついつい時間を過ぎてしまうこともあるので、指定の時間になったらhueの色が変わりつつ音楽でも流れるようにしたら指定の時間に初めれそうな気がしているのでちょっとやってみようと思っています。乞うご期待！
AngularJSにおける日付範囲選択を実現するカスタムフィルタ
AngularJSを触ったことがある方ならご存知でしょうが、ng-repeatディレクティブを使うとバインドした配列の情報を手軽にリストやテーブルとして生成することができます。
さらに、それに対してfilterを指定して任意の条件に合致した情報だけを表示することができるため、テキストやセレクトボックスなどを使った情報の絞り込みも可能です。
項目の一覧などを生成するのに便利なのでよく使っているのですが「任意の日付の範囲に合致した情報を表示させるフィルター」は用意されておらず、ググってもなかなか情報が出てこなかったため、カスタムフィルタを自作してみました。
【AngularJS】日付範囲の選択を実現するカスタムフィルタ – Qiita
作成したカスタムフィルタは以下になります。
// 指定日以降の情報のみを返すフィルタ
app.filter('dateSelectFrom', function() {
return function(input, from) {
var arr = [];
input.some(function(v, i) {
if (v.date >= Date.parse(from)) {
arr.push(input[i]);
}
});
return arr;
};
});
こちらを作成しておき、HTML内で
<tr ng-repeat="item in items|dateSelectFrom:dateFrom">
のようにしてdateFromに任意の日付を渡すことで条件にあった項目が表示されるようになります。 (似たような形で「いつまで」のフィルタも作成します。)
おまけ
今回、こんなガジェットを使って発表をしているメンバーもいました。
コクヨ パワポ操作用 フィンガープレゼンター 黒曜石kokuyoseki ELA-FP1
私も買っちゃおうかな……。
まとめ
今回のCodePatchはいかがでしたでしょうか？
私は前職ではバックエンドのエンジニアに囲まれて仕事をしていたため、こうやって自分の知識を共有したり、逆に周りから共有してもらったりという機会があまりない状態で働いておりました。
フロントエンドエンジニア全員が毎週毎週アウトプットとインプットを繰り返す場としてのフロントエンド定例、めちゃくちゃ羨ましくないですか？
「自分もこの場に参加してみたい！」という方がいらっしゃいましたらぜひお声がけいただけますと幸いです。
twitterやfacebook、ブクマでのコメント(ツッコミ)もお待ちしております！
Goodpatchでは現在フロントエンドエンジニアを募集中ですので「むしろ一緒に働きたい！」という方はこちらからどうぞ！