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

ストア用の画像を作るとき、 [snapshot](https://github.com/fastlane/fastlane/tree/master/snapshot) を使ってスクショを取って [frameit](https://github.com/fastlane/fastlane/tree/master/frameit) で加工するという流れはよく見ます。
しかしそれだと UITest を書かねばならず腰が重いので、自分で撮影したスクショを [fastlane/frameit](https://github.com/fastlane/fastlane/tree/master/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枚目|
|---|---|
|<img width="414" alt="iPhone7Plus-0Home.png" src="https://qiita-image-store.s3.amazonaws.com/0/5678/1afb5f84-81d7-deb1-3a9a-561995015f0d.png">|<img width="414" alt="iPhone7Plus-1Tool.png" src="https://qiita-image-store.s3.amazonaws.com/0/5678/7039674d-5988-2a7a-7db8-506e5b761285.png">|

## スクショのリネーム

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

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

## フォントのダウンロード

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

## 背景画像のダウンロード

[MindNode/screenshots/background.jpg](https://github.com/fastlane/examples/blob/master/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` を指定します。

```json
{
    "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 を指定できるようにしています。

```ruby
  lane :screenshots do
    frameit(path: './fastlane/screenshots/', white: true)
  end
```

実行: 

```
$ bundle exec fastlane screenshots
```

## 結果

| |一枚目|二枚目|
|---|---|---|
|en-US|<img width="414" alt="iPhone7Plus-0Home_framed.png" src="https://qiita-image-store.s3.amazonaws.com/0/5678/ea04d088-1820-db45-0c59-0d8c9ad7cf5e.png">|<img width="414" alt="iPhone7Plus-1Tool_framed.png" src="https://qiita-image-store.s3.amazonaws.com/0/5678/e265acbb-ab92-aa8d-4fb1-85adc9fdb686.png">|
|ja|<img width="414" alt="iPhone7Plus-0Home_framed.png" src="https://qiita-image-store.s3.amazonaws.com/0/5678/b8b00bb0-e7f2-cb92-aae9-edb24c171aad.png">|<img width="414" alt="iPhone7Plus-1Tool_framed.png" src="https://qiita-image-store.s3.amazonaws.com/0/5678/74ba0d27-4168-99ba-1a71-a23a4c72d2bb.png">|

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

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

# 参考

* [frameit \- fastlane docs](https://docs.fastlane.tools/actions/frameit/)
* [examples/MindNode/screenshots at master · fastlane/examples](https://github.com/fastlane/examples/tree/master/MindNode/screenshots)
* [fastlane\-example/Fastfile at master · starhoshi/fastlane\-example](https://github.com/starhoshi/fastlane-example/blob/master/iOS/fastlane/Fastfile)