LoginSignup
32
25

More than 3 years have passed since last update.

DMM WEBCAMPAdvent Calendar 2020Day 6
@HidakaRintaro(日髙 凜太郎)

【初心者向け】家計簿の未入力をSlackにお知らせするGASのハンズオン！！

Last updated at Posted at 2020-12-05

はじめに

こんにちは！！
DMM WEBCAMP Advent Calendar 2020、6日目を担当するメンターの@HidakaRintaroです。
初めてのAdventCalendarですが、気付いたら参加することになっていました？！
(勝手に僕の参加許可を出した@piyorの記事はこちらです)

何を作るの？

今回はGASで家計簿の入力が無い日をSlackでお知らせしてくれるものを作っていきます！
この記事を通してGASの使い方を簡単にでも理解していただけると嬉しいです！！

※ Slack、Googleアカウントは取得済みとして進めます。
※ JavaScriptの基本構文については説明しません。
※ 家計簿の作成については説明いたしません。

前提

↓今回使用する家計簿です。「全体」シートは今回使用しないので触れません。
家計簿

手順

  1. GASの記述
  2. Slack Appの作成
  3. トリガーの設定

1. GASの記述

エディタの準備

まずはGASを記述していく場所(エディタ)の準備です。
↓ スプレッドシートのツールからスクリプトエディタを選択してください。
エディタを表示

↓ エディタの簡単な説明です。
エディタの説明

処理の整理

コードを書いてくぞ！！の前にまずは今回の処理を整理しましょう。

  • スプレッドシート(家計簿)の情報を取得
  • 取得した情報の最新日を調べる
  • 取得した情報の最新日と今日を比べる
    • 一致した場合は処理終了
    • 一致しない場合はSlackに通知

今回の処理はざっとこんな感じです。
これをコードに起こしていきましょう！

コードの記述

それでは実際にコードをエディタに記述していきましょう。
処理を一つ一つ分けて説明していきますので全コードまとめてみたい方はこちらへどうぞ！

スプレッドシート(家計簿)の情報を取得

checkInput()
function checkInput() {
  // シートを取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('支出');  // ss.getSheetByName('シート名')

  // シート内のすべてのデータを取得
  const data = sheet.getDataRange().getValues();
}

ss.getSheetByName('支出')のシート名について

コードのss.getSheetByName('シート名')のシート名は、
今回の値を取るシート名なので ↓ で示す「支出」になる。
シート名

取得データ(data)について

データ(data)は二次元配列として取得しています。
二次元配列

取得した情報の最新日を調べる

checkInput()
function checkInput() {
  // ～スプレッドシートから情報を取得の処理(上記の処理)～

  const now = new Date();  // 処理を実行したときの日時を取得
  var max = new Date(1999, 0, 1, 0, 0, 0);  // 最新日の初期値(1999/1/1)

  // 家計簿の日付の最大値(最新日)を取得
  for (let i = 1; i < data.length; i++) {
    if ( dateComparison(max, data[i][0]) ) { // dateComparisonは後述
      max = data[i][0];
    }
  }

  // ～後述の処理～
}

new Date()について

最新日のnew Date()の引数の月の部分が0になっていますが、月は0から数えるので1月は0となります。(年と日は1から数えます)

dateComparison()
function dateComparison(date1, date2) {
  var year1 = date1.getFullYear();
  var month1 = date1.getMonth() + 1;
  var day1 = date1.getDate();

  var year2 = date2.getFullYear();
  var month2= date2.getMonth() + 1;
  var day2 = date2.getDate();

  if (year1 === year2) {
    if (month1 === month2) {
      return day1 < day2;
    }
    else {
      return month1 < month2;
    }
  } else {
    return year1 < year2;
  }
}

dateComparisonについて

dateComparisonは引数のdate1とdate2の日付をdate1 < date2で比較した結果をtrue/falseで返します。
getMonth()は0から数える(1月が0になる)ので＋１しています。(年と日は1から数えます。)


※なぜこのような処理をするかというと、家計簿の入力日は時間が00:00:00になっているのですが、取得した現在の日付は時間も取得しているため比較すると一致になりません。
そのためこのように年月日をそれぞれを比較しております。

取得した情報の最新日と今日を比べる

checkInput()
function checkInput() {
  // ～スプレッドシートから情報を取得の処理(上記の処理)～
  // ～取得した情報の最新日を調べる処理(上記の処理)～

  // 最新日と今日の日付を比較する
  // 今日の入力が無い時に処理
  if ( !(now.getFullYear() === max.getFullYear() && now.getMonth() === max.getMonth() && now.getDate() === max.getDate()) ) {
    const msg = `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日\n家計簿の入力がありません。`;
    sendSlack(msg);  // sendSlack()は後述
  }
}

日付が一致するときの処理をする場合

if文にelse処理を追加することで日付の一致時の処理も追加することが出来ます。 
if ( !(now.getFullYear() === max.getFullYear() && now.getMonth() === max.getMonth() && now.getDate() === max.getDate()) ) {
  // 日付が一致しないときの処理
} else {
  // 日付が一致するときの処理
}

