【コピペで使える】GASでスプレッドシートに画像を挿入してみる

GASでスプレッドシートに画像を挿入してみる

スプレッドシートで資料などを作る際、画像を貼り付ける機会もあるかと思います。

手動で画像を挿入する一般的なやり方は

STEP

画像を挿入したいセルを選択

STEP

上部メニューの挿入から画像を選択

STEP

セル内 / セル上に画像を挿入を選択

STEP

挿入する画像を選択

という大変長いプロセスがあってやっと画像が貼り付けられます。

『セル内に画像を挿入』であればセルのサイズで大きさが調整されますのでサイズや位置調整が比較的容易ですが、『セル上に画像を挿入』にするとサイズや位置調整が少し面倒ということもあります。

そこで今回はinsertImageというメソッドを使って、

今回紹介するやり方をマスターすると、例えば建設会社など、報告書の作成などで大量の画像を貼り付けする必要がある業務も非常に効率的に作業ができるようになります。

スプレッドシートに画像を挿入するコード

画像の指定方法はURLとBlobデータの2種類ある

コードの挙動確認用のウェブアプリ

挙動の確認用にウェブアプリを作成しました。

うまくアクセスできないときはブラウザのシークレットモードでアクセスしてみてください。

使い方手順は下記の通りです。

STEP

出力セル位置を入力

• 列番号を入力
• 行番号を入力
• 横方向のオフセットを入力（0のままだとオフセットなし）
• 縦方向のオフセットを入力（0のままだとオフセットなし）

STEP

画像を選択

URLで挿入するバージョンとファイルを選択して挿入するバージョンがあります。

STEP

スプレッドシートに画像挿入

誰でも閲覧可能ですので、変な画像は挿入しないようにしてくださいね。
※ちなみに、画像は定期的に自動削除します。

insertImage(url, column, row)サンプルコード

引数に入れる値

• url（文字列） — 挿入したい画像ファイルのURL
• column（数値）— 列数
• row（数値）— 行数

サンプルコード

function insertImageWithURL1() {
  let ss = SpreadsheetApp.getActiveSheet();
  let sheet = ss.getSheets()[0];
  let url ="https://www.google.com/images/srpr/logo3w.png" ;
  let column = 1;
  let row = 1;
  sheet.insertImage(url, column, row); 
}

変数の説明

ss = 対象のスプレッドシートを取得しています。
sheet = 対象のシートを取得（上記のコードの場合はスプレッドシートの一番左にあるシート）
url = 挿入予定の画像URL
column = 挿入予定のセル列
row = 挿入予定のセル行

このコードでは、一番シンプルな画像挿入コードを準備しました。

対象のスプレッドシートを指定した上で、挿入したい画像のURLとその位置を設定するだけで画像の挿入が可能です。

挿入位置は指定したセルの左上の隅に画像の左上角が合わさるような仕様になっています。

画像のURLさえわかれば誰でも簡単に利用ができますが、自分で用意した画像を利用しない場合は著作権にご注意ください。

insertImage(url, column, row, offsetX, offsetY)サンプルコード

引数に入れる値

• url（文字列） — 挿入したい画像ファイルのURL
• column（数値）— 列数
• row（数値）— 行数
• offsetX（数値）— デフォルトの挿入位置から右方向に移動させたいピクセル数
• offsetY（数値）— デフォルトの挿入位置から下方向に移動させたいピクセル数

サンプルコード

function insertImageWithURL2() {
  let ss = SpreadsheetApp.getActiveSheet();
  let sheet = ss.getSheets()[0];
  let url ="https://www.google.com/images/srpr/logo3w.png" ;
  let column = 1;
  let row = 1;
  let offsetX = 100;
  let offsetY = 200;
  sheet.insertImage(url, column, row, offsetX, offsetY); 
}

変数の説明

ss = 対象のスプレッドシートを取得しています。
sheet = 対象のシートを取得（上記のコードの場合はスプレッドシートの一番左にあるシート）
url = 挿入予定の画像URL
column = 挿入予定のセル列
row = 挿入予定のセル行
offsetX = 右方向にオフセットさせたいピクセル数
offsetY = 下方向にオフセットさせたいピクセル数

先程のinsertImage(url, column, row)とほとんど同じですが、オフセットを設定しない場合、画像の出力位置はセルの左上が基準点になります。オフセットを設定すると基準点から右や下にピクセル単位で画像の挿入位置を調整することができます。

オフセットを駆使して出力位置の微調整を行いましょう。

insertImage(blobSource, column, row)サンプルコード

引数に入れる値

• blobSource（Blobデータ） — 挿入したい画像ファイル
• column（数値）— 列数
• row（数値）— 行数

サンプルコード

function insertImageWithBlob1() {
  let url ="https://www.google.com/images/srpr/logo3w.png" ;
  let response = UrlFetchApp.fetch(url);
  let blob = response.getBlob();
  let ss = SpreadsheetApp.getActiveSheet();
  let sheet = ss.getSheets()[0];
  let column = 1;
  let row = 1;
  sheet.insertImage(blob, column, row); 
}

