【GAS】linebotでカルーセルを使用したい

Question

前書き

初学者です。似たような質問を複数回投稿しており、気を悪くされた方がいらっしゃいましたら心よりお詫び申し上げます。

本題

さて、本題なのですが、lineで使用するためのbotを現在作成しております。
botの内容としては、if文にて特定の文字を入力すると特定の文字列が返され、そこに数値を入力すると計算結果が返ってくるというものになります。
実際に完成し、問題なく動作はしているのですが、最初の特定の文字を入力するという部分が、特定の文字を覚えないといけないということが煩わしく、その他という文字を入力するとカルーセルテンプレートを表示させ、入力できないかと考えました。
しかし、カルーセルテンプレートを呼び出すコードと元のコードを上手く合わせることが出来ず、文字を認識してくれなくなったり、関数が長くなりすぎることで動作しなくなってしまったりという現象が起こってしまいました。
うまく動作させるためにはどのようにして組み合わせればいいのか、ご教授のほどよろしくお願いいたします。

現在のbotのソースコード

var ACCESS_TOKEN = "XXXXXXXXXXX";
var URL = "https://api.line.me/v2/bot/message/reply";
var SS_ID = "XXXXXXXXXXX"; //スプレッドシートのID
var PUSH = "https://api.line.me/v2/bot/message/push";
var REPLY = "https://api.line.me/v2/bot/message/reply";
var line_endpoint = 'https://api.line.me/v2/bot/message/reply';
var ID = 'XXXXXXXXXXX';
var HistorySheet = SpreadsheetApp.openById(SS_ID).getSheets()[0];

function doPost(e) {
  var contents = e.postData.contents;
  var obj = JSON.parse(contents);
  var events = obj["events"];
  for (var i = 0; i < events.length; i++) {
    if (events[i].type == "message" && events[i].message.type == "text") {
      reply_message(events[i]);
    }
  }
}

function reply_message(e) {
  var input_text = e.message.text;
  var reply_text = "";
  const userId = e.source.userId;
  const history = getLastUserHistory(userId);

  if (history && history.continuous) {
    if (history.text == "70%*2") {
      reply_text = input_text + " の 軽減率70%×70%での実質HPは\n約 " + Math.floor(input_text / 0.09) + "です";
    } else if (history.text == "50%*2") {
      reply_text = input_text + " の 軽減率50%×50%での実質HPは\n約 " + Math.floor(input_text / 0.25) + "です";
    } else if (history.text == "70%*50%") {
      reply_text = input_text + " の 軽減率70%×50%での実質HPは\n約 " + Math.floor(input_text / 0.15) + "です";
    } else if (history.text == "25%*2") {
      reply_text = input_text + " の 軽減率25%×25%での実質HPは\n約 " + Math.floor(input_text / 0.5625) + "です";
    } else if (history.text == "75%*2") {
      reply_text = input_text + " の 軽減率75%×75%での実質HPは\n約 " + Math.floor(input_text / 0.0625) + "です";
    } else if (history.text == "50%*2+30%*2") {
      reply_text = input_text + " の 軽減率50%×50%×30%×30%での実質HPは\n約 " + Math.floor(input_text / 0.1225) + "です";
    } else if (history.text == "50%*2+25%") {
      reply_text = input_text + " の 軽減率50%×50%×25%での実質HPは\n約 " + Math.floor(input_text / 0.1875) + "です";
    } else if (history.text == "25%+50%*2") {
      reply_text = input_text + " の 軽減率25%×50%×50%での実質HPは\n約 " + Math.floor(input_text / 0.1875) + "です";
    } else if (history.text == "35%*2") {
      reply_text = input_text + " の 軽減率35%×35%の実質HPは\n約 " + Math.floor(input_text / 0.4225) + "です";
    } else if (history.text == "35%*25%") {
      reply_text = input_text + " の 軽減率35%×25%の実質HPは\n約 " + Math.floor(input_text / 0.4875) + "です";
    } else if (history.text == "25%*35%") {
      reply_text = input_text + " の 軽減率25%×35%の実質HPは\n約 " + Math.floor(input_text / 0.4875) + "です";
    }
    setLastUserHistory(userId, input_text, false);
  }
  else {
    if (input_text == "70%*2") {
      reply_text = "軽減率70%×70%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    } else if (input_text == "50%*2") {
      reply_text = "軽減率50%×50%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    } else if (input_text == "70%*50%") {
      reply_text = "軽減率70%×50%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    } else if (input_text == "25%*2") {
      reply_text = "軽減率25%×25%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    }else if (input_text == "75%*2") {
      reply_text = "軽減率75%×75%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    }else if (input_text == "50%*2+30%*2") {
      reply_text = "軽減率50%×50%×30%×30%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    } else if (input_text == "35%*2") {
      reply_text = "軽減率35%×35%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    }else if (input_text == "50%*2+25%") {
      reply_text = "軽減率50%×50%×25%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    }else if (input_text == "25%+50%*2") {
      reply_text = "軽減率50%×50%×25%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    }else if (input_text == "25%*35%") {
      reply_text = "軽減率25%×35%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    }else if (input_text == "35%*25%") {
      reply_text = "軽減率35%×25%で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
    }
    if (reply_text) {
      setLastUserHistory(userId, input_text, true);
    }
    else {
      setLastUserHistory(userId, input_text, false);
    }
  }

  var postData = {
    "replyToken": e.replyToken,
    "messages": [{
      "type": "text",
      "text": reply_text
    }]
  };

  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + ACCESS_TOKEN
    },
    "payload": JSON.stringify(postData)
  };
  const response = UrlFetchApp.fetch(URL, options);
  if (response.getResponseCode() !== 200) {
    throw new Error(response.getContentText());
  }
}

