Google Driveで画像を配信してimgタグで使うまでの手順まとめ

この記事でわかること

　この記事では以下の流れで画像を配信し、それをimgタグで使うところまでを解説する。

  1. Google Driveに画像をアップロードする
  2. 共有設定を変更する
  3. 画像表示用のURLに整形する
  4. HTMLの <img> タグで表示する

　お金がかけられないプロジェクトやモック実装などにおいて、全てを無料で完結させる必要がある場合には、S3などのCDNが使えない。そんなときにこのやり方は、手軽にできる「とりあえずの対処」にはなる。

手順①：Google Driveに画像をアップロードする

　まずは普通にgoogledriveに画像をアップロードする。

  • PNG / JPG / WEBP など一般的な画像形式でOK
  • フォルダ構成は自由（後で管理しやすい程度に）

　ここでは特別な操作はない。なお、googledriveの有料枠も必要ない。

手順②：共有設定を「リンクを知っている全員が閲覧可」にする

　アップロードした画像を右クリックし、共有設定を変更する。

　設定内容は、「一般的なアクセス：リンクを知っている全員」、「権限：閲覧者」とする。

　注意点は、この設定は「実質公開」に近い状態で、「画像のURLを知っていれば誰でも閲覧できる」ということ。なので、セキュリティを期待する用途には向いていない。

手順③：Google Driveの共有URLを確認する

　共有設定を行い、「リンクをコピー」を押すと次のようなURLが取得できる。

https://drive.google.com/file/d/xxxxxxxxxxxxxxxx/view?usp=sharing

　ただし、このURLは以下のような「画像のビューワ画面のリンク」であり、画像自体のURLではない。なので、imgタグに直接これを埋め込んでも画像が表示されない可能性がある。

　次の手順でこれを画像のURLにしていく。

手順④：画像表示用URLに整形する

　まず、「ビューワ画面のURL」から ファイルID を抜き出す。

https://drive.google.com/file/d/xxxxxxxxxxxxxxxx/view?usp=sharing
↑のxxxxxxxxxxxxxxxxがファイルID

　次に、以下の形式に変換する。

https://drive.google.com/uc?export=view&id=ファイルID

　これをimgタグに埋め込む。

<img src="https://drive.google.com/uc?export=view&id=xxxxxxxxxxxxxxxx" />

　これで、ブラウザ上に直接画像が表示される。

URLを置換するjavascriptサンプルコード

/**
 * Google Driveの共有URLを、<img>で使いやすい形式へ変換します。
 * 例:
 *  https://drive.google.com/file/d/FILE_ID/view?usp=sharing
 *  -> https://drive.google.com/uc?export=view&id=FILE_ID
 */
function toDriveImgUrl(url) {
  if (typeof url !== "string") return url;

  // /file/d/<ID>/view 形式を変換
  const replaced = url.replace(
    /^https?:\/\/drive\.google\.com\/file\/d\/([^/]+)\/view(?:\?.*)?$/i,
    "https://drive.google.com/uc?export=view&id=$1"
  );

  // 変換できなかった（形式違い）場合は、そのまま返す
  return replaced;
}

// 使い方
const shareUrl = "https://drive.google.com/file/d/xxxxxxxxxxxxxxxx/view?usp=sharing";
const imgUrl = toDriveImgUrl(shareUrl);

console.log(imgUrl);
// => https://drive.google.com/uc?export=view&id=xxxxxxxxxxxxxxxx

よくあるつまずきポイント

　画像が表示されない原因はほぼ以下のどれか。

  • 共有設定が「制限付き」のまま
  • ファイルIDのコピーミス
  • 共有設定を変更した直後で反映待ち

Google Drive画像配信の割り切りポイント

　上記の手順でgoogledriveをCDNのように、しかも無料で使うことができるが、これはそもそも「無理やりやっているだけ」なので、性能や保守性については以下のような割り切りが必要。

  • Google DriveはCDNではない
  • 表示速度・安定性は保証されない
  • 仕様変更の影響を受ける可能性がある
  • 大量アクセスには向かない

　とはいえ、モック、検証、社内共有、個人ツールなら問題ないし、手軽に、かつ無料で利用できるのがうれしい。

コメント