はじめに

本業とは関係ないところ（父と近所の手伝い）で、Twilioを使った電話システムの開発に初めてチャレンジしてみました。

極力サーバーの構成はシンプルにしたいので、Twilio Functionsを使いました。AWS Lambdaみたいな感じでサーバーレスにTwilioのシステムを構築できるのが、とても良いですね！

Twilio Functionsの設定画面で直接Node.jsのコードを書いていけば作れるんですけど、やっぱりローカルのエディタでコード書いて、Gitにスムーズにコミットしたりしたいじゃないですか。

日本語の情報が全くなかったんですが、ちゃんと調べたらとても簡単にできたので、メモがてら残しておきます。

Functionsとローカル開発の違いで面倒臭いところ

Functionsは全体をこんな関数でくくって、終了時はcallbackを呼び出します。普通にNode.jsサーバー立てる場合はこんなことしない。

exports.handler = function(context, event, callback) {
  // ...
  callback(null, "Everything is gunna be alright");
}

そして、twimlやclientオブジェクトの作り方も微妙に違います。

const twiml = new require('twilio').twiml.VoiceResponse();
const client = require('twilio')(ACCOUNT_SID, AUTH_TOKEN);
const callerId = process.env.CALLER_ID;

const twiml = new Twilio.twiml.VoiceResponse();
const client = context.getTwilioClient();
const callerId = context.CALLER_ID; // 環境変数はcontextに全部入る

こういうのを、「全部Functionsの仕様に寄せて書いたらローカルで動く」ようにしておきたいわけです。

twilio-runを使おう

最初は自分でcallback関数を作ったり頑張ろうとしかけたんですが、GitHubを探したらこんな素晴らしいCLIツールを見つけました！車輪の再発明せずに済んでよかった。。
https://github.com/dkundel/twilio-run

以下、twilio-runを使った構築手順です。前提条件はこんな感じ。

• Twilio電話番号が1つ取得済み
• 開発デバイスはMac
• HomebrewとNode.jsがインストール済み

Twilio Functionsの設定

一番シンプルな構成として、サンプルで用意されてる「Hello Voice」を使って新規Functionを作成します。

• PATHは/hello
• Check for valid Twilio signatureはチェック
• EVENTはIncoming Voice Callsを選択

こいつをローカルにコピペしてそのまんま動かすのが今回のゴール。

ローカルの設定

ngrokインストール

brew cask install ngrok

プロジェクト作成

mkdir hello-twilio
cd hello-twilio
npm init -y

twilio-runインストール

npm install twilio-run --save-dev

functionsディレクトリ作成
twilio-runは、実行時に./functions配下の全コードを自動的にホスティングするので、必ずこの名前で作るのがポイントです。

mkdir functions

Functionのソースコード作成
./functions配下に作成します。先ほどTwilio上で作ったHello Voiceをコピペ！¹

exports.handler = function(context, event, callback) {
    let twiml = new Twilio.twiml.VoiceResponse();
    twiml.say("Hello World");
    callback(null, twiml);
};

twilio-run起動
デフォルトはポート3000番でホスティングされます。
PATHはJSのファイル名helloがそのまんま使われます。

$ npx twilio-run
┌────────────────────────────────────┐
│                                    │
│   Twilio functions available at:   │
│   => http://localhost:3000/hello   │
│                                    │
│                                    │
│   ⚠ No assets directory found      │
│                                    │
└────────────────────────────────────┘

ngrok起動
ローカルのhttpサーバーを外部公開してくれます。
Forwardingのサブドメインは毎回変わるので、固定したければ有償プランが必要です。

$ ngrok http 3000

ngrok by @inconshreveable                                            (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://example.ngrok.io -> localhost:3000
Forwarding                    https://example.ngrok.io -> localhost:3000

ブラウザでhttpsの方にアクセスしてみましょう。
https://example.ngrok.io/hello

こんなXMLが表示されたら、ローカル側は準備完了！

Twilio電話番号を開発環境に向ける

電話をかけたらローカルのプログラムが動くようにTwilio側を設定します。「通話着信時」に「Webhook」として先ほどのURLを登録すればOK。

電話をかけてみよう

該当の番号に電話をかけると、英語で「Hello World」と聞こえますね！
こんな風に書き換えてtwilio-runを再起動すると、日本語でも喋ってくれますね！

exports.handler = function(context, event, callback) {
  let twiml = new Twilio.twiml.VoiceResponse();
  twiml.say("世界よこんにちは", { language: "ja-jp" });
  callback(null, twiml);
};

本番環境に反映

一通りローカルでの開発が完了したら、Functionsの設定画面で最初に作った「Hello World」コードの中身を、ローカルの「hello.js」の内容に置き換えて保存します。（何も変更しなくて良いのが最高！）

その上で、電話番号の設定画面をFunctionに向けます。

ローカルでスムーズに開発し、サーバーレスなTwilio Functionsで本番運用する体制がこれで整いました！めでたしめでたし。

おわりに

kintone hack 2018の戦友、高橋さんの記事が取っ掛かりとして大変参考になりました。Twilioについてググってヒットするのは、半分以上が高橋さんの記事ですねw エバンジェリスト流石っす！
TwilioのFunctionsを使ったサーバーレス受付電話システム

実際に僕が作ったプログラムは、3つのFunctionが連携する、もう少しだけ複雑なシステムです。近々そちらのコードも公開しますねー。

2019/04/09 公開しました！
解説記事を丁寧に書く時間がなかなか取れそうにないので、ドキュメント一切無しだけど晒してしまいますw
https://github.com/the-red/twilio-neighborhood-network

田舎のガラケーしか持っていないオッチャン達が使うには、「音声電話だけで100%完結するシステム」って超便利だなーと今回思いました。Twilioの面白さに目覚めることができたので、今後も色々と作ってみたいと思います
次のステップは、モチロンkintone連携だな！