GASで作成したWebアプリ（Webサイト）でGoogleドライブ内の画像が表示されなくなった問題を解決する

mir

2024年1月28日 11:12

この2024年1月に入って少し話題となった、Googleドライブ内の画像が今までの方法で Webサイトで表示できなくなった問題を取り上げてみたいと思います。

後半はGoogleドライブの画像をWeb掲載する注意点と、少し動きのある Webを GASで作るサンプルコードも！

Googleドライブ関連ってことで、先週までの流れと少し繋がる部分もあるかなと。

先週は Googleスプレッドシートを操作する GAS Spreadsheet Serviceでスプレッドシートの共有メンバーを出力したり、共有を操作するネタを書きました。

Googleドライブ内の画像が Webページ埋め込みで表示できなくなった問題の解決策

「前置きはいいから、困ってるから早く答えが知りたいんだ～」

って人の為に、最初に結論（解決策）を書いておきますね。

■いままでの書き方（現在は上の画像左のように表示されない）
<img src="http://drive.google.com/uc?id={画像のファイルID}" />
※または
<img src="http://drive.google.com/uc?export=view&id={画像のファイルID}"/>

↓
■現在の書き方（上の画像右のように以前と同じ表示になる）
<img src="https://lh3.googleusercontent.com/d/{画像のファイルID}" />

※{画像のファイルID}部分（中カッコも含め）を、実際利用している画像ファイルIDと差し替えてください。

※現在の書き方は一例です。後半、他の記述方法も紹介しています

これだけです。

タイトルでは GASで作成した Webサイト（Webアプリ）と記載していますが、それ以外のサイト（WordPressで作成したサイトやヤフオクなど）で Googleドライブ内の画像を入れていた場合も同様です。

画像ファイルIDの手前部分を変更するだけなんで、これなら検索と置換で一発ですね！

他にも幾つか対応方法はあるようですが、上の方法が一番シンプルでベストかと思います。

参考にさせていただいたサイトはコチラ

少し経緯というか背景に触れておきましょう。

Googleの仕様変更で、今まで出来ていた Googleドライブ内のファイルの Webへの埋め込みが出来なくなった

2023年1月、ふと自分が過去に GASで作ったWebアプリを見たら、画像が表示されなくなってる。。

右クリックから「画像を読み込む」でも表示されない。

デベロッパーツール見ると

Failed to load resource: the server responded with a status of 403 ()

ってなってますね。今までは普通に表示できてたんだが・・・。

「新しいタブで画像を開く」だと画像が開けるから、Googleドライブのアクセス不具合って感じでもなさそう。

なんでだ～！！

と思いつつも、たまたまかなと2，3日放置してたんですが、一向に解消されない。

検索するとネット上にも同様の症状が出てるという声が多くあったんで、こりゃ仕様変更だなと。

で、よくよく調べたら 2023年の10月にGoogleWorkspace アップデートブログで発信されていた

「Google ドライブで必要だったサードパーティ Cookie に関する今後の変更について」

この件だったみたい。

確かに

特定のワークフローまたはアプリでドライブのダウンロード用 URL を利用している場合は、2024 年 1 月 2 日までにドライブとドキュメントを公開するフローに切り替えていただく必要があります。

って書いてあった。

でも、まさか 同じ Googleの GASで作った Webサイトへの画像掲載で引っかかるとは思ってなかった～。

今までの Googleドライブ内の画像を Webページで使う方法

GAS もしくは他の方法で作成した Webページに Googleドライブ内の画像を載せる方法は、多くのサイトで基本的には Googleスプレッドシートの image関数で Googleドライブ内の画像を表示させる方法と一緒です。

使用する画像ファイルの共有設定で、「一般的なアクセス」を「リンクを知っているインターネット上の誰もが閲覧できます」としておく
Googleドライブ上で取得した画像の共有URLを直リンクに変換しておく

ポイントはこの2つ。

まず、画像へのアクセス（閲覧）をリンクを知っている全員として、

その上で共有＞リンクをコピーで

https://drive.google.com/file/d/ {この部分が画像のファイル ID} /view?usp=drive_link

こんな感じのURLが取得できるので、d/ の後ろのファイルID部分を使って、

http://drive.google.com/uc?id={画像のファイルID}

このようにするか

https://drive.google.com/uc?export=view&id={画像のファイルID}

このように変換したURLを使います。

これがいわゆる Googleドライブ内の画像への直リンクURLと言われるものです。

