DEV Community: Daizen Ikehara

TwilioQuestオペレーター養成キャンペーン開催

Daizen Ikehara — Tue, 06 Jul 2021 00:00:00 +0000

Twilio Developer Evangelistの池原です。昨日、TwilioQuest 3 日本語プレビュー版のリリースをアナウンスしましたが、このリリースを記念し、 「TwilioQuestオペレーター養成キャンペーン」 を実施します!

このキャンペーンではTwilioQuest 3日本語プレビュー版をインストールし、特定のミッションをクリアしたプレイヤーを対象として毎週2名の方にApple AirPods Proを進呈します。また、最終週には「TwilioQuestグランドチャンピオンシップ 2021 Summer」を開催します。この、「TwilioQuestグランドチャンピオンシップ 2021 Summer」では制限時間内に獲得した経験値を競うハイスコアチャレンジを実施し、優勝者にはApple M1 Macbook Pro(13インチ)を進呈します!

イベントスケジュールおよび賞品について

各ラウンドのスケジュール、ならびに賞品については下記の通りとなります。

日程 (日本時間)	賞品
ラウンド1: 2021年07月12日(月) - 2021年07月18日(日) 抽選日: 2021年07月19日(月)12:00	AirPods Pro x 2名様
ラウンド2: 2021年07月19日(月) - 2021年07月25日(日) 抽選日: 2021年07月26日(月)12:00	AirPods Pro x 2名様
ラウンド3: 2021年07月26日(月) - 2021年08月01日(日) 抽選日: 2021年08月02日(月)12:00	AirPods Pro x 2名様
TwilioQuestグランドチャンピオンシップ 2021 Summer 開催日: 2021年08月06日(金)15:00 - 18:00	M1 macbook pro x 1名様

キャンペーン・イベントへの参加方法

次の手順に従い、キャンペーンにご参加ください。

下記ページからキャンペーン・イベントに登録 TwilioQuestオペレーター養成キャンペーン参加申し込みページ
TwilioQuest日本語プレビュー版をダウンロードし、インストール TwilioQuest日本語版ページ
TwilioQuestを起動し、登録後にメールアドレスあてに送られるラウンド1-3共通の 「Operation」コード を手順に沿って適用
1. TwilioQuestを起動し、3キーでSettings画面を表示。その後、画面左のナビゲーションからOperationsを選択
2. Join Codeラベル下のテキストフィールドにOperationコードを入力し、Join ボタンをクリック。
Voice: マラカイト鉱山 ミッション を最後までクリア

応募にあたっての注意点

Email欄には必ず TwilioQuestで使用するTwilioアカウントのメールアドレス を入力してください。情報が異なっている場合、キャンペーン条件の達成を確認できないため、抽選の対象外となります。
キャンペーンは日本時間2021年7月12日(月) 00:00:00 から2021年8月1日(日) 23:59:59までの期間となります。この期間外にクリアした場合は 抽選の対象外 となります。
「TwilioQuestグランドチャンピオンシップ 2021 Summer」は2021年8月6日(金)15:00 - 18:00に実施される限定イベントです。登録後にお送りさせていただくURLに当日参加し、オープニングでアナウンスされる グランドチャンピオンシップ専用の「Operationコード」を別途利用いただくことになります。

その他の留意点やよくある質問についてはイベントページをご確認ください。

キャンペーンやTwilioQuestについての質問

キャンペーンやTwilioQuestについて質問がある場合はぜひ、こちらのTwitchチャンネルに登録ください。

Twitch - Neri78

このチャンネルでは下記の日程でTwilioQuest Q&Aストリーミングを開催します。

期間: 7月12日(月) - 8月2日(月)
月曜日(抽選結果発表含む)12:00 - 13:00
水曜日 12:00 - 13:00

あるいはTwilioQuest Discordサーバーでも質問いただけます。

さあ、TwilioQuestプログラムのオペレーターとなってクラウドの平和を守りましょう!

Let’s Hack!

TwilioQuest 3 日本語プレビュー版リリース!

Daizen Ikehara — Mon, 05 Jul 2021 00:00:00 +0000

Twilio Developer Evangelistの池原です。ゲームを遊びながらTwilio製品の利用方法に加えGitHubやPythonを学習できるTwilioQuest 3の日本語プレビュー版をリリースしました。

TwilioQuestとは?

TwilioQuestはゲームをプレイするようにさまざまな開発スキルを向上できるチュートリアルです。2019年に最新バージョンである「TwilioQuest 3」がリリースされました。Twilio製品の利用方法だけでなく、Pythonのようなプログラミング言語や、GitHubの使い方などを学習できます。

より詳しい説明やミッションの進め方については以前こちらの記事で取り上げていますので、こちらもぜひご覧ください。

全編英語で作成されていますが、ゲーム好きな開発者には非常に人気のコンテンツです。日本でも多くのみなさんにプレイいただいていますが、「日本語版が欲しい」という要望を多くいただいたため今回、日本語版を開発しました。

日本語プレビュー版について

今回のリリースでは下記4つのミッションコンテンツと 一部のUIを日本語化 しています。

基本トレーニング - TwilioQuestのプレイ方法、ならびにTwilio製品の基本を学べるミッション
Voice: マラカイト鉱山 - Twilio Programmable Voice入門ミッション
Pythonic Templeの謎 - Python入門ミッション
オープンソースの炎 - Git、GitHub入門ミッション

基本的なプレイ方法については英語版と同じですが、ミッション内容については単純な翻訳だけではなく日本の皆さんに向けて加筆・修正を加えています。

ダウンロードおよびインストール方法

TwilioQuestは下記よりダウンロードいただけます。英語版をすでにお持ちの方は改めてダウンロードいただく必要はありません。過去にプレイされた記録はそのまま保持されます。

TwilioQuest - ダウンロード

日本語プレビュー版の起動方法についてはこちらをご覧ください。

Let’s Hack!

ぜひ、日本語版をプレイしてみてください!今後も日本語ミッションの追加、アップデートを予定しています。

日本語版の不具合や質問については下記までお問い合わせください。

Twitter: @neri78
Email: dikehara [@] twilio.com

Twilio FunctionsでGETおよびPOSTを1つのハンドラーメソッドで処理するには

Daizen Ikehara — Mon, 07 Dec 2020 00:00:00 +0000

Twilio FunctionsはNode.jsで動作するサーバレス実行環境です。この環境にはTwilio Node ヘルパーライブラリーがあらかじめて組み込まれているためすぐ利用できます。また、オートスケール機能やセキュリティ機能などプロダクション向けのサーバレスアプリケーションを簡単かつ迅速に構築できます。

参考: Functionリクエストのフロー

Twilio FunctionsでGETとPOSTを判断する方法

このTwilio FunctionsはGET、POST、OPTIONSメソッドに対応しています。ただし、Functionsで呼び出されるハンドラーメソッドではリクエストヘッダにアクセスできないため、どのメソッドか判断できません。そのため、GETとPOSTでハンドルするFunctionを明示的に別にするという運用が考えられます。ただし、外部APIによっては1つのエンドポイントで両方のメソッドに対応しなければいけない場合があります。たとえばTwitch Webhookは1つのエンドポイントに対してイベントの購読確認（Subscription Verify）と通知（Notification）を、それぞれGET、POSTで行います。そのため、1つのエンドポイントで両方に対応しなければなりません。

将来的には改善されることを期待しますが、現時点ではリクエストで渡されるパラメータから判断し、それぞれに対応した処理を行う方法が考えられます。

Twitch Webhookの場合

Subscription Verify (GET)の場合は、hub.challengeという名前のパラメータが text/plainで渡されます。一方、Notification (POST) の場合はサブスクライブしたTopic（イベント）に合わせたパラメータがjsonで渡されます。

Stream Changed (ストリーミングの配信開始や配信タイトルの変更が発生したイベント)の場合は下記のようになります。

{
  "data": [
    {
      "id": "0123456789",
      "user_id": "5678",
      "user_name": "wjdtkdqhs",
      "game_id": "21779",
      "community_ids": [],
      "type": "live",
      "title": "Best Stream Ever",
      "viewer_count": 417,
      "started_at": "2017-12-01T10:09:45Z",
      "language": "en",
      "thumbnail_url": "https://link/to/thumbnail.jpg"
    }
  ]
}

これらのパラメータはハンドラーメソッドに渡されるevent引数に格納されるため、GET用のパラメータなのか、POST用パラメータなのかを判断し、処理を分岐させることになります。

試してみる

必要な環境
- Node.js / npmがローカル環境にインストールされていること
- Twilio CLIおよびServerless Toolkitをインストールし、プロファイルを作成していること参考: Twilio CLIハンズオン
- PostmanなどのGET/POSTリクエストを送信できるツール、または、curlコマンドを使用

次のコマンドで余計なファイルが存在しないTwilio Functionsプロジェクトを作成します。

twilio serverless:init <プロジェクト名> --empty

プロジェクトフォルダに移動し、続けて次のコマンドでGET、POST両方に対応するためのハンドラーメソッドを作成します。

twilio serverless:new twitch --template=blank

Blank.jsを開き次のように変更します。

