fastlaneを使ってスクリーンショット撮影を自動化

はじめに

下記記事を見て、試してみたいとなったので早速やってみます。※fastlaneってどんなもの?というのはこの記事を見て下さい。

iOSで継続的デプロイメントを実現するfastlane  

今回紹介するのはfastlaneの中でも、比較的試しやすいsnapshotframeitについてです。 

公開用のスクリーンショットを一括撮影: snapshot

snapshotは、UIAutomationのスクリプトを使って、指定したOSバージョン、言語で それぞれのスクリーンショットを撮ってくれます。

さっそくインストールしましょう、インストールは下記だけです。

 ただ試しに実行してみた所、xctool入れろとエラーになってたので、homebrewでインストールします。

 続いて、そもそもスクリーンショット取るアプリ無いと話にならないので、全く面白みないですが下記のような画面を持った、アプリを作りました。

s_1

1の画面をタップすると2の画面、2の画面をタップすると・・・という遷移を行うだけです。

アプリを用意したので次にUIAutomationで、自動スクリプトを作ります、スクリプトの作り方は下記を参考にして下さい。

[Xcode][Instruments] UIAutomation のテストコードの自動作成 

ぽちぽちと画面を切り替えるスクリプトは下記になりました、二回しか画面遷移しないのでこれだけでした。

次に、ターミナルでアプリのプロジェクトディレクトリに移動して、下記コマンドを実行します。

 これによって、Snapfile、snapshot-iPad.js、snapshot.js、SnapshotHelper.jsが作成されます、利用するのはSnapfileと、snapshot.jsです。

まずはsnapshot.jsを開きます、これに先ほどのUIAutomationのスクリプトを入れて、スクリーンショットを取る場所、待ち時間等を記述します、今回は下記のようになりました、ページ遷移する度にスクリーンショットを撮影します。

次に、Snapfileをいじります、こっちは設定ファイルです、デフォルトだと、端末と言語が多いので下記のようにしました。

 これで準備完了です、プロジェクトのディレクトリ上で下記コマンドを実行することで、撮影が開始されます。

 シュミレータが起動、終了を繰り返すので少しうっとおしいですが、裏でやってくれるので、 その間自分は別の作業してて問題ありません、これが終わると下記の様にスクリーンショットが作られます。(もちろんAppStoreに上げられる解像度です)

s_2

ちなみにこれは、撮影が終わるとscreenshots.htmlが出来ていて、それを閲覧した時のものです。

iPhoneのフレームに画像をさくっとはめてくれる: frameit

これは要するに画像を用意して、画像があるディレクトリでframeitを実行すると、iPhoneのフレームにはめた画像を作ってくれますよってものです、主にWebサイトなんかでアプリの紹介画像にしたり、実行イメージを見せたりするのに使えると思います。

さっそくこちらもインストールしましょう。

 実行してもエラーになります、何故か調べたら、私のマシンが最近変えたのもあって、imagemagickが入ってなかったのが原因でした、なのでまたまたhomebrewを使ってインストールします。homebrew便利!

この後再度sudo gem install frameitとやったら入りました、というわけで、先に紹介したsnapshotで撮影したスクリーンショットに対してframeitを実行してみましょう。

 実行するとcurlでダウンロードが開始されて、5分くらいしたあとに下記メッセージが表示されます。

 ここでEnterを押すと、appleのiPhoneの枠psdが置いてあるページに飛ばされます、更に下記メッセージが表示され、~/.frameit/devices_frames/がFinderで開かれます。

これは要するに、iPhone枠のテンプレートをダウンロードし終わったら、さっき開いたディレクトリに入れてEnterを押して下さいってことです、書いてある通り、「iPhone 6, iPhone 6 Plus, iPhone 5s and iPad mini 3」をここからダウンロードして解凍したディレクトリを下記のように格納しました。 

f_1

入れ終わったらEnter押すと、2秒くらいではまった画像が出来ました、2回目以降はもうテンプレートがあるので、すぐはめてくれます。

f_2 f_3

最後に

多少不足があって、インストールに手間取ったものの、余計な手順も必要なくできました。

まだ、deliver、PEM、sign、produce、これらをまとめたfastlaneには手を付けていませんが、どれも手間をぐっと減らしてくれる便利な物ばかりそうなので、ぜひ覚えたいと思います。

●この記事を書いた人