Slackで入力フォームを作る方法についてご紹介

投稿日：2023年3月17日

＜目次＞

(１) Slackで入力フォームを作る方法についてご紹介
　 (１-１) STEP0：前提条件
　 (１-２) STEP0：前提条件
　 (１-３) STEP1：Slackでボット用のアプリを作成
　 (１-４) STEP2：Python環境の準備＃１【任意】
　(１-５) STEP4：Pythonプログラムの作成＃１：環境変数
　 (１-６) STEP5：Pythonプログラムの作成＃２：ロジック
　 (１-７) STEP6：疎通テスト

(１) Slackで入力フォームを作る方法についてご紹介

(１-１) 概要・ポイント

（ポイント①）

SlackのBlock Builderを用いて簡単にGUI部品のJSONを作成する事ができます。

https://app.slack.com/block-kit-builder/

（ポイント②）

このBlock Builderで作った内容を、chat_postMessageといったメソッドのパラメータ「blocks」に指定する事で、簡単にGUI部品をメッセージに組み込んで投稿ができます。

＞目次にもどる

(１-２) STEP0：前提条件

・①Slackの初期セットアップ（FreeでもOK）が済んでいる
→アカウント登録、ワークスペースの作成が済んでいる

・②Visual Studio CodeでPythonが利用できる
→（手順）Visual Studio CodeをインストールしてHello Worldするまでの手順

＞目次にもどる

(１-６) STEP5：Pythonプログラムの作成＃２：ロジック

ここが今回の一番のポイントです。以下にPythonのサンプルプログラムを紹介します。Visual Studio Codeに貼り付けて動かしてみてください。

（サンプルプログラム）

import slack
import os
from pathlib import Path
from dotenv import load_dotenv
 
# 親フォルダパスを取得
file_path = Path(__file__).parent
# 「.env」ファイルのパスを設定
env_path = file_path/'.env'
# 「.env」ファイルのロード
load_dotenv(dotenv_path=env_path)
 
# トークンを指定してWebClientのインスタンスを生成
client = slack.WebClient(token=os.environ['SLACK_TOKEN'])
# chat_postMessageメソッドでメッセージ投稿
client.chat_postMessage(channel='#it-blog2', blocks='[{"type": "section","text": {"type": "mrkdwn","text": "こんばんは！ @Rainbow Planet はこの今日の夕食をラーメンにするか牛丼にするか迷っています。どっちがよいと思いますか？"}},{"type": "actions","elements": [{"type": "button","text": {"type": "plain_text","text": "","emoji": true}},{"type": "button","text": {"type": "plain_text","text": "","emoji": true}}]}]')

●ポイント

JSON部分を綺麗に整形すると次のようになっています。

最初のブロックは”type”: “section”でメッセージの枠組みを作り、メインのメッセージを設定しています。次のブロックは”type”: “actions”で「対話的要素」（ボタン、入力ボックス、カレンダなど）を定義していきます。今回は”elements”で”type”: “button”を指定してボタンを作っています。

{
  "type": "section",
  "text": {
    "type": "mrkdwn",
    "text": "こんばんは！ @Rainbow Planet はこの今日の夕食をラーメンにするか牛丼にするか迷っています。どっちがよいと思いますか？"
  }
},
{
  "type": "actions",
  "elements": [
    {
      "type": "button",
      "text": {
        "type": "plain_text",
        "text": "ラーメン",
        "emoji": true
      },
      "url": "https://tabelog.com/ramen/rank/"
    },
    {
      "type": "button",
      "text": {
        "type": "plain_text",
        "text": "牛丼",
        "emoji": true
      },
      "url": "https://nlab.itmedia.co.jp/research/articles/177964/"
    }
    ]
}