teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

サンプルコード追加

2020/05/04 09:00

投稿

tanabee
tanabee

スコア96

answer CHANGED
@@ -6,4 +6,37 @@
6
6
  <img src="https://drive.google.com/uc?id=[ File ID ]&export=download" />
7
7
  ```
8
8
 
9
- とすると取得できそうですが、いかがでしょう?
9
+ とすると取得できそうですが、いかがでしょう?
10
+
11
+ 今後ダウンロード URL の仕様が変わることも考えられるので、 Drive のダウンロード URL を Apps Script で取得するのが良いかと思いますので、そちらのサンプルものせておきます。
12
+
13
+ ```JavaScript
14
+ const doGet = e => HtmlService.createTemplateFromFile('index').evaluate()
15
+
16
+ const getImageUrlById = id => DriveApp.getFileById(id).getDownloadUrl()
17
+ ```
18
+
19
+ ```HTML
20
+ <!DOCTYPE html>
21
+ <html>
22
+ <head>
23
+ <base target="_top">
24
+ </head>
25
+ <body>
26
+ <img id="image" />
27
+ <script>
28
+ const img = document.getElementById('image')
29
+ const fileId = ''// TODO: insert value
30
+ const url = google.script.run
31
+ .withSuccessHandler(url => {
32
+ img.src = url
33
+ })
34
+ .withFailureHandler(console.error)
35
+ .getImageUrlById(fileId)
36
+ </script>
37
+ </body>
38
+ </html>
39
+ ```
40
+
41
+ サンプルコードは github に上げていますのでよかったらそちらもご参考ください。
42
+ [https://github.com/tanabee/drive-image-view-sample](https://github.com/tanabee/drive-image-view-sample)

2

修正

2020/05/04 08:59

投稿

tanabee
tanabee

スコア96

answer CHANGED
@@ -1,4 +1,3 @@
1
- Google Drive の画像は img タグの src 属性に URL を挿入する想定では作られていないと思います。
2
1
  [ご参考にされた記事](https://qiita.com/TechnoKuRo/items/622c3dcc2ff3f7e09474#%E8%A7%A3%E6%B1%BA) の後の方にも書いていますが、 Google Apps Script で Google Drive の画像取得の関数を用意して、クライアントから呼んであげると環境に依存せずに表示できるはずです。
3
2
 
4
3
  ## 追記分

1

追記

2020/05/04 08:50

投稿

tanabee
tanabee

スコア96

answer CHANGED
@@ -1,2 +1,10 @@
1
1
  Google Drive の画像は img タグの src 属性に URL を挿入する想定では作られていないと思います。
2
- [ご参考にされた記事](https://qiita.com/TechnoKuRo/items/622c3dcc2ff3f7e09474#%E8%A7%A3%E6%B1%BA) の後の方にも書いていますが、 Google Apps Script で Google Drive の画像取得の関数を用意して、クライアントから呼んであげると環境に依存せずに表示できるはずです。
2
+ [ご参考にされた記事](https://qiita.com/TechnoKuRo/items/622c3dcc2ff3f7e09474#%E8%A7%A3%E6%B1%BA) の後の方にも書いていますが、 Google Apps Script で Google Drive の画像取得の関数を用意して、クライアントから呼んであげると環境に依存せずに表示できるはずです。
3
+
4
+ ## 追記分
5
+
6
+ ```
7
+ <img src="https://drive.google.com/uc?id=[ File ID ]&export=download" />
8
+ ```
9
+
10
+ とすると取得できそうですが、いかがでしょう?