JSON形式のファイルを編集し、インポートすることでシナリオを編集することもできます。

JSON形式のファイル自体は、当サービスが独自に考えたものではなく、一般的なものです。
このJSON形式のファイルを利用して、ローカル環境でもシナリオを編集できるようにしています。

---

■JSON形式のファイルについて

JSON形式のファイルは、まず「キー」と「値」をペアとして、「キー : 値」のように「:」を使って表現します。

"キー": "値"

ちなみに、「キー」と「値」とは、「名前 は “山田太郎”」、「性別 は “男”」といったように、「xxx は yyy」と決まっているものを表現するものです。

"名前": "山田太郎"
"性別": "男"

このキーと値のペアは複数指定することができます。
それらを括弧「{}」や「[]」で括ることでまとまりを表現します。

{
    "キー1": "値1",
    "キー2": "値2",
    "キー3": "値3"
}

つまりJSON形式のファイルは、括弧「{}」や「[]」と「キー」と「値」の組み合わせで表現されます。

{
    "キー1": "値1",
    "キー2": "値2",
    "キー3": [
        {
            "キー3_1": "値3_1",
            "キー3_2": "値3_2"
        }        
    ]
}

---

■シナリオ編集用のJSONファイルについて

シナリオ編集用のJSONファイルは以下のようなイメージとなります。

• 「JSONファイル例」

  {
  "treeData": [  
      {
          "title": "いらっしゃいませ！\n\n本日はどのような商品をお探しでしょうか。",  
          "subtitle": "メッセージ"
      },
      {
          "title": "トップス",
          "subtitle": "ボタン",
          "children": [
              {
                  "title": "色は何色をお考えでしょうか？",
                  "subtitle": "メッセージ"
              },
              {
                  "title": "ホワイト系",
                  "subtitle": "ボタン",
                  "children": [
                      {
                          "title": "こちらの商品は如何でしょうか？\n\n[ホワイト系のトレーナー](https:\/\/example.com)\n",
                          "subtitle": "メッセージ"
                      },
                      {
                          "title": "最初に戻る",
                          "subtitle": "最初に戻るボタン"
                      }
                  ]
              },
              {
                  "title": "ブラック系",
                  "subtitle": "ボタン"
              },
              {
                  "title": "その他",
                  "subtitle": "ボタン"
              }
      },
      {
          "title": "アウター",
          "subtitle": "ボタン"
      },
      {
          "title": "パンツ",
          "subtitle": "ボタン"
      },
      ...
  

このように、シナリオ編集用のJSONファイルの構造は決まったフォーマット（キーの内容が決まっている）でできています。
このフォーマットに沿ってファイルを作成する必要があります。

※テンプレートを読み込んでから保存し、その後インポートしてJSONの中身を実際に見てみることで、JSONファイルを使ったシナリオの作成方法が理解できます。

---

■フォーマットについて

JSONファイルは、必ず以下のキーで構成されている必要があります。

• “treeData”

  ファイルの先頭のキーは、必ず “treeData” である必要があります。

  {
  "treeData": [  
      ...
  ]
  }
  

• “title”

  メッセージやボタンの表示内容は、”title” に設定します。

  "title": "トップス"
  

• “subtitle”

  各コントロールの内容は、”subtitle” に設定します。
  内容はそれぞれ下記の通りで、決まっています。下記以外の値は無効です。

  • “メッセージ”
  • “ボタン”
  • “１つ前に戻るボタン”
  • “最初に戻るボタン”

  • “チャットを開始するボタン”

    "subtitle": "メッセージ"
    "subtitle": "ボタン"
    "subtitle": "１つ前に戻るボタン"
    "subtitle": "最初に戻るボタン"
    "subtitle": "チャットを開始するボタン"
    

  例えば、”いらっしゃいませ！”というメッセージをJSON形式で表現すると以下のようになります。

  {
  "title": "いらっしゃいませ！",  
  "subtitle": "メッセージ"
  }
  

  例えば、”トップス”というボタンをJSON形式で表現すると以下のようになります。

  {
  "title": "トップス",
  "subtitle": "ボタン"
  }
  

• “children”

  各コントロールの下の階層にコントロールを設定するには、”children” の中に設定します。

  {
  "treeData": [  
      ...
      {
          "title": "トップス",
          "subtitle": "ボタン",
          "children": [
      -->     この中に設定
              ...
  

  例えば、”トップス”ボタンの下に、”色は何色をお考えでしょうか？”のメッセージを設定する場合、JSON形式で表現すると以下のようになります。

  {
  "treeData": [  
      ...
      {
          "title": "トップス",
          "subtitle": "ボタン",
          "children": [
              {
                  "title": "色は何色をお考えでしょうか？",
                  "subtitle": "メッセージ"
              },
  

---

■基本的な作り方について

以上の内容から、シナリオの基本的な作り方としては、
まずメッセージコントロールを作成し、同じ階層に複数のボタンを設定、これらを1つのセットとします。

（例）”いらっしゃいませ〜”メッセージと商品選択ボタンを1セット

{
    "title": "いらっしゃいませ！\n\n本日はどのような商品をお探しでしょうか。",  
    "subtitle": "メッセージ"
},
{
    "title": "トップス",
    "subtitle": "ボタン"
},
{
    "title": "アウター",
    "subtitle": "ボタン"
},
{
    "title": "パンツ",
    "subtitle": "ボタン"
}

次に、それらのボタンの下の階層に、またメッセージとボタンのセットを設定するといった形になります。

（例）”色は何色をお考えでしょうか？”メッセージと色選択ボタンを1セットとし、トップスのセットの下に設定する。

{
    "title": "いらっしゃいませ！\n\n本日はどのような商品をお探しでしょうか。",  
    "subtitle": "メッセージ"
},
{
    "title": "トップス",
    "subtitle": "ボタン",
    "children": [
        {
            "title": "色は何色をお考えでしょうか？",
            "subtitle": "メッセージ"
        },
        {
            "title": "ホワイト系",
            "subtitle": "ボタン"
        },
        {
            "title": "ブラック系",
            "subtitle": "ボタン"
        },
        {
            "title": "その他",
            "subtitle": "ボタン"
        }
},
{
    "title": "アウター",
    "subtitle": "ボタン"
},
{
    "title": "パンツ",
    "subtitle": "ボタン"
}

これらのセットを階層化して組み合わせることで、シナリオを編集します。