スラックへの送信処理

url代入する値はSlackAppを作成の最後で出てくるので、そちらをコピーして貼り付けます。

sendSlack()
function sendSlack(message) {
  const url = '★★★';  // ★★★には後述の内容を張り付ける
  const options = {
    method: 'POST',
    contentType: 'application/json',
    payload: `{"text":"${message}"}`
  };
  UrlFetchApp.fetch(url, options);
}

詳しく知りたい方はこちらをご覧ください。

コード全体

function checkInput() {
  // シートを取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('シート名');  // ss.getSheetByName('シート名')

  // シート内のすべてのデータを取得
  const data = sheet.getDataRange().getValues();

  // 処理を実行したときの日時を取得
  const now = new Date();
  var max = new Date(1999, 0, 1, 0, 0, 0);

  // 家計簿の日付の最大値(最新日)を取得
  for (let i = 1; i < data.length; i++) {
    if ( dateComparison(max, data[i][0]) ) {
      max = data[i][0];
    }
  }

  // 最新日と今日の日付を比較する
  if ( !(now.getFullYear() === max.getFullYear() && now.getMonth() === max.getMonth() && now.getDate() === max.getDate()) ) {
    // 今日の入力が無い時の処理
    const msg = `${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日\n家計簿の入力がありません。`;
    sendSlack(msg);
  }

}

function dateComparison(date1, date2) {
  var year1 = date1.getFullYear();
  var month1 = date1.getMonth() + 1;
  var day1 = date1.getDate();

  var year2 = date2.getFullYear();
  var month2= date2.getMonth() + 1;
  var day2 = date2.getDate();

  if (year1 === year2) {
    if (month1 === month2) {
      return day1 < day2;
    }
    else {
      return month1 < month2;
    }
  } else {
    return year1 < year2;
  }
}

function sendSlack(message) {
  const url = '★★★';
  const options = {
    method: 'POST',
    contentType: 'application/json',
    payload: `{"text":"${message}"}`
  };

  UrlFetchApp.fetch(url, options);
}

2. Slack Appの作成

続いてSlackに通知を送るためにSlackAppを作成していきます。
下記のリンクにアクセスしてください。
https://api.slack.com/apps

アクセスしたらCreate New Appをクリックします。
Appの作成

出てきたウィンドウのApp Nameにアプリ名、Development Slack Workspaceでワークスペースを選択しCreate Appをクリックしてください。
createApp

作成出来たら、Incoming Webhooksへ移動し、Activate Incoming WebhooksをOnにします。
Incoming webhooks

Onにしたら下にスクロールしAdd New Webhooks to Workspaceをクリックします。
Add New Webhooks to Workspace
上記をクリック後ワークスペースへのアクセス権限とチャンネルの選択が出てきますので、チャンネルを選択し許可してください。

許可が終わったらInstall Appへ移動し、Webhook URLs for Your WorkspaceのWebhook URLのCopyをクリックしてコピーしてください。
URL

コピーした内容をこちらのコードのconst url = '★★★';の★★★ところに張り付けてください。

3. トリガーの設定

ここまで終了したら最後は自動で動くように設定します。

手動での確認

まずは手動で動くことを確認してみましょう！
エディタで関数をcheckInputを選択し、実行ボタンを押しましょう。
実行

初めての場合は認証が必要かもしれません。
下記の写真を見て許可しましょう。
認証

実行に成功するとこのようなメッセージが送られてきます！
Slack

自動化

動くことが確認出来たら自動化をしていきましょう！！

まずはエディタから下記の写真の赤で囲っているところをクリックします。
トリガーページに遷移

遷移先のページのトリガーを追加をクリックします。
15.png

出てきたウィンドウ内容をそれぞれ選択していきます。
「実行する関数を選択」をcheckInput、「イベントのソースを選択」を時間主導型、「時間ベースのトリガーのタイプを選択」を日付ベースのタイマー、「時刻を選択」を午後10時～11時を選択し保存をクリックしてください。時刻は好きな時刻を選択して大丈夫です！
トリガー入力
これで自動で動くようになりました！！

おわりに

以上でこの記事の内容は終わりです。
ここまでお付き合いいただき本当にありがとうございました！！
初めてのAdventCalendarでしたが、何とか書ききれたぁ～っていう感じです！

今回はGASでできる事のほんの一部にすぎません。
では他にどんなことが出来るの？？というと...

  • Googleフォームの投稿に自動返信
  • チャットワーク・LINEへの自動投稿
  • メール内容をスプレッドシートに自動転記

などなど書ききれないくらいたくさんあります。

身の回りの業務などが意外と簡単に自動化や、時間短縮できたりするので、
これを機に一度調べてみてGASを活用していただければ嬉しいです！！

参考

https://www.sejuku.net/blog/23115
https://tonari-it.com/gas-slack-incoming-webhooks-url-fetch/
https://qiita.com/kshibata101/items/0e13c420080a993c5d16

32
25
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
Sign upLogin
32
25