fastlane[Snapshot]スクショとってちょっとオシャレにしたらとてもいい気分になるからやってみて

#初めに
fastlaneのSnapshotを使ってみました。今更かもしれませんが、今更でもかなり戸惑ったので書きます。公式は以下のURL
https://docs.fastlane.tools/getting-started/ios/screenshots/#advanced-snapshot

#ちなみに
明日友達の結婚式です。絶対遅刻しないぞ！っと思っていますが、ついつい記事を書いてしまった…。
このスクショバシャバシャ取るのはアプリの登録はなくてもできるのでぜひ！
あと、また綺麗にとか詳しくとか書いていくつもりです。
今はとりあえずできるようになるまで、記事の見た目の綺麗さは考えていないのでご了承ください。

#でどんなのできるの(やっぱりみた方がはやいよね…)
こんなふうにみやすいHTML作ってくれたり

|![fastlanesample.gif](https://qiita-image-store.s3.amazonaws.com/0/133940/98df7e79-fd69-c6ad-d8af-9ecc556c79d2.gif)|
|:-:|

写真とってくれます。

|<img width="203" alt="スクリーンショット 2018-07-27 23.53.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/eab4b398-8aa9-7619-02e9-499508b4d721.png">|
|:-:|

中身はこんな感じ(指定すれば黒もできるよ！)

|![iPhone 8 Plus-01LoginScreen.png](https://qiita-image-store.s3.amazonaws.com/0/133940/d00adfc5-88bd-b830-c150-789283ee2cf3.png)|
|:-:|

|![iPhone 8 Plus-ButtonTap_framed.png](https://qiita-image-store.s3.amazonaws.com/0/133940/9b2fe7b9-c5d4-e5dd-2ea3-36f099690f7a.png)|
|:-:|
#ではさっそく
**自分のプロジェクトがあるところまで行って**

```
$ bundle init
```
※エラーあればそもそもbundleが使えないということでbundleを使えるようにインストールしてください。

無事にうまく行くとGemfileというのができているのでそこ以下記述追記

補足:Rubyライブラリいれたいのを書いてます。
補足:cocoapodsはいれないとこける気がしたのでいれています。きっとcocoapodを開発で使っている人だと、いれとかないと、こける気がしました。

```
gem "fastlane"

gem "cocoapods"
```
完成形こんな感じです。
<img width="569" alt="スクリーンショット 2018-07-27 0.14.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/d68eaad0-2ecc-820b-c160-07731d5b00c8.png">

補足:ライブラリのインストールを

```
$ bundle install
```

そんなこんなで今の感じはGemfile.lock的なのできて以下のようになっているはず
<img width="173" alt="スクリーンショット 2018-07-28 0.10.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/5e446e1e-2b3e-328e-d563-d65c35c7a64a.png">

次にfastlaneのfastfaile的なの作りたいので

```
$ fastlane init //打った瞬間色々聞かれます
```
流れ…大事なところだけ、以下は雰囲気(それ以外は途中途中でエンター押して！って言われるのでエンター)
・なにしたい→　1. 📸  Automate screenshots
・どれやるの→自分のプロジェクト。よほどでない限りみんな1だと
・スクリーンショットappleにあげたい？→今回はappleの登録とかない人もなのでNO!

```
[22:36:29]: What would you like to use fastlane for?
1. 📸  Automate screenshots
2. 👩‍✈️  Automate beta distribution to TestFlight
3. 🚀  Automate App Store distribution
4. 🛠  Manual setup - manually setup your project to automate your tasks
?  1　


[22:37:07]: Which is your UI Testing scheme? If you can't find it in this list, make sure it's marked as `Shared` in the Xcode scheme list
1. sampledesu
?  1

[22:37:11]: Enable automatic upload of localized screenshots to App Store
Connect? (y/n)
n

```


で次に環境変数指定しないとおかしくなるらしいので

```
$ vim ~/.bash_profile //開く、人によってはbash_profileじゃないかも
```

中に以下追記

```
export LC_ALL=en_US.UTF-8
export LANG=en_US.UTF-8
```

```
$ source ~/.bash_profile //閉じたあとの更新コマンド
```
補足:スキームのビルドのUITestにTest以外にRunも入れる
<img width="740" alt="スクリーンショット 2018-07-28 1.04.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/48464ae1-db1b-cdc7-5690-9a714166bc80.png">

補足:テストのところにチェックが外れていないかの確認
<img width="692" alt="スクリーンショット 2018-07-27 22.39.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/3aadc0fc-fd37-bbfe-21fb-4f433f7adeda.png">

補足：UITesを下から追加してチェックをshowとsharedに入れる
<img width="766" alt="スクリーンショット 2018-07-28 0.34.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/3dbf6bf3-9094-6225-89c7-29826d754b28.png">

補足:プロジェクトのfastlaneファイルに'SnapshotHelper.swift'ができているのでそれをプロジェクト中に入れる。私はUITestのところにいれましたがどこでも大丈夫そう。
<img width="659" alt="スクリーンショット 2018-07-28 1.04.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/b6b84946-3097-fc0b-8ab8-6b5fad94133a.png">


<img width="266" alt="スクリーンショット 2018-07-28 0.37.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/76e3454c-e41c-4138-54ae-70f05ced71ca.png">

補足:setupのところを同じように

|<img width="695" alt="スクリーンショット 2018-07-27 23.10.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/90d7d2a3-75bf-c420-f720-9ed0f8ade6d9.png">|
|:-:|

補足:適当にテストコードを。UIテスト使ったことない方はその使い方を知識にいれないといけません。あとスクリーンショットしたいところに'snapshot("好きな名前")'をかく。
この好きな名前が書き出される写真の名前になります。

|<img width="671" alt="スクリーンショット 2018-07-27 23.10.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/bb98c118-ebcd-fedb-07f6-ffbf6c043151.png">|
|:-:|

補足：fastlaneファイルの中のSnapfileに行いたいものを。
補足：コメントアウトしてるのを外して適切なものに
以下の感じだと
deviceは3つ(iPhone 8、　iPhone 8 Plus, iPhone X)
言語はローカライズとかしていないのでデフォルトの英語のみ
スクリーンショット取る時にスクリーンショット入れるファイルの中一旦綺麗にするかでYESの記述
<img width="661" alt="スクリーンショット 2018-07-28 0.28.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/a9ae29ce-f448-2af4-0fd5-8adc72d0c943.png">


#ふーきっとここまで来ていると以下コマンドが無事におせる
```
$ fastlane screenshots 
```
ほんとは以下コマンドがいいらしい

```
$ bundle exec fastlane screenshots
```

エラーとか出ている時は設定がなぜか戻っていたりしたり、ちゃんと保存できていないことがありそう…
ちなみに
Exit status: 70　のエラーの時はsnapshotのファイル保存ができていなかったりしました。


で無事にコマンドが終了すると一番上のようにscreenshotsファイルにスクリーンショットとHTMLができているはず。

#上記でできたスクリーンショットに枠つけたいをやる(上記の写真のように)
補足:ツールがそもそも入っていないと思うので以下のコマンドをうつ

```
$ brew install libpng jpeg imagemagick
```

作成してあるFastfileのsnapshotolaneに以下コマンド追加

```
$ frame_screenshots(white: true) //trueがfalseで黒。ちなみにiPhoneXは白ないのでどっちも黒で出ます。
```
こんな感じ
<img width="634" alt="スクリーンショット 2018-07-28 0.50.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/7accd4d9-05e4-fdd1-9e55-18705b1163ba.png">


もちろん以下打って再度

```
$ fastlane screenshots 
```
ほんとは以下コマンドがいいらしい

```
$ bundle exec fastlane screenshots
```

駆け足でしたが以上になります。

#最後に
漏れはないと思いたいのですがあったら教えていただけると追記できます。
それはいらないのでは？とかもあれば優しいその気持ちで教えていただければと。
記事雑だと思っていますが、また気が乗った時に書き直そうと思います。
とりあえず誰でもできるような記事を書きたかった。
私がハマりすぎた故に。