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

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

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

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

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

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

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

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

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

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

ちなみに、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が参照されます。

とすると、01ListView.pngの画像に追加されるタイトルが、”Title for ListView”となるわけです。

keywordsも同様です。

これで、スナップショット撮影 -> フレームつける -> 説明文追加 までの自動化ができたことになります。

MEMO
後から考えると、説明ドキュメントだけではなく、ここにある実際に動作するサンプルをファイルだけではなく、フォルダ構造含め参考にすると良いことに気づきました。

いろいろ自動化できてうれしい!

あとは、Googleのadmob使っているアプリで、広告を隠せれば言うことない感じ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です