TwitterやSlack、メールなどで情報を共有する時ってやっぱり動画だと楽じゃないですか。

ビジュアルや動作の部分を伝える時は、結構シビアに言葉選ばなきゃいけないし、伝えられる側もUIの部分とか文章で説明されても困るわ！って思いますよね。

動画があればお互いに簡単に情報共有できるし、認識のズレも少なくなって時短にもなる。

いいことづくめなんだけど、mac買ったばっかりの素人が動画送ろうとするとちょっとハードル高いんですよね…

そもそも、画面のキャプチャー動画を作るツールもよくわからないし設定も必要だし、そもそもデータ容量重すぎ…どうしよ…

みたいな方結構いると思うんですよね！
僕がそうでした！！

この記事ではmacの標準機能で画面録画を行う方法と、FFmpegでサクッと画面録画をgifにする方法を紹介します！

画面録画

macは標準機能としてcommando + shift + 5で画面録画が出来ます！

同時に押すと以下のような画面が出ます

画面端に破線が表示されているのがわかるでしょうか？

この破線の範囲内が画面録画を行う範囲になります。
（画面全範囲などを指定することが出来たり、その他オプションもあるので試してみてください）

範囲は自由にいじれます。任意の箇所を囲った後に右端の「収録」ボタンを押しましょう！

するとすぐに録画スタートです！

終わりたい時は再度commando + shift + 5を押すとメニューバーが出てきますので、停止ボタンを押してください。

こんな感じで超簡単に画面録画が出来ます！

gifに変換

このままだと短い動画でも容量が大きく、投稿することは出来ません。

なのでFFmpegでgifに変換していきましょう。

FFmpegインストール

$brew install ffmpeg

gifに変換

今回はサクッと手軽にいい感じのgifを作成したいだけなので細かいオプションについては説明しません！！！！（わかりません）

とりあえず以下のコマンドで絶妙にいい感じの容量と画質のgifになります！！！！！

詳しいことは以下の記事なんかがとても参考になると思います!
それFFmpegで出来るよ！

ffmpeg -i sample/sample.mov -vf scale=960:-1 -r 10 sample/sample.gif

sample/sample.movは撮影した動画のパス
sample/sample.gifは吐き出し先のパス

※※※※※ちなみに、撮影した動画の名称はデフォルトだと「日本語+スペースあり+拡張子なし」のようなアホみたいな名称になっているので、sample.movのようにリネームすることをお勧めします！※※※※※

そして出来上がったgifがこちら！

MapTilerの地図をReact/Mapbox GL JSを使って最短でブラウザ上に表示させるで作った動画になります（宣伝）

こんな感じで簡単にgifを作成して情報共有できるのでぜひ利用してみてくださいね！!!