Twilio Studio・Twilio Functions・SendGridを使って、録音メッセージをメールに転送する方法

Twilio Studio・Twilio Functions・SendGridを使って、録音メッセージをメールに転送する方法
SendGridサポートチームの青木です。

今回は、Twilio Studio・Twilio Functions・SendGridを使った、音声録音およびメール転送機能の実装方法について紹介します!
(本記事は、Twilioのブログ記事「Forward Voicemail Recordings to Email w/ Studio, Functions, & SendGrid」を参考にしています)

今回実装する機能について

Twilio Studioは、Twilioがもつ様々なコミュニケーションチャネルを、キャンバス上で線を引くように繋ぎ合わせることができるサービスです。今回は、Twilioの電話番号に電話がかかった際に、相手からのメッセージを録音し、その音声をメールに転送する機能を実装します!お店のオーナーが、お店の不在時にかかってきた電話の内容を録音して自分のメールに通知するようなイメージです。

構築する機能の詳細を下の図に示します。

Twilio Studio・Twilio Functions・SendGridを使って、録音メッセージをメールに転送する方法

  1. 電話着信後、自動音声で応答する
  2. メッセージを録音する
  3. 録音メッセージのURLを含んだメールを作成し、SendGridに送信をリクエストする
  4. 録音メッセージをメールで受信する

必要なもの

  • SendGridアカウント
  • Twilioアカウント
  • Twilio電話番号

SendGridはFreeプランのアカウント、Twilioは無料トライアルアカウントで構いません。

手順

Step 1: SendGrid APIキーの準備

SendGridのAPIでは認証情報にAPIキーを使用します。SendGridダッシュボードから、APIキーを作成しましょう。作成するAPIキーの権限は、Mail SendのみFull Accessで十分です。

Step 2: Twilio Functionsの設定

このステップでは、冒頭の図の(3)で示した、録音メッセージのURLをメールに転送する機能を構築します。
Twilio Functionsは、AWS Lambdaと同様のサーバレスサービスです。Twilio Studioで全体のフローを構築する前に、メール転送に必要な機能をTwilio Functionsであらかじめ作っておきます。

1. Serviceの作成

Functionsの設定画面に移動し、Create Serviceから新しいServiceを作成しましょう。

Create Serviceから新しいServiceを作成

今回は、Service Nameを「record2email」とします。Service Nameを入力したら、Nextを押して次の画面に進んでください。

Service Nameを入力したら、Nextを押して次の画面へ

2. 環境変数の設定

SendGridのメール送信に必要なAPIキーや、FromとToのメールアドレスを、環境変数として設定しておきます。
先ほど作成したService(record2email)のEditor画面の「Settings > Environment Variables」を選択し、環境変数の設定画面を開いてください。

環境変数の設定画面を開く

環境変数の設定画面を開いたら、以下の環境変数を追加しましょう。

  • SENDGRID_API_SECRET:Step 1で作成したSendGridのAPIキー
  • FROM_EMAIL_ADDRESS:メールのヘッダFromアドレス
  • TO_EMAIL_ADDRESS:メールの宛先となるアドレス
3. 依存関係の解決

Service(record2email)のEditor画面の「Settings > Dependencies」を選択し、依存モジュールの設定画面を開いてください。依存モジュールとして「@sendgrid/mail」を追加しましょう。バージョンは7.4.4にしてください。

依存モジュールとして「@sendgrid/mail」を追加

4. 実行コードの準備

Service(record2email)のEditor画面の「Add +」から「Add Function」を選択し、Functionのパスを「/record2email」に変更してください。

「Add Function」を選択

Functionのパスを「/record2email」に変更

Functionのパスを設定するとコードエディタが表示されるので、実行するコードを貼り付けてSaveを押します。最後は作成したServiceにFunction外からアクセスできるように、Deploy Allをクリックしましょう。

コードエディタに実行するコードを貼り付けてSave

コードは以下の通りです。

//Initialize SendGrid Mail Client
const sgMail = require('@sendgrid/mail');

// Define Handler function required for all Twilio Functions
exports.handler = function(context, event, callback) {

// Build SG mail request
sgMail.setApiKey(context.SENDGRID_API_SECRET);
        // Define message params
        const msg = {
          to: context.TO_EMAIL_ADDRESS,
          from: context.FROM_EMAIL_ADDRESS,
          text: `Recording URL is: ${event.url}`,
          subject: `New Voicemail from: ${event.From}`,
        };
        // Send message
        sgMail.send(msg)
        .then(response => {
            console.log("Neat.")
            callback();
        })
        .catch(err => {
            console.log("Not neat.")
            callback(err);
        });
};

コードの中身を解説します!

2行目

SendGridにメール送信リクエストをするのに必要となる「@sendgrid/mail」モジュールを読み込んでいます。

5行目

Twilio Functionsを実行するために必要となる、ハンドラーメソッドです。Functionが呼び出されることで、以下の3つのパラメータが渡されます。

  • context: 環境変数など現在の実行環境の情報が含まれるオブジェクト
  • event: Functionに渡されたリクエストパラメータが含まれるオブジェクト
  • callback: Functionの実行の完了とレスポンスの出力に使用される関数