exports.handler = function(context, event, callback) {

 let body = 'パラメータがなければこのメッセージが表示されます。';
 //パラメータが存在するかを確認
 if (event) {

   // Subscription Verify (GET)用のパラメータがセットされているかを確認
   if (event['hub.challenge']) {
     // GETリクエスト用の処理
     body = 'GET';
   }
   // Notification (POST)用のパラメータがセットされているかを確認
   else if (event.data) {
     // POSTリクエスト用の処理
     body = 'POST';
   }
 }
 //コールバック関数に結果を渡す
 callback(null, body);
};

次のコマンドを実行し、ローカルホストで動作させます。

twilio serverless:start

http://localhost:3000/twitch/blankに条件を変えてアクセスしてみましょう。

何もパラメータを付与せずにGETメソッドでアクセスした場合

hub.challengeをtext/plain形式でパラメータに設定し、GETメソッドを使った場合

dataをjson形式でBodyに設定し、POSTメソッドを使った場合

サンプルはこちらからアクセスできます。

まとめ

今回の方法はパラメータから判定しているので厳密にはリクエストメソッドの判定ではありませんが、１つのハンドラーメソッドでGET/POSTリクエストを処理しなければいけない場合に利用できます。

このエントリについての問い合わせ

TwilioQuest 24時間チャレンジ開催のおしらせ

Daizen Ikehara — Tue, 11 Aug 2020 00:00:00 +0000

こんにちは！猛暑が続いていますが、お元気でしょうか？私は夏の暑さとCOVID-19感染者数の増加により、すっかり引きこもっている毎日です。

さて、先日7月4日にTwilioJP-UG岡山さん主催によるTwilioQuest Nightがオンラインで開催されました。

takeshi.furusato.blog - TwilioJP-UG Okayama #4 TwilioQuest Night を開催しました。

今回はこのイベントをもとにTwilio Japanとして2020年8月28日（金）〜 29日（土）にかけて獲得経験値を競う「TwilioQuest 24時間チャレンジ」を開催します。

TwilioQuestとは

TwilioQuestは、Twilioが提供する製品の利用方法やJavaScript、PHP、Python、GitHubについてゲームをプレイするように学べるチュートリアルです。最新バージョンではMac/Windows/Linuxそれぞれにインストールでき、自分自身のペースでミッションに挑戦できます。

参考記事 - Game + Tutorial = TwilioQuest3のはじめかた

24時間チャレンジについて

今回のTwilioQuest 24時間チャレンジは制限時間内にどれだけ経験値を獲得できるかを競うイベントとなります。ご自身が興味のあるミッションを好きな時間にプレイできるため、これまで使ったことのないプロダクトや言語などに挑戦することができます。

参加者および高得点者には豪華賞品をご用意しています！例えば...

TwilioQuest Tシャツ（参加者全員に進呈）
TwilioQuest DevBox（上位2名に進呈）
さらに豪華賞品を追加予定（後日アナウンス）

参加条件

こちらは至ってシンプルです。イベントに登録いただくこと、TwilioQuest 3をダウンロードし、インストール、プレイできる環境をご用意いただくことと、賞品を受け取る場合は弊社の登録フォームにも別途登録いただくことが条件となります。

イベント期間中のサポートについて

イベント期間中は、次の予定（日本標準時）でTechnical Assistantによるサポートを提供します。Twilio社員やTwilio ChampionsがTwilioQuestのプレイ方法やミッションについての質問などを日本語でお答えします。

2020/08/28 16:30 - 18:00 Ask the TA (オープニングイベント内)
2020/08/28 18:00 - 20:00 Slackチャンネル内での非同期Q&A
2020/08/28 20:00 - 22:00 Twitch配信: 途中経過発表ならびにリアルタイムQ&A
2020/08/28 22:00 - 08/29 05:00 Slackチャンネル内での非同期Q&A
2020/08/29 05:00 - 07:00 Twitch配信: 途中経過発表ならびにリアルタイムQ&A
2020/08/29 07:00 - 12:00 Slackチャンネル内での非同期Q&A
2020/08/29 12:00 - 14:00 Twitch配信: 途中経過発表ならびにリアルタイムQ&A
2020/08/29 14:00 - 17:00 Slackチャンネル内での非同期Q&A

*ストリーミングについては予定が変更になる可能性があります。

参加方法

下記イベントページよりご登録ください。

TwilioQuest 24時間チャレンジイベントページ

この記事についての問い合わせ

イベントについての質問がありましたらぜひお問い合わせください。みなさんの参加をお待ちしています！

Googleスプレッドシートのシフト表を使ってTwilio Studioフローの転送先をNode.jsから更新する方法

Daizen Ikehara — Wed, 20 May 2020 00:00:00 +0000

以前の記事で、在宅勤務に伴う電話問い合わせの一時休止を解決する方法として、Twilio Studioを利用し個人電話に転送する方法を紹介しました。

今回は別の記事で紹介したGoogleスプレッドシートのシフトデータをもとに転送先となる個人をNode.jsで変更する方法を紹介します。

前提条件

Twilioアカウントを持っていること（無料トライアルのサインアップ方法）
期間限定の問い合わせ番号となる電話番号を購入していること（日本の番号を取得する場合）
こちらの記事に則りフローを作成、公開済みであること
こちらの記事に則りGoogleスプレッドシートからデータを取得するNode.jsアプリケーションを作成済みであること

Node.jsプロジェクトの作成とパッケージのインストール

以前の記事に沿って作成したNode.jsアプリケーションのフォルダーに移動し、twilio-nodeパッケージをインストールします。

npm i twilio

次に.envファイルにTwilioへの接続情報やStudioフローのIDを保存する環境変数を追加します。

SPREADSHEET_ID=
STAFF_WORKSHEET_ID=
SHIFT_WORKSHEET_ID=
TWILIO_ACCOUNT_SID=
TWILIO_AUTH_TOKEN=
TWILIO_STUDIO_FLOW_SID=

Twilio Studio REST API v2を使ったフローの取得と更新

今回利用するTwilio Studio REST API v2は4月末にパブリックベータとしてアナウンスされたばかりの機能です。この新しいAPIを使って定義済みのフロー設定を外部から更新できます。

Twilioコンソールを開きACCOUNT SIDと、AUTH TOKENをそれぞれ.envファイルの TWILIO_ACCOUNT_SIDならびに TWILIO_STUDIO_FLOW_SID の値として設定します。

次に、Studioコンソールを開き、call forwardingフローのSIDを TWILIO_STUDIO_FLOW_SID の値として設定します。

index.jsを開き、前回の記事でテストに使用したコードを変更します。このコードでは、シフト担当者の電話番号を取得した状態で、Twilio Nodeクライアントを利用しStudioフローを取得します。

loadShiftPhoneNumbers().then (
    numbers => {
        // twilio client
        const client = require('twilio')
           (process.env.TWILIO_ACCOUNTSID,
            process.env.TWILIO_AUTH_TOKEN);

        // Studioのフローを取得
        client.studio.flows(process.env.TWILIO_STUDIO_FLOW_SID)
            .fetch()
            .then(flow => {})
            .catch(error => console.error(error))
    ;})
    .catch( error => console.error(error));

フローの定義情報は、definitionというプロパティに保持されているため、そちらを取得します。また、各ウィジェットについては、statesというプロパティに配列として定義されています。このstates配列からウィジェットの名前をキーとして着信を転送するウィジェットを取得し、更に転送先番号を更新します。

loadShiftPhoneNumbers().then (
    numbers => {
        // twilio client
        const client = require('twilio')
           (process.env.TWILIO_ACCOUNTSID,
            process.env.TWILIO_AUTH_TOKEN);

        // Studioのフローを取得
        client.studio.flows(process.env.TWILIO_STUDIO_FLOW_SID)
            .fetch()
            .then(flow => {
                // フローの定義を取得
                let definition = flow.definition;
                // forward_callウィジェットを取得
                let callForwardWidget = definition.states.find(
                    item => item.name == 'forward_call');
                // 転送先番号をシフトの電話番号で更新
                callForwardWidget.properties.to = numbers;
            })
            .catch(error => console.error(error));
    })
    .catch( error => console.error(error));

後は更新した定義をStudio REST API v2を使い、反映させます。この際、statusプロパティで反映したフローを下書き状態（draft）にしておくことも、即座に公開（published）にすることもできます。

loadShiftPhoneNumbers().then (
    numbers => {
        // twilio client
        const client = require('twilio')
           (process.env.TWILIO_ACCOUNTSID,
            process.env.TWILIO_AUTH_TOKEN);

        // Studioのフローを取得
        client.studio.flows(process.env.TWILIO_STUDIO_FLOW_SID)
            .fetch()
            .then(flow => {
                // フローの定義を取得
                let definition = flow.definition;
                // forward_callウィジェットを取得
                let callForwardWidget = definition.states.find(
                    item => item.name == 'forward_call');
                // 転送先番号をシフトの電話番号で更新
                callForwardWidget.properties.to = numbers;

                // 更新した定義を反映し、即座に公開
                client.studio.flows(process.env.TWILIO_STUDIO_FLOW_SID)
                    .update({
                        definition: definition,
                        commitMessage: 'シフトの更新 - 2020/05/15',
                        status: 'published'})
                    .then(res => console.log(res))
                    .catch(error => console.error(error));
            })
            .catch(error => console.error(error));
    })
    .catch( error => console.error(error));

