【GAS】スプレッドシートのグラフをSlackに送るボットを作るよ！

コロナウィルスの影響でリモートワーク・テレワークになり、Slackなどのチャットツールを使う機会が増えてきたんじゃないかなと思います。そんなわけで、Slackを使って便利なボットを作っていきたいなと思います。

今回紹介するのは、スプレッドシートにまとめているデータをグラフ化して、その画像をSlackで通知する、ということをしてみたいと思います。

はじめに

前回の記事ではスプレッドシートのグラフをLINEに投げるボットを作成しましたが、今回もベースは同じです。そのため、ソースコードもほぼ同じになります。

www.pnkts.net

今回のSlackのボットの種類はIncoming Webhooksを用いて投稿をしたいと思います。

スプレッドシートの用意

前回と同じく、以下のデータを利用します。

データに関しては以下の記事からお借りしております。

qiita.com

このデータからスプレッドシート上でグラフを作成すると以下のようになるかと思います。

プログラミング

では、早速プログラムを書いていきたいと思います。

グラフを作成してSlackのAPIを叩く前まで

まずは、ベースのところです。

function myFunction() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var range = sheet.getDataRange();
  var chart = sheet.newChart().addRange(range).setPosition(1, 3, 0, 0).build();
  sendGraph(chart);
}

function sendGraph(chart) {
  var folderId = '1-2b5GPDGERQxHKM2sfyvn5pQfyU-oGBN';  // Googleドライブの一時フォルダのID
  var to = 'U127bf2b17c727fd9c100d8bd899fdb61';  // LINEの送る先
  
  var today = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'YYYY-MM-dd');
  
  var graphImg = chart.getBlob(); // グラフを画像に変換
  var folder = DriveApp.getFolderById(folderId);
  var file = folder.createFile(graphImg)
  file.setName(today);
  
  // 公開設定する
  file.setSharing(DriveApp.Access.ANYONE, DriveApp.Permission.EDIT)

  pushImageToSlack(file.getDownloadUrl())
  
  DriveApp.getFolderById(folderId).removeFile(file) 
}

前回のプログラムとの差分としては、LINEのAPIを叩くメソッドを呼ぶpushImage()がpushImageToSlack()に変わり、引数が変更しているだけになっています。

それ以外は同じなので、前回の記事に書いたのをこちらにも書いておきますが、処理としては以下のようなことをしています。

1. newChart()メソッドを利用してグラフを作成して、そこから画像のデータの生成
2. 一時的にGoogleドライブ上に画像ファルを保存
3. 保存した画像を公開設定に変更してURLを取得する
4. 公開URLをLINEに送る
5. 最後に一時ファイルを削除する

SlackのAPIを叩いて画像を投稿する

次にSlackのAPI周りの処理になります。

function pushImageToSlack(src) {
  var url = 'https://hooks.slack.com/services/XXXXXXXXXXX/XXXXXXXXXXXXXXXXXXX'; // Webhook URLを入力する
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
  };
  
  var postData = {
    "text": "テストです",
    "attachments": [{
        "fields": [
            {
                "title": "グラフタイトル",
                "value": "value",
            }],
        "image_url": src
      }]
  };
  
  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };
  
  return UrlFetchApp.fetch(url, options);
}

以上でスクリプトの準備が完了です。

実行結果

では、myFunctionを実行してみましょう。

無事、Slack botがグラフの画像を投稿してくれました。

さいごに

さて、今回はスプレッドシートのデータをグラフ化してSlackに投稿するボットを作成しました。 例えば業務で毎日スプレッドシートにまとめたデータをグラフ化してSlackでチームのみんなに共有する、なんてことをしているのであれば、それはSlackボットにまかせて自動化して業務の効率化をしたほうがいいかもですね。