Twilioブログ

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

こんにちは、Twilioマーケティング部の高橋です。

コミュニケーションAPIとして、いまや世界中でご利用いただいているTwilio。しかし「Twilioを学ぶにあたって、APIリファレンスを見ながら自分で実装するのはハードルが高い」といったユーザーもいらっしゃいます。

今回の記事では、そのような非エンジニアの方向けに、ゲームで気軽にTwilioを学べる「Twilio Quest」をご紹介いたします。

Twilio Quest 3とは?

twilio quest-about

Twilio Questは、冒険しながらTwilioの課題をクリアしてレベルアップを目指していくロールプレイングゲームです。アバターを自分でカスタマイズして、独自の主人公を作って冒険をしていきます。

冒険の中ではTwilioの基礎知識をはじめ、JavaScript・PHP・Pythonといったプログラミング言語の課題も出題されます。ゲーム心をくすぐりながらTwilioを学んでもらおうという熱意、エンジニアの方を大切にするビジョンが感じ取れるゲームです。

かつてはブラウザのみの対応だったTwilio Questですが、最新版のTwilio Quest 3では、Mac・Windows・Linuxにインストールして動作させることもできます。一部ではありますが日本語にも対応しているため、英語がわからない……といった方もチャレンジしやすくなっています。

またTwilio Quest 3は無料で提供されており、気軽にスタートできるのも大きな特徴となっています。

Twilio Quest 3の始め方とインストール方法

それでは、実際にTwilio Quest 3を始める手順をご説明します。

ちなみにTwilio Quest 3をプレイするには、以下のPCスペックが必要となります。事前に確認しておきましょう。

twilio-quest-download-for-spec

  Windows Mac Linux
OS Windows 10 macOS 10.14+ Tested on Ubuntu 18+, Fedora 24+
CPU Dual Core, 2.6 GHz Dual Core, 1.8 GHz Dual Core, 2.6 GHz
RAM 4 GB 4 GB 4 GB
Storage 2 GB 2 GB 2 GB

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

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

twilio quest3-instaal

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

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

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

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

twilio-quest-kaitou

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

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

Twilio Quest 3で遊んでみよう

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

日本語設定のやり方

twilio-quest-more

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

twilio-quest-japanese

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

twilio-quest-spacwenbar

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

Twilio Quest 3の初期設定

twilio-quest-operator-login

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

twilio-quest-avatar-ok次はアバターを決めていきます。

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

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

twilio-quest-jp-cedric

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

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

twilio-quest-jp-game-start説明が終わるといよいよゲームを進めることができます。

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

twilio-quest-jp-cedric-first-stepCedricが丁寧に次のアクションを教えてくれました。指示に従って移動してください。

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

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

twilio-quest-traning-mission-menu-2

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

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

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

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

twilio-quest-traning-boots

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

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

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

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

Twilio-quest-traning-done今回は経験値を200 XP獲得して、アイテム(すね当て)も入手できましたね。

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

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

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

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

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

twilio-quest3-account-console

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

TwilioQuest 3でTwilioを学ぼう

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

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

Twilio Programmable Voice API マラカイト鉱山

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

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

twilio-quest-voice-lesson1

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

twilio-quest-voice-lesson2

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

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

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

TwiML Binを作成

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

twilio-quest-voice-lesson-bins

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

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

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

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

quest-twilio-acctive-create-url-i

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

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

quest-twilio-acctive-number-phone-ry

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

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

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

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

twilio-quest-voice-lesson1-api-done

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

まとめ

今回はTwilio Quest 3について、初めの基礎トレーニングとProgrammable Voiceのミッションを例にご説明しました。

ご覧いただいた通り、Twilio Questは某有名ゲームのようにダンジョンにあるミッションをクリアしていく形式のゲームです。経験値を貯めると同時に、知識も溜まっていく形になっています。

Twilioだけでなくプログラミング言語のことまでゲーム感覚で学べる、かなり作り込まれたTwilioチュートリアルとなっています。

私もまだ始めたばかりではありますが、ゲーマーの夢である「全クリア」を目指したいと思います!!

Webマーケター 高橋
Webマーケター 高橋

Twilioマーケティング部でチーフを務めており、得意分野は広告運用やSEO。SNSでは総フォロワー3.3万を達成。プログラミングに興味があり、JavaScript・Pythonが好き(Twilioは大好き)。

CTA_まずはtwilioを使ってみる。

Share!!

  • お役立ち情報
  • イベント情報
  • 相談会申込
  • 導入事例