Zenn
Open6

GASでslackbotを動かしてみる

JavaScript
Slack
GAS
sunhigh105sunhigh105

slackbot作成方法

Boltを使う方法

  • Bolt: slackアプリの開発ができるフレームワーク
  • 大まかなslackbot作成手順
    1. slack側でslackアプリ作成→トークン取得
    2. ローカルでboltプロジェクト作成
    3. boltプロジェクトをデプロイ(AWS, GCP, Herokuなどデプロイ先は選択肢がいくつかある模様)

GASを使う方法

  • Googleアカウントが必須
  • claspを用いると、ローカル環境でGASの実装ができる
  • 大まかなslackbot作成手順
    • slack app作成
      1. slackにログインした状態で https://api.slack.com/apps にアクセスし、slackアプリを作成
      2. slackアプリ側で発行したWebhook URLまたはトークンを控える
    • GASプロジェクト作成
      1. 手動またはclaspでGASプロジェクトを作成する
      2. プロジェクト設定>スクリプトプロパティにslackアプリ側で発行したWebhook URLまたはトークンを設定
      3. 関数を作成して実行
sunhigh105sunhigh105

(slack app directory内の)Incoming-webhookについて

  • slackにメッセージを送信できるslackアプリ
  • (2023/05/10現在)今後メンテナンスしない＆将来削除予定のため、非推奨らしい

sunhigh105sunhigh105

時間指定でメッセージを送信する方法

前提: Incoming webhookでslackにメッセージを送信できる関数があること

  • GASのトリガーを作成する
    • イベントのソース: 時間主導型
    • 時間ベースのトリガータイプ
      • 特定の日時
      • 分ベース: 送信時間の間隔を選択できる（1, 5 ,10, 20, 30分のいずれか）
      • 日時ベース: 1日1回
      • 週ベース: 1週間に1回
      • 月ベース: 1月に1回
    • 送信時間は「午前8時〜午前9時」のように1時間の振れ幅がある
sunhigh105sunhigh105

[GAS] doPost関数のロギング

slackから実行されたGASの doPost 関数のログを確認したい。
GCPプロジェクトと連携することでログを取得できる。

参考サイト

手順

  • GCPプロジェクトを作成&OAuth設定
    • Google CloudからGCPプロジェクトを作成（or 既存のプロジェクトを選択）
    • 「APIとサービス」＞「OAuth同意画面」へ遷移
    • 「ユーザーの種類」は「外部」に設定
    • メールアドレスを設定
  • GASとGCPプロジェクトを紐付け
    • 「プロジェクトの設定」＞「Google Cloud Platform（GCP）プロジェクト」で作成したGCPプロジェクトの番号を設定
  • GASのアプリケーションを再デプロイ
  • ログ確認
sunhigh105sunhigh105

ボタンでアクションを呼び出す方法

想定の動作: botからのメッセージにボタンが表示され、ボタンを押すと別のアクションが呼び出される

ドキュメント

(WIP)手順

ボタン押下時に呼び出される関数の定義

  • 関数doPost を定義
  • 引数には eを設定
  • 以下の記述でボタンから送信される値を取得できる
function doPost(e) {
  // リクエストデータの取得
  const requestData = JSON.parse(e.parameter.payload);
}
requestData の中身

※データは適宜******でマスキングしています

