Edited at

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

More than 1 year has passed since last update.


目的

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.
![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


参考