GASで作成したWebアプリ・Googleドライブ内の画像が表示されなくなった問題

2024年1月1日から、GASで使用する画像や音声ファイルは、Google Cloud Storageに保存する必要があります。

以前は、GASのプロジェクトフォルダ内に画像や音声ファイルを保存しても問題ありませんでしたが、現在は、Google Cloud Storageに保存しないと、画像や音声ファイルが読み込めません。

そのため、ルーレットのWEBアプリで画像や音声ファイルを使用している場合は、Google Cloud Storageに保存する必要があります。

その他の解決策

今でもGoogleドライブ内のファイルを表示することは可能のようです。

これまでの書き方は下記

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

変更後は下記

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

この方法も制限が入ってしまう可能性あり…。

Google Cloud Storageを使う場合

1. Google Cloud Platformの管理コンソールにログインします。
2. 左側のメニューから「ストレージ」をクリックします。
3. 「バケット」をクリックします。
4. 「新しいバケット」をクリックします。
5. バケットの名前を入力します。
6. リージョンを選択します。
7. 作成をクリックします。

バケットが作成されたら、以下の手順で画像や音声ファイルをアップロードします。

1. バケットをクリックします。
2. 左側のメニューから「オブジェクト」をクリックします。
3. 「アップロード」をクリックします。
4. アップロードするファイルを選択します。
5. アップロードをクリックします。

画像や音声ファイルがアップロードされたら、GASのコードで、Google Cloud Storageのオブジェクト名を指定することで、画像や音声ファイルを読み込むことができます。

たとえば、以下のコードでは、Google Cloud Storageのオブジェクト名「image.jpg」の画像を読み込んでいます。

function showImage() {
  var image = document.getElementById("image");
  image.src = "https://storage.googleapis.com/my-bucket/image.jpg";
}