エミュレーターの画面を録画する（+gidに変換してQiitaに上げられるようにする）

AndroidStudioではLogcatの`Screen Record`からエミュレーターの操作をキャプチャできます。
のですが、どういうわけかこんな風に画面がチラつきまくってまともにキャプチャできない！　困った！
![RecordFailed.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073313/1d47ee28-45b8-4ee2-4548-a1c678928294.gif)


# Win+Alt+Rで録画する
というわけでショートカットキー`Win+Alt+R`からキャプチャをしていきます。
録画がスタートすると次のような録画コントローラーが表示されます。
<img width="500" alt="録画.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073313/cbfd117a-9c05-75fe-fe59-6e1e20589245.png">
**録画開始時にアクティブなウィンドウのみがキャプチャされる**点にご注意ください。
（エミュレーターのキャプチャではむしろトリミングの必要がなくて便利ですね）

停止ボタンか、もう一度`Win+Alt+R`を押すと録画が終了します。
録画が終了するとダイアログが表示されます。
<img width="400" alt="録画完了.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073313/5362b815-307c-e564-2481-6cde81ed3588.png">

アナウンスの通り`Wind+G`でGame Barを開いてもよいのですが、録画されたmp4ファイルは所定のフォルダに自動で保存されます。
`C:\Users\(ユーザー名)\Videos\Captures`がデフォルトかな？
<img width="500" alt="保存先.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073313/77cffb43-ad32-d365-e15e-75b4ebe8c18f.png">

ちなみにこのキャプチャは本来はGame Bar（正式名称はXBox Game Bar）の機能のようです。
あんま意識したこと無いけど。


## 注意点
念のためいくつか。
#### マウスポインタが映り込む
アクティブウィンドウ上のマウスが一緒にキャプチャされてしまいます。
邪魔と言えば邪魔ですが、エミュレーターを録画するならアプリでどんな操作をしているかが分かるので良し悪しでしょうか。
![ListView.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073313/f8cff3ab-b27e-d76e-a11e-dcc6f9280a2a.gif)

#### タップ操作が分かりにくい
本来の`Screen Record`では`Show Tap`という機能を有効にするとどこをタップしているのか分かりやすく表示してくれます。
が、このやり方だとそれができません。代わりにマウスを見てね、って感じ。

#### 画面サイズの変更は不可
キャプチャ対象ウィンドウのサイズを変更するとその時点で録画が終了してしまいます。

#### エクスプローラー、デスクトップのキャプチャは不可
前述の通りアクティブウィンドウをキャプチャする機能です。なのでエクスプローラーやデスクトップの操作を録画することはできません。


# gifファイルに変換
こっからは余談ですが、キャプチャしたmp4ファイルをgifに変換していきます。
編集ソフト使っても良いのですが自分は簡単にコマンドから実行できるので`ffmpeg`を使っています。
ダウンロードは[こちら](https://www.ffmpeg.org/)から。
（Macならターミナルで`brew`を使ってインストールできます）

mp4→gifへの変換は以下のコマンドを実行します。

```bat
ffmpeg -i (変換対象ファイル名).mp4 (変換後ファイル名).gif
```

このままだと記事にアップロードするにはサイズが大きいのでリサイズします。
縦横比を自由に編集ることもできますが、いちいちエミュレーターで起動しているスマホの縦横比を調べるのも面倒なのでwidthにあわせてheightを自動で調整してくれるオプションを使います。

```bat
ffmpeg -i (変換対象ファイル名).mp4 -vf scale=320:-1 (変換後ファイル名).gif
```
`-vf scale=320:-1`ってところがそうですね。自分はだいたいwidthに320pxを指定しています。




# 本来のやり方①（ScreenRecord）
参考までに本来のやり方もメモしておきます。
AndroidStudioでView→Tool Windows→Logcatを選択。
<img width="500" alt="Logcat.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073313/b3171bad-5ef7-715c-4fe9-dde6ed699ef2.png">
エミュレーターを起動するとLogcatウィンドルの左下にあるカメラのマークをクリックします。
<img width="600" alt="StartRecord.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073313/22eaac58-d29d-4323-3d36-b2e6cdab029d.png">
ダイアログが表示されます。
ビットレートと解像度を指定してねって言ってます。まぁデフォルトで良いでしょう。タップを分かりやすく表示したい場合は`Show Tap`にチェックを入れいます。
<img width="500" alt="ScreenRecorderOptions.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073313/9e92dd73-c127-e4f3-3b20-5d85a7af4f6e.png">

キャプチャした内容は.webm形式で保存されます。
公式ドキュメントは[こちら](https://developer.android.com/studio/debug/am-video?hl=ja)。


# 本来のやり方②（エミュレーターから）
エミュレーターからキャプチャを開始することもできます。
オプションの一番下の`・・・`のアイコンを選択。
<img width="500" alt="エミュレーター.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073313/0cce73cd-4bf4-6171-420c-8b59bdde9050.png">

Extended Control画面が開くので、`Record and Playback`タブを選択します。
中央に`Start Recording`というボタンがあるのでここをクリックしてキャプチャを開始します。
<img width="500" alt="ExtendedControl.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1073313/2b2357f1-c4fb-9df6-d9e1-afc060233b18.png">