はじめに

この記事では、GitHubのREADMEにGyazoショート動画を載せる方法についてまとめています。

READMEにGyazoのショート動画を載せることで、アプリや機能の紹介がしやすくなります。

この記事が皆さんのお役に立てば嬉しいです！

前提

Gyazoに登録済みであること

問題

READMEにGyazoから「マークダウン」でコピペしても動画が表示されず、リンクとして表示されてしまいます。

解決方法

Gyazoで撮影した動画のマークダウン横のGIFをクリックしてコピペすることで解決できます。

README

以下のような拡張子が.gifのコードをREADMEに貼り付けます。

README.md

[![Image from Gyazo](https://i.gyazo.com/313adb4e2f7aa50a63fa8367680b2e17.gif)](https://gyazo.com/313adb4e2f7aa50a63fa8367680b2e17)

これでGyazoのショート動画がGitHubのREADMEに表示されます。

おまけ(アプリ機能紹介テーブル風)

次のように記述することで、アプリ紹介風のテーブルを作成することができます。

README.md

| アプリ機能1 | アプリ機能1 |
|:-----------:|:------------:|
| GyazoのマークダウンGIF | GyazoのマークダウンGIF |
| アプリ機能の説明が入ります。アプリ機能の説明が入ります。 | アプリ機能の説明が入ります。アプリ機能の説明が入ります。 |

</br>

| アプリ機能3 | アプリ機能4 |
|:-----------:|:------------:|
| GyazoのマークダウンGIF | GyazoのマークダウンGIF |
| アプリ機能の説明が入ります。アプリ機能の説明が入ります。 | アプリ機能の説明が入ります。アプリ機能の説明が入ります。 |

READMEビュー

テーブル説明

HTMLタグでもテーブルの記述は可能ですが、こちらの方が直感的な書き方でわかりやすいと思います。

空間を空ける

テーブルとテーブルの間に</br>を入れておりますが、間を空けるために入れております。デフォルトでも間はありますが、近すぎる気がしましたので。ここはお好みで入れてください。

おわりに

ちょっとした記事ですが、お役に立てれば幸いです。

私自身、どうやって表示できるのかわからず数日調べていましたので、この記事をご覧になった方にはこんなところで時間をかけて欲しくないと思いました。

もし、この記事の内容に不備や改善点などがありましたら、ご指摘いただけると嬉しいです。

参考