TwilioQuest 3とは？ Twilioのコードをゲーム&日本語で学べる

①専用ページからインストール

まずはこちらのページからTwilioQuest 3をインストールしていきます。

「DOWNLOAD TWILIOQUEST」をクリックしてください。

お使いのPCに合わせて「ダウンロード」をクリックしてください。私はMacを使用しているため、Mac版をダウンロードしていきます。

②ダウンロードしたzipを解凍

ダウンロードできた「twilioquest-mac.zip」というファイルをクリックすると、TwilioQuestのアプリが展開されます。

TwilioQuestアプリを開こうとすると確認画面が表示されます。「確認」をクリックしましょう。

こちらでインストールが完了しました。実際に遊んでいきましょう！！

TwilioQuest 3で遊んでみよう

「PLAY TWILIOQUEST」をクリックしてスタートしていきますが、このままだと英語版で進んでしまいます。日本語でプレイしたい方は、以下の手順で設定を変更してください。

日本語設定のやり方

Current Versionの横にある「More >」をクリック。

デフォルトはStableになっているため、日本語プレビュー版を選択して「PLAY TWILIOQUEST」をクリックします。ちなみに日本語対応はあくまで一部となっているため、英語のままの部分もあります。

この画面が表示されたら、PCのスペースバーを押しましょう。ゲームが開始されます。

TwilioQuest 3の初期設定

最初に設定するのは名前（Enter your name）です。名前を入力した後、Enterを押して次に進みます。

次はアバターを決めていきます。

すでに設定されているパターンからも選択できますが、Customを選ぶことで自分の好きなアバターを作成することも可能です。

せっかくなので今回はカスタマイズしていきたいと思います。「肌の色・目の色・髪の色・髪型」の4つを好きなように選んでEnterを押してください。

設定が完了するとCedricが歓迎してくれて、そのまま「Fog Owl」と呼ばれるクラウド飛行船に突入します。

TwilioQuestはこのFog Owlの中で学習を進めていきますが、Cedricの説明を聞きたい方は1番を押して次に進んでください。説明をスキップしたい方は2番を押してください。

説明が終わるといよいよゲームを進めることができます。

次にやるべきタスクは赤色の矢印でガイドしてくれます。まずはCedricに近づいて、スペースバーを押して説明を聞きましょう。移動はPCの矢印キーで行います。

Cedricが丁寧に次のアクションを教えてくれました。指示に従って移動してください。

トレーニングミッションが複数表示されています。自分の好きなトレーニングを選べますが、まずは「基礎トレーニング」を選びましょう。

赤いバリアによって通行止めになっていますが、ミッションをクリアすると赤いバリアが解除されます。

「「Help」 セクションに記載されているシークレットコードを入力してください。」と説明があるので、「Help」タブを開いてください。

Help内に「LEVEL UP」というコードが書かれているので、こちらをテキストフィールドに入力して、「HACK」を押すとミッションクリアとなります。

ミッションをクリアして、経験値「100 XP」を獲得＆ランクがEに到達しました。さらに報酬としてアイテム（ブーツ）も獲得したので、さらにアバターをカスタマイズすることもできます。

カスタマイズ方法は、「?マークのHelp」→「Inventory」でアイテムをドラッグ＆ドロップするだけです。

プログラミング言語もコードエディタを利用する

2つ目のミッションではNode.jsの課題が出されます。ちょっとだけ覗いてみましょう。

コードエディターがビルトインされているため、実際にコード内に入力する課題は「</>コードエディタを開く」をクリックすると以下の画面になります。

今回はすでにコードが完成しているため、コードの中身を変更する必要はありません。テキストフィールドに「http://localhost:8767」を入れて、「HACK」を押してください。

今回は経験値を200 XP獲得して、アイテム（すね当て）も入手できましたね。

このように、ミッションの難易度によって獲得できる経験値も変わってきます。色々なミッションをクリアして、経験値をたくさん貯めてみてください。

Twilioアカウントが必要なエリア

TwilioQuest 3を進めていくと、Twilioアカウントを持っていないと進めないTwilioマークのエリアが出てきます。

その場合は、是非こちらからTwilioアカウントを作成してください。

Twilioアカウントを作成すると、管理画面（コンソール）からアカウントSID、Auth Tokenの情報を確認できます。こちらをQuestミッションのテキストフィールドにそれぞれ入力してください。

「HACK」を押せば無事クリアでき、Twilioマークのあるエリアも進めるようになります。

TwilioQuest 3でTwilioを学ぼう

ゲームを進めて経験値がたまってきたら、Twilioの機能の1つであるProgrammable Voiceの課題にも取り組んでみましょう！

Twilio Programmable Voiceとは、一言で説明すると「電話に必要なあらゆる機能をプログラムでコントロールできる機能」となります。

Twilio Programmable Voice API マラカイト鉱山

まずトレーニング項目画面で「Voice：マラカイト鉱山」を選択してください。

下記画面のダンジョンにたどり着くので、1つ目の赤いバーでミッションに挑戦してみましょう！

このミッションの内容は、音声通話の着信にTTS（テキストを音声に変換）機能を利用して「Hello」と応答させることです。ミッションの目的はObjectiveに記載があり、Helpにヒントや手順が記載されています。

今回のミッションをクリアするにあたって、「TwiMLやTwiML Bin」という専門用語が出てくるので少しだけご説明します。

TwiMLはTwilioを扱う上で欠かせないTwilioマークアップ言語です。XML形式で、Twilioへの指示として機能する多数の動詞と名詞で構成されています。例えば<Say>は「テキスト読み上げ」、<Play>は「音声ファイル再生」をさせるための動詞となります。

またTwiML Binとは、Twilio独自のサーバーレス環境のことを指します。TwiMLを使ってレスポンスを返すのにはサーバーが必要ですが、TwiML Binがあることで別途サーバーを用意する必要がなくなります。

TwiML Binを作成

それでは、まずTwiML Binを作成していきます。

管理画面の左バーに表示されている箱のアイコン（赤枠）をクリックしてください。そのあと「+」ボタンを押して、新規のTwiML Binを作成していきます。

「FRIENDLY NAME」には自分の好きな名称を入力してください。次に「TWIML」と書かれたテキストフィールドにTwiMLを記載していきます。

今回は"Hello World!"を読み上げる命令となるため、以下のコードを記述して「Save」をクリックしてください。

<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say>Hello World!</Say>
</Response>

保存が完了するとTwiML Binの上部にURLが表示されます。こちらはWebhookのURLに利用するため、コピーをしておいてください。　

電話番号に対してTwiML BinをWebhookで設定

次に、電話番号に対してWebhookを設定していきます。

まずは左バーの「#」→「アクティブな電話番号」→設定したい番号の順にクリックしてください。まだ電話番号を購入したことがなければ、こちらの記事を参考にTwilio番号を購入してください。ちなみにTwilioQuestをすぐに楽しむだけであれば、アメリカ番号を購入することをオススメします。

私はすでに購入してある日本の050番号で進めていきます。

表示されたページの中段ぐらいに「A CALL COMES IN」の項目があるため、こちらで「Webhook」を選択後、TwiML Binで作成したURLをペーストして「Save」を押せば設定完了です。

TwilioQuest 3の画面に戻って「HACK」ボタンを押せば無事クリアです！！