![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5004a_6a8Ut-s2IgrQ80ltTT9SE3VuC-oHoIHDmYXCUNb2BEQi0LWr-nElwMGLOT0epZEXt1vA9cPm2-CQrt18puKGx1Gs-JwvQuMpb1i_MDK9viZVVOM4-IH45FFiFhD33-ikXvL1_l/s1600/m.gif)
このテンプレートで紹介している方法を使うと、ユーザーが過去に選んだ選択 結果に合わせて分岐させるコンテンツがつくれます!
この記事のサンプル
「Bot3D StoryGraphEditor」ではいろいろな便利な機能をシンプルに使えるように、様々なテンプレートが用意してあります。画面左上の「テンプレートから作成」を押します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiEYtF55zwzeYZE9ExFdj2l6-36CL-2FyikE9F2yVsWGWXxot0LSsoMXNdw4YO0mXoFMlsKcoP_bL2m2E6v4y2Yx3z3A2WFywlgYi1d7-Zqx39c_loNkoulS55ZdjWbNW1hQiDSSNFjvBo/s0/tmp1.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Q3770K5MgLUTGD4ff4LCoR2kQ_rzgZ3UUb2RRJVh8BVQFIfDrwV61Ihl4p6N55Xb6eyITPw3uMyR9B2xf4t-b-C1Jh7pX7usqfQyXXJ_SPx2ZOCYu6WENzQpG50SqPbag4CoUcCB-1g4/s1600/templateList.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPsxi_-FEr-0TekM6iHVFpW5XcCJSOGD89RLmeG1lP_RkvYrcLacK97TRx-KPDJc7DFr0mP18eMLlyyVW8rsI-rIByeWjM9pfFJ804rpPLEOygOEXcZZS1fUV3hgw484_etelznmdUE0Ma/s1600/teigi-action.png)
- 会話ボックス:
このグレー地の箱は、アクションをひとまとめにするものです。アクションとは、「Botにさせること」です。いろいろなことをさせることができます。 - "ボタン選択"アクション:
"ボタン選択"と書いてある、この黄色の箱(アクション)は、ボタンによる回答の際の選択肢を設定できます。 - "条件一致でふりわけ"アクション:
"条件一致でふりわけ"と書いてある、この緑色の箱(アクション)は、過去に選んだ選択 結果に対してストーリーを分岐することができます。
基本操作のおさらい
簡単に基本操作のおさらいをしましょう。テンプレートをカスタマイズするときに一番重要なのは、9番の、ストーリーのいちばん最後の会話ボックスを「終了ボックス」につなげることです!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Czwa1cqED4kByFzbcUNWTGv0gqEtLmyYttms9P34naizi0y-JJVZ_o5i8aCKEe01lU8IU0BzcbcymEwsyisCqRw9KTtud-Yq1HQU5eEC4hi9D-bSTyH2Jk55ciYKKtBULufF0t6okxDU/s0/basic.png)
過去に選んだ 選択肢に合わせて分岐させる
それではテンプレート【複雑なストーリーテンプレ】条件分岐を開いて一度保存し、どんなふうに「Bot3D Player」で再生されるか見てみましょう。「Bot3D Player」で再生してみたい場合は、一度保存し、 StoryGraphEditor クイックヘルプ:Bot3DPlayerで見る方法をご覧いただき、再生してください。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZu4Xx-Yeuj-YVtNek0nq8dPwq9dH7ccaEnIs7zZLHw9mSA1qYp_MA9r4GcGAZsfJqzuKOPC3L-al4SGz_cuN9RRddzf4RbiKVSgDU-c5LURcI87kE1si4sOQbKAnl4QA2VG4wAdqHCZtF/s400/conditions-capture-1.png)
これだけだと、"条件一致でふりわけ"アクションがわかりにくいので、「Bot3D StoryGraphEditor」上でどうなっているか見てみましょう。
"ボタン選択"アクションだけで会話を分岐する場合は、選択肢の数だけ会話ボックスを用意し、線で繋げます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0IucdYNhL2Hp3t1d-mE0ovyliT4LUK3gTGZSXd_ACjWO7EruHr_MUh68yuZVLuF4xf38ZvchFqAx2vXBx3HXsr2GqCpS7B7Q0z3DDFNRhw406rJYbVlSWFp7DXeiuHVagfI91AfQQZhUx/s1600/template-flow-connector.png)
また、"条件一致でふりわけ"アクションにある選択肢は、"ボタン選択"アクションにある選択肢と対応していることがわかります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhevcx4kBKHzW-Wwd4dr9HMvNuCxprZTMyWJWVxLwi7iXAqINoO5p9k9-aTfkvn6K8bY4BAaWHnbciFXmN4uTuRKUonlswzsz2Xs8TzX0jBPGxlh_h5NeoF-w19a9EOPnMF62fRz2q-YAfJ/s1600/template-flow-conditions.png)
詳しい設定の仕方について確認します。大まかに2ステップです。
- 選択肢にIDを設定
- IDをつけた選択肢の結果を利用して分岐
ステップ1:選択肢にIDを設定
後ほど利用するため、"ボタン選択"アクションに目印となるIDをふります。IDを ふることができるのは、"ボタン選択"アクションのほか"ユーザーが音声認識で選択"アクション"でもできます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXGvEGimJLL4rLAufeJvLew5Qrhy5p38E75wILjYyena7UXxBnXGDOtyIJ6Y-Y_rsuOB7zAi2H2OB-_QedrqnzqAbNJ_vIodNX9dfp5VDVIiY7Md8pOyDsvCav38ZfWeIE7bhRL0F1P3n/s1600/how-to-use-set-id.png)
- "ボタン選択"アクションをクリックすると、画面下部でエディタが開きます。
- 後で使い回すためにの目印としてIDをつけます。
- 保存します。
- IDに設定した値が表示されます。
ステップ2:IDをつけた選択肢の結果を利用して分岐
"条件一致でふりわけ"アクションから、IDをつけた選択肢の結果を分岐の条件として利用します。![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErIxFokIOhY1FNEQqvMUGG6j6gIE8fqcUUJa1OUt3FCnUKGAUYDHawmrjfnDpJrgtzj-rCWPqqpZeOyA7V3gGCq3ez4gcv7x17fDudnhsFsXsilmcYiruX70fu2QtpIk1D_iEhb7eEKyq/s1600/how-to-use-add-conditions.png)
- "条件一致でふりわけ"アクションをクリックすると、画面下部でエディタが開きます。
- 条件を追加の項目から、種別:選択肢、選択肢ID:利用したい選択肢につけたIDを選択し、追加します。
- タブに条件が追加されます。
- 「選択結果が〜の時」にあるセレクトボックスから、分岐させる条件となる選択肢の結果を選びます。
また、リンク先には、分岐先となる会話ボックスを選びます。 - 保存します。
- 追加した条件が、"条件一致でふりわけ"アクション内に反映されます。
選択肢のコネクタから分岐先に線を繋げるか、エディタの「デフォルト 」タブから設定ができます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfZq97GLDPhn651QjksyZVjd1IeiyBEyr3oRaiycexKhZrmiiiYrC8DXvx_N_QoaZn6771uXyuuEXgZG275rxdWbqnyDjPngM6GyYzTuewy3ndT2sq_-yocpBXi2hWBdtW6IesyI27zWh/s1600/how-to-use-other-conditions.png)
変更してみよう
では最後に、新しい選択肢とそれを利用したアクションを作成してみましょう。まず、新しい"ボタン選択"アクションです。
会話ボックスを新しく作成するか、既存のものの値を変更してください。
各項目の新しい値は、海外旅行から好きな料理に変更してみました。IDも忘れずに変更して保存してください。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik9wjXtubn2dI4t1L8ICAUcI3aREqE0Ijiv9nZraHN6kTWZ4AV7YO0kpRvM9YpU5AJZAkHDnuUl7OeG9H2BPNpXxebeM3IwbK0wWD7wIBCSYmYgiQZ9RfOm5F398tbplmBGD8wcVXr4hEc/s1600/create-conditions-1.png)
前述の"ボタン選択"アクションと同様に、作成してみてください。
登録している条件の選択肢IDを、変更しました。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinw9G3j_dpheUwZwO8XG5cuThuy4unGf4eHF3J8akHkjDjwTAMU9ApKb1D3hBWVMHqtXQZhmo5K_E7W-lNOxf8RK2L5dvMEptA2j64bfpbGA6lTOACAAagxwZDzHmRoEhfr4_yOSnsRJlz/s1600/create-conditions-editor.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEo2Mv3r6wNDnskTTYa_DgiMVTgXqtxXj8zPl1JysZ2Ys4ZJj-x7-xxwS5HSqnwJWm5EUtVSmmBHYqK2bGY9Re1ZXtxcWSw744LYTBGC_iAgX9XaYY8DRqVgzpuSr4s1lIZP9uSIeGu4w/s1600/create-conditions-2.png)