READMEにGIF動画を載せる方法【Gyazo/GIPHY/Issueを活用】

「[Gyazo](https://gyazo.com/download)」「[GIPHY](https://giphy.com/)」というサイトを活用して動画をGIFに変換します。
GIPHYはめちゃくちゃ怪しい見た目をしていますが、ちゃんとしたサイトなのでご安心ください。

#①Gyazoをダウンロードする

[Gyazo](https://gyazo.com/download)
スクリーンショットや7秒程度の動画を簡単に撮影できるアプリケーションです。
READMEに載せたい動画を撮影し、右クリックで保存しておきます。

これでGyazoでの作業は完了です。

#②GIPHYで会員登録をする。

[GIPHY](https://giphy.com/)
右上の`Log in`をクリックします。
![0b9142d5f140068f6b9fe86b25b8677a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/75a3aa38-87e8-0be6-03dc-5950109064ab.jpeg)

上のタブを`Sign Up`に変え、「メールアドレス」「ユーザーネーム」「パスワード」「確認用パスワード」を」入力し、「ロボットではありません」にチェックを入れ、下の`Sign Up`をクリックします。
すると4桁の入力画面が出るので、先ほど登録したメールアドレスに届く`認証用コード`を入力します。
![b518318cff39f7e504781b675219f78c.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/9a079943-020e-facf-d4f6-30fc011a1502.jpeg)

これで会員登録は完了です。

#③GIPHYで動画をGIFに変換する。

トップページに戻り、右上の`Create`をクリックします。

![1cd126d496eee04b6d683d0b05431237.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/9ab20f03-628a-47bb-f60b-73625d73421e.png)

左にある`GIF`をクリックし、Gyazoで撮影した動画を選択します。

![61b71408e71e881896133c682bb566aa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/6bb8fa00-e6fd-2a68-e978-a71d89ea4705.jpeg)


GIFの長さ(DURATION)と、GIFの開始位置(START TIME)を調整します。
※撮影した動画を全てGIFにしたい場合は、`DURATION`を一番右までスクロールします。
（GyazoでMAX撮影したものであれば、`Seconds`はだいたい7.4秒くらいになります。）
設定が完了したら`Continue to Decorate`をクリックします。

![9956902ed74d56c1148be609709a154b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/281527e3-fcc4-3332-c1fc-06bdb144cbe0.png)

装飾やアニメーションを設定できますが、何もせずに`Continue to Upload`をクリックします。

![394ed45cd270d3bca1f376783e608f6e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/63d624f7-ae2a-6cfb-f5d8-c196c51efd23.png)

次に公開情報を設定できます。
GIF動画をGIPHY上で一般公開したくない場合は、`Public`をOFFにしておきます。
`Upload to GIPHY`をクリックし、GIF動画を作成します。
※作成が完了するまで少し時間がかかるため待ちましょう。


![46f84cae9dc6521347897f6d8b3a4e82.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/1906e2db-ff72-62c7-8dda-0d57ebc1766a.png)

下記のような画像になれば成功です。
また、赤い鍵マークのバナーが出ていれば非公開の設定もできています。
※もし非公開になっていなければ、GIF動画内の右下に鉛筆マークがあるため、そこから非公開に変更できます。

![9882ee49189ee441035897c4d3ddca51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/8ae89840-792c-a531-647e-eaf5c1545912.png)


完成したGIF動画を右クリックで保存しましょう。
これでGIPHYでの作業は完了です。

#④Githubのissueを使ってURLを生成する

このままGIF動画をREADMEに貼ってもリンクしか表示されないため、Githubのissueを使ってURLを生成します。
まずはIssuesタブから、`New issue`をクリックします。

![b206445e1a6f5d1011bd1397551fb16c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/eb750ab1-bbab-8357-1358-54765ece16d1.png)

枠内の一番下に、
`Attach files by dragging & dropping, selecting or pasting them.`
という文字列があるためそこをクリックします。
ファイルの選択画面になるため、先ほどGIPHYで作成したGIF動画を選択します。

![006c02f617d16e632ce041bf18855185.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/54c73691-78a6-f507-e286-9c83b8113832.png)

アップロードが完了すると下記のようなリンクが生成されます。
※[ ]内は、GIPHYでGIF動画を保存した際のファイル名が入ります。

![7ac001863f15ec20e7db753485ef7889.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1884909/f226f498-7d6e-814c-7457-35b0ad70d24d.png)


あとはこのURLを丸ごとコピーしてREADME内に貼り付ければGIF動画が表示されるはずです。

<br>
以上で、READMEにGIF動画を載せる方法は終了です！お疲れ様でした。
ご指摘などあれば、ご教授いただけると幸いです。

参考記事：[READMEファイルにGif動画を載せる方法](https://qiita.com/00__/items/e3e3e44394ef85e8fecf)