はじめに
Google Sheets を組織データベースとして活用し、Google Apps Script（GAS）の HTML サービスを用いて動的な組織図を生成・配信する方法について、以前の記事で紹介した。
しかし、Google Drive に保存した画像を d3-org-chart に描画する方法については触れていなかったため、本記事で補足する。
Google Drive 上の画像は iframe で埋め込むのが推奨されている
2023年10月、Google はサードパーティ Cookie の取り扱い変更に関するアップデートを発表し、Google Drive の埋め込みコンテンツにも影響が出るようになった。
この変更により、画像やファイルをウェブに埋め込む場合は、「Embed item...」で取得した iframe を使用することが推奨されている。
img 要素で直接画像を表示したい場合
一方で、たとえば d3-org-chart を用いた組織図のノードに画像を表示したい場合などは、iframe を使うことができない。
このような場合でも、img 要素の src 属性に直接指定可能な代替 URL を利用すれば、Google Drive 上の画像を読み込むことができる。
以下の表は、各 URL 形式とその挙動を比較したものである。
| 種類 | URL 形式 | 挙動 |
|---|---|---|
| 共有用の URL | https://drive.google.com/open?id=<画像のID> |
プレビュー用の Web ページが返され、画像としては使用できない |
| 旧来の取得用 URL | https://drive.google.com/uc?export=view&id=<画像のID> |
画像ページは開けるが、img 要素では読み込みが拒否される |
| 取得可能な URL(1) | https://drive.google.com/thumbnail?id=<画像のID> |
画像そのものが返され、img 要素で表示可能 |
| 取得可能な URL(2) | https://lh3.googleusercontent.com/d/<画像のID> |
同上。画像が直接返され、埋め込み可能 |
これらの URL を利用することで、d3-org-chart のノード内に画像を埋め込むことができる。ただし、いずれも Google が公式に提供している API ではないため、将来的に利用できなくなるリスクがあることに注意してほしい。