Goodpatchのフロントエンド定例より皆様へ情報を共有する場「Codepatch」第三回！

初めまして、iOSデベロッパのseiyaです。

今回は前回の記事「【Codepatch #02】PhantomJSを使ってスクリーンキャプチャを自動化、他」で少し触れたProtractorを始め下記の項目でお送りします。

・Protractorでテスト、スクショの撮影を自動化
・MixinライブラリBourbon紹介
・楽々Framer.js! shortcuts-for-framer

Protractorでテスト、スクショの撮影を自動化

 

 

ProtractorとはAngularJSのE2Eテストフレームワークです。WebDriverJSという、JavaScriptでブラウザを動かすための仕組みを元に作られています。

そのため前回のCodepatchで取り上げたCasperJSと異なり、様々なブラウザでの動作が確認できたり、手元のブラウザと全く同じ見た目でスクリーンキャプチャできたりといった恩恵があります。

また、AngularJSで作られたアプリケーションを操作するために便利なメソッドが用意されている点もProtractorのよいところです。以下のようなものがあります。

* Protractor.prototype.waitForAngular: AngularJSの処理が終わるまで待つ。
* ProtractorBy.prototype.repeater: ng-repeat内のelementsを取得する。

今回もスクリーンキャプチャしてみました。chromeで見たままの画面がキャプチャできています。

コードを抜粋すると以下の通りです。

var fs = require('fs');
describe("スクリーン一覧画面", function() {
  it("6枚のスクリーンがある", function () {
    browser.get("http://0.0.0.0:9000/app/#/projects/53e0338e4d617323c0550000");

    var screens = element.all(by.repeater('screen in screens'));
    expect(screens.count()).toEqual(6);

    browser.takeScreenshot().then(function (png) {
    writeScreenShot(png, 'project_edit.png');
    });
  });
});
function writeScreenShot(data, filename) {
    var stream = fs.createWriteStream("./snapshots/"+filename);
    stream.write(new Buffer(data, 'base64'));
    stream.end();
}

Protractorを使うことで、AngularJSを使ったWebサイトのデバッグが素早く行えます。使い勝手が良さそうなのでより理解を深めていきたいです。

MixinライブラリBourbon紹介

MixinライブラリはCompassではなくBourbon。
しばらくCompassを使っていたのですが、新たに登場したBourbonに最近ハマっています。なによりコンパイルの速度がはやいです。Compassでは6秒かかっていたものがBourbonでは2秒と短縮されています。

http://www.damln.com/log/sassc-and-bourbon-it-works/

またBourbonの中で気に入っているのが豊富なTiming-functionsのmixin。これを使うことで簡単に好みのアニメーションを実装できるのではないでしょうか。

http://bourbon.io/docs/#timing-functions

楽々Framer.js! shortcuts-for-framer

https://github.com/facebook/shortcuts-for-framer 

この shortcuts-for-framer は、Framerでのプロトタイピングをより簡単にするためのライブラリです。
どう簡単になるか、ざっくり説明すると

• • PSDやSketchからインポートした画像へのアクセスがちょっと簡潔になる
  • jQueryライクにアニメーションの指定ができる
  • イベントとして tap や hover が使える

例えば、

psdLayers["mainvisual"].on Events.Click, ->
    mainvisual.animate
        properties:
            x: 100
        time: 1
        curve: 'spring'

これを shortcuts-for-framer を使って記述すると

mainvisual.tap ->
    mainvisual.animateTo {x: 100}, 1, 'spring'

すっきり♪

記述がシンプルになるのでエンジニアじゃない人にもちょっととっつきやすくなりそうですね。

まとめ

新しいメンバーがどんどん入社してきて、情報の共有にも活気がでてきました。

今後もバシバシ配信していきます！

Goodpatchでは現在フロントエンドエンジニアを募集中です。「一緒に働きたい！」という方は下記よりお待ちしています！

新しい技術を積極的に使ってUIを作るフロントエンドエンジニア