【kintone×Webhook】Slack通知ハンズオン #Slack

はじめに

この記事では、kinotneのWebhookを使用して、
kintoneにレコードが登録されたら、Slackに通知する方法を紹介します。

全体図

必要なもの

kintoneアカウント
AWSアカウント
Slackワークスペース

kintone開発者ライセンス(※kintoneアカウントをお持ちではない方)

kintone環境をお持ちではない開発者の方は、kintone 開発者ライセンス（開発環境）より環境を取得してください。無料でkintone開発環境を取得することができます。

カスタマイズ手順

kintoneでアプリを作成
Slackのカスタムインテグレーションを追加
Slack通知させるコードを書く
AWS Lambda設定
AWS APIGateway設定
kintone WebhookにURL登録
動作確認(kintoneに1件データを登録)

手順イメージ図

ハンズオン

1. kintoneでアプリを作成

まずは、kintoneにアプリを作成しましょう！
今回は試しに、kintoneアプリストアのタイムカードアプリを使ってみます。
何かしらのアプリが登録できればOKです。

2. Slackのカスタムインテグレーションを追加

Slack通知させるためには、通知をしてくれる任意のBotアプリを登録します。
任意のBotアプリは、Your Apps から作成できます。

BotApp 作成手順

Create New Appから、From scratchを選択してAppを作成します。
App名をつけ、インストールしたいSlackのワークスペースを選択します。
Add features and functionality > Incoming Webhooks を開きます。
Activate Incoming WebhooksをONにします。
Add features and functionality > Bots を開きます。
Your App’s Presence in Slackを設定します。
EditボタンからDisplay Nameを登録してください。
再度、Add features and functionality > Incoming Webhooks を開きます。
スクロールした一番下にあるAdd New Webhook to Workspace から通知を飛ばすチャンネルを選択します。

Add features and functionality > Incoming WebhooksのWebhook URL は後ほど使用します。どこかにメモしておくと良いかもしれません。

📣【解説】Slack通知に必要なパラメータを確認する

Slack Incoming WebhookのURL宛に、JSONペイロードデータ({"text":"Hello, World!"})を渡すと設定したのチャンネルに通知が届きます。

curlサンプルリクエスト

curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' https://hooks.slack.com/services/~~~~/~~~~

JSONペイロードデータは必須項目のtextの他に、blocksやattachementsが存在します。
詳細はSlackのドキュメントを確認してみてください。
参照: Reference: Message payloads

Slack側の設定をもう少し知りたい方は、こちらの記事もおすすめです。
参照: slackのIncoming webhookが新しくなっていたのでまとめてみた

3. Slack通知させるコードを書く

適当なディレクトリにアプリを作成します。

$ mkdir kintone-webhook
$ cd kintone-webhook

メインファイルの作成と、今回使用するNode Slack SDKをインストールします。

kintone-webhook$ npm init -y
kintone-webhook$ npm i @slack/webhook
kintone-webhook$ touch index.js

Slack SDKの公式ドキュメントの書き方を参考にコードを書いていきましょう。

index.js

const { IncomingWebhook } = require("@slack/webhook");
const url = process.env.SLACK_WEBHOOK_URL;
const kintone_app_url = process.env.KINTONE_APP_URL;

exports.handler = async (event) => {
  "use strict";
  const webhook = new IncomingWebhook(url);
  try {
    let message = `出勤しました！\n 詳細: ${kintone_app_url}show#record=${event.record.レコード番号.value}`;
    await webhook.send({
      attachments: [
        {
          color: "#f2b844",
          text: message,
        },
      ],
    });
  } catch (error) {
    console.error(error);
  }
};

AWSのLambdaにアップロードするため、作成したコードをzipファイルにしておきます。

kintone-webhook$ zip -r slack_notice.zip index.js node_modules/

構文: zip -r [圧縮時のzipファイル名] [圧縮したいフォルダ名]

📣【解説】コードの詳細を確認しよう

先程書いたコードのポイントを2つ解説します。

1. Lambda handlerの引数

以下のコードの引数(event)の中身を紹介します。

