TwilioQuestという学習ソフトウェアをご存じでしょうか。ドット絵のRPGを通じて、プログラミングの学習を行えるプラットフォームです。TwilioQuestと付いている通り、Twilioのサービスが基本ではありますが、Node.jsやPython、GitHubの使い方なども学べます。
そんなTwilioQuest 3.2において、自作エクステンションを追加できるようになりました。ルールに則って作成すれば、サードパーティーのサービスでも、その使い方をゲーム感覚で学べるようになります。
まだ情報が多くないので、そのメモ書き + NCMBの学習を行うエクステンションをデモレベルで作ってみたいので試してみます。基本はSIGNALで発表されたTwilioQuest 3.2を使って自分だけのエクステンションを作成するにはに書かれていますので、まずこちらを読んでください。
出現ポイントと、脱出ポイント
出現場所
player_entry1 は最初の宇宙船から移動した際の出現場所になります。必須です。 Insert Point を選んで追加します。
脱出ポイント
元の画面に戻る時には exit を作成して下記プロパティを設定する。Insert Rectangle を選んで作成します。
| プロパティ名 | 値 |
|---|---|
| levelName | fog_owl |
| playerEntryPoint | player_entry2 |
それ以外の場合は次のように設定します。
| プロパティ名 | 値 |
|---|---|
| levelName | levels 以下のフォルダ名 |
| mapName | levelName 以下の maps にあるJSONファイル名 |
| playerEntryPoint | そのマップ内の表示ポイント名 |
自作の別なマップ（別な階層など）の場合は、出現ポイント名は自由に設定できるようです（playerEntryPointで指定すればOK）。
ハックするとゲートが開くもの
ターミナルなどを配置して、ターミナルをハックするとゲートが開く仕組みにできます。
ターミナル
- hackableをチェックする
- objectiveNameをobjectivesフォルダ内のフォルダ名にする。
レーザー
- レーザーは hackable をオフにする
- objectiveNameはハック対象
移動範囲を定める
壁などは配置できますが、Collision（衝突）で範囲を設定しておかないと、通過できます。必要な場所を取り囲むようにしましょう。レーザーやターミナル、宝箱などのオブジェクトは設定不要です。
NCMBのテストを作ってみる
ここまでの知識を使って、ニフクラ mobile backendのテストを作ってみました。
- 問題はターミナル1つ
- 回答するとレーザーのゲートが開く
という簡単なものです。
まずデモで取り込んだNodeプロジェクトにて、NCMB SDKを追加します。
npm i ncmb
description.mdの内容
問題文です。
# NCMB Test
<div class="aside">
<h3>To-Do List</h3>
<ul>
<li>NCMBの初期化を学ぼう</li>
<li>キーを設定したら<em>HACK</em>を押してください！</li>
</ul>
</div>
ここでは正しいNCMBのアプリケーションキー、クライアントキーの取得をしてもらいます。
取得したら、右側のテキストボックスに入力してください。
objective.jsonの内容
{
"title": "NCMBの基本",
"description": "NCMBを初期化しよう",
"validation_fields": [
{
"name": "applicationKey",
"type": "text",
"placeholder": "YOUR APPLICATION KEY",
"label": "取得したアプリケーションキーを入力してください"
},
{
"name": "clientKey",
"type": "text",
"placeholder": "YOUR CLIENT KEY",
"label": "取得したクライアントキーを入力してください"
}
],
"rewards": {
"xp": 100
}
}
validator.jsの内容
validator.jsはテストの実行時に呼ばれるファイルです。入力値は helper.validationFields にオブジェクトとして入っています。入力されたアプリケーションキーとクライアントキーを使ってデータストアにアクセスしてみて、値の検証を行っています。
const NCMB = require('ncmb');
module.exports = async function (helper) {
const { applicationKey, clientKey } = helper.validationFields;
const ncmb = new NCMB(applicationKey, clientKey);
const Hello = ncmb.DataStore('Hello');
try {
await Hello.fetch();
helper.success('キーが確認できました！');
} catch (e) {
helper.fail('正しいアプリケーションキー、クライアントキーをセットしてください');
}
};
テストが通過したら helper.success 、失敗したら helper.fail を呼べば良いようです。assertなどを使ってテストも可能です。
実行する
実際にテストを実行してみます。
失敗した場合。
成功した場合。
テスト結果をクラウドに保存する
TwilioQuestのコンテストでは回答状況をクラウドで確認できますが、自作拡張では恐らく難しいでしょう（もの凄い経験値のテストを作って、得点操作できてしまうので）。自作拡張の場合は、NCMBで得点を管理するのが良さそうな気がします。
まとめ
TwilioQuestは開発者向けにゲーム感覚で使い方を学んでもらうのに最適なプラットフォームだと思います。拡張に対応したことで、サードパーティーのサービスでも自由に課題を追加して開発者に提供できるようになりました。今後、NCMBでも課題を追加して遊んでもらえるようにしていきたいと思います。乞うご期待ください！