GASで公開したWebサイトにGoogle Drive上の画像ファイルを表示できない

前提・実現したいこと

Google Apps Script で作成した Web アプリケーションに、Google Drive 上の画像ファイルを Google Chrome で表示したい。

Google Apps Script、Google Drive、Google Chrome は同一の Google アカウントでログインしています。
(Google Chrome は同期の設定もこのアカウントで行っています。)
Google アカウントは G Suite ではない通常の @gmail.com ドメインです。
Windows 10 で動かしているブラウザでの話です。

また画像ファイルの共有設定は「非公開 - 自分だけがアクセスできます」となっています。
共有設定を「オン」にすれば、PC(Chrome、Chromium版Edge)でも画像が表示されますが、自分しか利用しないため不要な共有はしたくありません。

発生している問題・エラーメッセージ

PC(Chrome、Chromium版Edge)とiPhone(Safari)ではソースの４パターンすべてが画像が表示されずリンク切れとなりますが、PC(Firefox、旧版Edge)では画像が表示されます。
Androidは環境が無いので未確認です。

該当のソースコード

appsscript.json

JSON
1{
2  "timeZone": "Asia/Tokyo",
3  "dependencies": {
4  },
5  "webapp": {
6    "access": "MYSELF",
7    "executeAs": "USER_DEPLOYING"
8  },
9  "exceptionLogging": "STACKDRIVER",
10  "runtimeVersion": "V8"
11}

Code.gs

JavaScript
1function doGet() {
2  return HtmlService.createTemplateFromFile("index").evaluate();
3}
4
5function getFileUrl(id){
6  var url = DriveApp.getFileById(id).getDownloadUrl();
7  return url;
8}
9
10function getFileUrl2(id){
11  var url = DriveApp.getFileById(id).getDownloadUrl();
12  return url + '&access_token=' + ScriptApp.getOAuthToken();
13}

index.html

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    <p>通常？</p>
8    <img src="https://drive.google.com/uc?export=view&id=(画像ファイルのID)">
9    <hr>
10    <p>usb=sharing付き</p>
11    <img src="https://drive.google.com/uc?export=view&id=(画像ファイルのID)&usp=sharing">
12    <hr>
13    <p>ダウンロードURLをIDから動的に取得(アクセストークンなし)</p>
14    <img src="<?=getFileUrl("(画像ファイルのID)")?>">
15    <hr>
16    <p>ダウンロードURLをIDから動的に取得(アクセストークンあり)</p>
17    <img src="<?=getFileUrl2("(画像ファイルのID)")?>">
18  </body>
19</html>

試したこと

画像の URL を

https://drive.google.com/uc?export=view&id=(画像のファイルID)&usp=sharing
に変えてみましたが結果は変わらず。

Qiita で該当しそうな記事を見つけたので、ここで見つけたことを試してみましたが変わりませんでした。

[2020-05-05 追記]

HTML
1<!DOCTYPE html>
2<html>
3  <body>
4    <img src="https://drive.google.com/uc?export=view&id=(画像ファイルのID)">
5    <img src="https://drive.google.com/uc?export=view&id=(画像ファイルのID)&usp=sharing">
6  </body>
7</html>

これだけのHTMLファイルをPCローカルで作成し、各ブラウザで開いて見ましたが、ChromeとChromium版Edgeだけでリンク切れになるようです。
どうもこの結果から GAS とは関係なく、Windows 版の Chrome 系と Google Drive の問題なのかもしれません。

行動規範の内容に同意します

回答3件

共有設定をオンにしてください

以前に別の質問で確認した際は、pcで見えているのは環境のせいではなく、そのpcのブラウザでログインしているから見えているだけで、ログアウト状態では共有されていない画像は見えませんでした。

投稿2020/05/04 01:50

papinianus

総合スコア12705

draq

2020/05/04 01:55

ありがとうございます。これは記載し忘れていましたが、自分だけ見えればいいので、クライアントはすべて同じGoogleアカウントでログイン済みの前提となります。（質問に追記しておきます。）

行動規範の内容に同意します

