Fastlaneでスクリーンショットにフレームをつける

⌛️ < 1 min.

画面のスクリーンショットのままだと味気ないので、フレームをつけることに

MEMO

当初は、設定ファイルにSwiftを使っていたのですが、対応されていないオプションがあったので、Rubyファイルに変更しました。

必要ライブラリのインストール

% brew install libpng jpeg imagemagick

まずは、フレームをつけてみる

この段階で、screenshotフォルダに移動して、以下のコマンドを実行すると、フレームをつけてくれます

% fastlane frameit setup    ＜＝ 初期設定
% fastlane frameit

frameitでの説明にもあるのですが、フレームをつけた画像は、AppStore指定のサイズではなくなっているので、そのままでは、申請に使えません。
以下の説明文等を追加するようにすると、自動で調整されるようです。

Fastfileを以下のように実行すると、スナップショットを撮ってフレームをつけるところまで自動化されます。

lane :screenshots do
  capture_screenshots
  frame_screenshots(white: true)
#  upload_to_app_store
end

MEMO

ドキュメントを改めてみてみると、

% bundle exec fastlane ＜lane名 例：screenshots＞

として実行しなさいと書いてあります。

ちなみに、Fastlaneファイルでのコメントは、# なので、動作確認するだけであれば、適宜不要な行をコメントアウトすると確認作業が早くできます。
＃以下のFramefile.jsonでハマって、なんど繰り返し実行したことか・・・

説明分も追加！

Framefile.jsonというものを準備しないといけないらしいです。

ハマりまくったので、時系列で整理します。

まずは、サンプルを使ってみます

ここにあるexampleを使って実行してみました。
-> フォントがないと怒られます。

Fontsフォルダを作って、ダウンロードしてきたttfフォントをおきました。

次は、”No title provided in your Framefile.json or title.strings”とエラーが出ます。
これは、スクリーンショットにつける文字列が設定されていないということかと想像します。

Title.stringsとkeyword.strigsをWebから持ってきて作ってみたのですが、ログをチェックしてみると、title.stringsに何も設定されていないと出ます。

MEMO

Title.stringsは、Xcodeが作るものと同様のUTF-16であることが必要との事なので、Xcodeで作りました。
ちなみに、Xcodeでの編集に便利だからと、fastlaneフォルダをXcodeに追加すると追加されたファイルをプロジェクト関連ファイルと認識してエラーが多発してしまいます。

生成されるファイル名に合わせた調整が必要

なんとなく、サンプルを使うと適当に作られるかと思ったのですが、違いました。生成されるスクリーンショットファイル名に合わせた調整が必要です。
＃よく考えれば当たり前です。

今回は、以下のようなスクリーンショットのファイルにフレームを追加することを考えます。

iPhone 6s Plus-01ListView.png
iPhone 6s Plus-02DetailView.png
iPhone 6s Plus-03GraphView.png

Framefile.json の”data”セクションに
“Filter”: “XXXX”というような行があるかと思うのですが、この行がポイントです。
例えば、iPhone 6s Plus-XXXX.pngを処理対象にするには、XXXXがこのFilter行で定義されている必要があります。
例えば、”Filter”: “01ListView”とすると、iPhone 6s Plus-01ListView.pngファイルが処理対象になるわけです。

これで、ファイルを処理対象にすることができました。

すくなくとも、各ファイルにタイトルが必要です。このときには、title.stringsが参照されます。