Zenn
⛳

【slack api (Block Kit)】×【GAS】で投票アプリを作る：1回目

2022/08/29に公開
Slack
GAS
tech

2022年9月時点の情報です。

slack api上で投票用のモーダル画面(子画面)を表示し、入力された情報をGoogleAppScriptで処理し、Googleスプレッドシートで記録するというアプリを作成します。

第１回目はslackのチャンネルにメッセージとしてモーダル画面を開くための「投票ボタン」を投稿するところまでを目指します。

必要なもの
•slackワークスペース(※)
•googleアカウント

※ワークスペースの作り方はこちら

まず始めにslack上に投票ボタンや投票モーダル画面を作成するために、slack appというアプリを作成し、ワークスペースにインストールします。

1.slack appを作成する

slack app管理画面にアクセスします。

https://api.slack.com/apps

ワークスペースにログインしていない場合は
画面中央上部の「sign in to your Slack account」
からログインしてください。

create new appボタンを押します

From scrath の方を選択します

「AppName」に投票アプリ名、「Pick a workspace to devlop your app in:」にアプリを入れるワークスペースを選択して、「Create App」ボタンを押します。

これでslack appが作成されました。

2.Incoming Webhooksを設定する

Incoming WebhooksをONに設定します


3.アプリに名前を設定する

筆者はこれに気づかず、解決に時間がかかりました...
(解決にあたり参考文献で記載させていただいた記事を参考にさせて頂きました。)

左サイドメニューのApp Homeを押します

Editボタンを押して、各項目を入力します


Display Name(Bot Name)はslack上の表示名です。
Default usernameはチャット上でアプリに対してメンションするために使用するIDのような物です。

4.アプリをワークスペースにインストールする

Install to Workspaceボタンを押します

投票ボタン付きメッセージの投稿先チャンネルを指定する

※インストールが完了すると、自動的にBot User OAuth Token、Webhook URLが発行されますが、これは後程使用するので控えておいてください。

上記でslack appの設定は一旦完了です。

5.Block Kitビルダーで投票ボタンのメッセージを作成する

Block Kitビルダーとは

block kitビルダーとはBlock Kit形式のUIを生成するデザインツールです。

Block Kitとは、SlackApp用のUIフレームワークです。

実際に感覚でblock kitとはどのようなものか理解するために
下記の例Block Kitビルダー例を見てください。

例)メッセージ形式
https://app.slack.com/block-kit-builder/T82AV4UBA#{"blocks":[{"type":"section","text":{"type":"plain_text","text":"Block Builerで作成したUIです","emoji":true}},{"type":"input","element":{"type":"plain_text_input","action_id":"plain_text_input-action"},"label":{"type":"plain_text","text":"テキスト入力部品","emoji":true}},{"type":"actions","elements":[{"type":"button","text":{"type":"plain_text","text":"ボタン","emoji":true},"value":"click_me_123","action_id":"actionId-0"}]}]}

いかがでしょうか？
JSON形式だけで画面UI部品が表現されていることがわかりますでしょうか？
block kitビルダーを使用すれば、簡単にslack上でのUIを構築することができます。

詳細な記述ルールを知りたい場合は、公式のリファレンスがあるのでそちらをご参照ください
https://api.slack.com/block-kit

それでは、Block Tool Kitを使って、投票ボタン付きのメッセージを作りましょう

作成した結果がこちらになります。

https://app.slack.com/block-kit-builder/T82AV4UBA#{"blocks":[{"type":"section","text":{"type":"mrkdwn","text":"下記のボタンを押下して、投票を開始してください。"}},{"type":"actions","elements":[{"type":"button","text":{"type":"plain_text","emoji":true,"text":"投票開始"},"style":"primary","value":"start_vote"}]}]}

上記のblock kitをGASからslackに対して送信します。

6.GASを作成する

Google Driveを開き、新規ボタン

Google App Sctipt(GAS)を選択します

GASのプロパティにWebhook URLを定義する

最初からあるmyFunction関数を消して、代わりに以下の関数を作成します

コード.gs
// プロパティに定義した値の取得
const WEBHOOK_URL = PropertiesService.getScriptProperties().getProperty("WEBHOOK_URL");

const sendVoteStartButton = () => {
  
  //　ここに作成したblock kitを定義します
  const blockKit = [
    {
      type: 'section',
      text: {
        type: 'mrkdwn',
        text: '下記のボタンを押下して、投票を開始してください。',
      },
    },
    {
      type: 'actions',
      elements: [
        {
          type: 'button',
          text: {
            type: 'plain_text',
            emoji: true,
            text: '投票開始',
          },
          style: 'primary',
          value: 'start_vote',
        },
      ],
    },
  ];

  const payload = { blocks: blockKit };
  const options = { method: 'POST', payload: JSON.stringify(payload) };

  //Slackへメッセージを送信
  UrlFetchApp.fetch(WEBHOOK_URL, options);
}
sendVoteStartButton関数を実行する

関数を実行すると、外部サービスであるslackに対してアクセスするためGoogleから権限の承認を求められます。
権限の承認について特に問題がなければ承認を行ってください。

関数の実行が成功したら、slackに投票ボタン付きのメッセージが投稿されます。

今回は以上となります。
次回は投票ボタンを押すとモーダル画面(子画面)を表示する処理をGASで作成します。

参考文献

この記事を執筆するにあたって、参考にさせて頂いたページです。

https://zenn.dev/nyancat/articles/20211219-create-slack-app

https://the-simple.jp/slack-nobotuser

Discussion