【Linebot＋GAS】単語の一問一答ができるボットの完成まで（3）

これまで

①全体概要と問題出題機能
②選択肢機能

使用技術

• Google App Script
• LINE Messaging API

機能紹介

今回の記事で解説する機能

答え

問題の答えとその参考URLを出してくれる機能です。

選択肢機能

まずは使っている関数をざっと

分岐処理のdoPost

doPost

    case '答え':
      correctReply(event, targetColumn);
      break;

スプレッドシートを読み込み、正答とURLを取得して返答するcorrectReply

correctReply

function correctReply(event, column) {
  let answer = getData(column);
  let answer_url = getURL(answer);
  let options = makeAnswerOption(event, answer, answer_url);
  UrlFetchApp.fetch(URL, options);
}

コードの解説

1. スプレッドシートから回答を取得

  let answer = getData(column);

こちらの記事でinsetDataした回答を取得。columnは取得したいUserの列番号、targetRowは回答が代入してある最終行番号。

//管理用シートから最終行の回答状況を取り出す
function getData(column) {
  var Spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
  let sheet = Spreadsheet.getSheetByName(ManegerSpreadsheetName);
  const targetRow = sheet.getRange(1, column).getNextDataCell(SpreadsheetApp.Direction.DOWN).getRow();
  let data = sheet.getRange(targetRow, column).getValue();
  return data;
}

2. スプレッドシートからURLの取得

前回の記事のinsertで登録した正答をgetDataで取得。その正答をanswer_boxに代入している。

  let answer_url = getURL(column);

引き数として渡されたanswerを問題用スプレッドシートで検索。それと同じ行（targetrow）に存在するサイトのURLをtargetURLとして取得。

//問題用シートから解答にあったURLを取得して戻り値として返す
function getURL(answer) {
  var Spreadsheet = SpreadsheetApp.openById(SPREADSHEET_ID);
  let sheet = Spreadsheet.getSheetByName(SpreadsheetName);
  const textObject = sheet.createTextFinder(answer);
  const results = textObject.findAll();
  let targetRow = results[0].getRow();
  let targetURL = sheet.getRange(targetRow, 3).getValue();
  return targetURL;
}

3. 返答の作成

  let options = makeAnswerOption(event, answer, answer_url);
  UrlFetchApp.fetch(URL, options);

返答用のFlexMessageを作成するmakeAnswerOption

makeAnswerOption

// 答え用のFlexMessageOption作成
function makeAnswerOption(event, answer, url) {
  HEADERS = {
    "Content-Type": "application/json; charset=UTF-8",
    "Authorization": "Bearer " + ACCESSTOKEN,
  }
  postData = {
    "replyToken": event.replyToken,
    "messages" : [
      {
        'type':'flex',
        'altText':'答え',
        'contents': 
        {
          "type": "bubble",
          "body": {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "text",
                "text": "答え",
                "weight": "bold",
                "color": "#4F6F52",
                "size": "sm",
                "align": "center"
              },
              {
                "type": "separator",
                "color": "#4F6F52",
              },
              {
                "type": "text",
                "text": answer,
                "weight": "bold",
                "size": "lg",
                "margin": "md",
                "scaling": true,
                "adjustMode": "shrink-to-fit",
              },
            ],
            "backgroundColor": '#E8DFCA'
          },
          "footer": {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "button",
                "style": "primary",
                "color": "#4F6F52",
                "action": {
                  "type": "uri",
                  "label": "サイトで調べる",
                  "uri": url
                }
              }
            ],
            "backgroundColor": '#E8DFCA'
          },
          "styles": {
            "footer": {
              "separator": true
            }
          }
        }
      }
    ]
  }
  let options = {
    "headers": HEADERS,
    "method": "post",
    "payload": JSON.stringify(postData),
  };
  return options;
}

"type": "box"、"layout": "vertical"で垂直レイアウト方向を定義。
"type": "text"でテキストコンポーネントを作成
"type": "separator"で分割線を作成
"type": "uri"でURLコンポーネントを作成
scalingプロパティをtrue、adjustModeプロパティをshrink-to-fitにすることでテキストサイズが自動調節され、選択肢が1行になる。
FlexMessageのコンポーネントについてより知りたい方はこちら。
FlexMessageのレイアウトについてより知りたい方はこちら。

次回に続く

次の記事で会いましょう。次回は終了機能です