iOSエンジニアのコードレビューのための動画キャプチャGif化のTips

## 概要

プルリクエスト(マージリクエスト)を行う時に、変更点を箇条書などで書くと思います。

その時に、画面キャプチャが貼ってあるとレビュワーに内容が伝わり安いですよね。また、**動画キャプチャ**が貼ってあったりすると尚更伝わりやすいです。

ってことで、今回は私が行なっている動画キャプチャをGitLabに貼るまでの(私の知っている限りで)最速の方法を紹介します。

## 使うツール

* [GIPHY Capture](https://itunes.apple.com/jp/app/giphy-capture-the-gif-maker/id668208984?mt=12
)
* QuickTime Player
* iPhone実機(Android分からない) or シミュレーター 

## 手順

### 1.デスクトップにiPhoneの画面を表示する

#### シミュレーターの場合

##### XcodeでシュミュレーターをRun

![スクリーンショット 2017-09-07 13.29.41.png](https://qiita-image-store.s3.amazonaws.com/0/111366/a65a640c-783b-f43d-a130-ee7155dba423.png)

##### シュミュレーターをデスクトップに表示させる

![スクリーンショット 2017-09-07 13.29.19.png](https://qiita-image-store.s3.amazonaws.com/0/111366/affb6098-de39-550d-252b-29901850d3fc.png)

シミュレータの準備は以上。

#### 実機の場合

実機の場合は少し手間ですが、本物の動きをキャプチャできるというメリットがありますね。

##### QuickTimePlayerを起動

![スクリーンショット 2017-09-07 13.25.31.png](https://qiita-image-store.s3.amazonaws.com/0/111366/486bee60-c999-cb79-634b-f79dd4091ab7.png)

##### ファイル -> 新規ムービー収録

![スクリーンショット 2017-09-07 13.42.37.png](https://qiita-image-store.s3.amazonaws.com/0/111366/7d807312-1594-216a-de7b-bc63088e1cc8.png)

##### macにiPhoneをつなぎ、カメラとして選択

![スクリーンショット 2017-09-07 13.44.08.png](https://qiita-image-store.s3.amazonaws.com/0/111366/8ac20440-b25f-6b86-b69f-bbece82178c2.png)

##### 接続されているiPhoneの画面がデスクトップに表示される

![スクリーンショット 2017-09-07 13.28.29.png](https://qiita-image-store.s3.amazonaws.com/0/111366/0bc6cb07-8658-3ce5-b1c0-baeb62bfc6be.png)

実機の準備もこれで完了。

### 2. GIPHY Captureで録画を開始

次にGIPHY Captureで動画を直接Gifで保存していきます。直接Gifで出せるGIPHY Captureはマジでイケてますね。

#### GIPHY Captureをインストールしとく

[AppStore](https://itunes.apple.com/jp/app/giphy-capture-the-gif-maker/id668208984?mt=12
)にあるのでインストールしておきましょう。

![スクリーンショット 2017-09-07 13.30.07.png](https://qiita-image-store.s3.amazonaws.com/0/111366/15d510b8-f3e6-4af1-5a84-d1891f5be193.png)

#### 起動してiPhoneと同じサイズに調整(角をつまんで調整できる)

起動したらこんな感じのウィンドウが出てくるので先ほど出したシミュレータか実機のサイズに合わせましょう。

![スクリーンショット 2017-09-07 13.30.34.png](https://qiita-image-store.s3.amazonaws.com/0/111366/9cd86fd5-ae3b-f2a9-ae0e-3ec5613647ce.png)

#### iPhoneに合わせて録画ボタンをポチる

iPhoneの上に被せます。

![スクリーンショット 2017-09-07 13.30.59.png](https://qiita-image-store.s3.amazonaws.com/0/111366/838fbcdb-2bcb-080e-40a8-46410cb64bc4.png)

### 3. 必要なところだけトリミングしてgifで保存

レビューしてもらいたいところだけトリミングして保存します。

![スクリーンショット 2017-09-07 13.31.31.png](https://qiita-image-store.s3.amazonaws.com/0/111366/7b740c59-4c9b-18cd-ec14-572678c3adc2.png)

### 4. gifをMRの説明文画面に貼る

gifってところがポイントですよね。gifだと、MR(PR)上で勝手に再生されるので、良い感じです。

![9月-07-2017 14-13-55.gif](https://qiita-image-store.s3.amazonaws.com/0/111366/53c5a204-625b-76fb-cae8-964f1e7ac234.gif)

### 5. レビュワーが喜ぶ

レビュワーは大喜びです。

![s_IMG_7406.jpg](https://qiita-image-store.s3.amazonaws.com/0/111366/6da9b9c5-8a72-3d12-954b-d41bf44f1551.jpeg)

## まとめ

ということで、アプリが動いている様子を動画(gif)にして、MRに貼ってレビュワーを喜ばせる方法を紹介しました。

iOS11から動画のキャプチャが撮れるということで、もっと楽な方法が現れるかもしれませんが、開発中に最速でGif化するって意味ではこの方法がしばらく使えそうな気がします。

では！

## 関連

* [Qiitaにgifアニメを投稿する僕が考える一番簡単な方法【GIPHY CAPTURE】](http://qiita.com/hirothings/items/7ed040d017bda13e261a)
* [Qiitaの記事に動画を埋め込みたかったのでキャプチャツールを比較してみた](http://qiita.com/alchemist/items/f25e7d3fbfa0eb48a6cf)
* [よりよい機能をより早く届けるためにGit/GitHubを使いこなす10の方法](http://qiita.com/kompiro/items/7354ab9d47e8eb29569f#5-%E5%8B%95%E4%BD%9C%E3%81%AB%E5%95%8F%E9%A1%8C%E3%81%8C%E3%81%82%E3%82%8B%E6%99%82%E3%81%AF%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3gif%E3%82%92%E6%92%AE%E5%BD%B1%E3%81%97%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AB%E8%B2%BC%E3%81%A3%E3%81%A6%E7%8A%B6%E6%B3%81%E3%82%92%E5%85%B1%E6%9C%89%E3%81%99%E3%82%8B)