GASでスプレッドシートの
セルに画像を挿入する方法

商品一覧にサムネイルを並べたり、帳票にロゴを差し込んだり。GASなら画像の挿入もコードで自動化できます。 セルの上に置くinsertImageと、セルの中に埋め込むCellImageの違いから一括挿入まで、動くコードで解説します。

|対象: GAS / スプレッドシート / 画像挿入

Table of Contents

セルに画像を入れる2つの方式の違い

GASでの画像挿入には、大きく分けて2つの方式があります。この違いを知らずに実装すると、 「並べ替えたら画像がずれた」といったトラブルにつながります。まずここを押さえましょう。

セルの上に置く(浮いた画像)

sheet.insertImage()

セルの上に重ねて配置する方式。行の高さや並べ替えには追従せず、位置は固定されます。ロゴ・バナー・図版向き。

セルの中に入れる(セル内画像)

newCellImage() / IMAGE関数

セルの値として画像を入れる方式。行の並べ替えやフィルタに一緒に追従します。商品サムネイルの一覧など行とセットの画像向き。

URLから画像をセルの上に挿入する

まずは基本のinsertImage()(画像をセルの上に配置するメソッド)です。引数は「URL・列番号・行番号」の順で、 戻り値の画像オブジェクトに対してsetWidth()などでサイズを指定できます。URLは認証なしで直接開ける公開URLである必要があります。

function insertImageFromUrl() {
  const sheet = SpreadsheetApp.getActive().getSheetByName("商品");
  const url = "https://example.com/images/item01.png";

  // insertImage(URL, 列番号, 行番号) → 第2引数=列, 第3引数=行
  // この例ではB2セルの左上に画像を配置する
  const image = sheet.insertImage(url, 2, 2);

  // 表示サイズをピクセルで指定
  image.setWidth(120).setHeight(120);
}

Googleドライブの画像を挿入する

社内の画像はGoogleドライブに置いてあることが多いはずです。その場合はURLではなくBlob(バイナリデータの入れ物)を渡すのが確実です。共有設定に左右されず、スクリプトの権限で画像を読み込めます。

function insertImageFromDrive() {
  const sheet = SpreadsheetApp.getActive().getSheetByName("商品");

  // Googleドライブ上のファイルをBlob(バイナリデータの入れ物)として取得
  const file = DriveApp.getFilesByName("item01.png").next();
  const blob = file.getBlob();

  // URLの代わりにBlobを渡すと、共有設定に依存せず確実に貼り付けられる
  sheet.insertImage(blob, 2, 2);
}

getFilesByName()は同名ファイルが複数あると先頭以外を取りこぼします。確実に特定したいときはファイルIDからDriveApp.getFileById()で取得しましょう。

セルの中に埋め込む画像(CellImage・IMAGE関数)

行の並べ替えやフィルタに画像も一緒についてきてほしいなら、セルの中身として画像を入れます。newCellImage()でCellImageを組み立て、通常の値と同じようにsetValue()でセルに入れるだけです。

function setCellImage() {
  const sheet = SpreadsheetApp.getActive().getSheetByName("商品");
  const url = "https://example.com/images/item01.png";

  // newCellImage() で「セルの中身」になる画像を組み立てる
  const cellImage = SpreadsheetApp.newCellImage()
    .setSourceUrl(url)
    .setAltTextTitle("商品サムネイル") // 読み上げ・代替テキスト
    .build();

  // setValue で通常の値と同じようにセルへ入れる(並べ替えに追従する)
  sheet.getRange("B2").setValue(cellImage);
}

もっと手軽に済ませたいなら、スプレッドシート標準のIMAGE関数を数式としてセットする方法もあります。第2引数の4は「高さと幅をピクセルで指定するモード」です。

function setImageFormula() {
  const sheet = SpreadsheetApp.getActive().getSheetByName("商品");
  const url = "https://example.com/images/item01.png";

  // =IMAGE(URL, モード, 高さ, 幅)
  // モード4 = 高さ・幅をピクセルで指定する
  sheet.getRange("B2").setFormula('=IMAGE("' + url + '", 4, 80, 80)');
}

画像のサイズと位置を調整する

insertImage()で置いた浮いた画像は、基準セル(アンカー)とそこからのズレで位置が決まります。setAnchorCell()で基準セルを変え、setAnchorCellXOffset()setAnchorCellYOffset()でピクセル単位の微調整ができます。

