SIGNALで発表されたTwilioQuest 3.2を使って自分だけのエクステンションを作成するには

読む所要時間: 18 分

December 01, 2021
執筆者
Daizen Ikehara
Twilion
レビュー担当者
Hiroto Masaki
Twilion
Stephenie Minami Nakajima
Twilion

TwilioQuest 3 - Extension

SIGNAL 2021 カンファレンスのブログシリーズ、第5回目、並びに「Qiita Advent Calendar - Twilioを使うためのコツ、TIPSなど、Twilioのことなら何でも共有しよう！」 1日目を同時に投稿します。

始めに

第1回（SIGNALカンファレンスの超速報）、第2回（基調講演の振り返り）、第3回（SIGNAL TVをMCの立場から振り返る）、第4回（Twilio SIGNAL 2021 イベント〜製品アナウンスの振り返り）に続いてSIGNALで発表されたTwilioQuest 3.2の詳細やエクステンションの開発方法について紹介します。

TwilioQuestとは

TwilioQuestはゲームをプレイするようにさまざまな開発スキルを向上できるチュートリアルです。2019年に当時の最新バージョンである「TwilioQuest 3」がリリースされました。Twilio製品の利用方法だけでなく、Pythonのようなプログラミング言語や、GitHub（ソフトウェア開発プラットフォーム）の使い方などを学習できます。

より詳しい説明やミッションの進め方、日本語版のアナウンスについては以前こちらの記事で取り上げています。

TwilioQuest 3.2のリリースと新機能や変更点

今回のSIGNAL 2021では最新バージョンとなる3.2がリリースされました。

新しいグラフィックとオープニング

TwilioQuestには背景となるストーリーが存在します。3.2ではこのストーリーを紹介するオープニング（プロローグ）が刷新されました。

ストーリーを紹介するオープニングや、

ミッション選択画面や新たな仲間の登場など、多岐に渡っています。

TQ Universe

New crew

既存ミッションのリニューアルと新たなミッションの追加

TwilioQuest 3.2の初期リリースでは既存のミッションを新しいマップや演出で再構成し、さらに「APIとは何か？」について学べる初学者向けのミッションが追加されました。

  • The Forest of Open Source: オープンソースの貢献を守る、賢くて平和なオープンソース・ドルイドが守る森の惑星を探索します。彼らの森の家を悩ます謎を解決しながらGitバージョンコントロールシステムの使い方を学ぶことができます。
  • The Pythonic Temple: 失われたCity of Pythonの最後に残った構造物の遺跡を探索し、プログラミング言語Pythonの謎に迫ります。
  • The JavaScript Test Lab: クラウドで最も強力な力を持つJavaScriptの最先端の研究を行っている研究チームを支援し、世界で最も普及しているプログラミング言語JavaScriptを学びます。
  • The Arcane Academy of API Arts（NEW!）: あなたは、REST APIの魔法の呪文を学ぶエリートスクールへの入学を許可されました。校舎に忠誠を誓い、年に一度のHouse Challengeで栄光を競い、APIの魔法を学びましょう!

New Mission

さらにTwilio製品に関するミッションや後述のエクステンションで作成されたミッションもプレイできます。

Twilio Missions

エクステンション（拡張機能）機能と作成方法

TwilioQuest 3.2の最大の目玉はエクステンション機能でしょう。開発者が独自のシナリオや機能を開発しゲームに組み込めるようになりました。

Develop Extension

SIGNAL TVでは私がこのエクステンションの作成方法について紹介させていただきました。英語版となりますがこちらからご覧いただけます。

Twitch - TwilioQuest 3.2 Content Authoring

ここからはエクステンション機能の開発方法について紹介します。

事前に必要なもの

エクステンションフォルダの作成とリポジトリの準備

TwilioQuestのエクステンションはゲーム内で指定したフォルダのサブフォルダに含まれている必要があります。この記事ではtq-extensionsという名前のフォルダを作成し、そちらで開発を進めます。

ターミナル、コマンドプロンプトを開き、次のコマンドを実行します。

mkdir tq-extensions
cd tq-extensions

tq-extensionsへのパスは後ほど使用しますので、この時点で控えておきます。ターミナルにより使用するコマンドが異なります。

zsh、bash、Powershellの場合:

pwd

Windowsコマンドプロンプトの場合

cd

執筆に使用している環境では下記のような表示になりました。

/Users/dikehara/tq-extensions

TwilioQuestエクステンションを作成する場合はあらかじめ定義されている構造やファイル名を使用する必要があります。テンプレートリポジトリが用意されているのでこちらを用いてエクステンションリポジトリを作成します。

テンプレートリポジトリを開き、Use this templateボタンをクリックします。

TQ Extension template

テンプレートを使用するリポジトリの名前を決定します。この記事ではmy-first-tq-extensionとしました。リポジトリの公開状態はどちらでもかまいません。

my first TQ extension

Create repository from templateボタンをクリックしリポジトリを作成します。

