こんにちは！anyのプロダクトチームに所属している小牟禮（こむれ）です。
この記事は、any Product Team Advent Calendar2024 19日目の記事になります。
この記事ではSlackの カスタムステップ（NEW） の利用方法をご紹介します。
カスタムステップを利用することで、Slackアプリ内のワークフローにカスタムステップを追加することができます。
この記事では新しいステップ（Workflow Steps 🆕）の設定方法について記載しています。（レガシーはすでに追加できません🙅♂️）
チャンネルへの投稿内容を動的にしたい
フォームの入力内容をチャンネルへ投稿する場合は、あらかじめ備わっているステップを利用することが多いと思います。
この機能（チャンネルへの通知）はとても簡単に利用できる一方で、カスタマイズがほぼできないといった側面もあります。
たとえば、フォームの入力内容によって通知内容を変更したりなどは（おそらく）できません🙅♂️
と、いうことで、SlackAPIのカスタムステップを使い、フォーム内容をAWS Lambdaへリクエストするようにしました。
ちなみに、AWS Lambda関数では以下の処理を行なっています！
- ワークフローが実施されたチャンネルへ動的なメッセージを投稿
- 受け取った情報をノーションDBへ追加
今回はAWS Lambdaへリクエストが送信されるまでに絞って記載します。
1. Slack APIでアプリを作成する
1-1. Slack APIにアクセスしCreate New Appを押下します。
1-2. モーダルが表示されるのでFrom a manifestを押下します。
1-3. アプリを追加するワークスペースを選択します。
1-4. マニフェストの設定画面にてNextを押下します。
1-5. 最後にCreateを押下すればアプリの作成は完了です
以下の画面が表示されればアプリの作成は成功です
2. Slack API・アプリの設定 〜 スコープ
2-1. 左サイドメニューのOAuth & Permissionsを押下しページ遷移します。
2-2. Scopesセクションまでスクロールします。
2-3. Bot Token Scopes内のBot Token Scopesから権限を適宜追加します。
必要な権限はこちらで確認してください。
3. Slack API・アプリの設定 〜 インストール
3-1. OAuth & Permissionsページの画面上部に戻ります。
3-2. OAuth TokensセクションのReinstall toを押下します。
3-3. 画面が切り替わるので許可するを押下します。
OAuth TokensセクションにBot User OAuth Tokenが追加されていれば成功です
4. Slack API・アプリの設定 〜 サブスクリプション
4-1. 左サイドメニューのEvent Subscriptionsを押下しページ遷移します。
4-2. Enable EventsをONにします。
4-3. Request URLにSlack APIからのリクエストを受け取るエンドポイントを指定します。今回でいうとフォーム情報を受け取る先のURLです。
4-4. Subscribe to bot events で権限を適宜追加します。今回はワークフローのカスタムステップとして利用するので、workflow_step_executeは必須です。
4-5. 画面下部にあるSave Changesを押下すれば完了です。
ここまでくれば、Slack API側の設定完了まであと3ステップです！
5. Slack API・アプリの設定 〜 ワークフローステップ初期設定
5-1. 左サイドメニューのWorkflow Stepsを押下しページ遷移します。
5-2. 画面上部で以下の更新を求められる場合があるので更新します。
- org-readinessの有効化
-
Org Level Appsのリンク先にあるEnable org-readinessを押下します
-
- ランタイム設定の更新
-
Upadte Settingsのリンクを押下します
-
最終的にAdd Stepボタンが活性化すればここでの設定は完了です
6. Slack API・アプリの設定 〜 ワークフローステップ追加
6-1. Add Stepを押下します。
6-2. モーダルが表示されるので基本情報（Basic Information）を適宜入力します。
6-3. 入力パラメータータブ（Input Parameters）に移動し、フォームの内容と関連付けるインプット要素を追加します。
例えばフォームに名前、詳細の2要素があり、これらを指定したサーバーへ送信する場合は、2つのインプット要素を追加します。
追加したインプット要素とフォーム項目の実際の関連付けはSlack アプリ内のワークフロー設定にて行います。
7. Slack API・アプリの設定 〜 再インストール
7-1. 左サイドメニューのInstalled App Settingsを押下しページ遷移します。
7-2. Reinstall toを押下します。
これでSlack API側の設定は完了です。お疲れさまでした！🚀
以降ではSlack側でワークフローにカスタムステップを追加します。
8. Slack・ワークフロー 〜 カスタムステップへ変更
8-1. カスタムのステップを適用するワークフローを開きます。
8-2. フォーム内容を投稿しているステップを削除します。
8-3. ステップ一覧の最下部までスクロールしカスタムを選択します。
8-4. 追加したカスタムステップを選択します。
8-5. インプット項目にどの情報を紐つけるかのモーダルで、ポチポチと関連つけます。
8-6. すべての紐つけが終わったら保存するを押下します。
8-7. 変更内容を公開を押下します。
以下の画面が表示されたら完了です
以降はフォーム内容がAWS Lambdaへ送信されます。
以上、「Slackのカスタムステップを利用してフォーム内容を任意の場所に送信する」でしたー！
番外編 ~ ハマりポイント
Slack API設定でのハマりポイントと解決策を紹介します。
ワークフローステップの入力パラメーターは複数選択肢が考慮されていない
フォームには複数選択できる質問タイプがあります。
選択された選択肢はすべてAWS Lambdaへ送信したいところではありますが、入力パラメーターを設定するUIには用意されていないようです🙅♂️
解決策
Slack APIにあるApp Manifestを直接編集します。
以下の例でいうとcolors要素が複数選択肢に対応した設定です。
{
"functions": {
"myStep": {
"title": "入力内容収集",
"colors": {
"type": "array",
"description": "",
"name": "colors",
"items": {
"type": "string"
}
}
}
}
}
ハマりポイントは他にもありましたが、1番多そうな厄介ごとの共有でした！
any株式会社ではナレッジ経営クラウドQastのエンジニアを絶賛募集中です。
是非採用ページをご覧ください！
興味がある方は、こちらよりご応募お待ちしております。
エンジニア組織/文化について詳しく知りたい方はこちら。