ストア用の画像を作るとき、 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 と組み合わせればスクショの自動更新もできますね

[fastlane] snapshot は使わないけど frameit を使いたい