add message type

Author: kazukimuta

index.html

@@ -110,14 +110,40 @@
     "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.uri) {
+      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)
@@ -140,13 +166,19 @@
         // アイテム要素を追加
         $("#items").append(`
         <div class="item-wrap" >
-          <div class="col-sm-6">
+          <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>
@@ -166,23 +198,27 @@
         // 配列内部のオブジェクト型は以下
         // { 
         //   label: <>,
-        //   uri: <>
+        //   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
+              uri: null,
+              isSendMessage
             })
           } else {
             items.push({
               label,
-              uri
+              uri,
+              isSendMessage
             })
           }
         });
@@ -231,15 +267,22 @@
 
       <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-6">
+          <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>