index.jsを実行し、ログにエラーが含まれていないこと、Studioのフローが実際に変更されていることを確認しましょう。

node index.js

まとめ

ご覧いただいたように、パブリックベータとして公開されたREST API v2を活用することで、外部のデータやシステムと連携した上でTwilio Studioのフローを更新することができるようになりました。非常に強力なAPIなので、ぜひご活用ください。

今回のサンプルはこちらのGitHubリポジトリからクローンし、環境変数にそれぞれ値を設定することで確認することも可能です。

新型コロナウイルス感染症への支援策について

Twilioでは新型コロナウィルス感染症により引き起こされるさまざまな社会問題を解決する会社、団体、開発者グループに向けて無料クレジットの進呈など支援を行なっています。詳しくはこちらの記事をご覧ください。

また、Twilioを自社のシステム、ソリューションやパッケージに組み込みたいとお考えの場合は、営業部までお問い合わせください。

このエントリについての問い合わせ

不明点があればぜひ、お問い合わせください。オンライン登壇のご依頼等もこちらまで！

GoogleスプレッドシートからNode.jsでシフトデータを読み出す方法

Daizen Ikehara — Tue, 19 May 2020 00:00:00 +0000

Google Cloud Platform（GCP）にはGoogle Sheets APIが提供されており、このAPIを利用してGoogleスプレッドシートのデータにアクセスすることができます。今回はGoogleスプレッドシートのスタッフ、シフトデータをNode.jsで読み込む方法を紹介します。

前提条件

Google Cloud Platform （GCP）のアカウントの作成、ならびに有効な支払い方法が登録されていること
Googleスプレッドシートを利用できること

シフトを管理するGoogleスプレッドシート

こちらにスプレッドシートのサンプルを用意しました。ファイルメニューからこのスプレッドシートを自分のGoogleアカウントで利用できるようにコピーします。スプレッドシートの中身をみてみましょう。Shiftシートには日ごとの担当者を4名まで設定しています。

また、Staffシートには担当者ごとの連絡先電話番号がE.164フォーマットで登録されています。

GCPでSheets APIを有効化

はじめてGCPを利用する場合は、コンソールからプロジェクトを作成します。

例ではプロジェクト名を google-sheet-studio としましたが、任意のプロジェクト名で構いません。

作成ボタンをクリックするとリソースの管理画面に戻り、プロジェクトの作成が開始されます。数十秒〜数分程度で作成が完了します。

次にAPI ライブラリを開きます。

先ほど作成したプロジェクトが選択されていることを確認します。

Google Sheets APIを検索し、プロジェクトに追加します。

詳細画面から 有効にする ボタンをクリックするとGoogle Sheets APIが有効になります。

APIが有効化されると、概要画面に遷移します。次に 認証情報を作成 ボタンをクリックし、このAPIを使用するための認証情報を作成します。

認証情報の追加画面において次の設定を行い、必要な認証情報 ボタンをクリックします。

使用する API - Google Sheets API
API を呼び出す場所 - ウェブサーバー（node.js、Tomcat など）
アクセスするデータの種類 - アプリケーションデータ
App Engine または Compute Engine でこの API を使用する予定はありますか？ - いいえ、使用していません

続けてサービスアカウント名とロールを設定します。例では、test およびロールを Project の 閲覧者 とし、キーのタイプを JSON としました。

次へ ボタンをクリックすると認証情報を含んだJSONファイルが作成されダウンロードされます。このファイルはGoogle Sheets APIを利用するために必要になります。作成されたJSONファイルを開くと client_email という名前のキーの値に先ほど作成したサービスアカウント IDが記載されています。Googleスプレッドシートを共有する際にこの情報が必要になります。

Googleスプレッドシートの共有とURLや情報の確認

次に、Google Sheets APIからアクセスをできるようにGoogleスプレッドシートをサービスアカウントに共有します。先ほど複製したGoogleスプレッドシートを開き、右上の 共有 ボタンをクリックします。表示された共有ダイアログに先ほどのサービスアカウント IDを入力します。

Enterキーを押すと、権限の設定を行えます。書き込み権限は必要ないため閲覧者としました。共有 ボタンをクリックし、共有を完了します。

更に、このGoogleスプレッドシートから次の情報を控えておきます。

スプレッドシートID（https://docs.google.com/spreadsheets/d/ の後に表示されている英数文字列のうち、次の’/’ の前の値。例: https://docs.google.com/spreadsheets/d/ 12312321xxx21232131212 /edit#gid=0 の太字部分）
Shift、StaffそれぞれのワークシートのID（URLが #gid=0 の場合は、 0 となる）

これでシートから情報を取得する前準備が整いました。

Node.jsプロジェクトの作成とパッケージのインストール

Google Sheets APIを利用することでGoogleスプレッドシートのデータにアクセスすることができます。このAPIに対応するNode.jsクライアントライブラリも用意されており、クイックスタートのようにセルの値を取得することもできるのですが、取得するセルの範囲を指定する必要があり、使いにくいと感じるかもしれません。そのため、今回はGoogle Sheets APIを使いやすくラップしたgoogle-spreadsheetパッケージを利用します。このパッケージを利用すると、セルの範囲を指定することなく、ワークシートから行オブジェクトとしてデータを読み込むことができます。

Node.jsアプリケーションを作成し、google-spreadsheetと環境変数を.envファイルからロードできるdotenvパッケージをインストールします。

npm i google-spreadsheet dotenv

次にGoogleスプレッドシートやシートのIDを記録しておく.envファイルを作成します。

touch .env

.envファイルには次の環境変数を追加しておきます。

SPREADSHEET_ID=
SHIFT_WORKSHEET_ID=
STAFF_WORKSHEET_ID=

SPREADSHEET_ID、STAFF_WORKSHEET_ID、SHIFT_WORKSHEET_ID には先ほど控えておいたGoogleスプレッドシートのIDやそれぞれのシートのIDを追加します。

最後にGCPからダウンロードしたJSONファイルをプロジェクトフォルダーにコピーし、わかりやすいように名前を credentials.json と変更します。これで準備完了です。

Googleスプレッドシートからシフト表を取得

ここからはGoogleスプレッドシートからシフト表を取得するコードを実装します。Node.jsアプリケーションに新しくjsファイルを追加します。index.js という名前で作成しました。

touch index.js

index.jsをエディタで開き、環境変数の読み込みや必要なパッケージをインポートします。

'use strict';
require('dotenv').config();
const { GoogleSpreadsheet } = require('google-spreadsheet');

次にGoogleスプレッドシートからシフトデータを読み取り、担当者の電話番号を返す非同期関数を実装します。

// Googleスプレッドシートからシフト情報をロードし、担当者の電話番号を取得
async function loadShiftPhoneNumbers() {
    // 処理を実装
}

この loadShiftPhoneNumbers 関数でGoogleスプレッドシートをロードします。ここでGCPへの接続に必要になるのが先ほどコピーし、名前を変更した credentials.json です。

// Googleスプレッドシートからシフト情報をロードし、担当者の電話番号を取得
async function loadShiftPhoneNumbers() {
    // スプレッドシートIDと資格情報を用いてGoogleスプレッドシートをロード
    const doc = new GoogleSpreadsheet(process.env.SPREADSHEET\_ID);
    const credentials = require('./credentials.json');
    await doc.useServiceAccountAuth(credentials);
    await doc.loadInfo();
}

ワークシートを取得する場合は、GoogleSpreadsheet.sheetsById、またはGoogleSpreadsheet.sheetsbyIndexを利用できます。さらに、GoogleSpreadsheetWorksheet.getRowsメソッドを使用し、ワークシートの行を取得できます。残念ながら特定の列の値をキーにフィルタリングはできないようなので全ての行を取得します。

// Googleスプレッドシートからシフト情報をロードし、担当者の電話番号を取得
async function loadShiftPhoneNumbers() {
    // スプレッドシートIDと資格情報を用いてGoogleスプレッドシートをロード
    const doc = new GoogleSpreadsheet(process.env.SPREADSHEET\_ID);
    const credentials = require('./credentials.json');
    await doc.useServiceAccountAuth(credentials);
    await doc.loadInfo();

    //シフト情報を取得
    const shiftSheet = await doc.sheetsById[process.env.SHIFT_WORKSHEET_ID];
    const shiftRows = await shiftSheet.getRows();
    // 従業員情報を取得const staffSheet = await doc.sheetsById[process.env.STAFF_WORKSHEET_ID];
    const staffRows = await staffSheet.getRows();
}

GoogleSpreadsheetWorksheet.getRowsメソッドはGoogleSpreadsheetRowの配列を返します。また、このGoogleSpreadsheetRowオブジェクトは最初の行をプロパティのキーとしてアクセスできるため、Array.prototype.find()メソッドを利用し、Date列をキーとして特定の日付のデータを抜き出すことができます。この記事では、2020年5月15日を例として取得します。実際のアプリケーションでは new Date() などを利用し、当日のデータを取得することになるでしょう。