exports.handler = async (event) => {

AWS Lambdaの公式デベロッパーガイドには、以下のように解説されています。

ランタイムでは、ハンドラーメソッドに 3 つの引数を渡します。最初の引数は、呼び出し元からの情報を含む event オブジェクトです。呼び出し元は、Invoke を呼び出してこの情報を JSON 形式の文字列として渡し、ランタイムはそれをオブジェクトに変換します。AWS のサービスで関数を呼び出す場合、そのイベント構造はサービスによって異なります。
引用：Node.js の AWS Lambda 関数ハンドラー

つまり、第一引数の eventには呼び出し元であるkintoneのレコード情報のJSON形式の文字列が格納されています。event.record.~~でkintoneのレコードデータを取得することができます。

2. Slackにメッセージを送信する

公式ドキュメントのSend a notificationを確認すると、Webhookオブジェクトに.sendメソッドを利用してテキストパラメータを渡すとSlackにメッセージを通知することができると記載されています。

const webhook = new IncomingWebhook(url);
:
:
await webhook.send({
  attachments: [
      {
        color: "#f2b844",
        text: message,
      },
   ],
});

今回はtextのみをパラメータに含めていますが、blockやattachmentsを使用するとボタンや画像などの送信も可能です。
参照: Reference: Message payloads

さらに、Block Kit Builderを使用すれば、UI上で簡単にパラメータを設定できます。

4. AWS Lambda設定

Lambda関数を作成する

まず、AWS Management Consoleにログインします。
次に、検索バーに「Lambda」を入力し、Lambdaのダッシュボードを表示します。

関数の作成ボタンからLambda関数を一から作成します。

設定項目

Lambda関数名をつける
ランタイム: Node.js 14x
他の項目はデフォルト値のまま

関数の作成ができたら、先程zipしたファイルをアップロードします。

コードのアップロードが完了したら、環境変数を設定します。

環境変数設定

コードの下のメニュータブから、①設定を選択し、 ②環境変数を表示する。
右側の ③編集ボタンから環境変数を登録していきます。

2つの環境変数を登録します。

キー	値
SLACK_WEBHOOK_URL	コピーしたSlackのWebhookURL
KINTONE_APP_URL	kintoneアプリのURL

ここに登録することで、コード上で process.env.環境変数キー で呼び出すことができます。

今回のコードでは下記で呼び出している

const url = process.env.SLACK_WEBHOOK_URL;
const kintone_app_url = process.env.KINTONE_APP_URL;

5. AWS APIGateway設定

Lambdaのトリガー追加からAPIGatewayを登録していきます。

新規API作成 > REST APIを選択します。
セキュリティはオープンを選び、右下の追加ボタンをクリックしてトリガーを登録します。

ここまでで、API Gatewayの大枠の設定が完了しました。
ここからは、さらにエンドポイントの詳細を設定していきます。

メソッドANYを削除する

今回はHTTPメソッドPOSTのみ使用するため、デフォルトのANYメソッドは削除しておきます。

POSTメソッドを作成する

アクションボタンから、メソッドを作成します。POSTメソッドを作成したら、呼び出したいLanbda関数を設定しておきましょう。

APIのデプロイ

アクションボタンからAPIのデプロイを選択します。
デプロイしたいステージは、適当な名前をつけてデプロイしましょう。
(例: 本番用ならprod, ステージング用ならstgなど)

画像の①と②を合わせたURLをkintone Webhook URLに登録する

6. kintone WebhookにURL登録

デプロイしたAPIGatewaymのURLをkintoneのWebhookに登録します。
Webhook URL: https://*******.amazonaws.com/デプロイしたステージ名/ディレクトリ名

7. 動作確認(kintoneに1件データを登録)

kintoneにレコードを1件登録してみましょう。
以下のように、Slackにメッセージが届きます。

設定は以上で終了です。お疲れ様でした🎉
うまくSlackに通知することができましたか。

もし通知が届いていない場合は、kintoneのWebhook URLに誤りがないか、
コードミスはないか確認してみて下さい。また、ご自身でデバッグする際のヒントを下記でご紹介します。

🚀 デバッグ

AWS Lambdaのデバッグ方法

Lambdaの実行ログは、対象のCloudWatchに書き出されています。
そのため、CloudWatchのログを確認しながらLambda上のコードをデバッグをします。

表示したいログ内容は、自身でLambdaのコードにconsole.logを書いておきましょう。

対象のCloudWatch

①CloudWatch を表示し、②ロググループの検索窓から確認したい ③Lambda関数を検索します。

詳細画面のLog streamにLambdaの実行ログが記録されているため、
console.logを用いて、eventオブジェクトの中身等を確認してみてください。