🦌

Next.jsでSlackに投稿するためのステップバイステップガイド

2023/03/17に公開

Next.js

この記事では、Slack APIの簡単な説明と設定、Next.jsでコードを記載してSlackにメッセージを投稿する方法を紹介していきます。

Slackの設定

まず初めにSlack APIの設定から行なっていきます。
Slack APIの公式ホームページに移動しましょう。
https://api.slack.com/apps?new_app=1

Creat New Appを選択して、Slack API用の設定を行ないます。

From scratchを選択して

アプリ名とAPIと連携したいSlackのワークスペース名の入力を求められるので、記入してCreat Appをクリックしてアプリを作成します。

アプリが作成されたら、OAuth & Permissionsに移動してSlack APIのスコープを設定します。
スコープを設定することで自分のSlackにメッセージやファイルを送信することができます。

■ slackスコープドキュメント
https://api.slack.com/scopes

User Token ScopesとBot Token Scopesの両方ににメッセージを投稿する為に chat:write スコープを設定します。

スコープの設定が終わったら、自身のワークスペースと連携させていきます。

ワークスペースにアクセスする権限を求められるので、許可します。

問題なく連携することができれば、トークンが生成されます。
このトークンを利用して、メッセージを投稿していきます。

Slack API動作確認

コードを書く前に、APIと連携されているか確認します。
メッセージを送信するには、token、channel、textを最低限記載すればOK。

token：Slack APIで発行されたAouth Token
channel：送りたいSlackのチャンネル名
text：送りたいメッセージ

curlコマンドを利用してメッセージを送ってみます。

curl -X POST 'https://slack.com/api/chat.postMessage' \
-d 'token=xoxp-4877575251106-4901260891136-4953156381216-7ff4357be606fff743736f9442e0b3a8' \
-d 'channel=#demo-slack-sending' \
-d 'text=Test'

問題なくSlackに送信されていれば、動作確認は完了です。

@slack/web-apiをインストール

slack APIの設定が完了したら、次に@slack/web-apiをNext.jsのアプリケーションにインストールします。
@slack/web-apiはSlack APIをJavaScriptから呼び出すためのライブラリで、SlackのWeb APIメソッドを直接呼び出してメッセージなどを投稿することができます。メッセージを送信する以外にも、画像を送信したり、ユーザー情報を取得するなどさまざまな機能があるので、用途に合わせて実装が可能です。

レスポンスのエラーハンドリング処理も実装可能で何かと便利ですね。

import { WebClient, ErrorCode } from "@slack/web-api";

try {
    const response = await web.users.info({ user: '...' });
  } catch (error) {
    if (error.code === ErrorCode.PlatformError) {
      console.log(error.data);
    } else if (err.code === ErrorCode.RequestError) {
      console.log(err.data);
     }
    console.log(err);
  }

This package supports Node v14 and higher. It's highly recommended to use the latest LTS version of node

一応注意点として、@slack/web-apiはnodeのバージョン14以上にする必要があります。

npmでライブラリをインストールします。

npm install @slack/web-api

Next.jsにコードを記載する

まずは、envファイルにslackのtokenとチャンネルIDを記載します。

SLACK_TOKEN="xoxp-4680295644725-4683238345842-4687026867091-27f57eabd7c0d938d0f232e3f15bde58"
SLACK_CHANNEL_ID="#demo-slack-sending"

次にNext.jsにinput欄に入力した値をapiに投げるためのコードを記載します。
page/api配下にAPIを実装するためにslack.tsを作成し、fetchを利用します。

import Head from "next/head";
import styles from "@/styles/Home.module.css";
import React from "react";

export default function Home() {

  const sendMessage = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.value) {
      return "";
    }
    await fetch("/api/slack", {
      method: "POST",
      body: e.target.value,
    });
  };

  return (
    <>
      <Head>
        <title>Create Next Alack API</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <input type="text" onChange={sendMessage}></input>
      </main>
    </>
  );
}

次にslack.ts内の処理です。
tokenとchannelIdをenvファイルから取得して、WebClientインスタンスを生成します。
webSlackApi.chat.postMessageを利用してchannelIdと入力したテキストを渡して、Slack APIにpostします。

import type { NextApiRequest, NextApiResponse } from "next";
import { WebClient, ErrorCode } from "@slack/web-api";
import { createReadStream } from "fs";

type Data = {
  name: string;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  const token = process.env.SLACK_TOKEN;
  const channelId = process.env.SLACK_CHANNEL_ID ?? "";
  const webSlackApi = new WebClient(token);

  if (req.method !== "POST") {
    res.status(405).send({ name: "Only POST requests allowed" });
  }

  if (!token) {
    console.warn("Token must not be undefined");
    res.writeHead(405).end("ChannelId must not be undefined");
  }

  if (!channelId) {
    console.warn("ChannelId must not be undefined");
    res.writeHead(405).end("ChannelId must not be undefined");
  }

  await webSlackApi.chat
    .postMessage({
      text: req.body,
      channel: channelId,
    })
    .then((res) => {
      console.log(
        `Successfully send message ${res.ts} in conversation ${channelId}`
      );
    })
    .catch((err) => {
      if (err.code === ErrorCode.PlatformError) {
        console.log(err.data);
        return;
      } else if (err.code === ErrorCode.RequestError) {
        console.log(err.data);
        return;
      }
      console.log(err);
    });
}

これで、ブラウザ上で入力した値をSlackに投稿することができます。
実際に業務で使う場合は、なんらかのレスポンスエラーが発生した場合に、エラーメッセージをslackに投げる等で利用するのかと思います。

ここまで読んでいただきありがとうございました。

Slackの設定

Slack API動作確認

@slack/web-apiをインストール

Next.jsにコードを記載する

Discussion