はじめに
作ったスマホアプリ等のデモgif画像を作成するとき、いつも「画面録画どうやるんだっけ」となっていたのですが、シミュレータで動かしているなら、画面収録すれば良いだけだと最近気付きました。
ただ、画面収録の方法も良く忘れるので備忘録として残しておきます。
画面収録
macの場合command + shift + 5を押すと、画面収録の以下のような画面が出てきます。四角で囲った部分をクリックすると収録範囲を選択することができます。gifに変換する際にサイズを変換するので、この時のアスペクト比を覚えておくと良いです。
「収録」ボタンを押すと画面収録が開始されます。収録を停止する時は、メニューバーの「■」ボタンまたは、command + control + escを押します。
デスクトップに収録した動画が保存されます。
gifへ変換
gifへの変換ツールはいろいろあると思いますが、自分はffmpegというソフトを使っています。
コマンドラインからサクッと変換でき、しかもhomebrewで一発で入ります。
$ brew install ffmpeg
ffmpefの詳しい使い方は、こちらの記事が参考になりました。
自分が変換時にいつも使っている設定は次になります。-sが画像のサイズ、-rはフレームレートの指定です。
$ ffmpeg -i 画面収録xx-xx-xx.mov -s 800x800 -r 10 demo.gif
おまけ
qiitaでは直接gif画像の貼り付けができますが、githubのREADME.mdにで表示させるためには、どこかへ自分でアップロードし、そのリンクを貼り付ける必要があります。外部サービスを使っても良いですが、こう言うのは極力内部で完結したいです。と、言うことでgithub内で完結するいくつかの方法を紹介しておきます。
issueを使う方法
https://qiita.com/SLEAZOIDS/items/e6ebbc3aad53f2700492
wikiを使う方法
https://qiita.com/yamataku29/items/fb14fb99f5024e01b4b8
2番目の記事を見てて思いましたが、qiitaに解説記事を書いて、gifをアップロード済みならそのリンクがそのまま使えますね。(README.mdのためだけにqiitaにアップロードするのはやめましょう)
参考
Mac で画面を収録する方法 - https://support.apple.com/ja-jp/HT208721
Githubのwikiに画像やpdfをサクッとシンプルに貼り付ける方法 - https://qiita.com/SLEAZOIDS/items/e6ebbc3aad53f2700492
GithubのREADMEにGif画像を埋め込む - https://qiita.com/yamataku29/items/fb14fb99f5024e01b4b8