Twilio Tips:Twilio Studioを利用し、電話周りの実装をシンプルにする

#はじめに

開発コンテストに応募するに辺り、割とギリギリまでアイディアを考えていることも多く、チームを組んでコンテストに挑むわけではないので、構造をシンプルに実装できる箇所はシンプルにしたいと、常に思っています。
私が作ったTwilioを活用した作品は以下の二つあります。

https://protopedia.net/prototype/1731

https://protopedia.net/prototype/2557

これらはいずれも、アイディアを実現しながらもTwilio側の実装をシンプルを追求した作品となっています

#電話をかけたり、電話をかけた結果を知る機能って共通化したくないですか？

作っているうちに、別々の機能なんだけど、電話をかけて、電話をかけた結果で別の処理をしたいというケースがありました。

![スクリーンショット 2021-12-12 0.38.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/57c2de65-ec58-a45c-60bc-a612dd8f6f58.png)

実は、自分が作った「電言」という作品でそのようなニーズがありました。

https://protopedia.net/prototype/2557

お客様にTwilioの番号を払い出し、払い出した番号でお客様を特定したり、管理するユニークなIDとしたかったため、基本的にはお客様１人に対して１つの番号で運用する必要がありました。

![スクリーンショット 2021-12-12 0.46.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/ef5f945c-92c3-e1c4-4621-8c17f7be42c1.png)

体温を元に、ユーザにフォローの電話をかけたり、

![スクリーンショット 2021-12-12 0.43.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/ce902952-24a2-537d-d93f-2926ac5895df.png)

ボタンを押して、助けを求めるために会社に電話したり、

![スクリーンショット 2021-12-12 0.43.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/333c09d0-35ab-7c11-3dbc-867fcaa961b9.png)

心拍数、血中酸素濃度の状況に応じにて、ユーザーにフォローの電話をかけたり・・・

![スクリーンショット 2021-12-12 0.43.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/8501ac5b-dfd5-8934-e3f0-3cd321f9acb3.png)

つまり、これらは別々の機能でも、電話をかける、応答結果を返す、というところは共通化したいと思っていました。
できれば、ノーコードに近いくらいで作れるTwilio Studioで！

![スクリーンショット 2021-12-12 0.51.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/d6ae4d7e-9488-744f-ac05-fde266d69151.png)

#共通化すると、Make HTTP Requestで困る

当然といえば、当然ですが、電話を発信する要求に対して、その結果をHTTP RequestでTwilio Studioから対象の機能にCallbackすることになるため、Twilio Studioを共通的に利用すると、結果を戻す先に困りますよね。しかも、機能が全く別なのであれば。

![スクリーンショット 2021-12-12 0.54.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/abbd6301-572e-e335-ab46-b36be98c92db.png)

何か手はないか・・・と考えたときに、MAKE HTTP REQUESTのHttp Parametersに設定できるVALUEに着目しました。

![スクリーンショット 2021-12-12 0.58.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/fdef297d-d9d9-e3d9-1a1a-178854c36b61.png)

*{{flow.data.xxx}}*と書いておくことにより、REST APIで外部のクラウドからTwilio StudioのAPIを起動した時にセットした変数をそのままMake HTTP Requestで送り返せるのです。 

![スクリーンショット 2021-12-12 0.59.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/e3d21616-6e7f-cebd-b015-a52508ef3ff7.png)

つまり、呼び出す時にどの機能から呼ばれたかを判別するためにTwilio StudioのREST APIで変数を受け取り、電話発信後の応答のMake HTTP Requestにそのまま設定された変数をお返しすることで、呼び出し元の機能で、どの機能の電話応答がどうだったか？という条件分岐が作れるのだ！

![スクリーンショット 2021-12-12 1.10.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/07526740-c359-8b0b-f941-31da911b079d.png)

#発信先の電話番号、発信元の電話番号、自動応答のメッセージを共通化する

これは、赤い芸人さんこと、高橋さんも解説されている内容だったため、細かいところは割愛しますが、応答まで共通化できたら、発信先の電話番号、発信元の電話番号、自動応答のメッセージまで、共通的に実装できます。

この作品では、Node-red側でほとんど実装していますが、
https://protopedia.net/prototype/2557

Functionに定義するだけになっています。

![スクリーンショット 2021-12-12 1.13.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/11375ebc-8623-d80a-c2a7-36556994c55c.png)

From、toのパラメータに発信元、発信先の電話番号を設定するだけです。
メッセージは今回、機能毎にflowを作っているので固定にしてますが、ここもデータベースから取得して動的に変更できる箇所です。メッセージを書いておくだけで、自動音声で話してくれます

![スクリーンショット 2021-12-12 1.13.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/1f3aaea0-0718-3ca4-c10c-f25278fb8c7b.png)

SAY/PLAYに{{flow.data.message}}と書いておけば良いのです。そうすると↑で設定されたメッセージを喋ってくれます

![スクリーンショット 2021-12-12 1.19.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/c6f7ada6-9cf1-7450-5a18-5c4978061d7d.png)

最終的には、たったこれだけのTwilio Studioの定義だけで、いろんなデバイスからの電話要求、応答の処理などを共通的に処理できるようになるのです。

![スクリーンショット 2021-12-12 1.20.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123800/35b16609-ea87-87f2-2697-3f7ba7bed3b8.png)

他の部分の実装については、ProtoPediaを見ていただけると嬉しいです

https://protopedia.net/prototype/2557