GitHub の README.md ファイルに画像を追加する方法 (プログラミング関連)

GitHub のリポジトリにある README.md ファイルに画像を追加するには、以下の 2 つの方法があります。

外部ホストを利用する

この方法は、既にどこか別の場所に画像がアップロードされている場合に適しています。Imgur や GitHub Pages などが利用できます。

手順:

1. 画像をアップロードし、画像の URL をコピーします。
2. README.md ファイルを編集します (GitHub 上のウェブエディタからでもローカルエディタからでも可)。
3. 次のようなマークダウン記法を使用して、画像を埋め込みます。

![代替テキスト](画像のURL)

• 代替テキスト: 画像の内容を簡潔に説明するテキストです。
• 画像のURL: コピーした画像の URL を貼り付けます。

GitHub リポジトリ内に画像を保存する

この方法は、画像を直接リポジトリ内に保存したい場合に適しています。

1. 画像ファイルをリポジトリにプッシュします。
2. README.md ファイルを編集します。

![代替テキスト](./画像ファイル名.png)  // 同じディレクトリ内にある場合
![代替テキスト](path/to/画像ファイル名.png) // サブディレクトリにある場合

ポイント

• GitHub Flavored Markdown (GFM) では、?raw=true を URL クエリに含めることで、フォークされたリポジトリでも正しく表示させることができます。

![代替テキスト](画像のURL?raw=true)

• 画像のサイズは、README.md ファイルの見やすさを考慮して調整しましょう。

用語解説

• GitHub: コードをバージョン管理するためのプラットフォーム
• markdown: プレーンテキストを装飾するための軽量なマークダウン言語
• GitHub Flavored Markdown (GFM): GitHub 独自の拡張機能を持ったマークダウン

GitHubのREADME.mdに画像を追加する際のコード例解説

![代替テキスト](https://example.com/image.png)

• ![代替テキスト](画像のURL)：画像を埋め込むための基本的なMarkdown記法です。
  • ![]：画像であることを示します。
  • 代替テキスト：画像が表示されない場合や、スクリーンリーダーなどで画像を読み上げる際に表示されるテキストです。
  • 画像のURL：画像が保存されている場所のURLです。
• https://example.com/image.png：画像ファイルの実際のURLをここに置き換えます。ImgurやGitHub Pagesなど、画像をホスティングできるサービスで得られるURLを使用します。

例:

![GitHubのロゴ](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)

このコードでは、GitHubのロゴ画像をREADME.mdに埋め込みます。

![代替テキスト](./images/example.png)

• ./images/example.png：画像ファイルの相対パスです。
  • .：現在のディレクトリを表します。
  • images：画像ファイルを保存するフォルダ名です。
  • example.png：画像ファイル名です。

README.mdファイルと同じディレクトリにimagesフォルダを作成し、その中にexample.pngという画像ファイルを保存した場合、上記のコードで画像を表示できます。

サブディレクトリにある場合:

![代替テキスト](images/subfolder/example.png)

imagesフォルダの中にsubfolderというフォルダがあり、その中にexample.pngがある場合、上記のコードで画像を表示できます。

GitHub Flavored Markdown (GFM) を利用する場合

![代替テキスト](https://example.com/image.png?raw=true)

• ?raw=true：画像を直接表示するためのパラメータです。フォークされたリポジトリでも正しく表示させることができます。

• 画像サイズ: README.mdの見やすさを考慮し、適切なサイズに画像をリサイズすることをおすすめします。
• 画像形式: JPEG, PNG, GIFなどの一般的な画像形式が利用できます。
• 画像の最適化: 画像サイズを小さくすることで、ページの読み込み速度を向上させることができます。

GitHubのREADME.mdに画像を追加する方法は、画像を外部にホストするか、リポジトリ内に保存するかによって異なります。Markdownの記法を正しく使用し、画像のURLやパスを指定することで、README.mdをより分かりやすく、魅力的にすることができます。

• Qiitaなどの記事: Qiitaなどには、より詳細な解説や具体的な手順が紹介されている記事があります。

GitHub Issuesを利用した画像アップロード

• 手順:
  1. 新規Issueを作成します。
  2. 表示したい画像をIssueのコメント欄にドラッグ＆ドロップします。
  3. GitHubが自動的に画像をアップロードし、Markdown形式の画像リンクを生成します。
  4. 生成されたリンクをコピーし、README.mdに貼り付けます。
• メリット:
  • 簡単な操作で画像をアップロードできる。
  • Issueは後から削除できるため、不要な画像を簡単に削除できる。
• デメリット:

GitHub Pagesを利用した画像のホスティング

• 手順:
  1. GitHub Pages用のブランチを作成します。
  2. GitHub PagesのURLを使用して、画像を参照します。
• メリット:
  • 静的なウェブサイトを構築できる。
  • カスタムドメインを設定できる。
• デメリット:

画像ホスティングサービスを利用

• 手順:
  1. Imgur、AWS S3、Google Cloud Storageなどの画像ホスティングサービスに画像をアップロードします。
  2. 取得した画像URLをREADME.mdに埋め込みます。
• メリット:
  • 大量の画像を安定してホスティングできる。
  • CDNを利用することで、高速な配信が可能。
• デメリット:

Git LFSを利用

• 手順:
  1. Git LFSをインストールします。
  2. 追跡するファイルタイプを指定します。
  3. 画像ファイルをGit LFSに登録します。
• メリット:

GitHub Actionsを利用した自動化

• 手順:
  1. GitHub Actionsでワークフローを作成します。
  2. ワークフローで画像をビルド時に最適化したり、特定のディレクトリにコピーしたりする処理を行います。
• メリット:
  • 自動化によって作業効率が向上する。
  • 複雑な画像処理を自動化できる。
• デメリット:

• 画像のフォーマット: JPEG、PNG、GIFなどの一般的な画像フォーマットが利用できます。
• アクセシビリティ: 画像に代替テキストを必ず設定しましょう。

どの方法を選ぶべきか

• 手軽さ: GitHub Issuesを利用した方法が最も簡単です。
• 機能性: GitHub Pagesや画像ホスティングサービスを利用すれば、より高度な機能を利用できます。
• 規模: 画像の数が少ない場合はGitHub Issues、多い場合は画像ホスティングサービスが適しています。

これらの方法を状況に合わせて使い分けることで、より効果的にREADME.mdに画像を追加することができます。