2020年もいよいよ師走を残すのみとなり、忘年会のシーズンとなってまいりました。
今年は情勢も鑑み、中止あるいはWeb飲み会という形で忘年会を企画するようなケースも多いのではないでしょうか。
さて、忘年会といえばやはり宴会ゲームはつきものです。
弊社では2018年にAmazon Connectを利用した抽選アプリを開発していました。
今年はコミュニケーションプラットフォームサービスであるTwilioを利用して、さらに改良を加え、フルリモートでも楽しめる抽選アプリを作りたいと思います。
前編と後編の2部構成で解説していきます。
こちらでは主に 要件や構成の解説、SpreadSheetベースのWebサイト作成、Twilio初期設定 を行っていきます。
アプリケーションのメインとなる構築は後編でやっていきますので、ぜひそちらもご覧ください。
Twilio + Google SpreadSheet で忘年会に使える抽選アプリを作ってみた【後編】
目次
要件
電話を利用した抽選アプリを作成します。
基本的な要件は以下の通りとなります。
- 抽選の参加者全員が景品一覧と当選状況が見られるWebサイト
- 参加者がアプリの電話番号に電話をかけると、抽選に登録される
- 抽選への参加がすべて完了した時点で、司会者がWebアプリの抽選ボタンを押すと抽選が始まる
- 当選した人に電話がかかり、どの商品が当たったかを音声で伝える
- 当選と同時に、当選者の電話番号下四桁がWebサイトの当選状況に反映され、ほかの参加者にもどの商品が当たったかが確認できる
構成
【景品一覧＆当選状況をCMSとしてサイト化】
Google スプレッドシートをCMSとしてWebサイトを作成できるサービスWebSheetsを利用し、
景品と当選したかどうかをWebサイトとして閲覧できるようにする。
ついでにスプレッドシートは抽選にエントリーした人の電話番号を保存するためにも使用する。
【抽選エントリー】
参加者がTwilioの電話番号に電話をかけると、Twilio Functionによりスプレッドシートに電話番号を保存する。
また、発信者にエントリーが完了した旨を発話して通話終了。
【抽選＆当選通知】
Twilio FlowはREST APIをトリガーに起動できるので、APIをたたくためのWebアプリを用意し、それを介して抽選を開始。
Twilio Functionを呼び出し、スプレッドシートから参加者の電話番号を取得、ランダムで当選者を決定。
当選者の電話番号（下4桁）をスプレッドシートの景品概要に更新。
当選者の電話番号に発信し、当選した旨を発話して通話終了。
さて、以上の構成の開発を、本記事では以下の順番で解説していきます。
- WebSheetsを利用して景品一覧サイトを作る
- Twilioの構築
- Twilioの抽選フローを実行するWebアプリを作る
WebSheetsを利用して景品一覧サイトを作る
WebSheetsはGoogleスプレッドシートをCMSとして利用しWebサイトが作成できるオープンソースサービスです。
サイトホーム：WebSheets | Home
このサービスを利用して景品一覧を作成していきます。
1. まずは上のサイトのSUPER-QUICK GENERATORの「GET STARTED」から以下のページに飛びます。
2. 手順に沿って、テンプレートとなるスプレッドシートを自分のGoogleドライブに保存します。
スプレッドシートは共有設定から「リンクを知っている全員」にします。※権限は閲覧者でも動作することを確認しています。
3. スプレッドシートのリンクをコピーし、1.の画面のフォームに入力します。
また、任意のパーマリンクを入力します。
Submitを押すと最後のステップとしてアップデート通知用のメールアドレスを要求されるので入力します。
メールアドレスを入力すると、サイトが生成され、リンクが表示されます。
4. View Websheetsのリンクに飛ぶとサイトが生成されているのが確認できます。
サイトのタイトルや、シェアボタン、テーマの設定、アイテムの表示形式などはスプレッドシートで設定が可能です。
今回は以下のようなサイトを作成してみました。景品がカードごとに表示されています。
なお、各景品には当選者の欄を作り、抽選結果をTwilioからスプレッドシートに自動的に更新することで、当選者の電話番号の下四桁が入るようにします。
これでWebSheetsの連携が完了しましたので、いよいよTwilioを触っていきます。
Twilio
ずばりTwilioとは、電話やSMS・ビデオ・チャット・FAX・SNSなど、世の中にある様々なコミュニケーションチャネルをWeb・モバイルアプリケーションへとつなぐ「クラウドコミュニケーションAPI」です。
こちらはTwilioの日本語版公式サイトです。ご参考までに。
アカウント作成
それでは早速やっていきましょう。
Twilioを利用するには、まずアカウントを作成する必要があります。
作成手順についてはTwilio公式サイトに乗っていますので、こちら↓を参考に作成を行ってください。
https://www.twilio.com/blog/how-to-create-twilio-account-jp
さて、公式サイトにもありますが、Twilioには無料トライアルというものがあります。
トライアルアカウントでも基本的な機能は全て利用できるのですが、当然ながらいくつか制限がかかっています。
制限は以下の通り。
- 利用できるポイントが限られており、アカウントはポイントが無くなった時点でサスペンド、休止状態になります。
- 取得できる電話番号は同時に１つのみです。他の番号を使用したい場合は、取得されている番号を一度リリースする必要があります。
- 電話発信、もしくはSMSを送信できる先は、検証済みの電話番号のみです。それ以外の電話番号に対しては電話発信もSMS送信もできません。
- １回の通話の最大時間は10分に制限されます。
- 購入した電話番号にはどの電話番号からも発信ができますが、接続時にトライアルアカウントである旨のガイダンス(英語)が流れ、なにかキーを押さないと先にすすまず数秒で切断されるようになっています。
結構色々あります、、
注目すべきはTwilio上で検証済みの電話番号にしか電話がかけられない、というところですね。
抽選結果の通知をWeb上などで表示するのであればトライアルでも一応問題ないのですが、今回は当選者にTwilioから自動で電話をかけて当選連絡を行いたいので、アカウントをアップグレードしていきます。
ちなみに今回のアプリケーションでは、電話がかけられないこと以外に大きな不都合はないので、テスト用に自分の電話番号のみ検証登録しアカウントのアップグレードは最終テストのタイミングで行う、といった順序でも大丈夫です。
むしろ当選連絡の手段を別に用意するのであれば、アップグレードする必要すらないです。
アカウントアップグレード
Twilioのアカウントをアップグレードしていきましょう。
アップグレードはすごく簡単です。
課金ページからお支払い情報を入力し、最初の課金を行うだけ。
課金ページは、設定から「 Billing 」 ⇨ 「 Payment Methods 」と進むとたどり着けます。
トライアル中は完全無料ですので、アップグレードは焦らず好きなタイミングで行いましょう。
本人認証の設定
次に電話番号の取得、といきたいところですが、Twilioで電話番号を取得するためには本人認証が必要になります。
こちら↓のQiitaを参考に、まずは本人認証を行いましょう。
なお、法人での利用と個人での利用で設定方法が違いますので、注意してください。
TwilioでBundles（本人認証）の設定を行う（法人編）
TwilioでBundles（本人認証）の設定を行う（個人編）
Bundlesの登録、認証ができたら、電話番号の取得を進めていきます。
電話番号の取得
トライアルアカウントを作成した時点でデフォルトの電話番号が設定されていると思います。
が、今回は日本の番号を使用したいので、ここでは新しく050番号を取得します。
上記のトライアルアカウントの制限事項にも記載がありますが、トライアルでは電話番号を2つ所持することができません。ので、トライアルアカウントを使用している方は、まずデフォルトの電話番号をリリースする必要があります。
(アップグレードがお済みの方はリリースの必要はありません。)
まず、Twilio管理画面のサービスから、「 Phone Numbers 」を開きます。
表示されている電話番号をクリックし、画面下部の”Release this Number”をクリックすると↓がポップアップされます。
“Yes, release this number”をクリックし、電話番号を解放しましょう。
次に、新しい電話番号の取得をしていきます。
リリースと同じく「 Phone Numbers 」を開き、今度は画面右上、”Buy a number”をクリックし↓画面に進みます。
今回は050番号を取得したいので、number検索のボックスには”50″と入力します。
検索ボタンをクリックすると候補の番号が表示されますので、お好きな番号を選び購入ボタンをクリックしてください。
Capabilitiesで必要な機能が含まれていることを確認し、画面右下”Next”をクリックします。
ここでは、法人利用(Business)か個人利用(Individual)が問われていますので、適切な方を選択し右下”Next”で次へ進みます。
ここで先ほど登録したBundleとaddressを指定すると、電話番号の購入ができるようになります。
間違いがないことを確認したら、右下”Buy ~”をクリックし番号を購入しましょう。
これでTwilioの初期設定が完了となります。
続きは後編へ
長くなってしまいましたが、前編はここまでです。
要件・構成解説、WebSheets連携、Twilio初期設定を行いました。
後編ではいよいよアプリケーションの本構築をやっていきますので、ぜひご覧ください。
Twilio + Google SpreadSheet で忘年会に使える抽選アプリを作ってみた【後編】
- Remix SPAモードで静的WebサイトをGithub Pagesにデプロイする - 2024-11-05
- LangGraph入門！LLMアプリ開発ライブラリのQuick StartをAmazon Bedrockでやってみる - 2024-10-10
- AWS ChatbotでSlackからAmazon Bedrock Agentにアクセスしてみる - 2024-09-18
- Amazon Bedrockの新機能「Prompt flows」を試してみた - 2024-07-11
- Amazon ConnectのZero-ETLがGAされたので試してみた - 2024-06-03
【採用情報】一緒に働く仲間を募集しています
