7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【GAS】スプレッドシートのセル範囲を画像にする【Spreadsheet】

Last updated at Posted at 2023-04-10

概要

スプレッドシートの情報を自動で取得して日報送信している。

その際、表をそのまま表としてメールに貼り付けたい。セルの文字や数字を引用することは簡単だけど表そのものを貼り付けることができない。

ググっても良い方法が見つからず、無理やりHTMLで表を記述し引用した情報を入れ込んでいた。

そういえば、表をそのまま表としてグラフ化する「表グラフ」なんてのがある。それを画像化すればいいじゃないかと思いついて試してみたのがこの記事。

基本形

まずは適当に表を用意して表グラフを作成、画像化してシートに貼り付けてみる。

とりあえず表はこんな感じ。
image.png

で、コードはこちら。

function imagerange() {

  //シートを指定
  var sheet = SpreadsheetApp.getActiveSheet();

  //表のヘッダーとデータ範囲を取得 ※1
  var header = sheet.getRange("A1:E1").getDisplayValues();
  var values = sheet.getRange("A2:E4").getDisplayValues();

  //データテーブルを作成
  var table = Charts.newDataTable();

  //ヘッダー行を入力
  for(var i=0; i<header[0].length; i++) {
    table.addColumn(Charts.ColumnType.STRING, header[0][i]);
  }

  //データ範囲を入力
  for(var j=0; j<values.length; j++) {
    table.addRow(values[j]);
  }

  //表グラフを作成&画像化
  const blob = Charts.newTableChart()
    .setDataTable(table.build())
    .setDimensions(400, 150)
    .build()
    .getBlob();

  //画像をシートに挿入
  sheet.insertImage(blob, 1, 1);
}

良い感じ。
image.png
Blobしているので、どのままドライブに保存もできちゃう。

※1について

getValues()だと日付や小数点などの書式が生きないので、書式ごと受け取れるgetDisplayValues()を使っている。
するとデータが文字列になるので、ヘッダー行のタイプもSTRINGにしている。

メールへ添付

作った画像を添付するだけなら
GmailApp.sendEmail(address,subject,body,{attachments: [blob]});
で挿入してやれば良い。

けど、せっかくなので本文中にインライン表示させたい。

コードはこんな感じ。
「表グラフを作成&画像化」部分まではさっきと同じなので省略。

  //メール本文を作成
  var body = "速報値です。<br><img src='cid:inlineImg'>";

  //オプションでHTML本文とインライン表示させる画像を指定
  var options = {htmlBody: body, inlineImages: {inlineImg: blob}}

  //メール送信
  GmailApp.sendEmail("test@gmail.com","速報値","",options);  

本文は直接HTMLで記述。
メール送信メソッドは(宛先, 表題, 本文, オプション)となっていて、HTMLで本文を記述する場合はオプション内に本文があるけど、そもそもの本文を設定しないと送信できないのでとりあえず空文字を入れている。

実行したメールはこんな感じ。
image.png
完璧!

おまけ

「表グラフを作成&画像化」部分で、交互の背景色や並び替え、行番号の表示などオプション指定できる。

例えば交互の背景色について、デフォルトはtrueになっているのでオプションでfalseにしてみる。コードはこんな感じ。

  const blob = Charts.newTableChart()
    .setDataTable(table.build())
    .setDimensions(400, 150)
    .setOption("alternatingRowStyle", false)
    .build()
    .getBlob();

実行結果がこちら。
image.png

他にもビジュアル設定が色々あるみたい。
GAS公式:表グラフのビジュアリゼーション

おしまい

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?