iOS
fastlane

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

ストア用の画像を作るとき、 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

スクショのリネーム

  • iPhone7Plus-0Home.png
  • iPhone7Plus-1Tool.png

という命名にファイル名を変更します。

フォントのダウンロード

frameit するにはフォントを自分で DL する必要があります。
今回は 自家製 Rounded M+ (ラウンデッド エムプラス) | 自家製フォント工房 を利用させてもらうことにします。

背景画像のダウンロード

MindNode/screenshots/background.jpg

この画像をそのまま使います。

frameit の準備

keyword.stringstitle.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

見ればだいたいわかると思うのであまり解説はしませんが、ここでも filterHome, 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 iPhone7Plus-0Home_framed.png iPhone7Plus-1Tool_framed.png
ja iPhone7Plus-0Home_framed.png iPhone7Plus-1Tool_framed.png

いい感じの画像を作ることができました :tada:

自分でフォントファイルを置いたり、ファイル名と key 名を合わせたりとややこしいことも多いですが、設定ファイルをちゃんと書けばストア用のスクショをさくっと作れて便利ですね。
Deliver と組み合わせればスクショの自動更新もできますね :muscle:

参考