はじめての電話API Twilioの使い方 -開発編

非エンジニアでもTwilioは使える!ということを実証する回です。これまで幾度となく簡単です発言をしてきた私。簡単といえばTwilio、Twilioといえば簡単!であると信じて疑いません。でも、そんなに簡単だったら自分の手で開発できるのでは?と考え、今回2回にわたって紹介することにしました。

 

今回は、本当に、本当に開発していきますのでみなさん置いていかれないようにご注意ください。正直自分でもよくできたな・・・と思うほどです。今回のゴールは、音声データを録音しその音声を再生するところまで。文章のいっちばん最後には期間限定のモノマネ音声を置いているので、私がどうがんばったかという経過に興味がない方は、せめて最後だけでも聞いてみてください。最近ドヤラーで紙面を飾った彼とのコラボ劇場です。

 

さて、前回に引き続きTwilioJP-UGの東北支部 リーダー浅井さんに教えていただきます!

➤浅井さんにお願いした経緯は、前回をご覧ください。

 

●必要なもの:PC、スマホ(電話をかける用)

 

●参考:Twilioのハンズオンで使用する資料

 

●残り時間:1時間半(時刻は14:30をまわりました)


ステップ1:Twilioの動詞を使い、音声を流してみる。


Twilioにはいくつか動詞があり、入力したテキスト文字を喋らせたり=Say、録音したり=Record、音声を再生したり=Playといった、電話に関わる動作をTwilioに命令できるそう。単語だけ聞くと耳慣れた動詞ばかりなので、すんなりと理解できます。今回はこの3つの動詞を使っていきます。それでは、まず"サインアップ"から自分専用のアカウントを作成し、登録が済んだら電話番号を購入するところからはじめていきます。アカウント登録は無料です。

 

※今回は、時間短縮のためTwilio事業部のアカウントを使って作業していきます。

Twilioのサイトトップページ
Twilioのサイトトップページ

浅井さん:「ログインすると、自分のアカウントページが作られます。まずは電話番号を購入しましょう。電話番号を購入するというボタンから日本を選択すると、ずらっと番号が出てきます。今回は050番号のローカル番号を利用するので、その中からひとつ選んでください。


「電話番号がたくさん!たった108円で買えるなんて本当に安いと思います。では、この「いいないいな」っぽい1717の番号を買いたいと思います。


購入画面、buy this numberを押すと、購入完了!
購入画面、buy this numberを押すと、購入完了!

「安いからポンポン買えちゃうんですよね。Twilioの良いところが、これでもう購入完了で、そのまま利用できるところです。アカウントに対して予めお金をいれておき、そこから引かれていきます。電子マネーのSUICAみたいなイメージでお金をチャージしておけば、都度決済を挟む手間がないんです。それと、購入した電話番号に名前を付けられます(何でフレンドリーネームというのかはわかりませんが)。例えば複数の番号を購入するとき、どの番号が何のための番号なのかわかるように、「サポート番号」「キャンペーン番号」とそれぞれの番号に名前を付けるんです。」


なるほど、では今回は「イセTEL」でやってみます。なんだか愛着が湧いてきました。」


「それではプログラミングを書くためのテキストエディタはなにかありますか?」


「Mac内蔵のテキストエディットくらいしかありませんが・・・


「それでも大丈夫ですよ。参考資料を見ていきましょう。」


資料のSay部分
資料のSay部分

「Sayの部分を見ていきましょう。薄い色で、

 

<?xml version="1.0" endoding="UTF-8"?>

 

とありますが、簡単にいうと「いまからxmlを書きまーす」という宣言をしているようなものなので、覚えなくて大丈夫です。毎回同じなのでコピペしてしまいましょう。xmlとhtmlって似てますよね。htmlはxmlのひとつで、一番大きな括りがxmlです。わかりやすくいうと、言語がxmlだとすると、英語や日本語という括りがhtmlに値します。xmlはエクステンシブルマークアップランゲージの略で、<>から</>で囲うことをマークアップと言います。この辺はなんとなく覚えていれば大丈夫ですよ。

 

"Say"っていうのはそのままで、今の状態だと『テキストを音声に変換します』を喋る、という意味になります。青字の<Response>は、全部をResponseで囲うものというくらいで覚えておけば大丈夫です。では、『テキストを音声に変換します』だとつまらないので、なにか言葉を変えてみてください。変えたらそのテキストエディットを保存します。ファイル名は、わかりやすく"say.xml"とかにして、サーバーにアップロードしたらOKです。サーバーはなんでも大丈夫ですよ。御社のレンタルサーバーCPIでもできます。xmlのファイルをブラウザでアクセスすると、こんな感じに表示されます。


※時刻は14:55
※時刻は14:55

 宋:「なにかおやつ買ってきましょうか?


「少しお腹がすいてきちゃいまして笑。これウェブページですよね?真っ白で、書いたものがそのまま表示されるだけなんですね。音声ではないですけど。」