// Googleスプレッドシートからシフト情報をロードし、担当者の電話番号を取得
async function loadShiftPhoneNumbers() {
    // スプレッドシートIDと資格情報を用いてGoogleスプレッドシートをロード
    const doc = new GoogleSpreadsheet(process.env.SPREADSHEET\_ID);
    const credentials = require('./credentials.json');
    await doc.useServiceAccountAuth(credentials);
    await doc.loadInfo();

    //シフト情報を取得
    const shiftSheet = await doc.sheetsById[process.env.SHIFT_WORKSHEET_ID];
    const shiftRows = await shiftSheet.getRows();
    // 従業員情報を取得const staffSheet = await doc.sheetsById[process.env.STAFF_WORKSHEET_ID];
    const staffRows = await staffSheet.getRows();

    // シフト情報からDate列の値と指定した日付をロケール情報に基づいて取得
    let shiftRow = shiftRows.find(row =>
        new Date(row.Date).toLocaleDateString() ===
        new Date('2020/5/15').toLocaleDateString());
}

あとは、取得した行から必要なデータを読み取り、アプリケーションで使用できます。

データの活用例として、このシフトデータから担当者の電話番号をカンマ区切りの文字列で取得する方法も実装します。

shiftRow.Employee1のように各列のキーを指定してデータを取得することもできますが、shiftRow._rawData shiftRow には、行のデータが配列として保持されています。2020年5月15日のデータは、['5/15/2020', 'Mitsuharu', 'Yoshihiro'] となります。この配列をArray.prototype.slice()メソッドで最初の日付データを除外した配列とし、さらに、Array.prototype.map()メソッドでシフト担当の従業員の電話番号の配列へと変換します。そして、最後に、Array.prototype.join()メソッドで文字列として返すという処理を実装しました。

// Googleスプレッドシートからシフト情報をロードし、担当者の電話番号を取得
async function loadShiftPhoneNumbers() {
    // スプレッドシートIDと資格情報を用いてGoogleスプレッドシートをロード
    const doc = new GoogleSpreadsheet(process.env.SPREADSHEET\_ID);
    const credentials = require('./credentials.json');
    await doc.useServiceAccountAuth(credentials);
    await doc.loadInfo();

    //シフト情報を取得
    const shiftSheet = await doc.sheetsById[process.env.SHIFT_WORKSHEET_ID];
    const shiftRows = await shiftSheet.getRows();
    // 従業員情報を取得const staffSheet = await doc.sheetsById[process.env.STAFF_WORKSHEET_ID];
    const staffRows = await staffSheet.getRows();

    // シフト情報からDate列の値と指定した日付をロケール情報に基づいて取得
    let shiftRow = shiftRows.find(row =>
        new Date(row.Date).toLocaleDateString() ===
        new Date('2020/5/15').toLocaleDateString());

        // 元データ['5/15/2020', 'Mitsuharu', 'Yoshihiro']
        // Date列(最初の列)を取り除き、シフト担当の従業員を含む配列を取得する
        let employeesOnDuty = shiftRow._rawData.slice(1); 
        // ['Mitsuharu', 'Yoshihiro']
        // 名前から電話番号の配列に置換
        employeesOnDuty = employeesOnDuty.map(m => 
            staffRows.find(row => row.Name === m).PhoneNumber); 
        // ['+815012341235', '+815012341237']

        return employeesOnDuty.join(',');}

ここまで実装を終えた段階で、きちんとデータを読み込めるかどうかを確認しましょう。
loadShiftNumbers関数のスコープ外に次のコードを追加します。

// 実装した関数が正しく動作するかテスト
loadShiftPhoneNumbers()
    .then (numbers => console.log(numbers))
    .catch(error => console.error(error));

index.jsを実行し、次のような結果がコンソールに出力されていれば成功です。

node index.js

実行結果

+815012341235,+815012341237

想定した結果が得られない場合は、出力されたエラーを参考にGCPの設定や、JSONファイルの読み込みなどを確認してください。

まとめ

ご覧いただいたように、Google Sheets APIを使うことでGoogleスプレッドシートをデータソースとしたアプリケーションを構築することができます。ぜひご活用ください。

このエントリについての問い合わせ

不明点があればぜひ、お問い合わせください。オンライン登壇のご依頼等もこちらまで！

Twilio Studioを使って問い合わせ番号への着信を複数の番号に転送する方法

Daizen Ikehara — Fri, 17 Apr 2020 00:00:00 +0000

在宅勤務と電話応対の難しさ

新型コロナウイルス感染症（COVID-19）の拡大に伴う緊急事態宣言が東京、大阪、福岡を含む7都道府県を対象として発出されました。（2020年4月14日現在）この宣言を受けて在宅勤務の開始とそれに伴う電話対応の一時休止が多くの企業からアナウンスされています。チャットやSMSを活用することでこれまでの顧客対応を一部担うことはできるものの、利用できるコミュニケーションチャネルが電話のみという場合、お客様への対応に頭を悩ます場合も多いのではないでしょうか。

もちろん、各事業者が提供する電話転送サービスなどを利用することで、代表番号からの転送を設定することは可能です。しかし、担当者の欠勤や休暇への対応など、転送設定を柔軟に運用するためには課題が残ります。また、リモートで設定ができない場合は、リスクを取って事業所まで外出し、設定を行うということも考えられます。特に中小規模の組織にとっては頭の痛い問題ではないでしょうか。

今回は、電話番号をTwilioから取得し、Twilio Studioを使って期間限定の問い合わせ窓口を開設し、着信を複数の担当者の電話回線に転送する方法を紹介します。ポイントは手軽さと設定の柔軟性です。

前提条件

Twilioアカウントを持っていること（無料トライアルのサインアップ方法）
期間限定の問い合わせ番号となる電話番号を購入していること（日本の番号を取得する場合）

Twilio Studioを使った電話転送

Twilio Studioは電話やSMSなどの着信応答を設定することができるノンコーディーングツールです。今回のような転送設定を行う場合はプログラミングの知識を必要としません。

TwilioコンソールからStudioダッシュボードを開き、赤色の Create a flow ボタンをクリックし、新しいFlowの作成を開始します。

Flowの名前はCall Forwardingとしました。

Studioにはいくつかテンプレートが用意されているため、目的に合えば最小限の項目設定で運用を開始できます。少しスクロールすると表示される Call Forwarding テンプレートを選択し、Next ボタンをクリックします。

あらかじめ、Connect Call To というウィジェットが配置されたデザイン画面が表示されます。このデザイン画面では右側の WIDGET LIBRARY からウィジェットをドラッグ&ドロップし、複雑なコールフローを設定できます。

今回の記事では特にウィジェットを追加しないまま進めます。

次に forward_call と名前がつけられているウィジェットをクリックしましょう。WIDGET LIBRARYが表示されていたパネルが、選択したウィジェットの設定項目表示パネルに切り替わります。

このウィジェットは現在の通話を別の番号（単数、複数）や、Client User（別のTwilio Client）、SIM、SIPエンドポイント、あるいはカンファレンスコールに接続させることができます。今回は複数の番号に転送したいため、CONNECT CALL TO をMultiple Numbers (Simulring) に、PHONE NUMBERS OR CLIENTS に複数の電話番号をカンマ（,）区切りで設定しました。この際、電話番号はE.164フォーマットで指定する必要があります。

（例）050-3196-5549 → +815031965549

また、複数の番号に転送する場合は、同時に転送するわけでなく、Call Per Second（CPS）と呼ばれる１秒間あたりの発信数に則り転送されます。現在の設定はコンソールで確認できます。

つぎに発信者ID（CALLER ID）を設定しましょう。この項目は転送先の携帯電話等に表示される発信元の番号になります。本来であれば電話をかけてきたお客様の番号を表示できれば良いのですが、一般電話回線にTwilio Studioを用いた電話の転送を行なった場合、発信者の偽装になりかねないため、残念ながら「非通知」と表示されてしまいます。

これでは本当に非通知なのか、Twilio Studioで転送された着信かどうかがわからず不便ですよね。そのため、代替策として、{{trigger.call.To}} と指定し、期間限定の問い合わせ番号として設定する番号、すなわち転送に利用したTwilioの電話番号が表示されるようにします。

これでStudioの設定は完了です。ウィジェットの Save ボタンで変更を保存するとともに、画面上の Publish ボタンでフローを公開できます。忘れないように Publish してください。

さて、残るは電話番号の設定です。事前に購入している電話番号の詳細画面を電話番号コンソールから開き、Voice A CALL COMES IN で Studio Flow を選択します。

続けて先ほど設定したフローを選択します。

おっと、忘れずに Save ボタンを押しましょう。この番号に転送先でない番号から電話をかけて動作を確かめたら、Webサイトの更新ですね！

まとめ

Twilio Studioを利用すれば期間限定の問い合わせ番号の設置と電話転送をリモートで設定できます。スタッフの休暇やシフトに合わせて転送先をStudioを利用し手動で簡単に変更できます。また、Studio APIも提供されているので外部のプログラムからフローを制御できます。

さらに、色々な手法を組み合わせることで単純な転送だけではなくより複雑なフローも設定できます。Qiitaにもいろいろと記事が公開されていますので参考になれば幸いです。