ご参考にされた記事の後の方にも書いていますが、 Google Apps Script で Google Drive の画像取得の関数を用意して、クライアントから呼んであげると環境に依存せずに表示できるはずです。

追記分

<img src="https://drive.google.com/uc?id=[ File ID ]&export=download" />

とすると取得できそうですが、いかがでしょう？

今後ダウンロード URL の仕様が変わることも考えられるので、 Drive のダウンロード URL を Apps Script で取得するのが良いかと思いますので、そちらのサンプルものせておきます。

JavaScript
1const doGet = e => HtmlService.createTemplateFromFile('index').evaluate()
2
3const getImageUrlById = id => DriveApp.getFileById(id).getDownloadUrl()

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    <img id="image" />
8    <script>
9      const img = document.getElementById('image')
10      const fileId = ''// TODO: insert value
11      const url = google.script.run
12        .withSuccessHandler(url => {
13          img.src = url
14        })
15        .withFailureHandler(console.error)
16        .getImageUrlById(fileId)
17    </script>
18  </body>
19</html>

サンプルコードは github に上げていますのでよかったらそちらもご参考ください。
https://github.com/tanabee/drive-image-view-sample

投稿2020/05/04 01:03

編集2020/05/04 09:00

tanabee

総合スコア96

draq

2020/05/04 01:47

GAS 側でtokenを含めたURLを生成して、それを img タグの src 属性にセットすることでしょうか。わかりにくい書き方でしたがこれも既に試していますが結果は変わりませんでした。

draq

2020/05/04 10:22

追加の回答ありがとうございます。export=downloadにしたURLも試してみましたが、結果は同じでリンク切れのアイコンが表示されます。あとわざわざ <img src="<?=getFileUrl("(画像ファイルのID)")?>">のようにサーバー再度で埋め込むのではなく、google.script.run使ってクライアントサイドからサーバー処理読み込むのは意味あるのでしょうか。

tanabee

2020/05/04 12:06

ダウンロード URL のフォーマットが変更されたときにも API 側は対応されることもあるので、用意された API を叩いたほうが望ましいと思っています。

tanabee

2020/05/04 12:08

私の環境 ( Mac x Chrome ) ですと GitHub に上げたコードで、画像表示されました。

draq

2020/05/04 19:01

> ダウンロード URL のフォーマットが変更されたときにも API 側は対応されることもあるので、用意された API を叩いたほうが望ましいと思っています。それはわかるのですが、<?=?>で埋め込んでるのとAPIの呼び出しタイミング以外に違いはないのではありませんか？埋め込んだ場合はHtmlTemplate.evaluate()が呼ばれたタイミングでAPIをコールしているのに対して、提示されたコードはブラウザがHTMLをパースした後にAPIをコールしているだけでタイミングが違うだけのような。 > 私の環境 ( Mac x Chrome ) ですと GitHub に上げたコードで、画像表示されました。なるほど、私の環境は Windows 10 なので、その違いかもしれません。

tanabee

2020/05/05 01:50

正常に表示されている場合だとおっしゃる通り動作としてはタイミングが違うだけですね。 `google.script.run` だとエラーハンドリングがしやすいためそちらで試しました。

行動規範の内容に同意します

自己解決

結局なぜ Windows 版の Chrome 系ブラウザだけリンク切れになってしまうのかわかっていませんが、埒が明かないので、画像データを BASE64 エンコードして HTML に埋め込むように方針を変更しました。

Code.gs

JavaScript
1function doGet() {
2  return HtmlService.createTemplateFromFile("index").evaluate();
3}
4
5function getBae64Image(id) {
6  const file = DriveApp.getFileById(id);
7  const data = file.getBlob().getBytes();
8  return Utilities.base64Encode(data);
9}
10

index.html

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <script type="text/javascript">
6    (function() {
7      const fileId = '(画像のファイルID)';
8      const url = google.script.run
9        .withSuccessHandler(base64Data => {
10          const img = document.getElementById("image");
11          img.setAttribute("src", "data:image/png;base64," + base64Data);
12        })
13        .withFailureHandler(console.error)
14        .getBae64Image(fileId);      
15    })();
16    </script>
17  </head>
18  <body>
19    <img id="image">
20  </body>
21</html>