GoogleスプレッドシートのIMAGE関数での利用方法は、過去 noteを参照ください。

現在もこの直リンクを使って、image関数で Googleドライブ内の画像をスプレッドシートに表示することはできます。

=IMAGE("http://drive.google.com/uc?id={画像のファイルID}")

これはOK

しかし、先に書いた通り 2024年1月の Googleドライブの仕様変更によって、 Webページに Googleドライブ内の画像を掲載する HTMLの記述

<img src="http://drive.google.com/uc?id={画像のファイルID}" />

これは現在はNG

こちらが使えなくなってしまったわけです。

2023年以前に公開、更新された「 Googleドライブに保存した画像をWebサイトやブログで使う方法」を紹介しているサイトは、ほぼこの方法を紹介しています。

しかし 2024年1月以降は、この方法ではWebへの画像表示は出来ません。

それ以前からも iOS（iPadやiPhone）の Safariでは GoogleドライブからWebページに挿入した画像が表示されない問題はあったようです。

Googleからの公式の対応策コレジャナイ感が凄い・・・

では、Googleドライブの仕様変更に際して、Googleからはどのような対応方法がガイドされているのか？

それが ↓ コチラです。

ウェブサイトで iframe（ドキュメント内で別の HTML ページを読み込む HTML 要素）を使用してコンテンツを読み込みます。ドライブで目的のファイルに移動し、次の手順でご対応ください。

・Workspace のファイル（Google ドキュメント、スプレッドシート、スライド、フォームのファイル形式）の場合は、ファイルの Google ドキュメント公開 URL を使用します。

・その他のファイルの場合は、一度ドライブで開いてからオーバーフローメニューで [新しいウィンドウで開く] を選択します。さらにオーバーフローメニューを開いて [アイテムを埋め込む…] を選択し、表示された iframe HTML タグを使用します。

https://workspaceupdates-ja.googleblog.com/2023/10/google-cookie.html

うーん、iframeで埋め込めってことみたいですが・・・。とりあえず指示通りやってみましょう。

画像なんで「その他のファイル」（下の方法）ですね。

まずドライブ内の画像ファイルをダブルクリックで開き

オーバーフローメニューで [新しいウィンドウで開く] を選択します。
↓
オーバーフローメニューとか言われても「わかりづれぇ！」

つまりは右上の ︙（3点リーダー）から、新しいウィンドウで開くを選択ってことですね。

https://drive.google.com/file/d/{ 画像ファイルID }/view

新しいウィンドウ（タブ）で開かれた画像はこのようなアドレスになっています。

ここで再度オーバーフローメニュー（右上の ︙）から「アイテムを埋め込む」を選択。

<iframe src="https://drive.google.com/file/d/{ 画像ファイル ID }/preview" width="640" height="480" allow="autoplay"></iframe>

この iframe タグを使えってことみたいです。

HTML触る人なら、この時点でどんな感じの表示になるイメージできますよね。嫌な予感しかしませんがｗ

HTMLに入れてみると。

やっぱりー。

Googleドライブで画像プレビューする画面をそのまんま埋め込んだだけです。背景透過のPNGが悲しいことになってますねｗ

ユーザーが求めてる解決策はこれじゃないです！！

全世界のユーザーがこの改悪に影響を受けており、しかも画像だけではなく Googleドライブ内の音声ファイルや動画をWebに埋め込んでいる人にも影響があったようです。

これには全米が！いや全世界が泣いた！

Issue Trackerもこのトピックは阿鼻叫喚だったようです。

ついでに Googleドキュメントの改悪も愚痴っとく

今回の改悪は、ほんと Googleらしい俺様っぷり全開と言えます。

「俺が王様（キング）」だ、「俺がルールだ」 って感じですね。

ブルーロックの馬狼のイメージでしょうか？

先日変更された Googleドキュメントの毎回行の先頭に @ が浮かび上がってくるやつも、本当にいらないんですが・・・。

Google的には 「俺様の美技に酔いな」って感じなんでしょうね。

こちらも管理者もユーザーも制御できないという・・・。シンプルに文章を書きたい人には非常にストレスだし改悪もいいとこです。

検索で解決策を見つける

というわけでGoogleから案内された対応策は役に立たないんで、別の回避方法を漁ってみました。

stackoverflowとか issue trackerで話題になってたので、凄い人たちは既に解決策を見つけてたわけですが、一応自分でも色々検証してデベロッパーツールから取得できるアドレス

https://lh3.googleusercontent.com/fife/{ ものすごく長いファイルIDとは違うユニークID }

