Google Drive に保存した画像を直接呼び出すURL(ERR_TOO_MANY_REDIRECTS 回避版) #HTML

背景

Google Apps Script(GAS) の HtmlService を利用して作成した Web アプリで画像を img タグや background-img に指定する際に、画像をスタティックサーバーにホストするのが嫌で、Google Drive にアップしたファイルを、読み込む方法があります。

ただ、残念なことに、Safari ブラウザでこのページにアクセスすると、ERR_TOO_MANY_REDIRECTS が発生して画像が表示されません。そのため、スタティックサーバーに画像を配置して回避してきました。

ちょっと時間が取れたので、GAS だけで回避する方法を考えてみました。

Google Drive の画像の表示用 URLの生成 (ERR_TOO_MANY_REDIRECTS が発生する URL)

Google Drive に画像ファイルをアップロードし、「リンクを知っているユーザー全員」に「閲覧」権限を付与し、リンクを取得します。
サンプル：
https://drive.google.com/file/d/1VTd3cCphDyNuCPrrjtynS71YgAiOSb2f/view?usp=sharing
この URL を img タグに指定しても、HTML には表示されません。
この URL の /d/ と /view? で囲まれた、1VTd3cCphDyNuCPrrjtynS71YgAiOSb2f　(FileID)をコピーし、下記の ##FileID## を置き換えます。
http://drive.google.com/uc?export=view&id=##FileID##
今回の場合は、以下のようになります。
http://drive.google.com/uc?export=view&id=1VTd3cCphDyNuCPrrjtynS71YgAiOSb2f
この URL を img タグに指定すると画像がページに表示されます。ただ、前述の通り、safari で画像は表示されません。

img url (Safari で表示されない)

<img src="http://drive.google.com/uc?export=view&id=1VTd3cCphDyNuCPrrjtynS71YgAiOSb2f">

回避方法を適用した URL の生成

回避方法として考えたのは、リダイレクトが多すぎるのであれば、リダイレクトを解決した URL を指定すれば良いのではないかということで、作成した GAS の関数が以下の通り。

title

function getRedirect(url) {
  var res = UrlFetchApp.fetch(url, {'followRedirects': false, 'muteHttpExceptions': false});
  var redUrl = res.getHeaders()['Location'];  
  var resCode = res.getResponseCode();        
  if (redUrl){
    var ret=getRedirect(redUrl)
    return ret
  } else {                                    
    return url;
  }
}

この関数に、先ほど生成した url (http://drive.google.com/uc?export=view&id=1VTd3cCphDyNuCPrrjtynS71YgAiOSb2f) を指定してリダイレクト先を取得して得た url が、以下となり、これを指定すると Safari でもエラーなく表示されます。
https://doc-0c-20-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/bfbm8bv8r5dri9ombp3hp8288ij4d38i/1680836175000/13650191374517839472/*/1VTd3cCphDyNuCPrrjtynS71YgAiOSb2f?e=view&uuid=536bb0e5-0f58-4ba9-89b9-9b8d78422632

HTMLService で呼び出される HTML 内に下記ののように記述することで、src URL に getRedirects の結果が格納されます。

GAS HTML for HTMLService

<img src="<?= getRedirects('http://drive.google.com/uc?export=view&id=1VTd3cCphDyNuCPrrjtynS71YgAiOSb2f') ?>">