Macを使ってiPhoneアプリのスクリーンショットを撮る



アプリを作ってて、出来上がりの画面を共有することが多いと思うのですが、いくつか普段使っている方法の紹介
環境はOSX 10.10, Xcode6 です。

### シミュレータのスクリーンショット

メニューバーのFile以下に Save Screen Shot があります。
あるいは、シミュレータを起動しながら `⌘ + S`

![screenshot-01.png](https://qiita-image-store.s3.amazonaws.com/0/15582/b83ad0f0-c616-9839-ff8c-00209c3d44ee.png "screenshot-01.png")

保存されるファイルパスは

```bash:
~/Desktop/iOS Simulator Screen Shot Nov 21, 2014, 6.27.11 PM.png
```

のような感じ。


### Macでスクリーンショットを撮る

OSXにもスクリーンショットを撮るショートカットがあります。

`⌘ + shift + 4`

を押すとカーソルが変わり、スクリーンショットを撮りたい位置からドラッグすると下図のように範囲を指定できます。
離すと撮影、escを押すとキャンセルです。

![screenshot-03.png](https://qiita-image-store.s3.amazonaws.com/0/15582/16663bb2-4117-5869-18cb-fb21f2a00fe9.png "screenshot-03.png")

`⌘ + shift + 4`を押した後に`space`を押すとウィンドウを撮影できます。

保存されるディレクトリは、デフォルトではデスクトップです。defaultsコマンドで変更もできます。

```
$ defaults write com.apple.screencapture location <保存したいディレクトリ>
```

変更したら `$ killall SystemUIServer` でSystemUIServerをリスタートした方がいいかもしれません。


他にもオプションは色々あります。詳しくは公式をどうぞ
http://support.apple.com/ja-jp/HT5775


### 実機のスクリーンショット

iPhoneの電源ボタン+ホームボタンで撮影できますが、PCまで持ってくるのが億劫だったりします。
そういう時は、Xcodeのオーガナイザから撮影できます。ここにあります。
![screenshot-04.png](https://qiita-image-store.s3.amazonaws.com/0/15582/2904e1a4-ded8-20ac-926e-d455367ad1c9.png "screenshot-04.png")

保存はデスクトップ以下で `Screen Shot 2014-11-21 at 6.54.18 PM.png` みたいな名前です。

### Gyazo
スクリーンショットがWeb上にアップロードされます。 
詳しくは公式をどうぞ https://gyazo.com/ja
ランダムに生成されたURLを用いて共有します。

とても手軽な反面、URLが分かれば誰でもアクセスできるので公開範囲を気にする場合は使いづらいかもしれません。
そういう理由で、独自Gyazoをアクセス制限をかけて運用しているところもあると思います。


## 動画編
アプリでは実際の動作を見せたほうがわかりやすいこともあります。


#### シミュレータの動画撮影
QuickTime Playerを使って撮影します。
QuickTime Playerのメニューバーから新規画面収録を選びます。

![スクリーンショット 2014-11-26 6.17.20 PM.png](https://qiita-image-store.s3.amazonaws.com/0/15582/abcf5bd6-848a-6705-d3ed-32beb7fa03f1.png "スクリーンショット 2014-11-26 6.17.20 PM.png")

すると、次のような説明が出ます。
![スクリーンショット 2014-11-26 6.23.58 PM.png](https://qiita-image-store.s3.amazonaws.com/0/15582/c4b0ac88-fac6-178e-c537-1ab108335133.png "スクリーンショット 2014-11-26 6.23.58 PM.png")

今回はシミュレータを撮りたいのでシミュレータの周辺を範囲選択します。選択できると次のようになります。

![スクリーンショット 2014-11-26 6.24.20 PM.png](https://qiita-image-store.s3.amazonaws.com/0/15582/391908f7-1ebc-deec-1e21-da14e9e2b465.png "スクリーンショット 2014-11-26 6.24.20 PM.png")

中央の **収録を開始** を押すと収録が開始されます。
終了するにはメニューバー右上に出てくるこのボタンを押します。
![button.png](https://qiita-image-store.s3.amazonaws.com/0/15582/c71dd973-5c9f-e44a-a156-e9d1cfbd9e4d.png "button.png")

収録を終えると、このようにムービーが出来上がります。
![sample2.gif](https://qiita-image-store.s3.amazonaws.com/0/15582/07340930-6e6c-affc-c534-8bcf57de63e1.gif "sample2.gif")

トリミングしたいときは `⌘+T` でトリミングモードに移行します。
![スクリーンショット 2014-11-26 6.25.32 PM.png](https://qiita-image-store.s3.amazonaws.com/0/15582/e252a806-bfdb-f113-ae56-e8b1ef379f39.png "スクリーンショット 2014-11-26 6.25.32 PM.png")


編集が完了したら.movファイルで書き出します。
メニューバーの ファイル → 書き出し → 1080p で書き出し先を選択して書き出します。書き出し品質は場合に応じて適切に書き換えてください。
![スクリーンショット 2014-11-26 6.39.22 PM.png](https://qiita-image-store.s3.amazonaws.com/0/15582/53fab733-ef06-60da-62f0-06057649d321.png "スクリーンショット 2014-11-26 6.39.22 PM.png")

これで書き出しは完了です。

#### gifへの変換
.movファイルのままでも良いのですが、gifのほうが捗る場合が多いのでgifに変換します。
変換にはffmpegを使います。入っていない場合は `brew install ffmpeg` で入ります、多分。

変換のコマンドは

```bash:
$ ffmpeg -i <入力movファイル名> <出力するgif名>
```

で変換できます。そのままだと、ファイルサイズが大きかったり、画像サイズが大きかったりするので適当なオプションをつけてください。
例えば


```bash:
$ ffmpeg -i sample.mov -vf scale=320:-1 -r 10 sample.gif
```

のようにすると、横幅320px、10fpsにできます。

![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/15582/1a7d66d1-de1c-0d89-2bee-2249354a3f62.gif "sample.gif")



#### Gifzo
動画を撮って、書き出して、変換して、となると結構面倒なんですが、簡単に共有したいときはGyazoのgif版、Gifzoがあります。
http://gifzo.net/

手軽さだとこちらのほうが上だと思います。


## 空白の画像を作る

```bash:
convert -size 800x400 xc:white  -define png:color-type=6 white-image.png
```

ポイントは `-define png;color-type=6` でpngのcolor-typeを指定すること