これを使う方法を発見しました。

でもこれだとファイルIDがそのまま使えないし、このアドレスが長すぎでイマイチだなーってことで却下。（一応 GAS UrlFetchAppで取得することは出来るけど遠回り感があるなと）

とりあえず他の日本語の主要サイトで紹介されていた解決策を試してみました。

1. lh3のURL に u/0/d が付くアドレスを使う方法
<img src="https://lh3.google.com/u/0/d/{ 画像ファイルID }" />

この方法だと Googleログインが必須とのこと

2. サムネイルを使った方法
<img src="https://drive.google.com/thumbnail?id={ 画像ファイルID }&sz=w1000 />

ファイルIDの後ろにサイズ指定の記述が必要

3. サムネイルを使った方法（サイズ指定前バージョン）
<image src="https://drive.google.com/thumbnail?sz=w1000&id={ 画像ファイルID }"/>

thumbnail がサムネイルって英語苦手な人にはピンとこないよね

Googleログインしてない状態だと画像が表示されない
https://lh3.google.com/u/0/d/
を使う方法は却下として、

サイズ指定がイマイチだけどサムネイル法で一番かなと考えてましたが、

<img src="https://lh3.googleusercontent.com/d/{画像のファイルID}" />

これだと閲覧側のGoogleログイン不要

一番シンプルなコチラの方法を見つけたんで、こちらを採用。

一括置換でこちらに置き換えることにしました。

ただしリンク先のサイトにも書いてありますが、公式にGoogleがガイドしている方法ではありません。

いきなりGoogle側が仕様変更して使えなくなる可能性もあるので、その点はご注意ください。

その他の解決策

URLを置き換える以外の方法も見つけました。上記の単純URL置き換えよりもコードの変更が多いですが参考までに。

こちらだと 画像以外の音声ファイル等の場合も対応可能？

GASでリダイレクト先のURLを取得する回避法

BASE64エンコードで HTMLに埋め込む回避法

Googleドライブの画像を Webサイトで扱う注意点

とりあえず今回の Googleドライブ内の画像が Webサイトで表示できない問題は解決できました。

でも、本当に Googleドライブの画像をWebに掲載して大丈夫ですか？

便利さ手軽さに目がいって基本を理解せず使っていると、こわーいことになるかもしれませんよｗ

※銭天堂は昭和世代的には「笑ゥせぇるすまん」みたいなもんだなと

というわけで、少し Googleドライブで共有した時のプライバシーの話もしておきましょう。

恐怖！？：Webに埋め込んだ画像からオーナーの Googleアカウントは辿れる

今回の方法で Googleドライブの画像を掲載した場合、その Webページの閲覧者は 画像のファイルIDから Googleドライブ上の画像共有画面へアクセスすることが可能です。

さらにそこから、ファイルのオーナー情報（Googleアカウント）も確認することが出来ます。

たとえば、上のように埋め込まれた画像を右クリック、画像アドレスをコピー を選択すると

https://lh3.googleusercontent.com/d/{ 画像ファイルID}

↑ 画像ファイルIDが入ったこの URLが取得できます。

これを Web掲載用のアドレスを取得の逆変換をして

https://lh3.googleusercontent.com/d/{ 画像ファイルID}
↓
https://drive.google.com/file/d/{ 画像ファイルID}

このようにドライブ上の表示URLに変換すれば

閲覧者側（Googleログインしていなくて）は、画像を共有したドライブ上表示画面にたどり着くことが出来ます。

ここで ︙（3点リーダー）から詳細を開くと。

オーナーのGoogleアカウントのアイコン、ニックネーム、メアドが

スケスケだぜ！

というわけです。

これを理解せずに気軽に Googleドライブ内の画像を Webで使ってしまうと、Googleアカウントを本名で使ってたり、恥ずかしいアイコンを使ってたり、メアドに誕生日を入れていた場合、プライバシー的に後で痛い目を見ることがあります。

十分に気をつけましょう。

Googleドライブの共有シリーズでも、そのうち触れたいと思っていますが、Googleスプレッドシート、ドキュメント、その他の画像やPDF、動画など Googleドライブ内のどんなファイルだろうが、

「共有」したら閲覧者には Googleアカウント情報はバレます

これは、仕様なんで仕方ありません。そこを理解した上で使いましょう。（逆にリンク共有の場合は、閲覧者側の情報はオーナーにバレることはありません）

他にも悪意あるユーザーによる GASの不正実行にも注意が必要です。

