No.1151

● (No.1151) Google Drive にある画像を iframeタグで表示する方法 (2024年2月23日) 　----------------------------------------------------------------------------- [Google Drive にある画像を iframeタグで表示する方法] 2024年1月2日に iframeタグによる新方法に仕様変更。Yahoo chiebukuro [Google Drive にある画像を imgタグで表示する方法] 2023年12月までの imgタグによる旧方法。Qiita 1. 画像ファイルを Google Drive にアップロード 2. ファイル右クリック → 共有 → リンクを取得 3. 左下の [全員] をクリック → リンクをコピー 4. htmlタグに次を一行で記載。(fileID:xxxxxxxxxx) <a href="https://drive.google.com/file/d/xxxxxxxxxx/view?usp=sharing"><img src="https://drive.google.com/uc?export=view&id=xxxxxxxxxx#dummy.jpg&usp=sharing" width="300" border="0" /></a> or <a href="https://drive.google.com/uc?export=view&id=xxxxxxxxxx#dummy.jpg&usp=sharing"><img src="https://drive.google.com/uc?export=view&id=xxxxxxxxxx#dummy.jpg&usp=sharing" width="300" border="0" /></a> or <a href="https://drive.google.com/uc?id=xxxxxxxxxx#dummy.jpg&export=download"><img src="https://drive.google.com/uc?id=xxxxxxxxxx#dummy.jpg&export=download" width="300" border="0" /></a> or <iframe src="https://drive.google.com/file/d/xxxxxxxxxx/preview#dummy.jpg" width="300" height="168" frameborder="0"></iframe>

Example (Photo, 8 Apr 2021) <a href="https://drive.google.com/file/d/1D48cbvGbaauNLUsyIev6zUDqJG5DLwbB/view?usp=sharing"><img src="https://drive.google.com/uc?export=view&id=1D48cbvGbaauNLUsyIev6zUDqJG5DLwbB#10408ang.jpg&usp=sharing" width="300" border="0" /></a> or <iframe src="https://drive.google.com/file/d/1D48cbvGbaauNLUsyIev6zUDqJG5DLwbB/preview#10408ang.jpg" width="300" height="168" frameborder="0"></iframe>

Example (Site, 5 Feb 2023) <a href="http://www.ne.jp/asahi/hamradio/je9pel/satslisd.htm"><img src="https://drive.google.com/uc?export=view&id=1R6ctF8dcj5c5WNj1slYYQdd9HHmZC20f#30205drk.png&usp=sharing" width="300" border="0" /></a> or <iframe src="https://drive.google.com/file/d/1R6ctF8dcj5c5WNj1slYYQdd9HHmZC20f/preview#30205drk.png" width="300" height="168" frameborder="0"></iframe>

Example (PDF, 4 Oct 2021)

Example (Photo, 24 Sep 2021)

[Google Drive imagesキャッシュ] (13 May 2023) 最近、リンクを張ってある Google Drive上の全画像が自局PC画面上に表示されないことが度々起こるようになった。理由はわからない。そのような時は、次の長い "……=sharing" までのURLをブラウザの検索欄にコピペ(単にクリックでも可か?) して、Google Drive へ直接パスを物理的に通して MyImage(熱帯魚写真) を、いったん表示させてから元のサイトに戻り、再読み込みすると、見えていなかった画像が全て見えるようになるから不思議だ。他サイトや、Dropbox に保存した画像にはこのような現象は生じない。他局PC上で自局サイトにアクセスして画像が表示されないような時には、同じように試してみるとよいかもしれない。 https://drive.google.com/file/d/1D48cbvGbaauNLUsyIev6zUDqJG5DLwbB/view?usp=sharing or FireFox cache clear: Settings - Privacy&Security - Cookies&SiteData - ClearData - ClearNow [Google Chrome と Google Drive の組合せ] (17 Jun 2023) この組み合わせは、画像表示が最強であることがわかった。 Microsoft_Edge や Firefox_Mozilla では、Google Drive に保存してある画像ファイルの読み込みに時間が掛かったり、また画像ファイル全体がブラウザのディスプレイ上に表示されないという現象が度々生じる。その点、表題の Google どうしの組み合わせはそのようなこともなく、画像表示がとてもスムーズで、ストレスがない。 [Google Drive にある画像を iframeタグで表示する方法] (14 Jan 2024) Google Drive に保存した画像ファイルを、img srcタグでブラウザ上に縮小表示させる今までの記述方法では表示できなくなったようなので、iframeタグで縮小表示させる実験を継続中。次の画像は、小・中・大の三種類を表示させている。 Google の仕様が、2024年1月2日に変更になったことが判明。Yahoo wisdom bag (ex.) <iframe src="https://drive.google.com/file/d/1D48cbvGbaauNLUsyIev6zUDqJG5DLwbB/preview#10408ang.jpg" width="100" height="56" frameborder="0"></iframe> [YouTube にある動画を embedding する方法] (15 Jan 2024) <iframe src="https://www.youtube.com/embed/vsF0Muk_az8?rel=0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen width="400" height="225" frameborder="0"></iframe> <iframe width="400" height="225" src="https://www.youtube.com/embed/vsF0Muk_az8?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> [Google Drive にある動画を videoタグで表示する方法] (17 Jan 2024) 他サイトにある動画の場合 <video controls muted width="400" height="225"><source src="https://www.static.tu.berlin/fileadmin/www/10002275/News/dorbit_scv015.mp4" type="video/mp4"></video>

(C)TUB Asahi-netサーバーにある動画の場合 <video controls muted width="400" height="225"><source src="https://www.ne.jp/asahi/hamradio/je9pel/10713y12.mp4" type="video/mp4"></video> <video src="https://www.ne.jp/asahi/hamradio/je9pel/10713y12.mp4" controls muted width="400" height="225"></video>

(実験成功) Google Drive にある動画の場合 <video controls muted width="400" height="225"><source src="https://drive.google.com/uc?export=download&id=1V3low0-yx4LceAr5FkmFEptnl4V0faeV#10713y12.mp4" type="video/mp4"></video>

(実験途中) [Google Drive にある動画を iframeタグで表示する方法] (21 Feb 2024) Right-click on image -> Open application -> Preview -> Open new window on Other operations -> Embed item -> Copy and Paste <iframe src="https://drive.google.com/file/d/1V3low0-yx4LceAr5FkmFEptnl4V0faeV/preview#10713y12.mp4" width="400" height="225" allow="autoplay" frameborder="0"></iframe> <iframe src="https://drive.google.com/file/d/1V3low0-yx4LceAr5FkmFEptnl4V0faeV/preview#10713y12.mp4" width="400" height="225" hspace="2" vspace="2" frameborder="0"></iframe> (実験成功) https://mteam.jp/column/10229/ https://webliker.info/html/52510/ https://workspace-hack.com/drive-video-tag/ https://loki-creative.com/note/wp_googledrive/