ストア用の画像を作るとき、 snapshot を使ってスクショを取って frameit で加工するという流れはよく見ます。
しかしそれだと UITest を書かねばならず腰が重いので、自分で撮影したスクショを fastlane/frameit で加工しました。
frameit で利用するフォントや背景画像は自分で用意しなければならず最初は戸惑いました。ですがちゃんとしたフォルダ構成と設定ファイルを書けば問題ないので、その流れをまとめていこうと思います。
fastlane はインストール済みのものとして進めていきます。
最終的なフォルダ構成
今回はこんな感じになります。これになるようにファイルを設定していきます。
MyApp
└── fastlane
└── screenshots
├── Framefile.json
├── background.jpg
├── en-US
│ ├── iPhone7Plus-0Home.png
│ ├── iPhone7Plus-1Tool.png
│ ├── keyword.strings
│ └── title.strings
├── fonts
│ └── rounded-mplus-1c-light.ttf
└── ja
├── iPhone7Plus-0Home.png
├── iPhone7Plus-1Tool.png
├── keyword.strings
└── title.strings
スクショの準備
iPhone7Plus サイズのスクショを用意します。今回はこんな感じのを用意しました。
| 1枚目 | 2枚目 |
|---|---|
 |
 |
スクショのリネーム
- iPhone7Plus-0Home.png
- iPhone7Plus-1Tool.png
という命名にファイル名を変更します。
フォントのダウンロード
frameit するにはフォントを自分で DL する必要があります。
今回は 自家製 Rounded M+ (ラウンデッド エムプラス) | 自家製フォント工房 を利用させてもらうことにします。
背景画像のダウンロード
MindNode/screenshots/background.jpg
この画像をそのまま使います。
frameit の準備
keyword.strings と title.strings ファイルを言語ごとに作成します。
また、 Framefile.json ファイルを作成します。
フォルダ構成
ここまでダウンロードしたファイルや作成したファイルを最初に見た構成通りに設定します。
そうするとこうなりますね。
MyApp
└── fastlane
└── screenshots
├── Framefile.json
├── background.jpg
├── en-US
│ ├── iPhone7Plus-0Home.png
│ ├── iPhone7Plus-1Tool.png
│ ├── keyword.strings
│ └── title.strings
├── fonts
│ └── rounded-mplus-1c-light.ttf
└── ja
├── iPhone7Plus-0Home.png
├── iPhone7Plus-1Tool.png
├── keyword.strings
└── title.strings
frameit の設定を書く
keyword と title の違いはわかりにくいですが、スクショを生成すればすぐわかります。
注意するのは、ファイルを UTF-16 で作成することです。 UTF-8 で作るとエラーになります。
また、スクショ名の末尾と strings の key を合わせてください。
今回は Home, Tool を一致させています。
keyword
まず keyword.strings を書いていきます。
en-US/keyword.strings
"Home" = "HOME";
"Tool" = "TOOL";
ja/keyword.strings
"Home" = "ホーム";
"Tool" = "ツール";
title
次に title.strings です。
en-US/title.strings
"Home" = "Screen";
"Tool" = "Benri";
ja/title.strings
"Home" = "スクリーン";
"Tool" = "便利";
Framefile.json
見ればだいたいわかると思うのであまり解説はしませんが、ここでも filter に Home, Tool を指定します。
{
"default": {
"keyword": {
"fonts": [
{
"font": "fonts/rounded-mplus-1c-light.ttf",
"supported": [
"ja",
"en-US"
]
}
]
},
"title": {
"fonts": [
{
"font": "fonts/rounded-mplus-1c-light.ttf",
"supported": [
"ja",
"en-US"
]
}
],
"color": "#545454"
},
"background": "./background.jpg",
"padding": 50
},
"data": [
{
"filter": "Home",
"keyword": {
"color": "#d21559"
}
},
{
"filter": "Tool",
"keyword": {
"color": "#2980b9"
}
}
]
}
実行する
そのまま frameit を実行してもいいのですが、 path を指定しないとライブラリのスクショなども加工されてしまうので、 lane を作って path を指定できるようにしています。
lane :screenshots do
frameit(path: './fastlane/screenshots/', white: true)
end
実行:
$ bundle exec fastlane screenshots
結果
| 一枚目 | 二枚目 | |
|---|---|---|
| en-US |  |
 |
| ja |  |
 |
いい感じの画像を作ることができました 
自分でフォントファイルを置いたり、ファイル名と key 名を合わせたりとややこしいことも多いですが、設定ファイルをちゃんと書けばストア用のスクショをさくっと作れて便利ですね。
Deliver と組み合わせればスクショの自動更新もできますね 