Google Drive にある画像をimgタグで取得させるURLについて

現象

　GDriveにある画像をGASで作成したHTMLのIMGタグで表示させようとしたとき、iPhoneからだけ、なぜか正しく表示されません。
■ 2019.10.24追記
* Faviconだけは、https://drive.google.com/uc?id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX のURLで問題ない
* 解決方法発見しました（記事内参照）

更新情報

更新日付	内容
2020/2/16	確認すると、2019.10.24 追記 の対応をしても iOS では表示されなくなりました。
2020/2/18	一度　https://drive.google.com/uc?id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&usp=sharing 　を純粋にブラウザのアドレスバーに入力して、画像だけを表示したあとならば、👆で表示した画像以外も　正常に表示ができることを確認しました。　どうやら、リダイレクトを一度実施することで、Safari （iOS？）がそれを安全だと判断するようですね。　引き続き、スマートな対応方法を模索中
2020/2/23	検証の結果、次のようなURLですと、iPhone/Android/PC いずれにも表示可能です。いろいろなウェブサイトに掲載されている情報で iPhone でも表示可能となったわけです。一周回って、解決みたいなわけなので、2019.10.24 追記 の記事は一応残し、結論欄を「一般的な解決方法」「別の方法」の2段構えで掲載更新しました。

結論

一般的な解決方法

　<img src="https://drive.google.com/uc?export=view&id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&usp=sharing" とする。
　XXXX部分は、画像毎のIDを代入します。
　IDの取り方は、こちら参照

別の方法

　上記方法でうまくできない場合にお試しいただきたい方法を記載します。
　どうやらキャッシュサーバ（？）経由じゃないと、iPhoneでは表示できないようです。ただしキャッシュは（多分）0:00に消えるので、またキャッシュされる操作をしないと、表示できなくなる。
　キャッシュされる操作というのは、URLに接続後リダイレクト先のURLを正しく受け取ることのようで、次のように、GASにURLを得るファンクションを作成し、HTMLから同ファンクションを呼び出す形で、URL変換を要求することで解決。

GAS.

/**
 * GDriveのファイルのURLを得る.
 * @param id ファイルID
 * @return return URL
 */
function getFileUrl(id){
  var url = DriveApp.getFileById(id).getDownloadUrl();
  return url + '&access_token=' + ScriptApp.getOAuthToken();
}

html.

<img src="<?!=getFileUrl('XXXXX_ドキュメントID_XXXXX')?>" 

GASだけでWEBアプリケーションを作る

　いろんな記事でやってますね。
ちょっと調べれば、サーバレスかつ無料範囲内で多くのことができます。
私の場合は、GoogleスプレッドシートをDB代わりにして、HTMLからデータを登録、更新、参照できるWEBアプリケーションを作っていますが、いろいろクセがあって、予定工数どおりに済ませるには、慣れが必要ですね。

IMGタグで読ませる記事はあまたある

　ちょっと調べれば、以下の手順がわかる
1.画像ファイルをGDriveにアップロード
2.ファイルをプレビュー後、「新しいウィンドウで開く」して得られるURLから、ファイルのIDを得る。

https://drive.google.com/file/d/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/view

(XXXXXXは実際は英数字羅列）

3.imgタグを作成

<IMG SRC="https://drive.google.com/uc?id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"/>

(XXXXXXは実際は英数字羅列）

これで、通常なら何も問題なく画像が表示される

iPhoneだけはダメなんですよね

　しかし、PC(Chrome)、Android(Chrome)は問題ないのですが、どうしてもiPhone(Chrome Safari)では、画像が表示されず、alt文字が表示されるとか、枠線だけ表示されます。

リダイレクトされているっぽい

　上記のURLを直接 iPhone のブラウザのアドレスバーにペーストして表示すると、
- プレビュー
- Googleドライブで開く
の選択肢が表示され、プレビューを押すと問題なく画像は見えます（画像だけね）
でも、そこで気付いたんですよ。
URL変わってるね

https://doc-10-7g-docs.googleusercontent.com/docs/securesc/AAAAAAAAAAAAAAAAAAAA/BBBBBBBBBBBBBBBBBBB/１1234567890/1234567890/1234567890/CCCCCCCCCCCCCCCCCCC?nonce=DDDDDDDDD&user=0987654321&hash=EEEEEEEEEEEEEEEEEE

(AAAAAや123456～は実際は英数字や数字羅列）

一度リダイレクト先のURLにアクセスすると、その後は全画像が表示される

　複数の画像が張り付いているHTMLなんですが、１つのファイルを一度リダイレクト先の画像をブラウザから表示すると、すべての画像が、何もなかったかのように正常に表示されました。
URLから推測するに、キャッシュサーバなのかな？

予想どおり、翌日になったら元通り

　予想していたとおり、翌日になったら元通り表示されなくなっていました。
　IMGタグに最初から、リダイレクト先のURLを仕込んでおくのも結果ダメ。

対策

• 画像ファイルだけは、他のサーバに置く　
  　これは想像に容易いですね。でもGAS単体でやることに意義があると思っているんですよ。

• iPhoneは非対応にする
  　この選択ができるなら、そんな楽なことはないです。。。

• 画像ファイルをダウンロードできるようにGASを作る（2019.10.24　解決済み）
  　このへんを学んでやってみる価値はありそう。
  でも呼び出し制限あたりが気になっちゃう。

解決

• 2019.10.24 追記

Thanx : @tanaike
GAS側で、tokenを含めたURLを作成するファンクションを用意する。

GAS

/**
 * GDriveのファイルのURLを得る.
 * @param id ファイルID
 * @return return URL
 */
function getFileUrl(id){
  var url = DriveApp.getFileById(id).getDownloadUrl();
  return url + '&access_token=' + ScriptApp.getOAuthToken();
}

HTMLから、このファンクションをドキュメントIDを引数に渡して、URL変換要請することで、IMGタグで表示できるURLが作成できる。

html.

<img src="<?!=getFileUrl('XXXXX_ドキュメントID_XXXXX')?>" 

感想

　GAS、GDrive だけでいろいろやろうとすると、通常のHTMLやJavascriptの知識ではうまくいかないことがたくさんでてきますね。
　でも、１つ１つ紐解いていくと、いろいろな技術に触れることができるし、アイディアにもつながります。
　本当にいい時代になったと思います。。。。