🍞

Slack Appの公式Quickstartをローカルサーバーで試す

2024/08/22に公開

Slack

Slack API

tech

はじめに

かくひとと申します。ゲーム制作とWeb開発の勉強をしています。

今回、バックエンドの勉強としてSlack Appを作成してみようと思い、この公式のQuickstartを試してみました。が、初心者としてはつまづきポイントがあったので、メモを残します。
チュートリアルとして最小限の内容になっていて、アプリ作成の流れを把握するにはとてもよい教材でした。この記事が補助資料となれば幸いです。
https://api.slack.com/quickstart

対象者

Slack Appのチュートリアルをしたい方

この記事ではQuickstartの手順を追いながら、自分がつまづいたローカルサーバー構築・公開の手順をメインに書いていきます。

作成するもの

メンションしたら特定の言葉を返すようなBotです。

1.から3.まで

ここまでは手順に沿っていけば進めていけると思います。Slack上でメンションを試し、Grocery Remindersが見つかれば完了です。

4.へ向かう準備

さて4.へ向かう前に、サーバーを用意しておかないとevent listeningができません。何も知らなかった自分はここで途方にくれました。
今回はいったんローカルサーバーを用意する手順で行きます。主に以下の2つを用意します。

Express

サーバー立ち上げに使います。空のプロジェクトフォルダを用意し、以下を実行します：

npm init -y
npm install express

Ngrok

サーバーを外部公開するために使います。以下サイトにアクセスしてダウンロードし、サイトに従ってセットアップしてください。
https://ngrok.com/
例えばWindowsの場合はダウンロードした実行ファイルによりターミナルを開き、以下のようなコマンドを実行：

ngrok config add-authtoken XXXXXX

4.を進める

手順2まではポチポチして進めていきます。
手順3にてRequest URLが必要になります。このためにローカルサーバーを外部公開し、URLを発行する必要があります。

npmしたプロジェクト上で以下のserver.jsを配置します。

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

// Slackからのイベントを受け取るエンドポイント
app.post('/slack/events', (req, res) => {
  // URL検証リクエストを処理
  if (req.body.type === 'url_verification') {
    res.send(req.body.challenge); 
  // メンションのイベントを処理 
  } else if (req.body.event && req.body.event.type === 'app_mention') {
    console.log('App was mentioned!');
  } else {
    res.status(200).send('OK');
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

expressでサーバーを立ち上げます。

node server.js

この後にngrokのターミナルで以下コマンドを叩き、公開。

ngrok http 3000

これにより、ポート3000がhttps://xxxx.ngrok-free.appのようなURLで公開されます。このURLにserver.jsで定義しているslack/eventsをつけ、https://xxxx.ngrok-free.app/slack/eventsとして、ようやく手順3のRequest URLに入力できます。

// URL検証リクエストを処理
if (req.body.type === 'url_verification') {
  res.send(req.body.challenge); 
}

URL入力後に、問題なければコードのこの箇所によりchallengeパラメータが返却され、SlackのURL検証が成功します。

ここまでできたらメンションを投稿してみます。

// メンションのイベントを処理
} else if (req.body.event && req.body.event.type === 'app_mention') {
    console.log('App was mentioned!');

この箇所にもとづいて、nodeにてApp was mentioned!のログが出れば成功です。

5.を進める

手順4まで進めてWebHook URLを取得したら、server.jsの内容を以下のように追加します：

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

// Slackからのイベントを受け取るエンドポイント
app.post('/slack/events', (req, res) => {
  // URL検証リクエストを処理
  if (req.body.type === 'url_verification') {
    res.send(req.body.challenge); 
  // メンションのイベントを処理 
  } else if (req.body.event && req.body.event.type === 'app_mention') {
    console.log('App was mentioned!');
    
    // ここに実際のWebhook URLを貼り付ける
    const webhookUrl = 'https://hooks.slack.com/services/XXX/XXX/XXX'; 
    // メッセージを送信
    axios.post(webhookUrl, { text: "Gotta get the bread and milk!" }, {
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => {
      console.log('Message posted successfully:', response.data);
    })
    .catch(error => {
      console.error('Error posting message:', error);
    });

    res.status(200).send('Event received');
  } else {
    res.status(200).send('OK');
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

ここでexpressの再起動をお忘れなく（自分はここで時間をつぶしてしまいました...）。
ngrokは再起動の必要はありません。もし再起動した場合はURLが切り替わってしまうので、Slack側での再設定が必要です。

さて、ここまで来たらもう一度メンションをしてみましょう。

    // メッセージを送信
    axios.post(webhookUrl, { text: "Gotta get the bread and milk!" }, {
      headers: {
        'Content-Type': 'application/json'
      }
    })

この部分により、Gotta get the bread and milk!の返信がSlack上で届けば無事完了です！

5.がうまく行かない場合

以下を確認してください：

コード修正後にexpressを再起動させたか
Request URLとngrokの公開URLが一致しているか
Webhook URLが一致しているか

Curlするのも手です。以下でできます。

curl -X POST -H 'Content-Type: application/json' --data '{"text":"Gotta get the bread and milk!"}' https://hooks.slack.com/services/XXX/XXX/XXX

なのですが、Windowsのコマンドプロンプトだと厄介みたい。こうなるそうです。

curl -X POST -H "Content-type: application/json" --data "{\"text\":\"Gotta get the bread and milk!\"}" https://hooks.slack.com/services/XXX/XXX/XXX

これがうまく行けばSlack上にメッセージが届き、ひとまずWebhookはうまくいっていることがわかります。

まとめ

以上でQuickstartが完了しました！Botの返信1つでけっこう大変ですね。
App作成の流れは掴めたので、これをベースとして作っていきたいと思います～。