はじめに
プログラミングスクールのカリキュラムで作成した個人開発アプリのREADMEにアプリケーションのタイトルとなる画像やデモンストレーション用のGifファイルを埋め込みたいと思って方法を探しました。
達成したいこと
以下の画像のようにREADMEにサイトのイメージ画像やGifを挿入していきます。タイトルにもありますが、一番早く入れられると思われる方法を紹介します。
前提
- アプリケーションがGithubに紐付け済みである
- macを使用している
手順
今回の方法では、画像もGifも同じ手順でOKです。
- 画像を用意する
- GitHubからissueを作成する
- issueの本文に画像をドラッグ＆ドロップする
- アップロードした画像のリンクをREADMEにコピーする
画像を用意する
画像の用意方法は何でも構わないのですが、macであれば、[shift]+[command]+[4]でスクリーンショットを撮影することができます。
Apple公式よりMacでスクリーンショットを撮る
GitHubからissueを作成する
まずは、GitHubにアクセスし、READMEを編集したいアプリケーションのページにアクセスします。すると、「Issues」という項目があるので、こちらをクリックします。
次に「New Issue」をクリックして、新しくIssueを作成します。
issueの本文に画像をドラッグ＆ドロップする
表示されている本文用のテキストボックスに登録したい画像またはGifファイルをドラッグ・アンド・ドロップします。しばらく「Uploading」と表示されていますが、程なくしてアップが完了すると画像のリンクが以下のように表示されます。
ちなみに「Preview」タグをクリックするとアップされた画像を確認することができます。「White」をクリックすると元のテキストボックスに切り替わります。
画像のリンクをREADMEにコピーする
アップロードされた画像のリンクをコピーします。
エディタでREADMEを開き、画像を表示させたい箇所に貼り付けます。
あとは、変更したREADMEファイルを保存し、commit&pushを行えば、GutHub上で画像が表示されていることが確認できます。
また、今回Issueは、画像アップロードのために使用したので、「Submit new issue」は押さずに編集途中でブラウザを閉じて大丈夫です。
Gifも入りました
別の方法でのアップロード
GitHubのWikiを使用した方法もあります。恐らくこっちのほうが確実かつ王道であるように感じます。今回は【最速】というタイトルにしたかったので、詳しくは紹介しませんが、参考記事を以下に載せたいと思います。こちらの方法も実践できました。