function getLastUserHistory(userId) {
  const userHistory = HistorySheet.getDataRange().getValues();
  for (let i = userHistory.length - 1; 0 < i; i--) {
    if (userHistory[i][1] === userId) {
      return {
        date: userHistory[i][0],
        userId: userHistory[i][1],
        text: userHistory[i][2],
        continuous: userHistory[i][3]
      };
    }
  }
  return undefined;
}

function setLastUserHistory(userId, text, continuous) {
  const values = [new Date(), userId, text, continuous];
  HistorySheet.appendRow(values);
}

カルーセルテンプレートのソースコード

var ACCESS_TOKEN = "XXXXXXXXXXXXX"; 
 
function doPost(e) {
  var contents = e.postData.contents;
  var obj = JSON.parse(contents);
  var events = obj["events"];
  for (var i = 0; i < events.length; i++) {
    if (events[i].type == "message") {
      reply_message(events[i]);
    } else if (events[i].type == "postback") {
      post_back(events[i]);
    }
  }
}

function reply_message(e) {
  var input_text = e.message.text;
  if (input_text == "その他") {
    var postData = {
      "replyToken": e.replyToken,
      "messages": [{
        "type": "template",
        "altText": "カルーセルテンプレート",
        "template": {
          "type": "carousel",
          "columns": [{
              "title": "タイトル1",
              "text": "テキスト",
              "actions": [{
                  "type": "message",
                  "label": "A",
                  "text": "テスト1"
                },
                {
                  "type": "message",
                  "label": "B",
                  "text": "テスト2"
                },
                {
                  "type": "message",
                  "label": "C",
                  "text": "テスト3"
                }
              ]
            },
            {
              "title": "タイトル2",
              "text": "テキスト",
              "actions": [{
                  "type": "message",
                  "label": "A",
                  "text": "テスト1"
                },
                {
                  "type": "message",
                  "label": "B",
                  "text": "テスト2"
                },
                {
                  "type": "message",
                  "label": "C",
                  "text": "テスト3"
                }
              ]
            }
          ]
        }
      }]
    };
  }
  fetch_data(postData);
}

function fetch_data(postData) {
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + ACCESS_TOKEN
    },
    "payload": JSON.stringify(postData)
  };
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

追記：$を認識できていないのか、うまく作動しませんでした。
バッククォートのままだと返信が来ない、
バッククォートをダブルクォートにすると返信は返ってくる。といった形でした。

// 計算の答えを返す。input_rate：軽減率。input_hp：HP。
function buildAnswerReply(input_rate, input_hp){
  const damage = DAMAGES[input_rate]
  if(damage == null) return "ERROR";
  const detail = damage.detail;
  const rate = damage.rate;
  return "${input_hp} の 軽減率${detail} での実質HPは\n約${Math.floor(input_hp / rate)}です";
}


// HP入力を促すダイアログを返す。input_rate:軽減率。
function buildRequestReply(input_rate){
  const damage = DAMAGES[input_rate]
  if(damage == null) return "ERROR";
  const detail = damage.detail;
  return "軽減率${detail}で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。";
}

Comments

[K_3578]

「Java」タグ>質問内容からは関係あるように見えません。　関係が無いのでしたらJavaタグの質問を閲覧しているユーザーのノイズになるので外してください。　JavaScriptと混同しているなら全く別の言語です。

初学者です。>　こういうのはタイトルに初心者マーク付けるだけに留めてください。
それだけで判断できるので本文には質問の内容を書いてください。

