index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flexmessage JSON Generator</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!-- Bootstrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style type="text/css">

  </style>

<!-- FlexmessageのJSONテンプレート -->
<script type="text/javascript">
  var baseJson = `
{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      {
        "weight": "bold",
        "margin": "md",
        "text": "<<title>>",
        "type": "text",
        "size": "lg",
        "wrap": true
      },
      {
        "type": "separator",
        "margin": "xxl"
      },
      {
        "layout": "vertical",
        "margin": "xxl",
        "spacing": "sm",
        "type": "box",
        "alignItems": "flex-start",
        "contents": [
          {
            "type": "box",
            "width": "100%",
            "layout": "vertical",
            "contents": <<contents>>
          }
        ]
      }
    ]
  },
  "styles": {
    "footer": {
      "separator": true
    }
  }
}
`
  
  var baseContentsItem = `
{
  "type": "box",
  "layout": "vertical",
  "contents": [
    {
      "type": "text",
      "text": "<<template>>",
      "color": "#2D558F",
      "wrap": true,
      "align": "center"
    }
  ],
  "paddingStart": "xl",
  "paddingEnd": "xl",
  "paddingTop": "md",
  "paddingBottom": "md",
  "action": {
    "type": "postback",
    "label": "<<template>>",
    "data": "",
    "displayText": "<<template>>"
  }
}
`
  var baseContentsLinkItem = `
{
  "type": "box",
  "layout": "vertical",
  "contents": [
    {
      "type": "text",
      "text": "<<label>>",
      "color": "#2D558F",
      "wrap": true,
      "align": "center"
    }
  ],
  "paddingStart": "xl",
  "paddingEnd": "xl",
  "paddingTop": "md",
  "paddingBottom": "md",
  "action": {
    "type": "uri",
    "uri": "<<uri>>"
  }
}
`
  var baseContentsSendMessageItem = `
{
  "type": "box",
  "layout": "vertical",
  "contents": [
    {
      "type": "text",
      "text": "<<template>>",
      "color": "#2D558F",
      "wrap": true,
      "align": "center"
    }
  ],
  "paddingStart": "xl",
  "paddingEnd": "xl",
  "paddingTop": "md",
  "paddingBottom": "md",
  "action": {
    "type": "message",
    "label": "<<template>>",
    "text": "<<template>>"
  }
}
`

  // テンプレートを使ってjsonを生成する
  generateJson = function (title, itemsArray) {
    var contents = []
    var contentItems = itemsArray.forEach(item => {
      let jsonStr;
      if (item.isSendMessage) {
        jsonStr = baseContentsSendMessageItem.replace(/<<template>>/g, item.label)
      } else if (item.uri) {
        jsonStr = baseContentsLinkItem.replace(/<<label>>/g, item.label).replace(/<<uri>>/g, item.uri)
      } else {
        jsonStr = baseContentsItem.replace(/<<template>>/g, item.label)
      }
      contents.push(JSON.parse(jsonStr))
    });

    var flexJsonStr = baseJson
                      .replace(/<<title>>/g, title)
                      .replace(/<<contents>>/g, JSON.stringify(contents))
    
    return JSON.parse(flexJsonStr)
  }
  </script>

  <script type="text/javascript">
    $(document).ready(function() {
      // アイテム追加ボタンのクリックイベントを設定
      $("#add-item").click(function() {
        // アイテム要素を追加
        $("#items").append(`
        <div class="item-wrap" >
          <div class="col-sm-5">
            <input type="text" class="form-control item" id="item">
          </div>
          <div class="col-sm-4">
            <input type="text" class="form-control item" id="url-item">
          </div>
          <div class="col-sm-2">
              <input class="form-check-input" type="checkbox" value="" id="isSendMessage">
              <label class="form-check-label" for="isSendMessage">
                isSendMessage
              </label>
          </div>
          <div class="col-sm-1">
            <button class="btn btn-primary btn-sm remove-item">Remove</button>
          </div>
        </div>
        `);
      });

      // アイテム削除ボタンのクリックイベントを設定
      $(document).on("click", ".remove-item", function() {
        $(this).parent().parent().remove();

      });

      // Generateボタンのクリックイベントを設定
      $("#generate").click(function() {
        // アイテムのラベルを配列に格納
        var items = [];
        // 配列内部のオブジェクト型は以下
        // { 
        //   label: <>,
        //   uri: <>,
        //   isSendMessage: boolean
        // }
        
        $(".item-wrap").each(function() {
          const label = $(this).find("#item").val();
          const uri = $(this).find("#url-item").val();
          const isSendMessage = $(this).find("#isSendMessage").prop('checked');
          if (!label) {
            // skip
          } else if (!uri) {
            items.push({
              label,
              uri: null,
              isSendMessage
            })
          } else {
            items.push({
              label,
              uri,
              isSendMessage
            })
          }
        });
        // タイトル
        var title = $("#title").val();
        console.log(items);

        // JSON生成
        var flexjson = generateJson(title, items)

        // モーダルを表示
        $("#modal-output").val(JSON.stringify(flexjson, null, "\t" ));
        $("#outputModal").modal("show");
      });

      // Copy to Clipboardボタンのクリックイベントを設定
      $("#copy-to-clipboard").click(function() {
        var modalOutput = $("#modal-output");
        modalOutput.select();
        document.execCommand("copy");
        modalOutput.blur();
      });
    });
  </script>

</head>

<body>

  <div class="container">
    <div class="form-group">
      <button class="btn btn-primary" id="generate">Generate</button>
    </div>

    <div class="form-group">
      <label for="title">Title:</label>
      <input type="text" class="form-control" id="title">
    </div>

    <div class="form-group" id="item-container">
      <div class="row">
        <div class="col-sm-12">
          <button class="btn btn-primary btn-sm" id="add-item">Add Item</button>
        </div>
      </div>

      <label for="item">Items:</label>
      <label for="url-item">2つめのボックスはURI(URIアクションの場合はここにURIを入力)</label>
      <label for="isSendMessage">3つめのチェックボックスはSendMessageLinkにするかどうか(URIの入力よりも優先する)</label>
      <div class="row" id="items">
        <div class="item-wrap" >
          <div class="col-sm-5">
            <input type="text" class="form-control item" id="item">
          </div>
          <div class="col-sm-4">
            <input type="text" class="form-control item" id="url-item">
          </div>
          <div class="col-sm-2">
              <input class="form-check-input" type="checkbox" value="" id="isSendMessage">
              <label class="form-check-label" for="isSendMessage">
                isSendMessage
              </label>
          </div>
          <div class="col-sm-1">
            <button class="btn btn-primary btn-sm remove-item">Remove</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="outputModal" tabindex="-1" role="dialog" aria-labelledby="outputModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="outputModalLabel">Generated JSON</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" >
            <textarea class="form-control" rows="10" id="modal-output" style="height: 700px;"></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="copy-to-clipboard">Copy to Clipboard</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>
</html>