Googleドライブの画像を Webサイトで扱う際の便利ワザ

プライバシー、セキュリティの注意点を理解した上で、基本的に身内で使うものであれば、 Googleドライブは無料でWebページを作る上で便利なツール です。

ドライブ内の画像を Webに掲載する際の便利ワザを紹介しておきます。

Webサイトに掲載するにあたり、1つ2つなら 共有から URLコピー という手順で IDを取得する方法でもよいですが、複数画像を扱うなら一括で楽に処理がしたい、ですよね？

そんな時に使えるのが、シート関数やGASです。

Googleスプレッドシート関数を使って Webページ用画像URLを生成する

まずは GASはよくわからないって人向けにシート関数を使う方法を。

前提として、Googleドライブ内のファイルのURLは一括取得が可能です。上のように Webサイトで使いたい複数の画像が 1つのフォルダに入っているなら、

Ctrl + A　で全ファイル選択（※ただし多すぎると失敗するので注意）
Ctrl + C でコピー
Ctrl + Shift + V で URL貼り付け（スプレッドシートでセル選択して）

ショートカットを使った、この方法が使えます。（Windows PCでのショートカットです）

この方法で取得できる URLは

https://drive.google.com/open?id={ ファイルID }&usp=drive_copy

このようなものです。

これは以前 image関数について書いた noteでも紹介しました。

あとは、このURLから ID部分を抜き出して、頭の部分を https://lh3.googleusercontent.com/d/ と置き換えるだけですね。

C1セルに https://lh3.googleusercontent.com/d/ を入れておいて A2以降のA列の URLを一括変換するなら

=ARRAYFORMULA(REGEXREPLACE(A2:A,"^.+?=(.+)&.+$",C1&"$1"))

こんな式でいけます。

これはファイルID部分が 最初の = から & までの間にある文字列であるという規則性を使って、正規表現を扱える REGEXREPLACE関数で処理をしています。

ID部分はカッコで括ることでキャプチャグループ化して、置換後で $1として再利用しています。

置換後を C1&"$1"　とすることで、

https://lh3.googleusercontent.com/d/ { ファイルID }

という URLを生成しています。

このまま img タグで使えば画像がWebページに表示できますね。

もちろん、imgタグや、その周りのHTMLを含めて数式内で生成してしまっても良いです。

たとえば A列にGoogleドライブから一括コピペ（Ctrl +v）したファイル名（リンク付き）、B列には一括コピペ（Ctrl + Shift + v）のURLとした場合、

