目的

GitHubでツールの導入方法や利用方法を説明をする際，デモ動画があると非常に分かりやすいです．

peco/peco

この記事ではそのデモ動画作成とそれを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.
![result](https://github.com/(GitHub登録のアカウント名)/(リポジトリ名)/blob/media/XXXX.gif)

最後にリモートリポジトリをアップデートします．

$ git add --all
$ git commit -m "[add] Demo item to README.md"
$ git push origin master

GitHubでREADMEにgif画像を表示する簡単な方法

目的

環境