【Google Apps Script】その13　スプレッドシート上のグラフを画像として保存やメール送信する

この記事は[Google Apps Scriptを実例交えて基礎からざっくり学ぶ Advent Calendar 2017](https://qiita.com/advent-calendar/2017/gas_beginner)　13日目の記事です。

本アドベントカレンダーは@rt_pの個人プロジェクトですが、筆者は[Ateam Brides Inc. Advent Calendar 2017](https://qiita.com/advent-calendar/2017/a-t-brides)にも参加しています。そちらでも出張版記事を書いているので、覗いていただけると嬉しいです。

# はじめに

今回はGASでグラフを描画し、それをGoogleドライブに画像として保存したり、メールに貼り付けて送付したいと思います。

![mail.png](https://qiita-image-store.s3.amazonaws.com/0/199678/d1a5099a-29b0-6193-30bf-0e3e1eecccd0.png)

# グラフを描画する

まずはデータを入力しましょう。
以下のような仮データをスプレッドシートにコピペします。

| 月 | 売上 |
|------------|--------|
| 2017-01-01 | 100000 |
| 2017-02-01 | 120000 |
| 2017-03-01 | 130000 |
| 2017-04-01 | 160000 |
| 2017-05-01 | 140000 |
| 2017-06-01 | 100000 |
| 2017-07-01 | 130000 |
| 2017-08-01 | 160000 |
| 2017-09-01 | 200000 |
| 2017-10-01 | 180000 |
| 2017-11-01 | 160000 |
| 2017-12-01 | 220000 |

![data.png](https://qiita-image-store.s3.amazonaws.com/0/199678/781670fe-6010-069c-dad5-0686547b53e2.png)

続いてスクリプトエディタを開き、以下コードに置き換えて実行します。
スクリプトエディタの開き方や*承認が必要です*メッセージが出た際の対処法が分からない場合は
[アドベントカレンダー1日目のHello, world!記事](https://qiita.com/rf_p/items/0535ec495df8f9d2b894)をご参照ください。

```javascript:graw_graph.gs
function myFunction() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var range = sheet.getDataRange();
  var chart = sheet.newChart().addRange(range).setPosition(1, 3, 0, 0).build();
  sheet.insertChart(chart);
}
```

> newChart() 

https://developers.google.com/apps-script/reference/spreadsheet/sheet#newchart

> setPosition(anchorRowPos, anchorColPos, offsetX, offsetY) 

https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart-builder#setpositionanchorrowpos-anchorcolpos-offsetx-offsety

> insertChart(chart) 

https://developers.google.com/apps-script/reference/spreadsheet/sheet#insertChart(EmbeddedChart)

sheetオブジェクトでチャートを作り、データ範囲を指定、グラフの表示位置（行1、列3）の指定。
最後にsheetオブジェクトのinsertChartでchartオブジェクトを渡しています。

実行すると、スプレッドシートにグラフが描画されるはずです。

![graph.png](https://qiita-image-store.s3.amazonaws.com/0/199678/c8a07ec5-ac75-937b-9b7a-5089ee1df779.png)

# Googleドライブにグラフを画像として保存

グラフをドライブに保存してみましょう。
Googleドライブで新規フォルダを作成します。名前は適当でOKです。

その後、コードを以下に置き換えて実行します。

```javascript:save_drive.gs
function myFunction() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var range = sheet.getDataRange();
  var chart = sheet.newChart().addRange(range).setPosition(1, 3, 0, 0).build();
  saveGraph(chart);
}

// ドライブに保存
function saveGraph(chart) {
  var folderId = 'YOUR_GOOGLE_DRIVE_FOLDER_ID'; // ここに保存先GoogleドライブID
  var today = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'YYYY-MM-dd');
  try {
    var graphImg = chart.getBlob(); // グラフを画像に変換
    var folder = DriveApp.getFolderById(folderId);
    folder.createFile(graphImg).setName(today);
  } catch (e) {
    Browser.msgBox(e);
  }
}
```

`var folderId = 'YOUR_GOOGLE_DRIVE_FOLDER_ID'; // ここに保存先GoogleドライブID`
スクリーンショットを保存したいGoogle DriveのIDを入れてください。
フォルダのURLですが、フォルダを開いてURLのfolders/以降の文字列です。
例）drive.google.com/drive/folders/hogehoge　→　hogehoge部分がフォルダID

![drive.png](https://qiita-image-store.s3.amazonaws.com/0/199678/696c0e37-8a7d-73d4-50f5-34433e9b8c78.png)

無事に保存できました。

# メールに添付する

メールの送り方は[昨日の記事](https://qiita.com/rf_p/items/ecce989c632ddf11fc96)を参考に。

コードを以下に書き換えて実行します。

`var mailto = 'YOUR_EMAIL'; // ここにあなたのメールアドレス（送信先）を入力`
をあなたのメールアドレスに置き換えるのを忘れないようにしてください。
**絶対に適当なメールアドレスを入れないでください。**実在するメールアドレスの場合、受信者に迷惑がかかります。

```javascript:send_graph.gs
function myFunction() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var range = sheet.getDataRange();
  var chart = sheet.newChart().addRange(range).setPosition(1, 3, 0, 0).build();
  sendMail(chart);
}

// メール送信
function sendMail(chart) {
  var today = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'YYYY-MM-dd');
  var mailto = 'YOUR_EMAIL'; // ここにあなたのメールアドレス（送信先）を入力
  var subject = today + 'レポート';
  var body = '';
  var htmlBody = 'グラフを添付します。ご査収ください。<img src="cid:graph" />';
  var graphImg = chart.getBlob(); // グラフを画像に変換

  try {
    GmailApp.sendEmail(mailto, subject, body, {htmlBody: htmlBody, inlineImages: {graph: graphImg}}); // メール送信
  } catch (e) {
    Browser.msgBox(e);
  }
}
```

> sendEmail(recipient, subject, body, options) 

https://developers.google.com/apps-script/reference/mail/mail-app#sendemailrecipient-subject-body-options

第4引数にオブジェクトを渡すことであらゆるオプションが使えます。詳しくは上記URL参照。

今回はhtmlBodyでhtml用テキストを渡し、inlineImagesで画像を渡しています。

すると以下のようなメールが届くはずです。

![mail.png](https://qiita-image-store.s3.amazonaws.com/0/199678/d1a5099a-29b0-6193-30bf-0e3e1eecccd0.png)

本日は以上です。

# おわりに

今回のものを使うことで、画像を自由に添付してメール送信ができます。
今回のアドベントカレンダーでは触れてはいませんが、Googleドライブのファイルを読み込むこともできるので、ドライブのファイル読み込み→メール添付→送信のようなこともできるはずです。

# 明日

[【Google Apps Script】その14　SEO用にタイトルとディスクリプションを収集する](https://qiita.com/rf_p/items/594d52f44b742489bbdc)
となります。
スプレッドシートとGASを使い、指定したURLのタイトル・ディスクリプション・H1タグの中身を一覧取得する仕組みを紹介します。

前の記事
[【Google Apps Script】その12　メール送信機能を作る](https://qiita.com/rf_p/items/ecce989c632ddf11fc96)
次の記事
[【Google Apps Script】その14　SEO用にタイトルとディスクリプションを収集する](https://qiita.com/rf_p/items/594d52f44b742489bbdc)