Help us understand the problem. What is going on with this article?

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

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした