Chapter 02

ノードを設定しよう

がおまる
がおまる
2020.12.24に更新

2-1. ノードを追加しよう

画面右上のハンバーガーメニュー①から「パレットの管理」②をクリックします。

下記ノードを追加してください。


2-2. ダッシュボードを配置する

ダッシュボードアイコンをクリック①して「+タブ」②→「編集」③→名前に アキネーター ④と入力→更新⑤→「+グループ」⑥の順番に行ってください。

続いて、グループの名前を編集してください。

2-3. スタートボタンを配置する

ゲームを始めるためのスタートボタンを配置します。ダッシュボードカテゴリから button ①ノードをドラッグ・アンド・ドロップしてください。 buttonノードをダブルクリック②して、Groupに 2-2で作成したアキネーターを選択③します。Labelに「スタート」④と入力します。

Payloadのプルダウンメニューから JSON⑤を選択して、カギカッコで空のデータ⑥を設定します。

2-4. Akinatorノードを配置する

Akinatorノード①を配置して、buttonノードと線②でつなげておきます。プロパティのRegionを jp ③にしてください。

2-5. 正解を判定する

Akinatorからの結果を判定します。switchノードを配置して、プロパティに msg.payload.win と指定します。0だと質問継続中、1だとAkinatorが導き出した結果が取得できます。
0か1の判定を設定します。

2-6. 選択肢を設定する

changeノードをドラッグ・アンド・ドロップします。Akinatorに渡すための選択肢項目を設定します。Akinatorでは0〜4の5つの選択肢を渡す必要があります。

項目
はい 0
いいえ 1
わからない 2
たぶんはい 3
たぶんいいえ 4

設定するプロパティは msg.options ③に設定して、対象の値はプルダウンメニューから JSON ④を選択して、右側にあるボタン⑤を押してプログラムを編集します。

選択肢のJSONコードは下記の通りです。

[
    {
        "はい": 0
    },
    {
        "いいえ": 1
    },
    {
        "わからない": 2
    },
    {
        "たぶんはい": 3
    },
    {
        "たぶんいいえ": 4
    }
]

2-7. 質問内容をテキストに表示する

Akinatorから返ってくる質問や導き出した答えをテキストに表示します。ダッシュボードカテゴリにある text ノードをドラッグ・アンド・ドロップします。プロパティは下記のように設定します。

項目
③Group [アキネーター]アキネーター
④Label 質問
⑤Value format {{msg.payload.question}}
⑥Layout お好きなものを選択してください

2-8. 選択肢設定

Akinatorにわたすための選択肢情報を適用します。ダッシュボードカテゴリにある dropdown ノードをドラッグ・アンド・ドロップします。Placeholder④に「選択してください」と入力します。⑤のチェックは必ず外すようにしてください。

2-9. 選択肢情報をわたす

Akinatorにわたす設定をします。 template ノードをドラッグ・アンド・ドロップします。dropdownノードとAkinatorノードを正しく接続してください。コードは下記をコピペします。answerプロパティにdropdownで選択した情報をわたします。

const answer = msg.payload;
msg.payload = {};
msg.payload.answer = answer;
return msg;

2-10. 導き出した答えを取得

Akinatorが導き出した答えを取得します。functionノードをドラッグ・アンド・ドロップします。正解判定と質問テキストノードにそれぞれつなぎます。コードは下記をコピペします。

const answer = `それは「${msg.payload.answers[0].name}」かな`;
const absPath = msg.payload.answers[0].absolute_picture_path;
msg.payload.question = answer;
msg.src = absPath;
return msg;

2-11. 判定結果の画像を表示する

Akinatorが導き出した答えの中に画像のURLも含まれて返ってきます。ダッシュボードに ui-media ノードがあるので、ドラッグ・アンド・ドロップします。線でつないで表示グループを設定します。

2-12. デプロイ

ダッシュボード上の表示順番を並べ替えておきます。スタートボタン、質問、dropdown、mediaの順番①にしてください。デプロイボタン②をクリックします。デプロイが終わればリンク③ボタンをクリックして、ダッシュボード動作確認画面を開きます。

2-13. 動作確認

スタートボタンをおして、ゲームを開始してください。思い浮かべているものを当ててもらうよう聞かれる質問に答えていってください。