作成したリポジトリを先ほど作成したフォルダにクローンします。 今回のプロジェクト名の場合は次のコマンドを実行します。<github username>は自分のアカウントを指定してください。

git clone https://github.com/<github username>/my-first-tq-extension.git

その後、クローンしたフォルダに移動し、依存関係パッケージをインストールします。

cd my-first-tq-extension
npm install

GitHubアカウントを使用しない場合は、テンプレートリポジトリからコードをローカル開発環境にダウンロードし使用してください。

エクステンションをTwilioQuestに追加

コードを変更、追加する前にTwilioQuestにエクステンションフォルダを設定します。

ダウンロードしたTwilioQuestを起動し、Current Versionが3.x.yと表示されていることを確認し、PLAY TWILIOQUESTボタンをクリックします。

TwilioQuest Launcher

最初に起動する場合はオープニングムービーやプレイヤー登録、チュートリアルミッションが始まります。詳細については省きますが、チュートリアルを終えるとFog Owlの内部マップが表示されます。

New Fog Owl

右下に表示されている緑色のルームに移動し、VRミッションコンピューターを起動します。初期状態ではTwilio API Setup、Twilio Messaging API、Twilio Voice APIの3つが表示されています。

VR Mission Computer

Missions

いったん右上のXボタンをクリックし、マップ画面を再度表示します。ここで3キーを押下するとSettings画面が開きます。左の一覧からExtensionsを選択するとエクステンション管理画面が開きます。

Open Extensions

Enable Extensionsボタンをクリックし、エクステンションを有効化します。初期状態ではExtension Directoryが指定されていないため、続けてChoose Directoryボタンをクリックし、先ほど控えたtq-extensionsフォルダを選択します。

Enabled Extensions

Extensionを指定した直後はまだロードされていないので、TwilioQuestを一度終了し再起動してください。

再起動後、Settings - Extensions画面を開くとエクステンションがロードされていることを確認できます。

 

VR Mission

再度VRミッションコンピューター画面を開くとテンプレートに含まれているミッションが追加されています。

VR Mission

これで準備が整いました。試しにミッションを起動してみましょう。 VR Mission Templateをクリックし、LAUNCH MISSIONをクリックします。VRルームが表示されキャラクターや宝箱、部屋の奥にバリアが設定されています。

Template Mission

このミッションをカスタマイズしてみましょう。

ミッションの情報を変更

TwilioQuestはエクステンションプロジェクトのlevels直下に配置されているサブフォルダからミッションを取得しています。先ほどのミッションはvr_mission_templateという名前のフォルダで配置されています。

Structure - Missions

このミッション名や説明を変更するには、vr_mission_template/level.jsonファイルを変更します。

level.json

titleやdescription、questTitle、questDescriptionを次のように変更してみましょう。

{
  "title": "カスタムミッション",
  "description": "ここにはミッションの内容を記述します。",
  "questTitle": "カスタムミッション",
  "questDescription": "あなただけのミッションを構築しましょう！",
  "mission_icon": "mission_icon.png",
  "is_mission": true,
  "priority": 10,
  "backgroundMusic": "hackertheme_104771b",
  "backgroundEffect": {
    "key": "vr",
    "options": {}
  },
  "flavorTextOverrides": {
    "bookshelf": "There's nothing like a good book."
  },
  "objectives": ["example_objective", "example_objective2"]
}

ファイルを保存したのち、TwilioQuestをリスタートしミッション選択画面を開きます。変更が反映されていることを確認してください。

Mission information has been updated

マップの変更とオブジェクトの追加

ミッションで使用するマップはvr_mission_template/mapsフォルダの中にjson形式で保存されています。今回のテンプレートにはdefault.jsonおよびspace_garden.jsonファイルが用意されています。

map.json

マップの編集はTiledを用います。Tiledを起動し、File - Open File or Project…メニューで先ほどのdefault.jsonファイルを開くとエディタ画面が表示されます。

宝箱などのオブジェクトを追加する場合は、Objectsレイヤータブを選択し、Objectsを選択します。

tiled-editor

今回は宝箱を一つ追加しましょう。Tilesetsパネルのタブ一覧から宝箱を探します。

tiled-chests

好きな色の宝箱を選択し、Insert Tile (T)ツールを使って任意の地点に配置します。

tiled-insert-tile-tool

のちほどこの宝箱を開く問題を追加するため、Custom PropertiesのobjectiveNameを変更します。今回はmy_objectiveとしました。

custom properties

ここでファイルを保存します。TwilioQuestですでにこのミッションをスタートしている場合は、一度Fog Owlに戻り、再度ミッションを開始してください。宝箱が表示されます。

mission - chest

この宝箱を開けようとするとTwilioQuestがフリーズしてしまいます。先ほど指定したmy_objectiveが存在しないことが原因です。次のセクションで追加しましょう。

独自の問題(Objective)を追加

ミッションで出題される問題はobjectivesフォルダのサブフォルダとして構成されます。

objectives

この際、マップのobjectiveNameで指定した名前と同じフォルダを作成する必要があります。

objectivesフォルダに元から存在するexample_objectiveフォルダをコピーし、名前をmy_objectiveと変更します。

