はじめに

GithubPageを管理する上でリポジトリ上で画像を管理するのが好ましくありません。 アップロードを行うのも制限がかかる可能性があり、デプロイの失敗にもつながることになります。 どうにかしてURLで画像を管理する方法を考えていきます。

目次

  1. 画像は重い
  2. GithubのリポジトリでのURLを取得する方法
  3. Gazoで実現する方法
  4. Discordのサーバーで行う
  5. 最後に

画像は重い

私にとっては当たり前の考えですが改めて説明すると 以下の点を考慮すると、GitHub Pagesのリポジトリ上で直接画像を管理するのではなく、 URLで画像を管理する方法が、パフォーマンス、セキュリティ、メンテナンスの観点から優れた選択と言えると思います。

  1. リポジトリのサイズとパフォーマンス:
    • 大量の画像ファイルをリポジトリに含めると、リポジトリのサイズが大きくなり、クローンやプルの操作が遅くなる可能性があります。これは特に、画像が頻繁に更新される場合に問題となります。
    • リポジトリのサイズが大きくなると、GitHubの推奨するリポジトリサイズの上限に達する可能性があり、これがデプロイの失敗や他の問題を引き起こす原因になることがあります。
  2. バンドルサイズとロード時間:
    • ウェブサイトのパフォーマンスにおいて、ページのロード時間は非常に重要です。画像が重いと、ウェブページのロード時間が長くなり、ユーザーエクスペリエンスに悪影響を与えます。
    • 画像を外部のストレージサービス（例えばAmazon S3やimgix）にアップロードし、URLで参照することで、ページのバンドルサイズを減らすことができます。これにより、ページのロード時間を短縮し、ユーザーエクスペリエンスを向上させることができます。
  3. 拡張性とメンテナンス:
    • 画像ファイルを外部のストレージサービスに保存することで、画像の管理や更新が容易になります。例えば、画像のリサイズや最適化をサービスが自動的に行うことができます。
    • 画像のURLをコードで管理することにより、ウェブサイトの構造がシンプルになり、将来の拡張やメンテナンスが容易になります。
  4. セキュリティとアクセス制御:
    • 画像を外部サービスで管理することで、セキュリティの向上やアクセス制御の強化が可能になります。特に、プライベートなデータや著作権で保護された画像については、この点が重要です。
  5. コストとリソースの最適化:
    • リポジトリに画像を直接格納するよりも、クラウドベースのストレージサービスを使用することで、ストレージコストを最適化し、必要に応じてリソースをスケールアップまたはダウンすることができます。

GithubのリポジトリでのURLを取得する方法

GitHubリポジトリで画像のURLを取得する方法には、いくつかの一般的なアプローチがあります。 以下に、その中でも特に便利な方法を説明します。

  1. GitHubのIssueページを使用する:
    • GitHubのIssueページを使用して画像のURLを取得する方法は非常に簡単です。まず、GitHubのリポジトリ内で新しいIssueを作成します。
    • Issueのコメントボックスに画像ファイルをドラッグ＆ドロップするか、”Attach files by dragging & dropping, selecting or pasting them.” のリンクをクリックしてファイルをアップロードします。
    • 画像がアップロードされると、自動的にMarkdown形式の画像リンクが生成されます。このリンクのURL部分をコピーして、必要な場所に貼り付けます。
    • 実際にIssueを投稿する必要はありません。URLを取得したら、Issueを破棄するか、使用しないでおくことができます。 github-issue
  2. GitHubリポジトリ内で画像をホストする:
    • GitHubリポジトリ内の特定のディレクトリに画像をアップロードします。例えば、images という名前のフォルダを作成し、そこに画像を保存することができます。
    • 画像をリポジトリにプッシュした後、GitHubのウェブインターフェースでその画像ファイルを開きます。
    • 画像の上で右クリックし、「画像アドレスをコピー」（またはブラウザによっては「Link Addressをコピー」）を選択してURLを取得します。
  3. GitHub Pagesを使用する:
    • GitHub Pagesは、静的なウェブサイトをホストするための無料のサービスです。リポジトリの一部としてウェブサイトを公開し、その中で画像をホストすることができます。
    • 画像をリポジトリ内の適切な場所に配置し、GitHub Pagesでウェブサイトが公開された後、その画像のURLを直接使用できます。

これらの方法を使えば、GitHub上で画像のURLを簡単に取得し、それをウェブサイトやドキュメントなどで利用することが可能です。特に、Issueページを使用する方法は手軽であり、コーディングや追加のセットアップが不要なため、多くのユーザーに人気があります。

gazoで実現する方法

