GASでスプレッドシートの
セルに画像を挿入する方法
商品一覧にサムネイルを並べたり、帳票にロゴを差し込んだり。GASなら画像の挿入もコードで自動化できます。 セルの上に置くinsertImageと、セルの中に埋め込むCellImageの違いから一括挿入まで、動くコードで解説します。
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を実行すれば消えます。誤削除を防ぐため、実行前にシートのコピーを取っておくと安全です。