GithubのReadmeにgifを入れために、gifの作成からReadmeの編集までやってみた。
Vimプラグインを作った際に、Readmeに挙動が分かるようなGif動画を入れたかったので、
gifの作り方から調べてReadmeに入れるところまでやってみた。
出来栄えは、こんな感じ。
github.com
一番最後の画像。
手順
1. デモ画面の動画を撮影する。
MacだとQuickTime Playerがあるのでこれを使う。
Mac用QuickTime Playerユーザガイド - Apple サポート
[ファイル] > [新規画面収録] からデモ画面の撮影ができる。このとき、画面の一部だけ指定して撮影できるので、その機能を使う。
これで、デモ画面を撮影した.movファイルができる。
2. Gifに変換する。
以下の記事などを参考に、1で作成した.movをgifに変換する。
.mov を gif に変換【Mac】 - Qiita
まずインストールする。
brew install ffmpeg
上手くインストールできていそうだったら、1で作成した.movを指定してgifに変換する。
ffmpeg -i sample.mov -r 10 sample.gif
3. Readmeを作成するレポジトリに、gifを格納するbranchを作成して、gifを上げる。
gifの保存先はいろいろ候補があるようだったが、githubに上げておくのが一番スマートそうだったのでそうする。
一方で、masterにgifを入れておくとダウンロードする際にも容量が大きくなり、使ってくれる人に迷惑をかけてしまいかねないので、
gifを入れておくようのmediaというbranchを作成してそこに入れておく。
具体的な操作がわからない場合は、以下が参照になる。
GitHubでREADMEにgif画像を表示する簡単な方法 - Qiita
4. Readmeにリンクを挿入する。
Readmeに先ほどアップロードしたgif動画のリンクを挿入する。リンクはブラウザでgithub上のgif動画を開いて、そのURLをコピペすればいい。
挿入方法は、以下の一行をreadmeに差し込むだけ。
