目的
GitHubでツールの導入方法や利用方法を説明をする際，デモ動画があると非常に分かりやすいです．
この記事ではそのデモ動画作成とそれをGitHub上の説明欄に表示させる方法を説明します．
step1. デモ動画の撮影
step2. 動画ファイル(mp4など)をgif画像に変換
step3. 動画用のbranchを切り，そこにアップロード
step4. README.mdに記述
環境
- ubuntu16.04
1. デモ動画を撮影
デモ動画の撮影にはSimpleScreenRecorderを利用します．
SimpleScreenRecorderのインストール
ppaでパッケージが提供されているので今回はそれを利用します．
$ sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder
$ sudo apt-get update
$ sudo apt-get install simplescreenrecorder
動画の撮影
動画の撮影自体は簡単にできるので，ここを参考にフォーマットはmp4を選択し，/home/ユーザ名/ビデオに保存しておきます．
2. 動画ファイルをgif画像に変換
今回は，facebookやyoutubeでも利用されているFFmpegというエンコードツールと，gif画像作成用のツールとしてImageMagicを使います．
インストール
$ sudo apt-get install youtube-dl ffmpeg imagemagick
gif画像の生成
実際には，下記のコマンドで実現できます．
例えば，XXXX.mp4という30秒の動画を00:00:05秒時点から20秒だけ，XXXX.gifという画像を生成したい場合は，以下のようになります．
$ ffmpeg -t 20 -ss 00:00:5 -an -i "XXXX.mp4" "XXXX.gif"
- -t: 出力動画の時間指定
- -ss: 変換対象区間の開始時間指定
- -i: ファイル名指定
- -an: 出力動画のオーディオなし
動画のサイズ(何秒間の動画か)を知りたい場合は，このコマンドを実行し，出力されたDurationの部分を確認してください．
$ ffmpeg -i XXXX.mp4
#3. 動画用のbranchを切り，そこにアップロード
ここからは，以上で生成したgif画像をGitHub上で公開するための方法を記述します．
GitHub上にgif画像をアップロードしたいのですが，ソースコードと同じディレクトリに入れておくのはスマートではない気がします．そこで，master以外に画像・動画用のbranchを生成しておきます．
プロジェクトが保存されるディレクトリに移動し，下記コマンドでブランチ(mediaとしておきます)を作り，そのブランチの作業ディレクトリにgif画像を入れます．
※プロジェクトディレクトリに移動するのを忘れないでください!!
$ git branch media
$ git checkout media
$ ls | grep -v -E '.git$' | xargs rm -r
$ cp /home/ユーザ名/ビデオ/XXXX.gif .
$ git add --all
$ git commit -m "[add] XXXX.gif into media branch"
$ git push media:media
#4. README.mdに記述
README.mdをmasterのトップに保存していることを想定して話を進めます．
ブランチをmasterに切り替えます．
$ git checkout master
適当なエディタでREADME.mdに加筆します．
例えば，下記のように書くことができます．
## Demo
Depending on input, the output is displayed as the result like the image below.
/(リポジトリ名)/blob/media/XXXX.gif)
最後にリモートリポジトリをアップデートします．
$ git add --all
$ git commit -m "[add] Demo item to README.md"
$ git push origin master