[Twilio/GAE]TwilioとGAEを使って通話内容の文字起こしを作ってみた

Twilioを使って電話で話した内容を文字起こしするサンプルアプリを作ったので、その時の内容を記載します。

# 準備するもの
- [Twilio アカウント](https://cloudapi.kddi-web.com/)
- [GCP アカウント](https://console.cloud.google.com)

# 開発環境
- [nodejs](https://nodejs.org/ja/)
- [GAE(Google App Engine)](https://cloud.google.com/appengine/?hl=ja)

# ソースコード
- [GitHub](https://github.com/friendtree16/twilio-transcription)

# 全体像
![スクリーンショット 2019-07-01 11.57.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/6bcf10de-dc47-d6cd-c304-2e33258a8402.png)

# TwilioとGCPを使って通話内容の文字起こし作り方
## アプリ準備
**※必要に応じて新規プロジェクトを作成する**
### Google Cloud Speech APIを有効化する
![スクリーンショット 2019-07-01 12.08.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/0f42a01f-44ae-361a-781b-5916197f4ea8.png)

![スクリーンショット 2019-07-01 12.09.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/3b44a584-dbdb-a22b-e15c-5e3a8b1a85eb.png)

![gcp-speech-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/08aaa800-3384-9238-9f8b-68db0ba57bd7.png)

### GAEを有効化する
![スクリーンショット 2019-07-01 12.14.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/96f5569d-f669-a49c-b8b9-096ede596e3a.png)

![スクリーンショット 2019-07-01 12.16.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/848311a3-46af-163b-c5f6-90b9c4e17d60.png)

※日本リージョンを設定、asia-northeast1 or 2を選択
![スクリーンショット 2019-07-01 12.17.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/29285e83-9e7f-0b5c-4551-acf92e521b32.png)

![スクリーンショット 2019-07-01 12.18.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/b78d29d6-5852-8ce1-2255-1bf0821137a0.png)

### アプリをデプロイする(ローカル)
**GAEにdefaultサービスが上がっているのが前提となります。**
**defaultサービスが上がってない場合、エラーとなるのでご注意ください**

1. [gcloudコマンドをインストールする](https://cloud.google.com/sdk/downloads?hl=JA)
1. gcloudコマンドの設定を行う
1. [GitHub](https://github.com/friendtree16/twilio-transcription)からソースコードをダウンロードする。
1. ダウンロードしてきたフォルダ内で`npm install`を実行する。 
1. `npm start`を行い、アプリが正常に起動することを確認する
1. `gcloud app deploy`を実行し、アプリをGAEにデプロイする

**※Twilioに設定するためにデプロイ後のURLをメモしておく**

### アプリをデプロイする(Cloud Shell)
**GAEにdefaultサービスが上がっているのが前提となります。**
**defaultサービスが上がってない場合、エラーとなるのでご注意ください**

1. [GitHubリポジトリ](https://github.com/friendtree16/twilio-transcription)を開く
2. READMEに記載のある`OPEN IN GOOGLE CLOUD SHELL`をクリックする
3. `gcloud config set project <user project ID>`でアプリをデプロイするプロジェクトを設定する
1. `gcloud app deploy`を実行し、アプリをGAEにデプロイする

**※Twilioに設定するためにデプロイ後のURLをメモしておく**

## Twilioを準備する
**※電話番号は取得しているものとします**
電話番号の取得方法は[こちら](https://jp.twilio.com/docs/usage/tutorials/how-to-use-your-free-trial-account#get-your-first-twilio-phone-number)をご覧ください。

### 電話を受話した時のWebhook先を設定
![スクリーンショット 2019-07-02 14.08.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/a0ddda6b-a90c-7152-d59b-6976ad7fe58e.png)

![スクリーンショット 2019-07-02 14.09.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/3c02040a-de7e-92c1-850c-42bf458c071e.png)

![スクリーンショット 2019-07-02 14.15.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/b98b0214-0781-87e0-bd1c-b0d17cf8f234.png)

GAEのコンソールにアクセスしてアプリのURLを確認し、入力する。
例： `https://twilio-transcription-sample-dot-<your-project-id>.appspot.com/call/receive`
![スクリーンショット 2019-07-02 14.15.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/00fc497c-b7b2-c21f-ba9d-1ae676aa4c93.png)

## 動作を確認する
### GCPのログコンソールを開きます。
![スクリーンショット 2019-07-02 14.25.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/fb46e076-c054-5b8f-e759-ed9af25e7190.png)

![スクリーンショット 2019-07-02 14.26.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92989/0ca59534-f235-7ed6-40fe-5040add46fd1.png)

### 電話をかける
Twilioで取得した電話番号に電話をかけ、`ピー`と言う音声の後に任意の言葉を話してください。

### ログ確認
最後にGCPのログを確認します。

# 最後に
[GitHub](https://github.com/friendtree16/twilio-transcription)のdevelopブランチで、録音した内容を文字起こししてFireStoreに保存、iOSアプリで表示するアプリを作っているので興味ある方はみて見て下さい。
(使い勝手は微妙なので、プルリクなりissueなどで改善要望いただければ随時直します。)