新型コロナウイルス感染症への支援策について

また、Twilioを自社のシステム、ソリューションやパッケージに組み込みたいとお考えの場合は、営業部までお問い合わせください。

このエントリについての問い合わせ

不明点があればぜひ、お問い合わせください。オンラインでの登壇依頼等もお待ちしてます♪

TwilioQuest 3: Basic Training その1 - ハッキングデバイスを活用しセキュリティを解除せよ

Daizen Ikehara — Mon, 06 Apr 2020 00:02:17 +0000

TwilioQuest 3には、Twilio製品やプログラミング言語、GitHubの利用方法についてなど数多くのミッションが用意されています。各チュートリアルをクリアすると経験値やアイテムを獲得できます。獲得したアイテムはアバター（キャラクター）に装備させることができ、自分だけのアバターをデザインできるゲームを模したチュートリアルとなっています。

前回のブログではTwilioQuestと最新バージョンについての解説と、ゲームのダウンロード方法や初期設定、基本的な操作方法を解説しました。また、クラウド探査船 Fog Owl やアシスタントロボット Cedric についても理解が深まったのではないでしょうか？

さて、今回はオペレーターのスキルやナレッジを「レベルアップ」するためのさまざまなトレーニングミッションと、最初にやるべきトレーニングとして用意されている「Basic Training」の進め方について解説します。

では、はじめましょう！

トレーニングミッションの開始方法

Fog Owlの右下半分にはオペレーターがトレーニングミッションにダイブできるVRポッドが4つ用意されています。赤色のライトが点灯しているポッドはすでに他のオペレーターが使用していますので、緑色のライトがついているポッドに入りましょう。

それぞれのポッドの中には、Twilioの製品やJavaScript、TypeScriptといったプログラミング言語、さらにGitHubを使ったオープンソースへの貢献方法など開発者としてのスキルをレベルアップできるようなトレーニングミッションが用意されています。各ミッションを選択すると進捗具合がランクで表示されます。 (S, A, B, Cなど)

このブログの執筆時点では次のトレーニングミッションが用意されています。

Basic Training
Twilio Messaging: A Walk in the Park
Twilio Voice: Malachite Mine
Twilio Studio: The Widget Foundry
Twilio CLI: CLI Steamworks
Twilio Flex: Academy of Contact Center Arts
Twilio IoT: Hardware Spacedock
Twilio SendGrid: Ocean of Email
Twilio Video: That Belongs in a Museum
The Flame of Open Source
Advent of Code
JavaScript Test Lab (最近更新されたミッション)

Twilio からはじまるトレーニングミッションに参加するには、事前にBasic Trainingの特定チュートリアルを完了している必要があります。それ以外のトレーニングミッションにはそのまま参加できます。特にこれからJavaScriptを学習したい、あるいは最近TwilioQuestをインストールした方はぜひ、更新された JavaScript Test Lab をプレイしてください。こちらのBlogでアナウンスされたように、Basic TrainingやJavaScript Test Labで用意されている特定のチュートリアルを完了すると、オーストラリアでの大規模森林火災復興のための植樹プロジェクトに貢献できます（１プレイヤーあたり最大2本）。

さて、まずはBasic Trainingミッションを選択し、 LAUNCH MISSIONボタンをクリックしましょう。

Basic MissionではTwilioQuest 3の利用方法を学べるチュートリアルが用意されています。はじめてこのミッションに挑戦した場合、Cedricが目的や操作方法をガイドしてくれます。もしFog Owlに戻りたい場合はスタート地点へと戻るか、5キーを押すと船へと戻れます。

TwilioQuest 101 - バリアや宝箱のセキュリティを解除せよ！

TwilioQuest 3の全てのトレーニングミッションはスタート地点から出口までさまざまなチュートリアルをクリアし、たどり着くようにデザインされています。その道中には行く手を遮るバリア、経験値やアイテムを取得できる宝箱などが配置されています。それぞれに強固なセキュリティがかかっており、そのままでは通過・開放ができません。

オペレーターはセキュリティをハッキングするためのデバイスを装備しています。バリア、宝箱の前でスペースバーを押してみましょう。ハッキング装置の画面が表示されます。

ハッキング装置は2つの画面エリアで構成されています。

青枠: チュートリアルの内容や手順、コードエディタの表示エリア
赤枠: セキュリティの状態と解除コードの入力フィールドをするエリア

青枠のエリアにはチュートリアルに関する情報や手順を表示できます。最初のミッションを例に見ていきましょう。

Overviewタブ

Overviewタブではチュートリアルと報酬が表示されます。今回はこのハッキング装置の使い方を学ぶ、というチュートリアルです。達成すると経験値を100ポイント、さらにOperator Bootsを手に入れることができます。
Objectiveタブ

Objectiveタブはセキュリティを解除するためのチュートリアルのゴールが記されています。今回はテキストフィールドに解除コードを記入し、 HACKボタンを押す、というゴールです。また、解除コードは Helpタブ内で見つけられるためShow Helpボタンを押すようにという指令も記載されています。その通りに押してみましょう。
Helpタブ

Helpタブにはこのチュートリアルを完了するための詳細な手順が記載されています。進め方がわからない場合はまずこのタブを見ましょう。今回は黒塗りの部分に解除コードが記されていますので実際のゲーム画面で確認してください。そのコードを右側のテキストフィールドに入力します。

Hack it!

解除コードは入力しましたか？準備完了であれば HACKボタンをクリックしましょう。解除コードが検証され、正しければハッキング完了です。無事に経験値を100ポイント、Operator Bootsを手に入れることができました!

マップ画面に戻ると先ほどのバリアが解除されています。続けて宝箱にも挑戦しましょう。

TwilioQuest 3が提供するコードエディター

TwilioQuest 3が実行される環境は一定ではありません。Windows、Mac、LinuxといったOSの違いやユーザーごとに好みとする開発環境も異なります。はたまた、これからプログラミングを学ぼうという場合は開発環境すらインストールされていない可能性もあります。でも、大丈夫です。TwilioQuest 3は簡易コードエディターおよび実行環境を提供します。次のチュートリアルに進んでみましょう。

Using the Code EditorチュートリアルではTwilioQuest 3が提供するコードエディターの使い方を学びます。Objectiveタブに記載されているように、画面右側の </> Show Code Editorボタンをクリックするとコードエディター画面に切り替わります。また、コードエディター画面で同じボタンをクリックするとチュートリアル画面に戻ることができます。

コードエディターには3つのボタンが用意されています。

Run the code editorボタン: このボタンをクリックするとコードがNode.js環境下で実行されます。再度ボタンを押すか、ハッキング装置画面を閉じるまでコードが実行され続けます。つまり、チュートリアル画面に切り替えたとしても実行が続く形になります。
Trashボタン: このボタンをクリックするとコードが初期状態に戻り全ての変更が破棄されます。最初からやり直したい、既存コードが消えてしまいどうにもならない場合に利用できます。
Hide Code Editorボタンをクリックするとチュートリアル画面へと戻ります。

このチャレンジでは既に必要な実装が完了していますが、Windows PCを利用する場合や、Node.js以外でこのチュートリアルを進めたい場合はHelpタブの説明を読み進めてください。

コードエディタ画面の下に出力されるローカルホストのアドレスをテキストフィールドに入力しHACKボタンをクリックするとこのチュートリアルを完了できます。

アイテムの使い方

ここまでのチュートリアルで現在2つ、または3つのアイテムを手に入れました。これらを装備するには、1またはiキーを押し、インベントリ画面を表示します。この画面アイテムをアバターにドラッグ＆ドロップし装備します。アバターがどのように変化するか確かめてみましょう。TwilioQuest 3では数多くのアイテムが用意されています。ぜひ世界に一つだけのアバターをデザインしてみてください。

次回予告

さて、これでTwilioQuest 3の基本的な操作方法やチュートリアルの進め方の紹介が終わりました。次の記事ではBasic Missionに用意されているTwilioアカウントの基礎チュートリアルを解説します。お楽しみに。それではLet’s HACK!

TwilioQuest 3をダウンロード

TwilioQuest 3は無料でダウンロード、プレイ可能です。App内課金もありません！ぜひ！

TwilioQuest 3 - ダウンロード

TwilioQuest 3 Blogシリーズ