=ARRAYFORMULA(REGEXREPLACE(B2:B,"^.+?=(.+)&.+$","<tr><td>"&A2:A&"</td><td><img src ="""&D1&"$1"" alt="""&A2:A&"""/></td>"))

こんな式で HTMLをシート上で生成。

GAS側で用意した HTML の <table>　</table> の中に貼れば

こんな感じで Webに表示できます。初心者にも簡単な方法かなと。

GASを使って Googleドライブのフォルダ内の画像ファイルから Webページ用画像URLを生成する

もう1つは GASを使ってフォルダ内をループ処理で、個々のファイルIDを取得、そこから画像URLを生成という方法です。

たとえば GASで以下のようなコードを用意します。

function GetImageUrl() {
  const sheet = SpreadsheetApp.getActiveSheet();｛
  const folderId = "{ 画像が保管されているフォルダのID }"; //フォルダID
  const urlHeader = 'https://lh3.googleusercontent.com/drive-viewer/'; //画像用URLヘッダー

  const folder = DriveApp.getFolderById(folderId);
  const files = folder.getFiles();

  let result = [["ファイル名","ID"]];

  while(files.hasNext()){  
    let file = files.next(); 
    let fileType = file.getMimeType();

    if(fileType.match("image")){
      let name = file.getName();
      let id = file.getId();
      console.log(name,id);
      result.push([name,urlHeader+id]);
    }
  }

  sheet.getRange(1,1,result.length,2).setValues(result);

}

※{ 画像が保管されているフォルダのID } の箇所を実施のフォルダIDに差し替える必要があります

上のコードをスプレッドシートのコンテナバインドスクリプトとして、エディタを開いてコピペ（記述）し保存、実行すると

このようにファイル名、Web掲載用URLがスプレッドシートに書き出されました。

folder.getFiles()

で取得した ファイルイテレーターから個々のファイル情報を取得するには、

while(files.hasNext()){

を使います。

※イテレーターなので配列メソッドの map や forEach が使えない為

このようにシート関数や GASを使うことで、GoogleドライブのファイルIDの取得やファイル名、埋め込み表示用の URL が簡単に取得できます。

Googleドライブのフォルダ内画像をボタンを押すたびにランダム表示するWebアプリ

最後にオマケです。 Googleドライブ内画像と GASとエディタ内で HTML、Javascritpを書けば、こんなことが出来るよーってサンプルを紹介しておきます。

こういう多少動きのあるWebのサンプルを見ると、普段はスプレッドシート周りだけGASでいじってる人も、HTMLServiceを使ってみたくなりますよねw

Googleドライブのフォルダ内画像をボタンを押すたびにランダム表示するWebアプリのサンプルコード

まずは、Googleドライブに適当なフォルダを作成（名前はなんでもよい）、そこにサイトで使う画像を入れておきましょう。

画像数は多すぎない（10個程度）方がよいです。

画像を全て選択（Ctrl + A）してから、共有でアクセス（閲覧）をリンクを知っている全員としておきましょう。

そして、フォルダを開いた状態のアドレスバーのURL の赤線部分のフォルダIDを取得（後で使うのでコードのコピペの後でもOK）。

https://drive.google.com/drive/u/1/folders/{ フォルダID }

次にスプレッドシートのコンテナバインドでも、スタンドアロンでもどっちでもいいんですが、スクリプトエディタを立ち上げ

コード.gs （GAS)の方は

//指定したフォルダから 画像ファイルのIDを取得
function GetImageUrl() {
  const folderId = "{ 画像が保管されているフォルダのID }"; //フォルダID

  const folder = DriveApp.getFolderById(folderId);
  const files = folder.getFiles();

  let result = [];

  while(files.hasNext()){  
    let file = files.next(); 
    let fileType = file.getMimeType();

    if(fileType.match("image")){
      let name = file.getName();
      let id = file.getId();
      result.push([name,id]);
    }
  }

  result = JSON.stringify(result);
  return result;

}

//Webページを生成
function doGet(){
  const html = HtmlService.createTemplateFromFile("index");
  return html.evaluate();
}

こんな感じにしておきます。

フォルダ内の画像のファイル名と IDと取得する GetImageUrl 関数と、Webページを生成する doGet 関数の2つを記述しています。

関数 GetImageUrl は上で書いたやつの改良版です。

スプレッドシートへの書き出しは辞めて、JSON.strigifyで JSON文字列 をリターンする式にしています。（ID取得だけど関数名を変えるの忘れちゃった）

フォルダ内の画像が多い場合は、先にスプレッドシートに書き出しておいて、それを読み込んだ方がよいですが、10枚程度で個人や身内の遊びWeb（アクセス数が多くない）ならこの方法で問題ないかと思います。

さらにエディタで＋ボタンから HTMLを選択して名前を index として、
index.html というファイルを作ります。（.htmlは勝手につく）

index.html の中身はこんな感じで。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <input type="button" value="占う！" onclick="uranai()">

    <p id="p1">今日の貴方は！？</p>
    
    <script>
      const urlHeader = 'https://lh3.googleusercontent.com/d/';
      const arr = JSON.parse(<?= GetImageUrl() ?>);
      
      function uranai(){
        const n = Math.floor(Math.random() * arr.length);

        let result = `今日のあなたは ${arr[n][0]} です。<br>`
                    +`<img src = '${urlHeader}${arr[n][1]} ' alt='${arr[n][0]}'>`;

        const p1 = document.getElementById("p1");
        p1.innerHTML = result;
      }
      
    </script>
  </body>
</html>

ここでフロッピーボタンを押して プロジェクトを保存

まずはコードが保存できました。

ここで登場する HTML側の JavaScriptで

const arr = JSON.parse(<?= GetImageUrl() ?>);

このように スクリプトレットという書き方で GAS側の関数の結果を取得し、parseで二次元配列に戻す方法や

innerHTML で表示されている Webページの一部だけボタンを押すたびに動的に変化させる記述など

p1.innerHTML = result;

色々と本当は説明が必要な記述が登場してますが、ここで解説すると長くなるので割愛。

機会があればこの noteでも触れるかもしれませんが、初心者向けに丁寧に解説しているサイトがいっぱいあるので、それらを参考にした方がよいです。

※ そもそも mir もWeb系を得意としてるわけではありません。

↑ 少し内容は古い部分もありますが、丁寧に記述されてる「いつも隣にITのお仕事」さんはおススメです。

Webアプリのデプロイの流れ

作成した HTMLをWebで見れる（操作できる）ようにする為には、デプロイが必要です。

右上のデプロイを押して、初回は 「新しいデプロイ」を選択

種類の選択ボタンで、歯車ボタンから ウェブアプリを選択します。（単なる表示するだけのWebサイトでもウェブアプリという位置づけ）

他の人に使ってもらう、もしくはシークレットモードで開いてテストしたい場合は、アクセスできるユーザーを全員とします。

アプリによっては、「次のユーザーとして実行」の箇所をアクセスしている（利用する）ユーザーにしたり、アクセスをGoogleアカウントで制限する必要があります。

企業版 GoogleWorkspaceだと、アクセスできるユーザーで社内メンバー（ドメイン内）を指定できるので、セキュアにウェブアプリが運用できます。

最後に右下の「デプロイ」を押します。

初回は アクセスの承認が必要になりますが、

これはいつもの GASの初回に出るものと一緒です。
英語表示になっちゃった場合でも慌てずに。

スクリプトの承認が終わればデプロイ完了です。

ここで表示される ウェブアプリの URLが、作成された WebのURLです。クリックしてそのまま開くか、コピーしてブラウザのアドレスバーに入れて開いてみましょう。

デプロイ後の修正・変更

デプロイ後にコードを変更して上書き保存しても、Webサイト側には自動反映されません。

変更を反映させるためには デプロイの更新が必要です。

たとえば、上のように一部 HTMLで表示させる文字を変更した場合は、まずはプロジェクトの保存をして

デプロイを管理から更新を行います。

編集のペンボタンを押して

バージョンのプルダウンから 「新しいバージョン」を選択して「デプロイ」ボタンを押します。

この方法であれば ウェブアプリのURLは変わらずそのままで、中身だけ更新されます。

※更新ではなく 新しくデプロイしてしまうと、URLは変わってしまいます。

コメント部分の修正が反映されました！！

GASで Webアプリ作成は気軽で面白い

最後の Webアプリのサンプルは 完全に余談でしたね。

ただ、今回の本題である Googleドライブの画像が Webサイトで表示されない問題の解決策は、Webサイト作らない人には関係ない話になっちゃうなーと思いまして。

でも、この noteを見てるってことは GASには興味がある？ってことかなと。

GASは Googleのスプレッドシートや Gmail、Googleドライブの操作、自動化に非常に便利ではありますが、サーバー無し、新たに別のサービスに申し込みなしで、気軽にWebサイト、Webアプリを作れるという点も非常に魅力的です。

もちろんセキュリティに留意する必要はありますし、Webとなってくると、今度は HTMLやCSS、JavaScript が登場してくるので、グッと難易度や覚えることも増え、ついでにエラーも増えてきますｗ

でも、こんな感じでちょろっとコード書いて、Webページや簡単なWebアプリ作れるのって面白いですよね？

なんか面白そうだな、試してみようかな！と思っていただけるきっかけとなればと思い、後半は珍しく HTML付きのコードを掲載してみました。（有料コンテンツにするか迷ったけど、そこまで大したコードでもないなとｗ）

次回はそろそろ、本職のスプレッドシートのネタに戻りたいと思います。

この記事が気に入ったらサポートをしてみませんか？

GASで作成したWebアプリ（Webサイト）でGoogleドライブ内の画像が表示されなくなった問題を解決する

Googleドライブ内の画像が Webページ埋め込みで表示できなくなった問題の解決策

Googleの仕様変更で、今まで出来ていた Googleドライブ内のファイルの Webへの埋め込みが出来なくなった

今までの Googleドライブ内の画像を Webページで使う方法

Googleからの 公式の対応策 コレジャナイ感が凄い・・・

ついでに Googleドキュメントの改悪も愚痴っとく

検索で解決策を見つける

その他の解決策

Googleドライブ の画像を Webサイトで扱う注意点

恐怖！？：Webに埋め込んだ画像から オーナーの Googleアカウントは辿れる

Googleドライブの 画像を Webサイトで扱う際の便利ワザ

Googleスプレッドシート 関数を使って Webページ用画像URLを生成する

GASを使って Googleドライブのフォルダ内の 画像ファイルから Webページ用画像URLを生成する

Googleドライブの フォルダ内画像を ボタンを押すたびにランダム表示するWebアプリ

Googleドライブの フォルダ内画像を ボタンを押すたびにランダム表示するWebアプリ のサンプルコード