サイト名

GASで画像を自在に挿入！セルからドキュメントまで完全ガイド

GASでスプレッドシートに画像が挿入できるって聞きましたけど、どうやってやるのか全然わからなくて…。
猫男
猫男
catman
catman
任せてくれ。GASで画像挿入について、catmanがすべて教えてやるさ。まずは、セルに画像を挿入する方法から始めよう。

GASを使ってセルに画像を挿入する

スプレッドシートのセルに画像を埋め込むには、GASを活用すると便利だ。

画像をセルに挿入する手順

まず、スプレッドシートの特定のセルに画像を挿入する方法を示そう。


function insertImageInCell() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const url = "https://example.com/image.jpg";
  const blob = UrlFetchApp.fetch(url).getBlob();
  sheet.insertImage(blob, 2, 2); // B2セルに挿入
}

これはURLから画像を取得してセルに挿入するコードだ。

SpreadsheetApp.getActiveSpreadsheet().getActiveSheet() でアクティブなスプレッドシートのシートを取得する。

画像のURLを指定し、UrlFetchApp.fetch() でその画像を取得する。

insertImage メソッドを用いて、指定したセルに画像を挿入する。

こんな簡単に画像がセルに入れられるんですね！もっと他の方法も教えてください！
猫男
猫男
catman
catman
次は、Googleドライブの画像を使ってみよう。

GASでドライブから画像を挿入する

Googleドライブに保存した画像をGASを用いて挿入する方法もある。

ドライブから画像を取得する手順

ドライブ内の画像を特定するには、ファイルIDを使うとよい。


function insertImageFromDrive() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const fileId = "your-file-id-here";
  const file = DriveApp.getFileById(fileId);
  const blob = file.getBlob();
  sheet.insertImage(blob, 3, 3); // C3セルに挿入
}

DriveApp.getFileById() は特定のファイルをファイルIDで取得するメソッドだ。

取得したファイルからBlobを得て、insertImageを用いてスプレッドシートに挿入する。

ドライブの画像もスムーズに使えるんですね！次はドキュメントへの画像挿入を知りたいです。
猫男
猫男
catman
catman
了解だ。GASでドキュメントに画像を挿入する方法を説明しよう。

GASでドキュメントに画像を挿入する

Googleドキュメントに画像を挿入するケースを考えてみよう。

ドキュメントに画像を挿入する手順

画像をドキュメントに追加するには、いくつかのステップがある。


function insertImageInDocument() {
  const doc = DocumentApp.openById("your-document-id-here");
  const body = doc.getBody();
  const url = "https://example.com/image.jpg";
  const blob = UrlFetchApp.fetch(url).getBlob();
  body.appendImage(blob);
}

DocumentApp.openById() でGoogleドキュメントを開き、getBody() でドキュメントのボディを取得する。

取得したBlobを用いて、appendImageメソッドでボディ末尾に画像を追加する。

これでドキュメントが一気に豪華になりますね！まだ方法がありますか？
猫男
猫男
catman
catman
じゃあ最後に、HTMLで画像を挿入する方法を見てみよう。

GASでHTMLに画像を挿入する

GASを使ってHTML出力に画像を取り込むこともできる。

HTMLに画像を挿入する手順

HTMLサービスを使って画像を埋め込むコードだ。


function showImageInHtml() {
  const url = "https://example.com/image.jpg";
  const html = "";

  const userInterface = HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Image Display");
}

HtmlService.createHtmlOutput() でHTML出力を作成する。

img タグを使いsrc属性に画像URLをセットすることで表示させる。

練習問題

  1. Googleドライブに保存された画像をスプレッドシートのA1セルに挿入するコードを書いてみよう。
  2. 既存のGoogleドキュメントに画像を指定したURLから挿入する方法を試してみよう。

  

解答・解説


function insertImageInSpreadsheet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const fileId = "your-file-id-here"; // ファイルIDを正しく設定
  const file = DriveApp.getFileById(fileId);
  const blob = file.getBlob();
  sheet.insertImage(blob, 1, 1); // A1セルに挿入
}

DriveApp.getFileById(fileId)でファイルを取得し、getBlob()を使ってその画像のBlobを取得する。

insertImageメソッドは指定したセルにBlobを挿入するために使用される。


function appendImageToDocument() {
  const doc = DocumentApp.openById("your-document-id-here"); // ドキュメントIDを正しく設定
  const body = doc.getBody();
  const url = "https://example.com/image.jpg";
  const blob = UrlFetchApp.fetch(url).getBlob();
  body.appendImage(blob);
}

DocumentApp.openById(“your-document-id-here”)を使用して、ドキュメントを開く。

appendImageメソッドを使ってドキュメント内に画像を挿入する。

関連記事