質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google ドライブ

Google ドライブは、Google社が提供するオンラインストレージサービス。オンラインストレージ上に、画像や動画、テキスト、Word/PDFのファイルなどさまざまなファイル保存することができます。また、他のユーザーと共有することも可能です。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Q&A

2回答

2691閲覧

Googleドライブ上の画像をGASで作成したhtmlページで表示しようとするとPC版Chromeでしか表示されない

sonu

総合スコア19

Google ドライブ

Google ドライブは、Google社が提供するオンラインストレージサービス。オンラインストレージ上に、画像や動画、テキスト、Word/PDFのファイルなどさまざまなファイル保存することができます。また、他のユーザーと共有することも可能です。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

0グッド

0クリップ

投稿2020/02/28 06:18

リンク内容
上の記事を参考にGoogleドライブ上にある画像をgasで作成したhtmlページに表示しようと試みましたが、Mac版Chrome、Windows10版Chromeでは正常に表示されるものの、その他のブラウザでは表示されなくて困っています。

下記が私の書いたコードです。

GoogleAppsScript

1function doGet() { 2 return HtmlService.createTemplateFromFile('index').evaluate(); 3} 4 5function getImageUrls() { 6 const IMAGES_FOLDER_ID = {画像が格納されているフォルダのID} 7 const urlToDisplay = 'http://drive.google.com/uc?export=view&id='; 8 const imageFiles = DriveApp.getFolderById(IMAGES_FOLDER_ID).getFiles(); 9 const imageFileUrlsArray = []; 10 11 while (imageFiles.hasNext()) { 12 const imageFile = imageFiles.next(); 13 const regExp = /https://drive.google.com/file/d/(.+)//; 14 const imageFileId = regExp.exec(imageFile.getUrl()); 15 imageFileUrlsArray.push(urlToDisplay + imageFileId[1]); 16 } 17 18 return imageFileUrlsArray; 19}

html

1<!DOCTYPE html> 2<html> 3<head> 4 <base target="_top" /> 5</head> 6<body> 7 <ul></ul> 8 9 <script> 10 google.script.run. 11 withSuccessHandler(function(imageUrls) { 12 for (let i = 0; i < imageUrls.length; i++) { 13 const ul = document.querySelector('ul'); 14 const li = document.createElement('li'); 15 const img = new Image(); 16 img.src = imageUrls[i]; 17 img.width = 256; 18 img.height = 256; 19 li.appendChild(img); 20 ul.appendChild(li); 21 } 22 }) 23 .withFailureHandler(function(result) { 24 alert('画像の取得に失敗しました', result); 25 }) 26 .getImagesUrls(); 27 </script> 28</body> 29</html>

どなたかご教授していただけないでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

papinianus

2020/02/28 08:38

表示されないときの具体的な状態とwebアプリケーションとして公開したときの設定を教えてください
sonu

2020/02/28 10:58

説明不足で申し訳ありません。表示されない際の状態は、imgタグのsrcが間違っている時に表示される時の画面です。ですが、デベロッパーツールを開いて、ソースコード上のsrcをURL欄にコピー&ペーストすると画像が表示されます。srcに表示されているコードはhttp://drive.google.com/uc?export=view&id={画像ID}となっており、拡張子がついていない状態です。尚、画像は全てjpegファイルで試しています。「ウェブアプリケーションとして導入...」の時の設定は誰として公開するか、誰が閲覧できるか、は全て試しましたが、やはり表示されません。
guest

回答2

0

根本的な解決にはなりませんが、画像をbase64でhtml上に書き込んでしまえばいかがでしょうか?
そのまま書き込むとhtmlファイルがえらい醜いことになるので、styleタグ内に画像を埋めて最後にでも掘り込んでおけば、数個程度なら問題無いと思います。

html

1<body> 2<p class="class名"></p> 3</body> 4<style> 5.class{ 6 background-image:url("data:image/jpg;base64,画像情報"); 7 background-repeat:no-repeat; 8 background-size:contain; 9 width: 任意px; 10 height: 任意px; 11} 12</style>

投稿2020/03/11 06:21

hiroshi0240

総合スコア640

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

  • 末尾に解明できていない事項があり、質問者様環境で改善するか未知数です。

  • 再現性について

再現できました(ただし、htmlに書いてある関数名とgsに書いてある関数名が異なるのを直した場合のみ)。
しかし、chrome であることだけでなく、そのブラウザでドライブのオーナーにgoogleログインしている状況でないと chrome でも図が描画されませんでした。

  • 対応方法

ドライブで画像の共有を行い、共有リンクの取得をする(リンクを知っている全員が閲覧可とする)ことで、Firefox でも描画されました。

  • 未解明点

デベロッパーツールを開いて、ソースコード上のsrcをURL欄にコピー&ペーストすると画像が表示されます

が解明できていません。当方では図が描画されていない Firefox でソース上の URL をアドレスにコピペしても、403 エラーになるのみで画像は表示されませんでした。ですので、上記対応方法では対応できない可能性があります。

投稿2020/02/28 13:12

papinianus

総合スコア12705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sonu

2020/02/29 03:51

回答ありがとうございます。共有リンクの設定を見直すことで無事Firefoxでも描画されました。 しかし、スマートフォンのブラウザではやはり画像が表示されません。解決方法はないのでしょうか?
papinianus

2020/03/05 13:43

表示されますね。少なくとも android のブラウザでは。 devで終わるアドレスではなくexecで終わるアドレスで試してますよね。 修正後、新しいバージョンに更新してますか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問