Twilio FunctionからStudio Flowを呼び出す

:::note alert
2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。
:::

# はじめに

Twilio Studioは非常に優れたツールで、エンジニアでない方にも簡単に使えます。
そんな便利なStudioですが、現在Studioのフローを起動するには、以下の3つのトリガーしかありません。

- Incoming Call: 電話が着信したときに起動します。
- Incoming Message: メッセージを受信したときに起動します。
- REST API: 外部から当該フローのREST APIを呼ばれたときに起動します。

これですと、例えばサーバーの監視などの用途で、Twilioから電話をかけるような使い方を想定した場合、REST APIしかトリガーの選択肢がありません。PostmanやCurlなどのツールが使いこなせる人であれば問題ないのですが、非エンジニアでは少し敷居が高いですね。

そこで今回は、Twilio FunctionsというTwilioのサーバーレス環境内からStudioフローを起動する方法をご紹介します。基本的にはコードをコピペして、フローのIDなどを書き換えるだけで対応できるはずなので、非エンジニアの皆さんにも、もちろんエンジニアの皆さんにもフローのテストなどにご利用いただける方法だと思います。

## StudioフローのREST API呼び出し

StudioフローをREST APIで呼び出すためには、フローのSIDとFromとToのパラメータが必須となります。
FromとTo以外のパラメータも渡すことが可能ですが、その場合は、Parametersという名前で、かつJSON形式のデータを渡す必要があります。
詳しくは、[こちらのドキュメント](https://jp.twilio.com/docs/studio/user-guide#rest-api)をご参照ください。

## シナリオ

今回はシンプルに、Twilioから指定した相手に電話をかけるサンプルフローを作成し、これをFunctionsから呼び出してみます。
以下の手順に先立ち、予めTwilioで電話番号を一つ購入しておいてください。

### 手順1. フローを作成する

- 管理コンソールの左側のスライドメニューから、**Studio**を選択します。
- 赤いプラスアイコンをクリックするか、「Create a new flow」を選択して、新しいフローを作成します。
- **FLOW NAME**に適当な名前を入れて、**NEXT**ボタンを押します。
- キャンパスが表示されたら、**WIDGET LIBRARY**から**Make Outgoing Call**をキャンパス上にドラッグアンドドロップします。
- **Trigger**ボックスの**REST API**と、今配置した「call_1」ボックスを結合します。
<img width="929" alt="スクリーンショット 2018-05-29 12.05.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/fd1d7149-da49-ba3f-5ade-4d9b9b0ec80d.png">

- 続いて、**WIDGET LIBRARY**から**Say/Play**をキャンバス上にドロップします。
- call_1の**Answered**と、今ドロップした「say_play_1」を結合します。
<img width="573" alt="スクリーンショット 2018-05-29 12.59.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/5db780b2-7f48-e3df-c2b9-5c06919177bd.png">

- say_play_1ボックスのプロパティページで、**TEXT TO SAY**欄に「こんにちは」、**LANGUAGE**のプルダウンから「Japanese Japan」を選択して、**SAVE**ボタンを押します。
<img width="313" alt="スクリーンショット 2018-05-29 13.00.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/06a6441f-1ec5-557c-0771-f06686607147.png">

- 最後に画面上部にある赤い**Publish**のボタンを押します。
- 確認のダイアログが表示されるので、**Publish**ボタンを押します。

![スクリーンショット 2018-07-26 10.28.37.png](https://qiita-image-store.s3.amazonaws.com/0/86046/35c09e91-901a-8614-4498-e004bb04f1f4.png)


以上でフローが完成しましたので、**<Back**をクリックして、フローの一覧ページに戻ります。今作成したフローのSID（FWから始まる文字列）をメモ帳などにコピーしておいてください。

### 手順2. フローを起動するFunctionsを作成する

- 管理コンソールの左側のスライドメニューから、**Runtime**を選択します。
- Runtimeメニューの中から、**Functions**を選択し、さらに**Configure**を選択します。
- **Enable ACCOUNT_SID and AUTH_TOKEN**のチェックボックスをONにします。
<img width="344" alt="スクリーンショット 2018-05-29 13.07.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/fcf127a6-42e9-c2b4-b075-97677ab1be96.png">

- **Dependencies**項目の中の**twilio**のバージョンを「3.17.1」に変更します。
<img width="801" alt="スクリーンショット 2018-05-29 13.07.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/98ebba44-a8bf-781e-6548-855f45d1b453.png">

- **SAVE**ボタンを押して、設定を保存します。
- Runtimeメニューの中から、**Manage**を選択します。
- 赤いプラスアイコンをクリックするか、「Create a new function」を選択して、新しいFunctionを作成します。
- **New Function**ダイアログでは、**Blank**を選択し、**Create**ボタンを押します。
- **FUNCTION NAME**欄に「callFlow」、**PATH**欄に「/callFlow」と入力します。
<img width="593" alt="スクリーンショット 2018-05-29 13.12.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/86046/f6f39bd6-8ad8-981b-0072-c0264ad1d55b.png">

- **ACCESS CONTROL**のチェックを外します。
- **CODE**欄に予め書かれているコードをすべて削除し、以下のコードを貼り付けます。

```javascript
exports.handler = function(context, event, callback) {
    const twilioClient = context.getTwilioClient();
    twilioClient.studio.flows('FWから始まるフローのSID').executions.create({ 
        to: '+81xxxxxxxx', 
        from: '+81xxxxxxxxx', 
        parameters: JSON.stringify({
            name: "Client"
        })
    })
    .then(function(execution) { 
        console.log(execution.sid); 
        callback(null, execution.sid);        
    })
    .catch(error => {
        console.error(`problem with request: ${error.message}`);
        callback(error.message);
    });
};
```

- 3行目に、先程メモしておいたフローのSID（FWから始まる文字列）を書きます。
- 4行目は、ご自分の携帯電話の番号をE.164形式（先頭の0を+81に置き換えたもの）で置き換えます。
- 5行目は、Twilioで購入した電話番号に書き換えます。
- 6〜8行目のパラメータは今回は不要ですが、参考までに書いてあります。
- **SAVE**ボタンを押して、コードを保存します。
- しばらくして、デプロイ完了の緑色のバナーが表示されたら、作業はすべて終了です。

### テストしてみる

- 今保存したFunctionの**PATH**欄の右側にあるコピーアイコンを押して、URLをコピーします。
- ブラウザを開き、コピーしたURLを実行すると携帯電話に電話がかかり「こんにちは」という声が聞こえれば成功です。

### まとめ

今回の手順では、Functionの呼び出しに関してのセキュリティ対策をしていないため、FunctionのPATHがバレてしまうと他の人にも実行されてしまいます。
ですので、あくまでStudioのテストに利用する程度で使ってください。もしFunctionsの呼び出しをセキュアにしたい場合は、[こちらの記事](https://qiita.com/mobilebiz/items/f8a8c795d5187e67166a)も参考にしていただくと良いかと思います。