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

# これまで
[①全体概要と問題出題機能](URL"https://qiita.com/yugakai72/items/b9af4a324a645c83a9a7")
[②選択肢機能](URL"https://qiita.com/yugakai72/items/89b96b4a7f8760c3000c")

# 使用技術
* Google App Script
* LINE Messaging API
# 機能紹介
今回の記事で解説する機能
### 答え
問題の答えとその参考URLを出してくれる機能です。<br>
<img width='400' alt="IMG_0911.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115537/f2e96774-f0aa-6eca-5d4d-4f7aba3b37b1.png">

## 選択肢機能
**まずは使っている関数をざっと**<br>
分岐処理の```doPost```
```javascript:doPost
    case '答え':
      correctReply(event, targetColumn);
      break;
```
スプレッドシートを読み込み、正答とURLを取得して返答する```correctReply```
```javascript: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. スプレッドシートから回答を取得
```javascript
  let answer = getData(column);
```
[こちらの記事](URL"https://qiita.com/yugakai72/items/b9af4a324a645c83a9a7")で```insetData```した回答を取得。```column```は取得したいUserの列番号、```targetRow```は回答が代入してある最終行番号。
```javascript
//管理用シートから最終行の回答状況を取り出す
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の取得
[前回の記事](URL"https://qiita.com/yugakai72/items/b9af4a324a645c83a9a7")の```insert```で登録した正答を```getData```で取得。その正答を```answer_box```に代入している。
```javascript
  let answer_url = getURL(column);
```
引き数として渡された```answer```を問題用スプレッドシートで検索。それと同じ行（```targetrow```）に存在するサイトのURLを```targetURL```として取得。
```javascript
//問題用シートから解答にあった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. 返答の作成

```javascript
  let options = makeAnswerOption(event, answer, answer_url);
  UrlFetchApp.fetch(URL, options);
```
返答用のFlexMessageを作成する```makeAnswerOption```
```javascript: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のコンポーネントについてより知りたい方は[こちら](URL"https://developers.line.biz/ja/docs/messaging-api/flex-message-elements/#component")。
FlexMessageのレイアウトについてより知りたい方は[こちら](URL "https://developers.line.biz/ja/docs/messaging-api/flex-message-layout/#other-component-size")。
# 次回に続く
次の記事で会いましょう。次回は**終了機能**です