似たような質問を複数回投稿しており> であれば、一つの質問で済むようにしましょう。
同様の質問を投稿するのは非推奨ですが、内容の異なる質問であれば投稿するのは問題ないです。

[SN____R]

Javaタグに関してはJavaScriptと混同しておりました。申し訳ございません。
初学者なので右も左も分からず、気を悪くされる方が居る可能性がある様に感じたので付けさせて頂きました。
前置きという部分に記載しているので、この一言が無いよりはある方が良いように思えますがどうでしょうか。
似たような質問だが、同じ質問はしていないという話をしたかっただけですので、新しく質問を立てさせて頂きました。

[K_3578]

JavaとJavaScriptに関してはメロンとメロンパンぐらい違います。背景関係が知りたければ
ググれば出てきます。

ヘルプの「質問するときのヒント」というページはご覧になられたでしょうか。
読んでなければ一読を。質問する上では非常に参考になる内容です。
https://teratail.com/help/question-tips

基本的にエンジニアは無駄な事を嫌うので、気を使って書いているのはわかりますが、
書かなくていいかと。特に「初学者です。」の部分は。

Answer 1

カルーセルは各カラム同数でないとエラーになるようです。

軽減率データをオブジェクトにして、繰り返しの記述を減らしてみました。

// 軽減率。キー：入力用省略文字列、　detail：詳細文字列、　rate：計算用軽減率。
// 個数は、3の倍数とする。（各カラム同数でないとカルーセル構築時にエラーになるため）
const DAMAGES = {
  "70%*2": { "detail": "70%×70%", "rate": 0.09 },
  "50%*2": { "detail": "50%×50%", "rate": 0.25 },
  "70%*50%": { "detail": "70%×50%", "rate": 0.15 },
  "25%*2": { "detail": "25%×25%", "rate": 0.5625 },
  "75%*2": { "detail": "75%×75%", "rate": 0.0625 },
  "50%*2+30%*2": { "detail": "50%×50%×30%×30%", "rate": 0.1225 },
  "50%*2+25%": { "detail": "50%×50%×25%", "rate": 0.1875 },
  "25%+50%*2": { "detail": "25%×50%×50%", "rate": 0.1875 },
  "35%*2": { "detail": "35%×35%", "rate": 0.4225 },
  "35%*25%": { "detail": "35%×25%", "rate": 0.4875 },
  "25%*35%": { "detail": "25%×35%", "rate": 0.4875 },
  "---": { "detail": "---", "rate": 0 },  // ３の倍数に揃えるためのプレースホルダ
  //"----":{ "detail": "---", "rate": 0 } // ２個不足する場合の２個めのプレースホルダ  
}


function doPost(e) {
  var contents = e.postData.contents;
  var obj = JSON.parse(contents);
  var events = obj["events"];
  for (var i = 0; i < events.length; i++) {
    if (events[i].type == "message" && events[i].message.type == "text") {
      reply_message(events[i]);
    }
  }
}


function normalReply(e, reply_text){
  return {
    "replyToken": e.replyToken,
    "messages": [{
      "type": "text",
      "text": reply_text
    }]
  }
}


// 計算の答えを返す。input_rate：軽減率。input_hp：HP。
function buildAnswerReply(input_rate, input_hp){
  const damage = DAMAGES[input_rate]
  if(damage == null) return "ERROR";
  const detail = damage.detail;
  const rate = damage.rate;
  return `${input_hp} の 軽減率${detail} での実質HPは\n約${Math.floor(input_hp / rate)}です`;
}


// HP入力を促すダイアログを返す。input_rate:軽減率。
function buildRequestReply(input_rate){
  const damage = DAMAGES[input_rate]
  if(damage == null) return "ERROR";
  const detail = damage.detail;
  return `軽減率${detail}で計算します。\n計算したいパーティーの最大HPを、半角英数字でカンマ区切りをせずに入力してください。`;
}


function reply_message(e) {
  const input_text = e.message.text;
  let reply_text = "";
  let postData = null;
  const userId = e.source.userId;
  const history = getLastUserHistory(userId);
  // 入力の続き
  if (history && history.continuous) {
    reply_text = buildAnswerReply(history.text, input_text);
    if (reply_text == "ERROR") return;
    postData = normalReply(e, reply_text)
    setLastUserHistory(userId, input_text, false);
  } else { // 新規入力
    if (input_text == "その他") {
      // カルーセルを表示
      postData = createCarousel(e)
    } else if (input_text.startsWith("---")) {
      // プレースホルダーをタップしたとき
      return;
    } else {
      reply_text = buildRequestReply(input_text)
      if (reply_text == "ERROR") return;
      postData = normalReply(e, reply_text)
    } 
    if (reply_text)
      setLastUserHistory(userId, input_text, true);
    else 
      setLastUserHistory(userId, input_text, false);
  }    
  

  const options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + ACCESS_TOKEN
    },
    "payload": JSON.stringify(postData)
  };
  const response = UrlFetchApp.fetch(URL, options);

  if (response.getResponseCode() !== 200) {
    values = response.getContentText()
    HistorySheet.appendRow(values);
    throw new Error(response.getContentText());
  }
}


