https://a.storyblok.com/f/270183/89975/bfae05522d/e_sms-to-slack_1200x600.jpg

ExpressとNodeを使ってNexmo SMSをSlackに転送する

最終更新日 May 18, 2021

所要時間:5 分

はじめに

Nexmoのバーチャル・ナンバーは、テキストメッセージや電話の送受信を可能にし、ユーザーや顧客との効果的なコミュニケーション手段として役立ちます。

NodeとExpressを使ったこのチュートリアルでは、Nexmoのバーチャル番号がテキストメッセージを受信したときに、自動的にSlackチャンネルに通知する方法を見ていきます。通知には受信したテキストメッセージの内容が含まれます。これは、テキストメッセージを受信したときに常に通知されることを意味し、Slackチャンネルは受信テキストメッセージを追跡するための中心的な場所として機能することができるので、非常に便利です。

前提条件

  • Node.js

  • ngrokを使えば、ローカルのウェブサーバをインターネットに公開することができます。ngrokでローカル環境をセットアップする方法については、ドキュメントを参照してください。 を参照してください。.

  • スラック

ノードの依存関係をインストールする

プロジェクトのディレクトリのルートで、以下のコマンドを実行して package.jsonファイルを作成します。

npm init

このチュートリアルではデフォルトで問題ありません。プロジェクトの依存関係をすべてインストールするには、以下のコマンドを実行する:

npm install express body-parser slack-notify

次に、次のコマンドを実行して、プロジェクト・ディレクトリのルートに index.jsファイルを作成する:

touch index.js

先ほど作成したファイルに以下のコードを追加する:

const express = require('express');
const app = express();
const bodyParser = require('body-parser')
const port = 3000;

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({extended: true}));

app.listen(port, () => {
    console.log(`Listening on ${port}`);
})

これにより、ポート3000でリッスンするウェブサーバーを持つexpressアプリケーションが作成される。また、先ほどインストールした body-parserパッケージの urlencodedオプションをtrueに設定しています。このサーバーを実行するコマンドを追加しましょう。

ファイル内の package.jsonファイルの scriptsセクションに追加します:

"scripts": {
    "start": "node index.js"
  },

以下のコマンドでアプリを実行できる。

npm run start

Slackで着信Webhookを作成する

Slackにメッセージを送信できるようにするには、受信Webhook URLを作成する必要があります。まずは Slackにアクセスし、アプリを作成してください。

Creating a Slack App

アプリの名前を選択し、通知を送信するワークスペースに関連付けます。アプリを作成すると、以下のような画面が表示されます:

Build an App for Slack

受信ウェブフックタブを選択し Activate incoming webhooksをクリックしてオンにします。次に Add New Webhook to Workspaceボタンをクリックします。通知を投稿したいチャンネルを選択し allowをクリックしてアプリを承認します。新しいWebhook URLが作成され、設定ページにリダイレクトされます。

Defining the Webhook URL

WebhookのURLはすぐに必要になるのでメモしておこう。

インバウンドメッセージ用Webhookの作成

アプリケーションで routeを定義する必要がある。 POSTを定義する必要があります。これは routeを定義する必要がある。を作成する前に routeを作成する前に requireを作成する前に slack-notifyパッケージをインストールする必要があります。

以下のコードを index.jsファイルの requireセクションに追加する:

const webhookUrl = 'https://hooks.slack.com/services/xxxx/xxx';
const slack = require('slack-notify')(webhookUrl)

で置き換えてください。 webhookUrlを前のセクションでSlackが生成してくれたWebhook URLに置き換えてください。

Console output showing the webhook response

インバウンドメッセージを受信するたびに、Nexmoは上のスクリーンショットのようなペイロードを送信する。この textキーには受信したメッセージの内容が含まれています。

それではルートを追加しましょう。次のコードで index.jsファイルを以下のコードで編集する:

app.post("/webhooks/inbound-message", (req, res) => {
    const { text } = req.body
    slack.alert({
        text: 'New SMS message',
        fields: {
            'Message' : text
        }
    });
    res.status(200).end();
})

リクエストボディの textリクエストボディのキーは、受信したメッセージの内容を含む。デストラクチャリングを使って textキーを textメソッドを使ってSlackに通知を送信します。 alert()メソッドを使ってSlackに通知を送ります。さまざまなメソッドがあります slack-notifyサポート こちら.

最終的な index.jsファイルの最終的な構造は次のようになる:

const express = require('express');
const app = express();
const bodyParser = require('body-parser')
const port = 3000;
const webhookUrl = 'https://hooks.slack.com/services/xxxx/xxx';
const slack = require('slack-notify')(webhookUrl)

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({extended: true}));

app.post("/webhooks/inbound-message", (req, res) => {
    const { text } = req.body
    slack.alert({
        text: 'New SMS message',
        fields: {
            'Message' : text
        }
    });
    res.status(200).end();
})

app.listen(port, () => {
    console.log(`Listening on ${port}`);
})

ngrokのセットアップ

アプリケーションをウェブで公開するためには、ngrokをセットアップする必要がある。ngrokのセットアップ方法は ここで.我々のアプリケーションは現在ポート3000で実行されているので、以下のコマンドを実行するだけでよい:

ngrok http 3000

下のような画面が表示されるはずだ:

Screenshot showing example of Ngrok running

Nexmoアカウントですぐに使用するため、最初の転送URLをコピーする。

NexmoにWebhookの受信URLを追加する

Nexmoダッシュボードの Numbersセクションで、Slack通知を受け取りたい番号の歯車アイコンをクリックしてください。バーチャル番号をお持ちでない場合は、購入する必要があります。

Screenshot showing the Nexmo dashboard with a list of your numbers

以下のようなモーダルが表示されます:

Screenshot showing how to configure your Webhook URLS

インバウンド・ウェブフックのURLを、先ほど説明した ngrokに設定します。(http://1e389185.ngrok.io/webhooks/inbound-message)

テスト

アプリケーションが期待通りに動作するかテストするには、ノードサーバーを再起動し、携帯電話からNexmo番号にメッセージを送信します。

Screenshot showing an example text message received

Slackチャンネルをチェックすると、通知が表示されるはずです。

Screenshot showing Slack bot receiving the SMS

結論

このチュートリアルでは、Nexmoを使ってSlackの通知を受け取る方法を見てきました。このチュートリアルは、NexmoとSlackを使ったアプリケーションを構築するための素晴らしいスタートガイドとなるでしょう。このチュートリアルのレポは こちら.

シェア:

https://a.storyblok.com/f/270183/250x250/d288ec8a73/dotun.png
Dotun Jolaoso

Software Developer who loves building awesome tools and products. I currently work with Laravel, PHP and Vue.