トップ > CCI > SlackとGASで水分摂取量を管理してみた - 【STEP 2】Events API編

SlackとGASで水分摂取量を管理してみた - 【STEP 2】Events API編

CCI GAS Slack

前回のあらすじ

【STEP 1】では4つの手順でGASからGoogleスプレッドシートへの記録を実現しました。

　1. 記録用スプレッドシートの作成
　2. GASの実装
　3. スプレッドシートへのアクセス承認
　4. ウェブアプリケーションの公開設定

前回の記事
参照：SlackとGASで水分摂取量を管理してみた【STEP 1】GAS編 | CCI TECH BLOG

今回はSlackからGASへ記録をリクエストする方法をご紹介します。

作成手順

【STEP 2】SlackからGASへ記録をリクエスト

1. GASの追加実装

【STEP 1】のコードに4点の変更を加えます。全体像は次のようになります。

function doPost(e) {
  
  // ★変更1
  // パラメータ
  var postData = JSON.parse(e.postData.getDataAsString());
  
  // ★変更2（処理追加）
  // Slack Events API認証用
  if (postData.type == "url_verification") {
    return ContentService.createTextOutput(postData.challenge);
  }

  // ★変更3（処理追加）
  // 処理要否判定
  var param = postData.event.text;
  if (postData.event.subtype == "bot_message" || param == null) {
    return;
  }

  // 記録用シート取得
  var recordSheet = SpreadsheetApp.openById("スプレッドシートID").getActiveSheet();

  // 日をまたいだ場合、記録と最終更新日を更新
  var today = Utilities.formatDate(new Date(), "JST", "yyyy/MM/dd");
  if (today != Utilities.formatDate(recordSheet.getRange(2, 4).getValue(), "JST", "yyyy/MM/dd")) {
    recordSheet.getRange(2, 2).setValue(0);
    recordSheet.getRange(2, 4).setValue(today);
  }

  // ★変更4
  // 記録
  if (/^-?\d+$/.test(param)) {
    recordSheet.getRange(2, 2).setValue(recordSheet.getRange(2, 2).getValue() + Number(param));
  }
}

〇追加実装のポイント

・（変更1）パラメータ取得部分の変更
　Slackから受け取るパラメータはJSON形式のため、「var postData = ...」の部分を修正します。

  // パラメータ
  var postData = JSON.parse(e.postData.getDataAsString());

・（変更2）Events APIの認証用コードの追加
　手順4（Events API設定）で認証に必要となるコードを追加します。

  // Slack Events API認証用
  if (postData.type == "url_verification") {
    return ContentService.createTextOutput(postData.challenge);
  }

・（変更3）処理要否判定コードの追加
　手順4（Events API設定）により、Bot Userによる返信やメッセージ削除等のイベントもdoPostで受信するようになります。
　そのため、処理要否判定のコードを追加します。
　postData.event.textよりSlackの入力内容を取得できるため、これをparamにセットします。

  // 処理要否判定
  var param = postData.event.text;
  if (postData.event.subtype == "bot_message" || param == null) {
    return;
  }

・（変更4）記録に使用する変数の変更
　変更3でセットした変数が記録対象のデータになるため、使用する変数をpostDataからparamに変更します。

  // 記録
  if (/^-?\d+$/.test(param)) {
    recordSheet.getRange(2, 2).setValue(recordSheet.getRange(2, 2).getValue() + Number(param));
  }

〇ウェブアプリケーションの公開設定

外部からのリクエスト処理時に変更したコードが使用されるよう、公開設定を忘れずに行います。

・ 上部のタブから「公開＞ウェブアプリケーションとして導入」を選択

・プロジェクトバージョンに「New」を選択し、「導入」ボタンをクリック

「現在のウェブアプリケーションのURL（※）」をコピーしておきます。（手順4で使用）
※【STEP 1】の動作確認で使用したものと同じ

2. Slack App作成

https://api.slack.com/apps にアクセスし、「Create New App」ボタンよりAppを作成します。
今回はApp Nameを「DrinkSupporter」とします。

3. Bot User作成

左側のメニューから「Bot Users」を選択し、「Add a Bot User」ボタンよりBot Userを作成します。

必要情報を入力し、「Add Bot User」ボタンをクリックします。
「Always Show My Bot as Online」はOnにしておきます。

4. Events API設定

Slack側のイベントを受け取るためにEvents APIが必要なため、その設定を行います。

まず左側のメニューから「Event Subscriptions」を選択し、「Enable Events」をOnにします。

手順1でコピーしたウェブアプリケーションのURLを「Request URL」に貼り付けます。
入力フォームからフォーカスを外すと認証が行われ、成功すると緑色で「Verified」と表示されます。

「Subscribe to Bot Events」に「message.im」を追加します。
この設定により、ダイレクトメッセージのイベントがウェブアプリケーション（GAS）に送信されるようになります。

右下の「Save Changes」ボタンよりEvents APIの設定を保存します。

5. ワークスペースにAppをインストール

SlackからAppを使用できるようにするため、インストールを行います。

左側のメニューから「Install App」を選択し、「Install App to Workspace」ボタンをクリックします。

「許可する」ボタンでインストールを完了させます。

6. （任意）App表示情報の編集

ここからはアプリの表示設定を行います。

左側のメニューから「Basic Information」を選択します。

下にスクロールし、Display Informationの内容を編集して「Save Changes」より編集内容を保存します。

【STEP 2】の作業はこれで完了です。

動作確認

Slackを開くと、Appの下に「DrinkSupporter」が追加されているのが確認できます。
DrinkSupporterのダイレクトメッセージで適当な数値を入力します。

記録用スプレッドシートをみると、入力した数値が加算されたことが確認できます。

まとめ

【STEP 2】では6つの手順でSlackからGASへの記録リクエストを実現することができました。

　1. GASの追加実装
　2. Slack App作成
　3. Bot User作成
　4. Events API設定
　5. ワークスペースにAppをインストール
　6. App表示情報の編集

次回（最終回）はGASからSlackへ記録結果を返信する方法をご紹介したいと思います。
参照：SlackとGASで水分摂取量を管理してみた – 【STEP 3】OAuth編 | CCI TECH BLOG