変数の説明

url = 挿入予定の画像URL
response = プログラムで画像URLにアクセスリクエストした結果
blob = リクエスト結果からBlobデータを取得
ss = 対象のスプレッドシートを取得
sheet = 対象のシートを取得（上記のコードの場合はスプレッドシートの一番左にあるシート）
column = 挿入予定のセル列
row = 挿入予定のセル行

Blobデータから画像を挿入するスクリプトのサンプルになります。
今回のサンプルでは、URLリクエストからBlobデータを取得しましたが、ウェブアプリで行ったように、アップロードした画像から画像を挿入することもできます。

URLを使った画像アップロードのやり方では、インターネット上に画像が公開されていなければスプレッドシートに挿入することができないですが、Blobデータを利用した挿入方法では、インターネット上になくともローカルPC内のデータをウェブアプリを通して挿入することが簡単にできます。

ただし、こちらのメソッドには制約がありますので、この点については注意が必要です。

画像のファイルサイズやサイズ（大きさ）が上限をオーバーするとエラーが発生する

この点については注意が必要です。最近のスマホなどのカメラでは高解像度でファイルサイズも画像の大きさも上限値を超えてしまうものが多いですから、ウェブアプリからスマホで撮影した写真などを挿入する場合はアプリ側で画像のリサイズや圧縮処理などが必要な場面も少なくないと思います。

画像のアップロードについては、下記の記事でも圧縮処理などを行っていますので、参考にしてください。

あわせて読みたい

【WEBアプリ】GASで超高速画像アップローダーを作ってみた 今回のWEBアプリデモでは、HtmlServiceを活用して複数の画像ファイルをGoogleドライブに一括でアップロードするためのWEBアプリをご紹介します。最近の画像ファイルは端…

insertImage(blobSource, column, row, offsetX, offsetY)サンプルコード

引数に入れる値

• blobSource（Blobデータ） — 挿入したい画像ファイル
• column（数値）— 列数
• row（数値）— 行数
• offsetX（数値）— デフォルトの挿入位置から右方向に移動させたいピクセル数
• offsetY（数値）— デフォルトの挿入位置から下方向に移動させたいピクセル数

サンプルコード

function insertImageWithBlob2() {
  let url ="https://www.google.com/images/srpr/logo3w.png" ;
  let response = UrlFetchApp.fetch(url);
  let blob = response.getBlob();
  let ss = SpreadsheetApp.getActiveSheet();
  let sheet = ss.getSheets()[0];
  let column = 1;
  let row = 1;
  let offsetX = 100;
  let offsetY = 200;
  sheet.insertImage(blob, column, row, offsetX, offsetY); 
}

変数の説明

url = 挿入予定の画像URL
response = プログラムで画像URLにアクセスリクエストした結果
blob = リクエスト結果からBlobデータを取得
ss = 対象のスプレッドシートを取得
sheet = 対象のシートを取得（上記のコードの場合はスプレッドシートの一番左にあるシート）
column = 挿入予定のセル列
row = 挿入予定のセル行
offsetX = 右方向にオフセットさせたいピクセル数
offsetY = 下方向にオフセットさせたいピクセル数

こちらも今まで紹介下使い方とほとんど同じですね。

基準点がセルの左上の角になりますので、Blobデータを使って基準点からから微調整をした位置に画像を挿入することができます。

こちらも2MB以下のファイルサイズ、1024px以下の大きさを超えるファイルを挿入するとエラーになります

挿入した画像の高さと幅を調整する【参考】

今までのやり方では、画像を元のファイルサイズのまま挿入することになりますが、高さや幅を任意の大きさに変更したいというご要望もあると思います。

そんな時に使うのが次の2つのメソッドです。

こちらの2つのメソッドは非常に簡単に利用できます。

先程のコードを使ってサンプルコードを記述すると下記のようになります。

function insertImageWithBlob3() {
  let url ="https://www.google.com/images/srpr/logo3w.png" ;
  let response = UrlFetchApp.fetch(url);
  let blob = response.getBlob();
  let ss = SpreadsheetApp.getActiveSheet();
  let sheet = ss.getSheets()[0];
  let column = 1;
  let row = 1;
  sheet.insertImage(blob, column, row)
       .setHeight(190)
       .setWidth(550);
}

とても簡単にスプレッドシート上でリサイズができました。

注意点としては、1024px以上のファイルは挿入できません。（リサイズ処理の前にエラーになります）
縦横比は考慮してくれませんので、どちらか片方だけ設定すると歪な形になります。

まとめ

今回はスプレッドシートに画像を挿入するためのメソッドinsertImageについてご説明しました。

意外と簡単に画像挿入ができることがわかったかと思いますので、ぜひ活用していってください。

挿入方法はURLとBlobデータの2種類ありますので、状況に応じて使い分けができるといいですね。