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の電話番号に電話がかかった際に、相手からのメッセージを録音し、その音声をメールに転送する機能を実装します！お店のオーナーが、お店の不在時にかかってきた電話の内容を録音して自分のメールに通知するようなイメージです。

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

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を作成しましょう。

今回は、Service Nameを「record2email」とします。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にしてください。

4. 実行コードの準備

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

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

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

//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を作成してください。

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

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

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

1. Say/Playウィジェット

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

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

2. Record Voicemailウィジェット

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

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

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}}」

ここまで設定すると、以下のようなフローが構築されているはずです！
編集が終わったら、画面右上の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を押して、設定変更を反映する

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

動作確認

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

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

まとめ

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