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

  • 50
    Like
  • 0
    Comment
More than 1 year has passed since last update.

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

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

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

screenshot-01.png

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

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

のような感じ。

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

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

⌘ + shift + 4

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

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

保存はデスクトップ以下で 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

すると、次のような説明が出ます。
スクリーンショット 2014-11-26 6.23.58 PM.png

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

スクリーンショット 2014-11-26 6.24.20 PM.png

中央の 収録を開始 を押すと収録が開始されます。
終了するにはメニューバー右上に出てくるこのボタンを押します。
button.png

収録を終えると、このようにムービーが出来上がります。
sample2.gif

トリミングしたいときは ⌘+T でトリミングモードに移行します。
スクリーンショット 2014-11-26 6.25.32 PM.png

編集が完了したら.movファイルで書き出します。
メニューバーの ファイル → 書き出し → 1080p で書き出し先を選択して書き出します。書き出し品質は場合に応じて適切に書き換えてください。
スクリーンショット 2014-11-26 6.39.22 PM.png

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

gifへの変換

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

変換のコマンドは

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

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

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

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

sample.gif

Gifzo

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

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

空白の画像を作る

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

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