function placeImageOnCell() {
  const sheet = SpreadsheetApp.getActive().getSheetByName("商品");
  const url = "https://example.com/images/logo.png";

  // いったんA1に挿入
  const image = sheet.insertImage(url, 1, 1);

  // 基準セルを変更(D3の位置へ移動)
  image.setAnchorCell(sheet.getRange("D3"));

  // 基準セルからのズレ(ピクセル)で微調整
  image.setAnchorCellXOffset(5);
  image.setAnchorCellYOffset(5);

  image.setWidth(200).setHeight(60);
}

URL一覧から画像を一括挿入する

実務でよくあるのが「商品名と画像URLの一覧から、サムネイルを一気に並べたい」というケースです。getValues()でURLの列をまとめて取得し、行ごとにCellImageを作って書き込みます。並べ替えにも追従するよう、ここではセル内画像を使います。

function insertImagesFromList() {
  const sheet = SpreadsheetApp.getActive().getSheetByName("商品");
  const lastRow = sheet.getLastRow();
  if (lastRow < 2) return;

  // A列=商品名, B列=画像URL, C列に画像を入れる想定(2行目から)
  const urls = sheet.getRange(2, 2, lastRow - 1, 1).getValues();

  urls.forEach((row, i) => {
    const url = String(row[0]).trim();
    if (!url) return; // 空欄はスキップ

    const rowNumber = i + 2; // ヘッダー分+1
    const cellImage = SpreadsheetApp.newCellImage()
      .setSourceUrl(url)
      .build();

    sheet.getRange(rowNumber, 3).setValue(cellImage); // C列に配置
  });
}

挿入済み画像の取得・削除と注意点

作り直すときは、まず古い画像を消してから入れ直すのが安全です。浮いた画像はgetImages()で一覧を取り、remove()で削除できます。

function removeAllOverGridImages() {
  const sheet = SpreadsheetApp.getActive().getSheetByName("商品");

  // セルの上に「浮いている」画像をすべて取得
  const images = sheet.getImages();
  Logger.log("削除対象の画像数: " + images.length);

  images.forEach((image) => image.remove());
}

1. セル内画像はclearContentで消す

getImages()で取得できるのは浮いた画像だけです。セルの中に入れた画像は値なので、対象範囲にclearContent()を実行して消します。

2. 大量挿入は実行時間制限に注意

画像挿入は1件ずつの書き込みになりやすく、数百件を超えるとGASの6分制限に達することがあります。件数が多いときは処理を分割しましょう。

3. 行の高さを画像に合わせる

セル内画像はセルの大きさに合わせて縮小表示されます。サムネイルを見やすくするにはsetRowHeight()で行の高さを広げておくのがおすすめです。

まとめ

GASでの画像挿入は、「セルの上に置くinsertImage」と「セルの中に入れるnewCellImage」を用途で使い分けるのがポイントです。並べ替えに追従させたい商品サムネイルはセル内画像、位置を固定したいロゴは浮いた画像を選びましょう。 URL一覧からの一括挿入と定期実行を組み合わせれば、画像付きの一覧表もコードで自動更新できます。

よくある質問

insertImageはセルの上に「浮いた」画像を置くため、行の高さや並べ替えに追従しません。一方、newCellImageやIMAGE関数はセルの中身として画像を入れるので、行の並べ替えやフィルタに一緒についてきます。商品一覧のように行とセットで動かしたい画像はセル内画像、ロゴやバナーのように固定配置したい画像はinsertImageが向いています。

画像URLが認証なしで直接アクセスできる公開URLである必要があります。ログインが必要なページや、HTMLページのURL(画像そのものではないURL)を指定すると表示されません。Googleドライブの画像を使う場合は共有設定を「リンクを知っている全員」にするか、DriveAppでBlobを取得してinsertImageに渡す方法が確実です。

できます。insertImageが返すオブジェクトに対してsetWidth(px)・setHeight(px)を呼べば表示サイズを変更できます。IMAGE関数の場合は第2引数に4(ピクセル指定モード)を渡し、第3・第4引数で高さと幅を指定します。newCellImageで作るセル内画像は行の高さに合わせて自動で拡大縮小されます。

できます。getValuesでURLの列をまとめて取得し、行ごとにnewCellImageでCellImageを作ってsetValueで対象セルに書き込むループを組めば一括挿入できます。件数が多い場合は6分の実行時間制限に注意し、必要なら処理を分割してください。

insertImageで置いた浮いた画像は、sheet.getImages()で一覧を取得し、それぞれのremove()で削除できます。セルの中身として入れた画像は、対象範囲にclearContent()や空文字のsetValueを実行すれば消えます。誤削除を防ぐため、実行前にシートのコピーを取っておくと安全です。

GAS開発・業務Webシステムを
相談する。

画像付きの商品一覧や帳票の自動生成など、スプレッドシートを使った業務自動化のGAS開発をご相談いただけます。

GAS Webシステム開発を見る