TwilioQuestのエクステンション作成時の基本ルール + NCMBを題材に自作してみる

[TwilioQuest](https://www.twilio.com/quest/ja)という学習ソフトウェアをご存じでしょうか。ドット絵のRPGを通じて、プログラミングの学習を行えるプラットフォームです。TwilioQuestと付いている通り、Twilioのサービスが基本ではありますが、Node.jsやPython、GitHubの使い方なども学べます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/a0f99c83-8440-cdcc-a267-0b35f8026573.png)


そんなTwilioQuest 3.2において、自作エクステンションを追加できるようになりました。ルールに則って作成すれば、サードパーティーのサービスでも、その使い方をゲーム感覚で学べるようになります。

まだ情報が多くないので、そのメモ書き + NCMBの学習を行うエクステンションをデモレベルで作ってみたいので試してみます。基本は[SIGNALで発表されたTwilioQuest 3.2を使って自分だけのエクステンションを作成するには](https://www.twilio.com/blog/signal-twilioquest-extension-jp)に書かれていますので、まずこちらを読んでください。

## 出現ポイントと、脱出ポイント

### 出現場所

![ScreenShot_ 2021-12-06 16.43.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/34066c30-d8f4-1ba4-6a1a-a5f05ef235e5.png)


player_entry1 は最初の宇宙船から移動した際の出現場所になります。必須です。 `Insert Point` を選んで追加します。

![ScreenShot_ 2021-12-07 12.08.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/15a2d4ad-a1b3-9cf6-08aa-65794dd7511c.png)


### 脱出ポイント

元の画面に戻る時には exit を作成して下記プロパティを設定する。`Insert Rectangle` を選んで作成します。

| プロパティ名 | 値 |
|-------------|-------------|
| levelName | fog_owl |
| playerEntryPoint | player_entry2 |

それ以外の場合は次のように設定します。

| プロパティ名 | 値 |
|-------------|-------------|
| levelName | levels 以下のフォルダ名 |
| mapName | levelName 以下の maps にあるJSONファイル名 |
| playerEntryPoint | そのマップ内の表示ポイント名 |

自作の別なマップ（別な階層など）の場合は、出現ポイント名は自由に設定できるようです（playerEntryPointで指定すればOK）。

## ハックするとゲートが開くもの

ターミナルなどを配置して、ターミナルをハックするとゲートが開く仕組みにできます。

![ScreenShot_ 2021-12-07 11.55.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/b3dced66-e909-3961-80ae-0d3a206f030f.png)


### ターミナル

- hackableをチェックする
- objectiveNameをobjectivesフォルダ内のフォルダ名にする。

### レーザー

- レーザーは hackable をオフにする
- objectiveNameはハック対象

## 移動範囲を定める

壁などは配置できますが、Collision（衝突）で範囲を設定しておかないと、通過できます。必要な場所を取り囲むようにしましょう。レーザーやターミナル、宝箱などのオブジェクトは設定不要です。

# NCMBのテストを作ってみる

ここまでの知識を使って、ニフクラ mobile backendのテストを作ってみました。

- 問題はターミナル1つ
- 回答するとレーザーのゲートが開く

という簡単なものです。

まず[デモで取り込んだNodeプロジェクト](https://github.com/TwilioQuest/twilioquest-extension-template)にて、NCMB SDKを追加します。

```
npm i ncmb
```

## description.mdの内容

問題文です。

```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の内容

```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` にオブジェクトとして入っています。入力されたアプリケーションキーとクライアントキーを使ってデータストアにアクセスしてみて、値の検証を行っています。

```js
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などを使ってテストも可能です。

## 実行する

実際にテストを実行してみます。

![ScreenShot_ 2021-12-07 11.58.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/51487aba-1735-f02d-cc22-ff988fd50041.png)



失敗した場合。

![ScreenShot_ 2021-12-07 12.04.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/387e6398-d6fe-d525-600d-4a6d618164d4.png)



成功した場合。

![ScreenShot_ 2021-12-07 12.04.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/e56d9ef6-5fea-0405-ff0d-3149742f8c29.png)



## テスト結果をクラウドに保存する

TwilioQuestのコンテストでは回答状況をクラウドで確認できますが、自作拡張では恐らく難しいでしょう（もの凄い経験値のテストを作って、得点操作できてしまうので）。自作拡張の場合は、NCMBで得点を管理するのが良さそうな気がします。

## まとめ

TwilioQuestは開発者向けにゲーム感覚で使い方を学んでもらうのに最適なプラットフォームだと思います。拡張に対応したことで、サードパーティーのサービスでも自由に課題を追加して開発者に提供できるようになりました。今後、NCMBでも課題を追加して遊んでもらえるようにしていきたいと思います。乞うご期待ください！

[SIGNALで発表されたTwilioQuest 3.2を使って自分だけのエクステンションを作成するには](https://www.twilio.com/blog/signal-twilioquest-extension-jp)