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

Daizen Ikehara - Apr 6 '20 - - Dev Community

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

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

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

では、はじめましょう!

TwilioQuest3 - Cedric - LevelingUp

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

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

TwilioQuest3 - FogOwl - VR Pod

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

TwilioQuest3 - Training Missions

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

  • 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で用意されている特定のチュートリアルを完了すると、オーストラリアでの大規模森林火災復興のための植樹プロジェクトに貢献できます(1プレイヤーあたり最大2本)。

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

TwilioQuest3 - Basic Mission

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

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

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

TwilioQuest3 - Basic Mission - Barrier

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

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

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

TwilioQuest3 - Basic Mission - Hacking Device

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

  • Overviewタブ

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

    TwilioQuest3 - Hacking Device - Overview Tab

  • Objectiveタブ

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

    TwilioQuest3 - Hacking Device - Objective Tab

  • Helpタブ

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

    TwilioQuest3 - Hacking Device - Help Tab

Hack it!

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

TwilioQuest3 - Basic Mission - Success

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

TwilioQuest3 - Basic Mission - Hack Barrier

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

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

TwilioQuest3 - Basic Mission - Next Tutorial

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

TwilioQuest3 - Basic Mission - Code Editor Mission

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

TwilioQuest3 - Basic Mission - Code Editor

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

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

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

アイテムの使い方

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

TwilioQuest3 - Inventory

次回予告

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

TwilioQuest 3をダウンロード

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

TwilioQuest 3 - ダウンロード

TwilioQuest 3 Blogシリーズ

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

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .