GoogleスプレッドシートのIMAGE関数のGoogleドライブ画像の表示方法

IMAGE関数とは

画像のURLを指定することでセル内に画像を表示することができる関数。

例えばA1セルに「=IMAGE("https://iwb.jp/s/sample.jpg")」を入れたら指定したURLの画像がセル内に表示される。

「挿入 => 画像 => セル内に画像を挿入」と同じように表示されるがIMAGE関数を使用した方が画像の管理しやすいし変更も簡単になる。

IMAGE関数は他の関数と組み合わせができるので条件によって表示画像を変えることもできる。

IMAGE関数 サンプル

Googleドライブ画像の表示方法

IMAGE関数を使用するには画像のURLが必要。

つまり表示させる画像は事前にサーバーにアップする必要があるということになる。

しかし、Googleスプレッドシートに画像を表示させるのにFTPなどで画像ファイルをアップロードするのは手間がかかる。

Googleドライブであれば画像ファイルのアップロードが容易なのでGoogleドライブのリンクのURLを取得してIMAGE関数で表示させることができれば便利だ。

だが、IMAGE関数はGoogleドライブのリンクをそのまま入れても画像を表示させることはできない。

例えば以下はGoogleドライブにアップロードして「リンクを知っている全員」が閲覧できるようにしたURLだが、これをIMAGE関数に入れても画像は表示されない。

https://drive.google.com/file/d/16t19Szk7o4t2IrW-fdrEgCVbA1RzzkIw/view?usp=sharing

IMAGE関数で表示できるようDRIVE関数を作成

前述のリンクがIMAGE関数で表示されないのはGoogleドライブのリンクが以下のURLになっていないとIMAGE関数では読み込んで表示されないようになっていることが原因だ。

https://drive.google.com/uc?export=download&id=【id】

そのためGoogle Apps Scriptで上記のURLに変換するためのDRIVE関数を自作する必要がある。

DRIVE関数は引数からURLを取得してmatchでidを抽出してIMAGE関数で扱えるURLを返せばできる。

function DRIVE(url) {
  const fileId = url.match(/https:\/\/drive\.google\.com\/[\w\/]+([\w-]{33}).*/)[1]
  return "https://drive.google.com/uc?export=download&id=" + fileId
}

あとはIMAGE関数を使用する際にDRIVE関数も併用して以下のようにすればGoogleドライブにアップロードした画像をセル内に表示できるようになる。

=IMAGE(DRIVE("https://drive.google.com/file/d/16t19Szk7o4t2IrW-fdrEgCVbA1RzzkIw/view?usp=sharing"))

Googleドライブの画像をIMAGE関数とDRIVE関数で読み込むサンプル