new objective

TwilioQuestがフリーズしている場合はリスタートを行い、先ほどの宝箱を開けてみましょう。下記のようにExample Objectiveが表示されることを確認してください。表示されない場合は、フォルダ名とobjectiveNameが同一であることを再度確認してください。

example objective

Objectiveは通常4つのファイルで構成されます。

  • objective.json - 問題の名前や回答フィールドの定義、検証ロジックの指定など各種設定を行うファイル
  • description.md - 問題の概要を記述するファイル
  • walkthrough.md - 問題のヒントを記述するファイル
  • validator.js - 回答の検証ロジックを実装するファイル

まずはobjective.jsonファイルを開き内容を次のようにケーキとパイに関する問題として書き換えます。

{
  "title": "ケーキ or パイ",
  "description": "ケーキとパイ、どちらを推しますか？",
  "validation_fields": [
    {
      "name": "answer1",
      "type": "text",
      "placeholder": "解答を記入してください",
      "label": "Twilio Japanのデベロッパーエバンジェリストはどちらの派閥でしょうか？"
    }
  ],
  "rewards": {
    "xp": 100
  }
}

validation_fieldsで使用できる入力の種類についてはvalidations_filed APIリファレンスを参照してください。

ファイルを保存し宝箱を再度開けようとした際に問題が変更されていることを確認します。

objective.json

description.md並びにwalkthrough.mdは通常のマークダウンファイルです。問題の概要とヒントを次のように記述します。

description.md

# 究極のケーキ vs 至高のパイ

Twilio Developer Networkチームではケーキ推しとパイ推しという2つの派閥が存在します。
今回のエクステンションについて執筆しているBlogの執筆者はどちらの派閥でしょうか？

walkthrough.md

# ケーキとパイの起源

- [Wikipedia - ケーキ](https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%AD)
- [Wikipedia - パイ](https://ja.wikipedia.org/wiki/%E3%83%91%E3%82%A4)

最後に解答の検証ロジックを実装しているvalidator.jsを次のように変更します。

const assert = require("assert");

module.exports = async function (helper) {
  // validation_fieldsに入力された値を取得
  const { answer1 } = helper.validationFields;
  console.log(answer1);
  // このBlogの執筆者はケーキ派らしい
  if (answer1 !== 'ケーキ') {
    return helper.fail(`ケーキこそ究極のデザートなり！`);
  }

  // 正しい派閥を入力した場合
  helper.success(`
    ケーキ万歳！
  `);
};

最後にこのObjectiveがミッションの達成率の計算に含まれるようにlevels/vr-mission_template/level.jsonファイルを再度修正します。

{
  "title": "カスタムミッション",
  "description": "ここにはミッションの内容を記述します。",
  "questTitle": "カスタムミッション",
  "questDescription": "あなただけのミッションを構築しましょう！",
  "mission_icon": "mission_icon.png",
  "is_mission": true,
  "priority": 10,
  "backgroundMusic": "hackertheme_104771b",
  "backgroundEffect": {
    "key": "vr",
    "options": {}
  },
  "flavorTextOverrides": {
    "bookshelf": "There's nothing like a good book."
  },
  "objectives": ["example_objective", "example_objective2", "my_objective"]
}

これで新しいオブジェクトの追加に必要なすべての作業が完了しました。変更したファイルがすべて保存されていることを確認し宝箱を開いてみましょう。それぞれのタブが変更されており、また検証ロジックが正しく動作していることを確認します。

description

walkthrough

pie

Cake

今回の記事で作成したエクステンションはこちらのリポジトリより取得できます。

まとめ

いかがでしたでしょうか。TwilioQuest 3.2でリリースされたエクステンション機能を利用し独自の問題を作成する方法を紹介しました。下記のドキュメントも参考にしてぜひ独自のシナリオを作成してみてください。

TwilioQuest Extension Guide（英語）

また、TwilioQuestは日本語版も提供しています。エクステンション開発機能は現在、英語版のみの提供となりますが、もともと用意されているミッションを日本語でプレイしてみたいという場合は日本語版をお試しください。また、2022年の早い段階で日本語版でもこの機能をサポートする予定です。そちらもぜひご期待ください。

質問やフィードバックはdikehara [@] twilio.comまでご連絡ください。

Let’s Hack!

Qiita Advent Calendar 2日目はkikutaroさんです。

関連投稿

関連リソース

A newspaper article

Twilio Docs

APIからSDK、サンプルアプリまで

言語とプラットフォームの API リファレンス ドキュメント、SDK、ヘルパー ライブラリ、クイックスタート、チュートリアル。
An Open book

リソース・センター

最新の電子ブック、業界レポート、ウェビナー

顧客エンゲージメントの専門家から学び、自社のコミュニケーションを改善しましょう。
User group reactions

Ahoy

Twilio の開発者コミュニティ ハブ

コミュニケーションとデジタル エンゲージメント エクスペリエンスを構築するためのベスト プラクティス、コード サンプル、インスピレーション。