【GAS】スプレッドシートのグラフをLINEに送るボットを作るよ！ - ポンコツエンジニアのごじゃっぺ開発日記。

LINEのMessaging APIでいろんなボットを作ってきましたが、今回は、スプレッドシートにまとめているデータをグラフ化して、その画像をLINEに送信する、ということをしてみたいと思います。

f:id:ponkotsu0605:20200329145134p:plain

はじめに
スプレッドシートの用意
プログラミング
さいごに

はじめに

LINEのMessaging APIにの公式ドキュメントは以下になります。

developers.line.biz

これをGoogle Apps Scriptで扱うのは最初はハードルが高いかと思いますので、以前書いたこちらのMessaging APIの導入・チュートリアルの記事がありますので、こちらを参考にしてみてください。

www.pnkts.net

スプレッドシートの用意

今回使用するスプレッドシートは以下のようなシートにしました。

f:id:ponkotsu0605:20200329145937p:plain

こちらは、以下のQiitaの記事のをお借りしました。

qiita.com

テキトーなデータでも問題ないです。

ちなみに、こちらのスプレッドシート上でグラフを作成すると以下のようなグラフが生成されるかと思います。

f:id:ponkotsu0605:20200329150059p:plain

このグラフをLINEに送信することを目指します。

プログラミング

では、早速プログラムを書いていきましょう。

グラフを作成してLINEの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)

  pushImage(to, file.getDownloadUrl(),file.getDownloadUrl())
  
  DriveApp.getFolderById(folderId).removeFile(file)
  
}

処理の内容としては、

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

このようにしてLINEに送るまでの処理を書きました。

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

上で生成した公開用のURLをLINEに送りましょう。

// line developersに書いてあるChannel Access Token
var access_token = 'LINEのアクセストークン';

/**
 * 指定のuser_idにpushをする
 */
function pushImage(to, src, srcPreview) {
  var url = "https://api.line.me/v2/bot/message/push";
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
    'Authorization': 'Bearer ' + access_token,
  };

  var postData = {
    "to" : to,
    "messages" : [
      {
        'type':'image',
        'originalContentUrl':src,
        'previewImageUrl':srcPreview,
      }
    ]
  };

  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };

  return UrlFetchApp.fetch(url, options);
}