Twilio StudioフローとNode.jsを用いて外部にメッセージを発信する方法

読む所要時間: 8 分

June 22, 2020
執筆者
Daizen Ikehara
Twilion
レビュー担当者
Aya Shiomi
Twilion

Twilio Studio REST API Trigger

Twilio Studioは電話着信や、SMSの受信に対する処理（フロー）を設定できるビジュアルデザインツールです。このツールを用いることでプログラミングの知識を必要とせずにフローの設定を行えます。

多くの場合、電話着信・SMS受信に用いられますが、別のシステム（Webなど）で入力した予約の確認や、宅配便の再配達の案内など、決まったテンプレートをもとに外部に発信を行う場合にも利用することができます。今回はTwilio Studioで設定したフローを用いて宅配の再配達依頼の確認メッセージを発信する方法をご紹介します。

前提条件

また、今回作成するサンプルはあらかじめ下記の情報をユーザーが提供していることを想定しています。

  • 連絡可能（SMSが受信可能）な電話番号
  • 再配達の日時(yyyy/MM/dd hh:mm:ss)

Twilio Studioフローのインポート

TwilioコンソールからStudioダッシュボードを開きます。これまでにStudioフローを作成したことがない場合は下記のスクリーンショットに表示されている赤色の Create a flow ボタンをクリックし、新しいFlowの作成を開始します。

Studio Dashboard

フローをこれまでに作成している場合は、既存のフローの一覧画面に表示されている新規追加ボタン（赤丸に白十字が表記されているもの）をクリックします。

Studio - Add New Flow

Flowの名前は Confirmation Flow としました。

Studio Flow - Name

用意されているテンプレートからImport from JSON テンプレートを選択し、Next ボタンをクリックします。

表示されたダイアログにこちらのフローを貼り付け、Next ボタンをクリックします。

Studio Flow - Import from JSON


貼り付けたJSONファイルからインポートが実行され、デザイン画面にREST APIをトリガーとしたSend Messageウィジェットが表示されます。

Studio Designer

右上の Publish ボタンをクリックし、このフローを公開します。

また、URLの https://www.twilio.com/console/studio/flows/ 以降（FWxxxxxxx）がこのフローの識別子（Flow SID）となるため、その値を控えておきます。

Studio - SID


これでStudioフローの準備は完了です。

Node.jsプロジェクトの作成とStudioフローの実行

次にNode.jsアプリケーションを作成し、作成したアプリケーションにtwilio-nodeと環境変数を.envファイルからロードできるdotenvパッケージをインストールします。

npm i twilio dotenv

パッケージのインストール後、Twilioのアカウント情報や、先ほどのFlow SIDを保持しておく.envファイルを作成し、次の環境変数をそれぞれTwilioコンソール、電話番号コンソール、そして先ほど控えた情報から設定します。

TWILIO_ACCOUNT_SID=<Account SIDの値>
TWILIO_AUTH_TOKEN=<Auth Tokenの値>
TWILIO_PHONE_NUMBER=<SMS発信が可能な電話番号>
TWILIO_STUDIO_FLOW_SID=<先ほど控えたFlow SIDの値>

続けてindex.js ファイルを作成し、環境変数の読み込みとTwilioクライアントの初期化を行います。

'use strict';
require('dotenv').config();
const client = require('twilio')(
    process.env.TWILIO_ACCOUNT_SID,
    process.env.TWILIO_AUTH_TOKEN);

Twilioクライアントの初期化後、TWILIO_STUDIO_FLOW の値をもとにStudioフローを取得し、実行します。ここで、from をSMS発信が可能なTwilio電話番号に、to を前提条件としてあらかじめ取得している相手先電話番号に設定します。また、実行時のパラメータとして、再配達日時を表す redelivery_datetime を指定します。このパラメータは文字列で渡す必要があります。

// フローを実行
client.studio.flows(process.env.TWILIO_STUDIO_FLOW_SID)
    .executions.create({
        from: process.env.TWILIO_PHONE_NUMBER,
        to: '発信先の番号をE.164フォーマットで設定',  //発信先
        parameters : {
            "redelivery_datetime" : new Date("2020/06/23 15:00:00").toLocaleString()
        } // 再配達日時をredelivery_datetimeとしてFlowに渡す。
    })
    .then (flow => console.log(flow))
    .catch(err => console.log(err));

全ての設定が完了した段階でコードを実行し、SMSが送られてくることを確認します。

node index.js

Result

まとめ

ご覧いただいたように、Twilio Studioは着信・発信の双方に利用することができます。また、今回は別システムで入力された値がある、という前提でサンプルを構築しましたが、Gather ウィジェットを使用しフローをデザインすれば再配達の受付と、確認メッセージの送信を一度に行うこともできます。ぜひ、ご活用ください。

今回のサンプルはGitHubリポジトリからクローンし、README.mdに沿って必要な情報を設定することで確認することも可能です。

新型コロナウイルス感染症への支援策について

Twilioでは新型コロナウィルス感染症により引き起こされるさまざまな社会問題を解決する会社、団体、開発者グループに向けて無料クレジットの進呈など支援を行なっています。詳しくはこちらの記事をご覧ください。

また、Twilioを自社のシステム、ソリューションやパッケージに組み込みたいとお考えの場合は、営業部までお問い合わせください。

このエントリについての問い合わせ

不明点があればぜひ、お問い合わせください。オンライン登壇のご依頼等もお待ちしております！

関連投稿

関連リソース

A newspaper article

Twilio Docs

APIからSDK、サンプルアプリまで

言語とプラットフォームの API リファレンス ドキュメント、SDK、ヘルパー ライブラリ、クイックスタート、チュートリアル。
An Open book

リソース・センター

最新の電子ブック、業界レポート、ウェビナー

顧客エンゲージメントの専門家から学び、自社のコミュニケーションを改善しましょう。
User group reactions

Ahoy

Twilio の開発者コミュニティ ハブ

コミュニケーションとデジタル エンゲージメント エクスペリエンスを構築するためのベスト プラクティス、コード サンプル、インスピレーション。