概要

「GASでGoogleDriveにある画像を表示させる方法」については調べれば記事がいくつか出てきます。
ですが、それらの記事に書かれている対応では表示されない環境がいくつかあります。

この記事ではそれらを含め「GASでGoogleDriveにある画像を表示させる方法」をまとめました。

また、この記事で取り上げた対応以外にも、関連資料にて参考になりそうな対応方法がいくつか載っているのでそちらも是非ご覧ください。

結論

対応について

環境によって対応が変わります。対応の分類は大きく2つに分かれます。

1. 従来通りの対応

巷にあふれている資料通りの対応ですので詳細は割愛します。(関連資料をお読みください)
下記を基本フォーマットとしたURLをimgタグのsrc属性にセットすることで表示できます。

https://drive.google.com/uc?id={id}

2. リダイレクト先のURLに置き換える対応

本題はこちらです。
UrlFetchApp.fetchメソッドを通してリダイレクト先の画像URLを取得し、それを表示するという対応です。

// originUrlは従来の表示用URL
// https://drive.google.com/uc?id={id}
function convertImageUrl(originUrl) {
    const options = {
        followRedirects: false,
        muteHttpExceptions: false
    };
    const response = UrlFetchApp.fetch(originUrl, options);
    const newUrl = response.getHeaders()['Location'];
    return newUrl;
}

従来の表示用URLを上記メソッドに通して変換されたURLを、従来通りの対応と同様にimgタグのsrc属性にセットすることで表示できます。

俯瞰して見ると、違いは リダイレクト先の画像URLに変換する必要があるかないか と帰着できます。

環境による分類

リダイレクト先の画像URLに変換する必要があるかないかはブラウザの環境に依存します。
環境別による変換の必要性を以下にまとめます。

OS	Chrome	Safari	FireFox	LINE(Mobile)	Slack(Mobile)	Twitter(Mobile)
Win64		-		-	-	-
OSX	未検証	未検証	未検証	-	-	-
Android		-		❌
iPhone	❌	❌	❌	❌	❌	❌

値	概要
(無記入)	変換は不要
❌	変換が必要
未検証	未検証な環境
-	存在しない環境

関連資料

あとがき対応過程

関連資料にもある通り、ブラウザのアドレスバーに直で画像URLを入力するとリダイレクトされることは把握していた。
しかし、アカウントAでリダイレクトされたURLをアカウントBで開くと403が返ってきて開けなかった。(逆も同様)
このことから、リダイレクト先のURLは表示をリクエストしたアカウントに紐づくものなのだろうと勝手に解釈していた。
そのため、UrlFetchApp.fetchからリダイレクト先のURLを取得する方法の検証をこの時点では行わなかった。

[補足]
実装していたプロダクトのスクリプト実行者はオーナーに割り当てた作りにしていたため、別アカウントからスクリプト実行をリクエストした際、「スクリプト実行しているアカウント(オーナー)」と「リダイレクト先の画像を表示しようとしているアカウント(赤の他人)」は異なるアカウントであるため、上記の検証から403が返ってくるものだと推測していた。

次に、「Download URLにaccess_tokenを付与して表示用URLを生成する方法」(関連資料参考)を試してみたが、結果はこちらも同様に403が返ってきて開けなかった。

どうにか有効なURLを取得できないかと考えHTMLに簡易的なjavascriptを仕込みクライアント側でリダイレクト先の画像URLを取得できないか試みたが、ドメインが違うため当然取得できずに終わった。

少し詰みかけていたため、前提を崩してUrlFetchApp.fetchを通してリダイレクト先のURLを使用することが出来ないかを検証。
結果として期待通り表示することができ、これを実装に落とし込んだところ確認できる全ての環境で正常に表示することができた。

これらの対応が落ち着いた後でteratailの内容を読み解いたため、そのページに記載されている対応方法に関しては未検証のまま。
余裕があれば検証するぐらいの気持ちでいる。