function getLastUserHistory(userId) {
  const userHistory = HistorySheet.getDataRange().getValues();
  for (let i = userHistory.length - 1; 0 < i; i--) {
    if (userHistory[i][1] === userId) {
      return {
        date: userHistory[i][0],
        userId: userHistory[i][1],
        text: userHistory[i][2],
        continuous: userHistory[i][3]
      };
    }
  }
  return undefined;
}


function setLastUserHistory(userId, text, continuous) {
  const values = [new Date(), userId, text, continuous];
  HistorySheet.appendRow(values);
}


// カルーセルを構築する。
function createCarousel(e){
  const dmgarray = Object.keys(DAMAGES);
  const dmgitems = dmgarray.map((k)=> {return {"type":"message", "label":k, "text":k}})
  const itemsPerPage = 3; //１つのカラム内のアイテムの数。最大3（LINE APIの仕様）各カラム同数でないとエラー。
  const pages = Math.ceil(dmgarray.length / itemsPerPage); // カラムの数
  const columns = []
  // dmgitemsを３つずつ区切ってcolumnsに格納。
  for(let page = 0; page < pages; page++){
    columns.push({
      "title": " ",
      "text": page+1,
      "actions": dmgitems.slice(page * itemsPerPage, (page+1) * itemsPerPage)
    });
  }
  return {
    "replyToken": e.replyToken,
    "messages": [{
      "type": "template",
      "altText": "軽減率計算",
      "template": {
        "type": "carousel",
        "columns": columns
      }
    }]
  };
}

Comments

[SN____R]

回答ありがとうございます。試してみましたところ、うまく作動しませんでしたので追記を行いました。ご確認のほどよろしくお願いします。

[退会済みユーザー]

こちら手元のスマホでは、画像の事象は再現しなかった(正常に動いている)ので、原因は不明ですが、
バッククオートと$ではなく、文字列と変数をプラス記号で連結するように変えた場合はどうでしょうか？
あと質問の本旨であるカルーセルの表示自体はうまく行っているという理解でいいですか？

[SN____R]

文字列とプラス記号...試してみます。
カルーセルの表示自体もその他と入力しても返信がない状態でした。

[SN____R]

>文字列と変数をプラス記号で連結するように変えた場合は
試してみたところ正常に動作するようになりました。本当に助かりました...
二つほど伺いたいのですが、軽減率データを追加したいときは
const DAMAGESの部分に
"XXXXX": { "detail": "XXXXX", "rate": },のように追加するという方法で合っていますでしょうか？
また、もし可能であればなのですが、カルーセルの文字を変更することなどは出来ますでしょうか？

[退会済みユーザー]

軽減率データを追加するときは、const DAMAGESの部分に"XXXXX": { "detail": "XXXXX", "rate": },のように追加してください。
ただし、個数合計が３の倍数になっていないとエラーでカルーセルが表示されませんので注意してください。

「カルーセルの文字を変更する」とはどういう意味でしょうか？
文字の字体を変更したいという意味ならば、それはできないようです。
（それともカルーセルの各カラムのタイトルを変更するという意味でしょうか？）

[SN____R]

承知致しました。
カルーセルの文字というのはタイトル(押すボタンの部分ですね)を変更できないか、ということになります。

[退会済みユーザー]

変更可能です。

[SN____R]

本当ですか...！
さらに具体的に説明すると、Aというタイトルを押したら70%*2という文字列を送信する。といった形になるのですがどの様に書き加えるのでしょうか...？

[退会済みユーザー]

createCarousel()関数の中で
const dmgitems = dmgarray.map((k)=> {return {"type":"message", "label":k, "text":k}})
という行がありますが、
このうち、"label"がカルーセルのカラムに表示される文字列、"text"がタップしたときにメッセージとして入力される文字列に該当します。

したがって、"label"に「a」　"text"に"70%*2"という文字列を設定すればよいことになります。

（現状はどちらも 「k」になっている＝DAMAGEのプロパティ（例："70%*2"等）の同じ文字列が設定される）