8行目

環境変数からSendGridのAPIキーを読み取っています。

10~15行目

メール送信用のリクエストボディを作成しています。event.urlおよびevent.Fromを用いることで、StudioのフローでFunctionに渡されたパラメータから、録音メッセージのURLや通話の発信元電話番号を抽出します。

17~25行目

メールの送信とレスポンスの出力を行なっています。

Step 3: Twilio Studioの準備

続いて、電話着信から録音メッセージのメール転送までの一連のフローをTwilio Studioを用いて構築します!

Twilio Studioの設定画面に移動し、「+」マークのボタンから新しいFlowを作成してください。

新しいFlowを作成

「New Flow」のポップアップが表示されたら、Flow Nameを設定し、Nextを押して次の画面に進んでください。今回はFlow Nameを「Voicemail w/ Email」としました。

Flow Nameを設定

以下の画面で「Start from scratch.」を選択し、Nextを押してください

「Start from scratch.」を選択

以下のような編集画面が表示されます。
画面右側のウィジェットライブラリからフローの各ポイントで使いたい機能のウィジェットを選んでドラッグ&ドロップし、各機能の詳細設定を行っていきます。

ウィジェットライブラリから使いたい機能のウィジェットをドラッグ&ドロップ

1. Say/Playウィジェット

Say/Playウィジェットをキャンバス上にドラッグ&ドロップし、TriggerのIncoming Callからウィジェットに接続してください。

TriggerのIncoming Callからウィジェットに接続

ウィジェットの設定画面にて、通話時の応答内容を設定することができます。以下の画像の通り設定したら、Saveを押しましょう。

通話時の応答内容を設定

2. Record Voicemailウィジェット

続いて、Record Voicemailウィジェットをキャンバス上にドラッグ&ドロップし、Say/PlayウィジェットのAudio Completeポートから接続してください。
機能設定の内容は以下の通りです。

  • 「#」が押される、もしくは無音状態が5秒間続いた場合は、レコーディングを終了する
  • レコード音声の最後の無音部分を取り除かない(Do not trim)
  • レコーディング開始前にビープ音を鳴らす(Play beep: True)

Record Voicemailウィジェットの設定内容

3. Run Functionウィジェット

最後は、Run Functionウィジェットをキャンバス上にドラッグ&ドロップし、Record VoicemailウィジェットのRecording Completeポートから接続してください。Run Functionウィジェットを使用することで、Twilio StudioのフローからTwilio Functionsを呼び出して実行することができます。
ウィジェットの設定内容は以下の通りです。

  • SERVICEには、Step 2で作成したService「record2email」を選択してください
  • ENVIRONMENTでは、「ui」を選択してください
  • FUNCTIONでは、Step 2で作成したFunctionのパス「/record2email」を選択してください(パスを選択すると、FUNCTION URLも自動的に指定されます)
  • 以下のFunction Parametersを追加してください
    • Key:「url」、Value:「{{widgets.record_voicemail_1.RecordingUrl}}
    • Key:「From」、Value:「{{contact.channel.address}}

Run Functionウィジェットの設定内容

ここまで設定すると、以下のようなフローが構築されているはずです!
編集が終わったら、画面右上のPublishを押して、作成したフローに外部からアクセスできるようにしておきましょう。

作成したフロー

Step 4: Twilio電話番号の設定

後は、Twilio電話番号への着信からStep 3で作成したフローを呼び出すために、Incoming Callの設定を行うだけです。設定手順は以下の通りです。

  1. 電話番号設定画面に移動し、設定する電話番号をクリックする
  2. Voice & FaxセクションのA CALL COMES INにて「Studio Flow」を選択する
  3. 右側のプルダウンからStep 3で作成したService「Voicemail w/ Email」を選択する
  4. 画面左下のSaveを押して、設定変更を反映する

Twilio電話番号の設定

以上で準備は完了です。
実際に電話をして、録音メッセージがメールに転送されるか試してみましょう!

動作確認

Step 4で設定した電話番号宛に電話を行い、自動音声に従って録音メッセージを残すと、以下のようなメールを受け取るはずです!

受け取るメール

メール本文に挿入されたURLをクリックすると、以下のページが表示され録音メッセージを再生することができます!

録音メッセージを再生

まとめ

今回は、Twilio Studio・Twilio Functions・SendGridを使った、録音メッセージのメール転送機能の構築について紹介しました。今回はかなり単純なフローではありましたが、ウィジェットから機能を追加することで、例えば、営業時間内の着信に対しては電話転送で対応し、営業時間外の場合は留守番メッセージをメールに転送するなど、より便利なフローを構築できるかもしれません。興味のある方は、こちらのブログ記事を参考にして、フローの機能を拡張してみてください!

メールを成功の原動力に

開発者にもマーケターにも信頼されているメールサービスを利用して、
時間の節約、スケーラビリティ、メール配信に関する専門知識を手に入れましょう。