Game + Tutorial = TwilioQuest3のはじめかた
TwilioQuest 3: Basic Training その1 - ハッキングデバイスを活用しセキュリティを解除せよ (この記事）
TwilioQuest 3: Basic Training その2 - Twilioアカウントの作成と電話番号の取得
TwilioQuest 3: Basic Training その3 - プロモーションコードを適用し無料クレジットをゲット

TwilioQuest 3について質問があるんだけど？

進め方がわからない。そんな時はぜひご連絡ください！

Twitter (@Neri78)
Email: dikehara@twilio.com

Game + Tutorial = TwilioQuest3のはじめかた

Daizen Ikehara — Wed, 01 Apr 2020 01:56:55 +0000

こんにちは、Twilioのデベロッパーエバンジェリストの池原です。2月13日、14日に開催された開発者カンファレンスDevelopers Summit 2020にTwilio Japanはスポンサーとして参加させていただきました。今回、ゲームを遊びながらTwilio製品の利用方法に加えJavaScript、Pythonも学習できるTwilioQuest 3を題材にセッション登壇や、ブース展示を行いました。セッション資料はこちらで公開中です。

Blogでは、今回から複数回に分けてこのTwilioQuest 3の特長やはじめ方、Basic Trainingの進め方などを解説します。また、TwilioQuestについてより詳しく知りたいという方は、ぜひ、作者のBlog記事（英語）を読んでみてください。

Twilio Blog - Kevin Whinnery

TwilioQuest = ゲームとチュートリアルのいいとこ取り

TwilioQuestはTwilioの製品やプログラミング言語、GitHubの利用方法についてなど数多くのチャレンジが用意されています。各チャレンジをクリアすると経験値やアイテムが取得できます。取得したアイテムはアバター（キャラクター）に装備し、自分だけの見た目をデザインできるゲームを模したチュートリアルです。日本語の解説記事もありますので、ぜひ、こちらもご覧ください。

作者であるKevinによると、最初のバージョンは2013年にリリースされています。そして、2019年の夏に最新バージョンである、TwilioQuest 3がリリースされました。私自身は前バージョンであるTwilioQuest 2を以前にプレイしたことがあったのですが、3はユーザー体験という意味では特に次の2点が大きく変わっています。

これまでのWebベースアプリケーションからローカル環境にインストールする形態に変更されました。ローカル化することで、コードエディターやローカルホストへのトンネリングツール、ngrokなど、必要なツールが同時にインストールできるため、ユーザーが開発環境を準備せずとも、TwilioQuest 3さえインストールすればゲームを進められるという形になりました。
自分の分身であるアバターを2次元のマップ上で自由に動かすことができるようになりました。障害物をよけて隠されたオブジェクトを見つけ出すというようなマップもあります。このためゲーム性が高まり飽きにくくなっています。

ファイナルファンタジーやドラゴンクエストの初期シリーズをプレイした経験があれば感慨深いものになることうけあいです。もちろん、そのほかのロールプレイングゲームが好きだという方にもおすすめです。

TwilioQuest 3プロモーションビデオ:

TwilioQuestでは「レガシーシステム」として知られる影の組織がクラウドを活用する人々を支配しようと陰謀を張り巡らせている状況に立ち向かうエリート部隊のために作成された秘密訓練プログラムです。このトレーニングミッションを受ける隊員は「オペレーター」と呼ばれており、オペレーターは神経インターフェースを利用しクラウドの世界を実世界のように移動する...というSF映画やアニメでありそうなシチュエーションですね。

我々プレイヤーは一人一人がレガシーシステムに立ち向かうためのオペレーターとして訓練するところからゲームがはじまります。それでは早速TwilioQuest 3をはじめましょう！

TwilioQuest 3のはじめかた

TwilioQuest 3はMac、Windows、Linux (Debian/Ubuntu) で動作するように作られています。こちらのダウンロードページから、それぞれのOSに対応したインストーラーを選択しダウンロードしましょう。

インストールを終えた後、アイコンをクリックするとTwilioQuest 3が起動します。最初にランチャーが起動し、インストールされているバージョンの確認と必要に応じてコンテンツが自動的にダウンロードされます。

ランチャーの準備が完了したら「PLAY TWILIOQUEST」ボタンをクリックしゲームを開始しましょう。

初めてプレイする際にはオペレーターの名前やアバターの外観を設定し、イベント参加の有無を設定します。

Twilioでは自社イベントや外部イベントの開催時にTwilioQuest上で同時にイベントを実施する場合があります。それらのイベントでは一定期間内に参加者が取得した経験値の総数を集計する機能や、トッププレイヤーを表示するランキング機能が用意されています。こちらの先ほどの表示名が使用されます。(例: Developers Summit 2020イベント参加者一覧 / スコアランキング)

全ての準備を終えると Fog Owl へと転移します。

Fog Owlとは？

Fog Owlはこの訓練の基地となるクラウド探査船です。実際にクラウドを行き来しているわけではないのですが、神経インターフェースでクラウドに接続したオペレーターが理解しやすいよう擬似的に再現されています。オペレーターはこのFog Owlからクラウドに存在するさまざまな仮想世界に接続しミッションをこなしていきます。

Fog Owlに降り立つと、「Cedric」と呼ばれているロボットとの会話がはじまり、なぜ、ここにいるのか、どのように他のオブジェクトを調べるのかなど説明を聞くことができます。Cedricが話す内容は、Text to Speech (文字からの音声合成）サービスを使用した音声再生が行われます。そのため、TwilioQuest 3を英語のトレーニングにも利用できそうです。

このFog Owl内でまずはオペレーターの操作方法を学習しましょう。一般的なゲームと同じように下記の各キーで操作できます。

←, A 左に移動
↑, W 上に移動
→, D 右に移動
↓, S 下に移動
スペースバー人との会話やオブジェクトを調査

Cedricとの会話を終えた後、FogOwlを探検しいろいろなオブジェクトの前でスペースバーを押してみましょう！

次回予告

今回はTwilioQuestと最新バージョンについての解説とゲームのダウンロードや初期設定、基本的な操作方法を解説しました。さて、次回からはFowOwlに降り立ったオペレーターが最初に受ける訓練である「Basic Training」について詳しく解説します。重要だと思われるチャレンジについて詳しく解説していきますので、英語がちょっと苦手と言う方も大丈夫です。お楽しみに！

TwilioQuest 3をダウンロード

TwilioQuest 3は無料でダウンロード、プレイ可能です。App内課金もありません！ぜひ！

TwilioQuest 3 - ダウンロード

TwilioQuest 3 Blogシリーズ

Game + Tutorial = TwilioQuest3のはじめかた (この記事)
TwilioQuest 3: Basic Training その1 - ハッキングデバイスを活用しセキュリティを解除せよ
TwilioQuest 3: Basic Training その2 - Twilioアカウントの作成と電話番号の取得
TwilioQuest 3: Basic Training その3 - プロモーションコードを適用し無料クレジットをゲット

TwilioQuest 3について質問があるんだけど？

進め方がわからない。そんな時はぜひご連絡ください！

Twitter (@Neri78)
Email: dikehara@twilio.com

Programmable VoiceとAITalkのWeb APIを使って表現力豊かな自動音声で着信電話に応答してみた

Daizen Ikehara — Tue, 31 Mar 2020 00:00:00 +0000

Twilioが提供するProgrammable Voiceを利用すると、電話の自動応答や発信をアプリケーションから制御することができます。着信に応答する場合は、Twimlと呼ばれるマークアップ言語を用いることで、応答する言語や音声を設定することができます。またこのProgrammable Voiceでは、2018年から標準の音声合成エンジン以外にもAmazon Pollyが使えるようになりました。

Amazon Pollyの合成音声は標準の合成音声に比べてとても滑らかなのですが、他の音声をリアルタイムで利用したいという声もよくいただきます。今回は株式会社エーアイ様が提供する日本語に特化した音声合成サービス、AITalk® Web API（以下 AITalk Web API）と連携してみました。

AITalk Web APIは 感情表現や自然な音声、豊富な話者ラインナップ を提供する音声合成エンジンAITalkをSaaS型で利用できるサービスです。サーバーを自前で構築する必要がないため、他のSaaSやクラウドサービスと素早く連携できます。これまでは評価版の申し込みから利用開始まで少し時間がかかっていましたが、最近、Webから評価用アカウントを即時取得し利用できるようになりました。

必要なもの

Node.jsおよびnpm
AITalk Web API評価アカウント
TwilioアカウントとTwilio電話番号

今回の記事で解説するサンプルプロジェクトはこちらのGitHubリポジトリから取得できます。

GitHub - Neri78: Twilio-Voice-AiTalkWebAPI

AITalk Web API評価アカウントの作成方法

冒頭でも記載しましたが、AITalk Web APIでは評価を目的としてサービスを2週間利用できる評価アカウントをWebサイトから申し込めるようになりました。AITalk WebAPI 評価アカウント申込みページで必要な情報を入力し利用規約に同意すると、評価用APIのエンドポイントや接続情報、APIの仕様に関する情報がメールで送られてきます。

Twilioアカウントのサインアップと電話番号の取得

Twilioアカウントのサインアップと電話番号の取得方法についてはこちらで確認できます。TwilioQuest 3というゲームチュートリアルを題材にしていますが、サインアップと電話番号の購入方法は通常のフローと同じです。

Twilioアカウントの作成と電話番号の取得

AITalk Web APIを用いた音声応答の構築

サンプルでは、下記の図のようにTwilio電話番号に着信した際に、Webhookを経由し、 AITalk Web API にリクエストを送信し、合成された音声データをレスポンスとして受け取ります。

サンプルプロジェクトをローカル開発環境に展開し、必要なパッケージをインストールします。

npm install

次に、.env.sampleファイルをコピーし、.envとリネームします。このファイルにはアカウント登録時に送られてきたAITalk Web APIのエンドポイント、ユーザー名、パスワードを保存します。これらの情報はサンプルコード内で利用されます。

AI_TALK_BASE_URL=https://api.example.com
AI_TALK_USERNAME=username
AI_TALK_PASSWORD=password

着信時の応答を返すAPIを実装

次にindex.jsを開いてください。必要なパッケージの宣言と、生成した音声ファイルを保存しておくフォルダを設定しています。

'use strict';
require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const fsp = require('fs').promises;
const got = require('got');

//着信に対して応答を返すVoice用TwiMLを作成するクラス
const VoiceResponse = require('twilio').twiml.VoiceResponse;
const app = express();
const VOICE_FOLDER_NAME = 'voice\files';
app.use(bodyParser.urlencoded({ extended: true }));

// 生成したファイルを保存しておくフォルダを設定
app.use(express.static(path.join(__dirname, VOICE_FOLDER_NAME)));

Twilioで取得した電話番号に着信があった際に呼び出すWebhookはこちらになります。内部で非同期メソッドを使用するためasyncキーワードを指定しています。

// Twilioから着信リクエストを受け取るWebhook
app.post('/incoming', async (req, res, next) => {//処理を実装});

AITalk Web APIへのリクエストを送信し生成されたファイルを保存

さて、/incoming内部の実装は次のようになっています。

応答テキストと AITalk Web API に送信するリクエストパラメーターを構築します。さまざまな設定が可能ですが、最低限、ユーザー名、合成文字列、話者名が必要になります。このサンプルでは感情対応話者である「のぞみ」さん（'speaker_name' : 'nozomi_emo'）、最大限の喜びを（'style' : { 'j': '1.0'}）抑揚（'range' : 2.00）をつけてmp3で出力（'ext' : 'mp3'）するように設定しました。

// 音声合成するテキストを設定。実際はAIエンジンなどから生成される。
const text = '今日はお電話ありがとう!エーアイトークとTwilioを連携した音声合成デモだよ! あなたの電話番号は' 
    + req.body.From 
    + 'だよね?ぜひ、両方のサービスを試してみてね。';
// AITalk Web API用のパラメーターを作成
const aiTalkOptions = {
    'username' : process.env.AI_TALK_USERNAME,
    'password' : process.env.AI_TALK_PASSWORD,
    'text' : text,
    'speaker\_name' : 'nozomi_emo',
    'style' : { 'j': '1.0'},
    'range' : 2.00,
    'ext' : 'mp3'}

AITalk Web APIのパラメータを含んだリクエストを送信し、レスポンスに含まれるバイナリデータをmp3ファイルとして保存します。今回のサンプルではNode.js用のHTTPライブラリーgotを利用しています。

try {
    // リクエストオプション
    const options = {
        method: 'POST',
        form: aiTalkOptions,encoding: 'binary'
    };
    //AITalk Web APIにリクエスト
    const response = await got(process.env.AI_TALK_API_URL, options);
    if (response.statusCode === 200 ) {
        //現在のCallSidから出力ファイル名を生成
        const outputFileName = `${req.body.CallSid}.mp3`;
        // mp3ファイルを保存
        await fsp.writeFile(path.join(VOICE_FOLDER_NAME, outputFileName),
                                response.body, 'binary');
        // TwiMLを作成(次のコードブロック)}
} catch (error) {
    console.error(error);next(error);}

保存したmp3ファイルを再生するTwiMLを作成

Twilio Programming Voiceは電話への着信時の応答を __TwiML__ と呼ばれているマークアップ言語でプログラミングできます。Play句を使用し、先ほど保存したmp3ファイルを再生するというTwiMLを生成します。このTwiMLをレスポンスとして返しています。

// TwiMLを初期化
const twiml = new VoiceResponse();
// 生成した音声を再生させる。
twiml.play(path.join(outputFileName));
//作成したTwiMLをレスポンスとして送信
res.status(200).send(twiml.toString());

（追加）通話が終了した段階でmp3ファイルを削除

さて、このままでは通話終了後も生成された音声ファイルが残ってしまいます。不要なファイルを削除するため、通話状態を取得できるWebhookを実装します。

/statuschangedでは、リクエストのbodyに含まれているCallStatusで現在の通話状態を確認できます。今回のサンプルでは、通話が完了したcompletedとなった時点で、通話IDを表すCallSidを基にmp3ファイルを削除しています。

app.post('/statuschanged', async(req, res, next) => {
    try {
        // 通話が完了したかどうかを確認
        if (req.body.CallStatus === "completed") {
            // CallSidからファイルパスを構築し、削除
            const filePath = path.join(
                VOICE_FOLDER_NAME, `${req.body.CallSid}.mp3`);
            await fsp.unlink(filePath);
            console.info(`${filePath}を削除しました`);
        }
        res.sendStatus(200);
    } catch (error) {
        console.error(error);
        next (error);
    }
});

全ての実装を終え、Port3000でサーバーを起動します。

app.listen(3000, () => console.log('Listening on port 3000'));

これで実装は完了です。

ローカル環境でサンプルを実行する場合

ローカル環境でサンプルを実行する場合は、localhostのポート3000番に外部からアクセスできるようにします。

その場合は、ngrokなどのツールが利用できます。

ngrokをインストール後、別のターミナルを開き、下記のコマンドを実行します。

ngrok http 3000

ここで生成されたURLをメモしておきます。

Twilioコンソールで着信応答と、通話ステータスのWebhookをそれぞれ設定

最後にTwilioコンソールで取得した電話番号の設定画面を表示し、作成したNode.jsアプリケーションのUrlを着信応答と通話ステータスのWebhookをそれぞれ指定します。

この例ではhttps://2c2a973d.ngrok.ioなので下記のスクリーンショットのようになります。

ターミナルからアプリケーションを起動し動作を確認

ローカル環境の場合は、ターミナルからアプリケーションを起動します。

npm start

Twilioから取得した番号に電話をかけてみてください。前回同様に電話番号を数字として解釈してしまっているので少し変ですが、__動的にリアルタイムで感情と抑揚が設定された__ 合成音声を応答として利用することを確認できます。

まとめ

今回はTwilio Programmable VoiceとAITalk Web APIを連携してみました。AITalk Web APIでは、感情表現対応話者だけでなく、関西弁 対応話者も設定されているので話者を('speaker_name' : 'miyabi_west')に変更して違いをくらべてみるのも面白いかもしれません。

質問についてはこちらまで

Twitter (@Neri78)
Email: dikehara@twilio.com

TwilioQuest 3: Basic Training その3 - プロモーションコードを適用し無料クレジットをゲット

Daizen Ikehara — Tue, 24 Mar 2020 00:00:00 +0000

TwilioQuest 3には、Twilio製品やプログラミング言語、GitHubの利用方法について学べるトレーニングミッションが用意されています。各チュートリアルをクリアすると経験値やアイテムを獲得できます。獲得したアイテムはアバター（キャラクター）に装備させることができ、自分だけのアバターをデザインできるゲームを模したチュートリアルとなっています。

前回のブログではTwilioアカウントのセットアップ方法と電話番号の購入方法を解説しました。Twilioはこの購入した電話番号への入電に対する応答をプログラミングできます。またアプリケーションから電話の発信やSMSも送信できます。

今回はTwilioQuest 3をプレイするみなさんに提供されるプロモーションコードについて取得方法と適用方法について解説します。

Twilioから電話番号を購入するチュートリアルを終え、さらに通路を進むと宝箱が二つ並んでいます。プロモーションコードはこの左側の宝箱に隠されています。

プロモーションコードとその適用方法

Twilioはカンファレンスやミートアップなでプロモーションコードを配ることがあります。このコードを利用するとTwilioアカウントに無料でクレジット追加できます。ただし、プロモーションコードを利用するにはクレジットカード情報を登録し、アカウントをアップグレードする必要があります。

Twilioアカウントのアップグレードはすべき？

もちろんのことながらYESです。トライアルアカウントにはいくつかの制限があるため、全ての機能を活用するためにはアップグレードが必要になります。例えば、トライアルアカウントでは、電話番号の購入が1番号のみに限定されており、さらにTwilio番号からの発信が認証済みの自分の携帯番号のみに制限されています。そのため、強くアカウントのアップグレードをおすすめしています。

注意点として、アカウントのアップグレードはプロジェクト単位で行われ、アカウントをアップグレードした場合は、トライアルアカウントに付与されている無料クレジットが0円（0ドル）になってしまいます。たま、アップグレード時に初期クレジットを追加する必要があります。ここでアップグレード時に利用できるプロモーションコードを適用することで、初期コストをゼロにできます。

プロモーションコードを使用したアカウントのアップグレード方法

左側の宝箱をまずは開きましょう。Objectiveタブには米国ドル（USD）用のプロモーションコードが表示されています。日本円（JPY）のコードや他の通貨用のコードはHelpタブに隠されています。ぜひ皆さんの目で確かめてください。既にアップグレードされているプロジェクトではこのコードを利用できません。ご注意ください。

次に、Twilioコンソールを開き、Upgrade Projectをクリックします。

電話番号の認証に続いて、Add Company Addressに自分または会社の住所情報を入力します。必須入力フィールドは必ず入力する必要があります。

続けてAdd Billing Address（請求先住所）を入力します。先ほど入力した住所と同じであれば、Same as Company Addressにチェックを入れます。

さて、ここからが本番です。間違えないように気合いを入れましょう！

Add Payment Information and Fundsにクレジットカード情報を入力し、USE PROMO CODEをクリックします。Twilioは電話機能を提供しているため通常のWebサービスよりも認証を強化しています。そのため、カード情報をはじめてとして本人確認のための情報登録が必要になります。

PROMO CODE欄に先ほど確認したプロモーションコードを入力します。ここでAutomatic RechargeをEnableにすると自動チャージが有効になってしまうため 注意しましょう。

最後にUpgrade Accountボタンをクリックするとプロジェクトがアップグレードされ、プロモーションコードに設定されたクレジットが適用されます。

おめでとうございます！これでアカウントを無料でアップグレードすることができました。トライアルの制限も全て解除されています。おっと、忘れずにチュートリアルもHACKしておきましょう。先ほど入力したプロモコードを入力しHACKボタンをクリックすると宝箱が開きます。

最終関門:Basic Trainingミッションをクリアせよ！

今回まで、複数回に渡ってBasic Trainingミッションを解説しました。ここまでで連載と共にTwilioQuest 3をプレイいただくと、ハッキング装置やコードエディターの使い方を理解し、Twilio電話番号を取得した5,000円分クレジット付きTwilioアカウントを持っていることになります。他にも必須ではありませんがローカル開発環境のセットアップ方法などを確認できるチュートリアルが用意されています。また、TwilioQuest 3には電話、SMS、CLIなどTwilioが提供するサービスを一つ一つ学習できるトレーニングミッションが用意されています。

他のミッションに向かう前にこのBasic Trainingミッションをクリアしておきましょう。このマップの出口へは、分岐まで戻り、上に進んだ緑色のエリアになります。

Basic Trainingミッションでの最後のチュートリアルは、文字列を入力値として受け取り、大文字に変換、!を三つ付け加え、戻り値として返すJavascript関数を実装するというものです。

ここまでチュートリアルを進めてきた皆さんには説明の必要はないでしょう。チャレンジしてみてください。

最後に、Let’s HACK!

TwilioQuest 3をダウンロード

TwilioQuest 3は無料でダウンロード、プレイ可能です。App内課金もありません！

TwilioQuest 3 - ダウンロード

TwilioQuest 3 Blogシリーズ

Game + Tutorial = TwilioQuest3のはじめかた
TwilioQuest 3: Basic Training その1 - ハッキングデバイスを活用しセキュリティを解除せよ
TwilioQuest 3: Basic Training その2 - Twilioアカウントの作成と電話番号の取得
TwilioQuest 3: Basic Training その3 - プロモーションコードを適用し無料クレジットをゲット（この記事）

TwilioQuest 3について質問があるんだけど？

進め方がわからない。そんな時はぜひご連絡ください！

Twitter (@Neri78)
Email: dikehara@twilio.com

TwilioQuest 3: Basic Training その2 - Twilioアカウントの作成と電話番号の取得

Daizen Ikehara — Wed, 18 Mar 2020 00:00:00 +0000

前回のブログではBasic Trainingを実際に見ながらゲームの進め方を説明しました。ハッキング装置や、ビルトインで提供されているコードエディターの使い方についてはもう大丈夫ですよね？

今回は今後、他のミッションを進める上で必須となるTwilioアカウントの取得方法や電話番号の購入方法についてゲームを進めながら解説します。

すべてはアカウント作成からはじまる...

前回までのチュートリアルを終えると、上方向に進む道と、Twilioロゴを模したタイルが設置されている道に分岐します。TwilioQuest 3では必ずしもチュートリアルを順番通りに進める必要はなく、自分のペースや好みに合わせて何を学ぶかを選択できます。今回は右側に進み、Twilioロゴの上に設置されているバリアをHackしましょう。

このチュートリアルは、今後のトレーニングミッションで必要となる Twilioアカウント の作成と、 Account SID 、 Auth Token の入力が必要です。

まだアカウントを作成していない場合や、本番用アカウントのみを持っている場合は、下記のリンクから無料でトライアルアカウントを作成できます。

(注意)TwilioQuest 3ではトレーニングミッションを円滑に進めるため、資格情報やフォルダー名などを内部に保存します。万が一の事故を避けるためTwilioQuest 3をプレイするアカウントは別途作成することを強くおすすめしています。

Twilioアカウントの作成

アカウントを作成するには、氏名とメールアドレス、パスワードを設定しTwilioサービス規約とTwilioプライバシーポリシーに同意した後、無料トライアルを始めましょうボタンをクリックします。Emailの確認に引き続きSMSの受信が可能な電話番号を入力し、認証する必要があります。

電話番号の認証を終えたのち、Twilioコンソールにログインすると Account SID と Auth Token を確認できます。

これらはAPIを利用するためのID/パスワードとなるため取り扱いには十分注意しましょう。 Auth Token は隠されているためShowリンクをクリックし表示する必要があります。

それぞれの値をテキストフィールドに入力しHACKボタンをクリックしましょう。入力内容が確認され、正しい値であれば、 TWILIO_ACCOUNT_SID および TWILIO_AUTH_TOKEN という名前の環境変数が保存されます。

この環境変数はマップ画面で3キーを押すと表示されるSettings画面で確認や変更ができます。

Twilioと言えばクラウド電話

さて、Account SIDとAuth Tokenは入力できたでしょうか？続けて次のバリアまで進み、スペースバーを押しましょう。

Twilioが提供する最も有名で強力なサービスはAPIを経由した電話の発着信、SMSの送受信機能です。既存・新規システムから電話を発信したり、着信に対してどのように応答するかを自由にプログラミングできます。 Get a Twilio Number チュートリアルではこれらの機能を利用するために必要な電話番号を取得できます。

電話番号を取得するにはTwilioコンソールの電話番号購入ページを開きます。このページではTwilioがサービスを提供する世界各国の電話番号を購入できます。国や番号によってサポートする機能が異なりますのでアイコンで対応している機能を確認しましょう。

残念ながら現在日本向けに提供している番号ではSMS送受信機能をサポートしていないため、TwilioQuest 3で提供している一部のトレーニングミッションを遂行することができません。ただし、SMS機能は非常に強力なため、ここではぜひ米国の番号（SMSのサポートあり）を購入することをおすすめします。この米国番号については別の記事を予定しており、その中で日本の携帯電話を利用せずに米国番号を用いてSMS機能を体験する方法を紹介予定です。

購入する番号を選択しBuyボタンをクリックすると確認画面へと移ります。電話番号は購入した直後から通話料とは別に月額で一定額（国によって異なります）が課金されます。ただし心配する必要はありません。トライアルアカウントを作成した場合、初期クレジットとして15USドルがチャージされています。米国の番号を1つ購入したとしてもサービスを体験するには十分すぎるほどのクレジットが残っていますし、トライアル期間は使いすぎて課金されるということもありません。

今回のチュートリアルでは購入した番号をE.164フォーマットでテキストフィールドに入力する必要があります。例えば米国番号の(123)123-1234を購入した場合は国番号（+1）を付け加え、+11231231234となります。日本番号の(050)xxxx-yyyyの場合は、国番号（+81）を付け加え、最初の0を取った値である+8150xxxxyyyyとなります。これらの値はコンソールからも確認できます。電話番号の入力を終えたらHACKボタンを押しましょう。TwilioQuest 3は先ほどの環境変数を使い、入力された電話番号が対象アカウントに存在していることを確認します。

おめでとうございます。これで電話番号が購入できました！

やっぱり日本番号が欲しい！

もちろん日本の電話番号も購入できます。この場合、本人確認が必要になるためRegulatory Bundlesを登録する必要があります。本人確認には 2営業日程度 を要するため、日本番号の取得を予定している場合はあらかじめ本人確認書類を登録しておきましょう。

次回予告

これで今後のトレーニングミッションを進めるために必要なTwilioアカウントとTwilio電話番号が取得できました。Basic Trainingとして必須なチュートリアルはここまでで大丈夫ですが、次回はおまちかね（？）TwilioQuest 3プレイヤーを対象としたプロモーションコードの取得方法および適用方法を紹介します。このチュートリアル3で提供されるプロモーションコードを使うと5,000円分のクレジットが無料で付与されますので、Twilioを使い倒すにはもってこいですね。ぜひお楽しみに。

それではLet’s HACK!

TwilioQuest 3をダウンロード

TwilioQuest 3は無料でダウンロード、プレイ可能です。App内課金もありません！ぜひ！

TwilioQuest 3 - ダウンロード

TwilioQuest 3 Blogシリーズ

Game + Tutorial = TwilioQuest3のはじめかた
TwilioQuest 3: Basic Training その1 - ハッキングデバイスを活用しセキュリティを解除せよ
TwilioQuest 3: Basic Training その2 - Twilioアカウントの作成と電話番号の取得（この記事）
TwilioQuest 3: Basic Training その3 - プロモーションコードを適用し無料クレジットをゲット

TwilioQuest 3について質問があるんだけど？

進め方がわからない。そんな時はぜひご連絡ください！

Twitter (@Neri78)
Email: dikehara@twilio.com