スプレッドシートのグラフをChatworkに画像として自動投稿する

# はじめに

ビジネスにおける予算管理、どうしていますか？
月次レポートや週次レポートならまだしも、日次のレポートを手作業で報告・共有するのって手間ですよね。
BIツールや社内システムで見える化しても、見る習慣が付いていないとメンバーによっては毎日追えていなかったりします。

そこで今回は、導入していれば毎日欠かさず読むであろうChatツール、Chatworkへの自動通知化を紹介します。
テキスト自動投稿だけだと状況が把握しづらいので、今回はスプレッドシートで作成した棒グラフを画像として投稿するシステムとしています。

もしChatworkじゃなくSlack等の別ツールでも、画像投稿APIが存在すればほぼ同じ作りでイケるはずです。

<img width="845" alt="完成図" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199678/bb27d9ec-bfc3-080b-2b92-504928b0bfcf.png">

# スプレッドシートを準備

まずはGoogle Driveでスプレッドシートを新規作成。
通知したいデータと、自動通知させたいグラフを作成します。例えばこんな感じ。

<img width="897" alt="スプレッドシートスクショ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199678/26b4a1a5-5f7d-4940-f61c-67f7f9296519.png">

# GASのコードを書く

ツール→スクリプトエディタを選びます。
そして以下コードを入力し保存してください。

```javascript
var TOKEN   = INSERT_YOUR_TOKEN;
var ROOM_ID = INSERT_YOUR_ROOM_ID;

function myFunction() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var charts = sheet.getCharts();
  var chartTitle = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/M/d') + '販売レポート';
  var fileName   = 'daily_report_' + Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy-MM-dd') + '.png';
  
  for (var i = 0; i < charts.length; i++) {
    var oldChart = charts[i];
    var newChart = oldChart.modify().setOption('title', chartTitle).build();
    sheet.updateChart(newChart); // タイトル変更したグラフをスプレッドシートに反映
    var newChartImage = newChart.getBlob().getAs('image/png').setName(fileName);
    try {
      postToChatworkFile(newChartImage);
    } catch (e) {
      Logger.log(e.getMessage());
    }
  }
}

function postToChatworkFile(file) {
  var payload = {
    'file': file,
    'message': '今日のレポートです'
  }
  var headers = {
    'X-ChatWorkToken': TOKEN
  }
  var options = {
    'method' : 'POST',
    'payload' : payload,
    'headers' : headers
  }
  var url = 'https://api.chatwork.com/v2/rooms/' + ROOM_ID + '/files';
  UrlFetchApp.fetch(url, options);
}

```

```javascript
var TOKEN   = INSERT_YOUR_TOKEN;
var ROOM_ID = INSERT_YOUR_ROOM_ID;
```
INSERT_YOUR_XXXX部分には、トークンと部屋IDをそれぞれ入れてください。
Chatwork APIトークンの取得、部屋IDの取得方法が分からない場合は[こちら](https://qiita.com/rf_p/items/3e20e4114a1182deb7bc#chatwork-api%E3%81%AE%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E5%8F%96%E5%BE%97)の過去記事をご参照ください。

入力し終えたらスクリプト実行。
実行時は承認ダイアログが出てくるので、許可の仕方が不明な場合は、こちらも[過去記事](https://qiita.com/rf_p/items/0535ec495df8f9d2b894#1msgbox%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fhello-world)をご参照ください。

うまくいくと、このように自動投稿されます。
<img width="845" alt="完成図" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199678/bb27d9ec-bfc3-080b-2b92-504928b0bfcf.png">

# 定期実行する

手動でスクリプト実行するとChatworkに通知されるようになりました。
あとは、これを毎日自動実行するだけ。

スクリプトエディタの時計マークをクリックすると、定期実行の設定ができます。
右下の「＋トリガーを追加」をクリックし、以下の通り設定すると、毎日9〜10時の間に1回実行されます。

<img width="738" alt="定期実行" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199678/15d1476f-80b9-e58d-f65f-e31ede720c80.png">

# 数値を毎日自動反映させる

このままのスプレッドシートだと毎日同じ数値だけが報告されるので意味無いですね。

スプレッドシートに自動的に数値を入力させるには、以前書いた以下記事を参照してください。
[【Google Apps Script】その15　Execution APIを使い、外部からAPIとして叩く](https://qiita.com/rf_p/items/2eeb5e5e863fb3f42860)

# 最後に

いかがでしょうか。
視覚的に分かりやすくなることで数値に対する苦手意識も減るかもしれません。
ぜひ試してみてください。

ちなみに今回利用した、ファイルを投稿するChatwork APIの公式ドキュメントはこちら。
http://developer.chatwork.com/ja/endpoint_rooms.html#POST-rooms-room_id-files