{
    "type": "block_actions",
    "user": {
        "id": "******",
        "username": "******",
        "name": "******",
        "team_id": "******"
    },
    "api_app_id": "******",
    "token": "******",
    "container": {
        "type": "message",
        "message_ts": "******",
        "channel_id": "******",
        "is_ephemeral": false
    },
    "trigger_id": "******",
    "team": {
        "id": "******",
        "domain": "******"
    },
    "enterprise": null,
    "is_enterprise_install": false,
    "channel": {
        "id": "******",
        "name": "general"
    },
    "message": { // 押下したボタンが表示されていたスレッドの情報
        "type": "message",
        "subtype": "bot_message",
        "text": "Today's duty is `sunhigh105` Accept button Skip button",
        "ts": "1684451073.365669",
        "bot_id": "******",
        "blocks": [
            {
                "type": "section",
                "block_id": "97/",
                "text": {
                    "type": "mrkdwn",
                    "text": "Today's duty is `sunhigh105`",
                    "verbatim": false
                }
            },
            {
                "type": "actions",
                "block_id": "U7rMb",
                "elements": [
                    {
                        "type": "button",
                        "action_id": "GmOt",
                        "text": {
                            "type": "plain_text",
                            "text": "Accept",
                            "emoji": true
                        },
                        "style": "primary",
                        "value": "click_me_123"
                    },
                    {
                        "type": "button",
                        "action_id": "OG4",
                        "text": {
                            "type": "plain_text",
                            "text": "Skip",
                            "emoji": true
                        },
                        "style": "danger",
                        "value": "click_me_123"
                    }
                ]
            }
        ]
    },
    "state": {
        "values": {}
    },
    "response_url": "******",
    "actions": [ // 押下したボタンの情報
        {
            "action_id": "GmOt",
            "block_id": "U7rMb",
            "text": {
                "type": "plain_text",
                "text": "Accept",
                "emoji": true
            },
            "value": "click_me_123",
            "style": "primary",
            "type": "button",
            "action_ts": "1685535378.994183"
        }
    ]
}
  • ボタン押下後のメッセージをslack側に送信
function doPost(e) {
  // リクエストデータの取得
  const requestData = JSON.parse(e.parameter.payload);
  // 何か処理
  const options = {
      method: 'post',
      contentType: 'application/json',
      payload: JSON.stringify(
        {
          blocks: [
            {
              type: "section",
              text: {
                type: "mrkdwn",
                text: "何かメッセージ"
              }
            }
          ]
        }
      )
    }
  }

  // slackにメッセージを送信
  const webhookUrl = PropertiesService.getScriptProperties().getProperty('WEBHOOK_URL');
  UrlFetchApp.fetch(webhookUrl, options);

デプロイ設定

⚠️注意！
GASのコードを修正して再デプロイする際は、「デプロイの管理」からデプロイすること！

  • 「デプロイの管理」から対象のバージョンを選択
  • 編集モードにして、「バージョン」のプルダウンから「新しいバージョン」を選択してデプロイ
    (「新しいデプロイ」でデプロイすると、アプリのURLが変わってしまい、都度slack側のURL設定を更新する必要が出てきてしまう）

slackの設定

  1. 対話的なメッセージを作成
  2. Interactivity & Shortcutsの設定
  • Interactivity & Shortcutsを有効にし、Requested URL にGASでデプロイしたアプリのURLを設定
sunhigh105sunhigh105

Slash commandsでメッセージを返却する方法

想定の動作: slackで /hoge のようなスラッシュコマンドを送信すると、botから任意のメッセージが返ってくる

参考サイト

GASで作るSlack Slash Commands入門

手順

slackbotのVarification token取得

  • Slack API: Applications | slackからスラッシュコマンドを導入したいslackbotを選択
  • Basic Information > App Credentials に記載の Verification Tokenを控えておく
    • GASアプリの設定に利用

GASアプリの設定

  • プロジェクトの設定 > スクリプト プロパティに新しいプロパティを追加
    • プロパティ: VERIFICATION_TOKEN
    • 値: slackbotのVarification token
  • doPost関数を定義
function doPost(e) {
  // Slash commands
  if (e.parameter.token === PropertiesService.getScriptProperties().getProperty('VERIFICATION_TOKEN')) {
    return ContentService.createTextOutput('slash command!');
  }
}
  • アプリをデプロイ
    • ウェブアプリのURLを控えておく

slackbotの設定

  • Slack API: Applications | slackからスラッシュコマンドを導入したいslackbotを選択
  • Slash commandsを選択し、Create new command ボタンを押下
  • 以下の項目を設定し、Save ボタンを押下
    • Command: スラッシュコマンドに使う文字列を設定
    • Request URL: スラッシュコマンド送信後に呼び出されるアプリのURL。ここではdoPost関数を含むGASアプリのURLを設定する
    • Short Description: スラッシュコマンドの説明
  • ワークスペースに該当のslackbotを再インストール