「これで大丈夫です。Twilioは指定されたURLにあるファイルを読みに行き、その情報を喋らせることができます。この新しく作ったURLをコピーして、最初のTwilioのアカウントページに戻りましょう。下の方にRequestURLってありますよね。そこに貼り付けて保存します。あとは購入した番号に電話をかければ、Twilioの音声が話してくれますよ。ひとまずこれで最初の部分はできました。」


「URLでできるんだ。さっき作ったsay.xmlというURLの中に、まもなくおやつの時間ですという情報が含まれているということですね!では、ちゃんとできたか電話をかけてみます。」


「我慢できずTwilioの音声に笑ってしまいました笑。


「 Twilioの合成音声は特徴あるので、これを変えたい場合はエーアイ社が提供するような合成音声ソフトと組み合わせることもできます。というのも、Twilioはマッシュアップと言われる複数のAPIと組み合わせたアプリケーションに向いているんです。先日開催したごった煮イベントもそうで、少し語弊がありますが、Twilio以外はどれもサーバー系のサービスなんです。でも、Twilioがその中で参加できたのは、どのクラウドサービスとも親和性が高い割にかぶらないからなんです。


いろんなコラボレーションイベントに呼ばれるのもそうしたところからですね。では、Sayができたので、次はRecordをやりましょう。音声を録音して再生するところまでですね。新しいテキストエディットを開いて、"record.xml"というファイル名で保存しましょう。 参考資料のこちらです。」


「 Responseはさっきもありましたね。Sayと、<Record/>というのが後ろの方に1つだけついている・・・なんとなくわかるような気がしますが、なんでこういう書き方になるんですかね?」


すべて命令だと思ったらわかりやすいと思います。Sayは喋れで、Recordは録音しろという意味です。なので、まずは『録音を行います。メッセージを残してください。』と喋らせて、その次に録音開始しろっという意味ですね。喋れっていうのは「何々と」喋れと命令する必要があるので<say></say>のように何々を囲う必要がありますが、録音しろという命令の場合、何々に該当するものはないので、<Record />と単一のタグで大丈夫です。」


「なるほど。録音は、「開始しなさい」という命令だけで大丈夫なんですね。あとは、書いたテキストを保存してサーバーにアップロードですよね。えっとその次はなんでしたっけ・・・。」


「URLを表示してみましょう。1つ前でやった"Say"のURLがありますよね?そのURLの、"say.xml"の"say"の部分を"record"に変えればそれが新しいURLになります。そのURLをTwilioのアカウントページのRequestURL部分に貼り付けて保存すればOKです。この辺は毎回同じですね。これで電話をかけると、録音が開始されるはずです。


「 そうでした!!とりあえずテストで録音します。」


「 緊張してたら録音のタイミングを外してしまいました・・・本番は後でしっかりやります!」


「まあひとまずはこれで大丈夫です笑。アカウントページにログといって、履歴を確認できるページがあるのですが、ここにさっき録音した音声データができあがります。」


「着信時間や端末情報、かかった費用(※1円!)なども細かく確認できるんですね、顧客分析に使えそう。」


「できた録音音声(MP3)をダウンロードして、同じようにサーバーにアップロードしましょう。さて、次は音声を再生するplayですね。新しいテキストを開きましょうか。


「音声データは.xmlではなくて.mp3になるんですね!次はplayですか(いかん、だんだん難しくなってきた・・・)。」


「この{音声ファイルのURL}という部分に、さっきの.mp3の音声データのURLを入れるんです。注意しなくちゃいけないのは、{}も削除するということと、音声データは".xml"ではなく".mp3"ですからね。


「はい〜!!汗。(このあたり私がすべて間違えた部分です。描写すると長くなるので省きます。みなさんもご注意ください〜)。」


「最後はこのplay.xmlのURLをアカウントページのRequestURLに貼り付けたら、完成です。


まとめ


最後がちょっと手ごわかったのですが、なんとか今回のゴールである録音した音声を再生するところまでできました。これからは、「Twilioは簡単なんです!」と、より胸を張って言えます!!!Twilioを動かすための基本的なステップは、動詞が変わろうが毎回同じで、図にまとめるとこんな感じです。

初心者ながら、一応形となるものができあがると感動します。それもこれも、浅井さんのレクチャーのわかりやすさと、なんだかんだ宋も助け舟を出してくれたおかげで、1時間半にしてはスムーズにできたのではないかと思います。では、長らくお待たせしましたが、できあがったモノマネ音声がこちらになります。元ネタをご存知でない方のために、YouTubeにあった動画も載せておきますが、まずは音声を聞いてみていただければと思います(イヤフォン着用推奨)。

 

YouTube動画


コジコジ役:伊勢

 

●今回の協力者

先生:TwilioJP-UG 東北支部リーダー デザイニウム 浅井さん

カメラマン兼いろんなサポーター:Twilio事業部

音声出演 半魚鳥のじろう役:OneMeのバイヤー 木村

 

●Twilioをより知れる!TwilioJP-UGの活動はこちら!★

https://twiliojp-ug.doorkeeper.jp/