Gyazoは画像を保管してくれるサービスです。スクリーンショットをすぐにとってアップロードしてくれる為に、スクリーンショットを撮ってブログであげることが多い方は重宝します。 現在は無料で使用するとGyazo Proを年間契約で¥490円で使用できます。 昔は無料だった気がしますが、大量にスクショやgifを作成してやり取りするエンジニアは常に保管先に悩まされることになるので買ってもいいかもしれません。 を使用して画像をアップロードし、そのURLをGitHubで使用する方法は以下の通りです。

  1. Gyazoのインストールとセットアップ:
    • Gyazoはスクリーンショットを簡単に共有できるツールです。まず、Gyazoのウェブサイトからアプリケーションをダウンロードし、インストールします。
    • インストール後、Gyazoを開いてアカウントを作成し（まだ持っていない場合）、ログインします。
  2. 画像のキャプチャとアップロード:
    • Gyazoを使用して画像をキャプチャします。これは、スクリーンショットを取るか、既存の画像ファイルをGyazoアプリにドラッグ＆ドロップすることで行えます。
    • 画像をキャプチャすると、Gyazoはその画像を自動的にアップロードし、ブラウザで新しいタブを開いてアップロードされた画像を表示します。
  3. 画像URLの取得:
    • ブラウザで表示された画像のページには、画像の直接リンク（URL）が表示されます。
    • このURLをコピーします。一部の場合、ページ内に「共有」オプションがあり、そこから直接URLをコピーできる場合もあります。
  4. GitHubでの使用:
    • GitHubのリポジトリ内で画像を表示したい場所（例えばREADME.mdファイルやIssueなど）に移動します。
    • Markdown形式を使用して画像を埋め込むには、次のフォーマットを使用します：![代替テキスト](画像のURL)
    • コピーしたGyazoの画像URLを上記フォーマットのURL部分に貼り付けます。

たとえば、Markdownで画像を埋め込むには以下のように記述します：

![説明テキスト](https://i.gyazo.com/your-image-url.png)

これで、Gyazoでアップロードされた画像がGitHub上で表示されるようになります。Gyazoは画像のキャプチャ、アップロード、共有が非常に簡単に行えるツールであり、ドキュメントやblogでの使用に非常に便利です。

Discordのサーバーで行う

Discordでスクリーンショットや画像を共有し、そのURLを取得する方法を簡単に説明します。

  1. Discordでの画像アップロード:
    • Discordのサーバーで、画像を共有したいチャンネルに移動します。
    • スクリーンショットや画像ファイルをチャンネルのメッセージ入力欄にドラッグ＆ドロップするか、メッセージ入力欄の「ファイルをアップロードする」アイコンをクリックしてファイルを選択し、アップロードします。
  2. 画像のURLを取得:
    • 画像がチャンネルにアップロードされると、画像をクリックすることでブラウザで開くことができます。
    • ブラウザで画像が開かれたら、URLバーに表示されているリンク（通常「cdn.discordapp.com」を含むURL）をコピーします。これが画像の直接リンク（URL）です。
  3. URLの利用:
    • 取得したURLを他の場所で共有したり、ウェブサイトやドキュメントに埋め込んだりすることができます。
  4. Discordへのサポート:
    • Discordは無料で多くの機能を提供していますが、サービスに貢献したい場合や追加機能を利用したい場合は、Discord Nitroに課金することを検討してください。これにより、ファイルアップロードのサイズ制限が増えたり、他の追加機能が利用できるようになります。

この方法は、Discordを通じて画像を簡単に共有し、外部で利用するための直接リンクを得るための効果的な手段です。ただし、共有される画像の内容やプライバシーには注意を払い、必要に応じて適切なセキュリティ対策を講じることが重要です。

discord-image channnel-post

もっとコストをかけてもいいならば

Amazon S3 やimgixがある、他の方法もあるが一例として参考にして頂ければと思います。

Amazon S3 (Simple Storage Service):

概要: Amazon S3は、Amazon Web Services（AWS）が提供するオブジェクトストレージサービスです。大量のデータをインターネット経由で保存・取得できるクラウドベースのストレージソリューションです。 使用法: ユーザーは、バケット（データを格納するコンテナ）を作成し、そこにファイル（例えば画像や文書）をアップロードします。各ファイルにはユニークなURLが付与され、インターネット経由でアクセスできます。 特徴: 高い耐久性と可用性、セキュリティ機能を提供し、ウェブサイトの画像やビデオのホスティング、バックアップ、災害復旧などに広く使用されています。

imgix: 概要: imgixは、オンライン画像処理サービスで、ウェブサイトやアプリケーションでの画像表示を最適化します。クラウドベースで提供され、画像のリサイズ、圧縮、フォーマット変換などの機能を持ちます。 使用法: 既存のストレージ（例えばS3）に保存されている画像をimgixにリンクし、URLパラメータを使ってリアルタイムで画像を変換・最適化します。これにより、異なるデバイスや画面サイズに合わせた画像を提供できます。 特徴: 効率的な画像配信により、ページのロード時間を短縮し、ユーザーエクスペリエンスを向上させることができます。また、CDN（コンテンツ配信ネットワーク）と統合されており、高速な画像配信が可能です。 これらのサービスを組み合わせることで、効率的かつ高速な画像ストレージと配信の仕組みを構築できます。例えば、S3で画像を安全に保管し、imgixを通じて最適化された画像をユーザーに提供することができます。

最後に

この記事では、Discordの画像共有、Gyazoの使い方、ブログの書き方に関する有益な情報を提供しました。あなたの日常生活やプロジェクトにこれらのヒントが役立つことを願っています。 ぜひ次回の記事もお楽しみに！皆様の継続的なサポートに心より感謝申し上げます

この記事を書いていたら、githubのプライベートリポジトリでは認証が必要になったらしいのでパブリックで行うように気をつけてください。

参考記事： [GitHub] プライベートリポジトリの Issue などにアップロードされた画像ファイルの閲覧が認証必須となりました

目次に戻る