Line Botで単語帳を作成してみた

#概要
line botとgoogle spreadsheetのマクロ機能(GAS)を用いて単語帳を作成しました。
とても簡易的な単語帳ですが、簡単に作成できますので使いたい方はぜひコピペして使ってみてください。

#作成したきっかけ
資格の勉強の際に参考書を出さずに電車で携帯で勉強したかったからです。
また資格勉強のアプリなどはありますが、使い勝手が悪く、自分でカスタマイズできる単語帳が欲しかったからです。

#必要な環境
・line bot用のchannel
・googleアカウント
*上記は二つはwebで調べれば簡単に作成できます。

#作成手順
###1,google spreadsheetにプログラムを作成する
google spreadsheetを開き、ツール→スクリプトエディタの手順でスクリプトエディタ
を開いてください。
<img width="661" alt="スクリプトエディタ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614147/bafaa4ac-37ca-a4b7-be9f-4a6444d72aa5.png">

スクリプトエディタを開いたら下記のプログラムコードをコピーして貼り付けてください。

```wordbook.gs
// LINE developersのメッセージ送受信設定に記載のアクセストークン
var ACCESS_TOKEN = 'お使いのline botのACCESS_TOKENを入れてください。';

function doPost(e) {
  // WebHookで受信した応答用Token
  var replyToken = JSON.parse(e.postData.contents).events[0].replyToken;

  // ユーザーのメッセージを取得
  var userMessage = JSON.parse(e.postData.contents).events[0].message.text;
  
  // 応答メッセージ用のAPI URL
  var url = 'https://api.line.me/v2/bot/message/reply';
  
  //lineに出力する単語
  var out;
  
  //回答を出力する場合userMassage→Answerに変換する(userMassageのaを取り除く)
  var Answer;
  
  // スプレッドシートIDを取得
  var spreadsheet = SpreadsheetApp.openById('google spreadsheetのIDを入れてください');

  // シート名を取得
  var sheet = spreadsheet.getSheetByName('google spreadsheetのシート名を入れてください');
  
  if ( userMessage.match(/a/) || userMessage.match(/A/)) {
    Answer = userMessage.substr(1);
    if (isNaN(Answer)){
      out = "正しく文字を入力してください";
    }else{
      // lineに出力する単語を指定する
      out = sheet.getRange(Answer,2).getValue();
    }
    }else{ 
    //数値がどうか確認する
    if (isNaN(userMessage)){
      out = "正しく文字を入力してください。"
    }else{
      // lineに出力する単語を指定する
      out = sheet.getRange(userMessage,1).getValue();
    }
  }
  
  if (out == ""){
     out = "その列番にに単語はありません。";
  }

  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replyToken,
      'messages': [{
        'type': 'text',
        'text': out,
      }],
    }),
    
    }); 
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON)
}


```
*ACCESS_TOKEN,google spreadsheetのID,シート名はご自身のを入れてください。
*google spreadsheetのIDは使用しているspreadsheetのURLから取得できます。
google spreadsheetのURL = https ://docs.google.com/spreadsheets/d/google spreadsheetのID/・・・

###2,プログラムを公開する
プログラムを作成後、下記の手順でプログラムを公開します。

まず、スクリプトエディタ画面で公開→ウェブアプリケーションとして導入をクリックします。
<img width="695" alt="公開.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614147/1995ff1f-0cef-2eec-d593-3d5f900c0f50.png">

ウェブアプリケーションとして導入をクリックすると下のようなウィンドが表示されます。
空白に適当なプロジェクト名を入力し、OKを押してください。
<img width="450" alt="project name.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614147/80c1e976-f070-c418-8efe-d7f932c220c4.png">

OKボタンを押すと下のウィンド画面が表示されますので、
'Who has access to the app'をAnyone,even anonymousに設定し,Deployボタンを押してください。
*編集後に再度Deployする場合はProject versionをnewにしてください。
<img width="450" alt="公開2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614147/8538be7b-d5ba-c28c-69cf-2739a58d490b.png">

Deployボタンを押すと下のウィンドが表示されますので、許可を確認をおしてください。
<img width="450" alt="許可.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614147/d4ae0a40-909e-4289-8b86-dae4916de1c3.png">

※許可を確認を押した後に下のウィンドが表示されましたら、詳細→使用するアカウントを選択→(安全ではないページ)に移動→許可　の手順で許可してください。
<img width="455" alt="許可2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614147/60d0e4e0-c7b1-cad0-56c8-d5dc0e346c51.png">

許可がされるとURLが発行されますので、line botのwebhookに発行されたURLを登録してください。
※URLが使えるようになるまで数時間かかりますので、使えるようになるまで辛抱強く待ってください。

<img width="450" alt="deploy as web app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614147/3c677595-8558-435f-0971-c912e9fd14dc.png">

###使用するLine Botのchannelの設定
Messaging API settings画面で下記のように設定してください。
・応答メッセージ→オフ
・webhook→オン
・webhook URL→先ほど発行したURL

※webhook URLを登録しましたら、確認ボタンを押してください。URLが使用できる状態でしたら成功するはずです。
逆に失敗しましたら、まだURLが使用できない状態です。
※上記の設定方法がわからない場合はwebで調べてもらえればすぐに出てきます。

###アプリを使用してみる
google spreadsheetに1行名に単語、2行名にその答えを入れてください。
<img width="921" alt="test.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614147/66b8f5d5-a192-f588-cb56-74c791250b5c.png">
google spreadsheetに単語と回答を入力したら、lineに単語と回答を出力してみます。
lineに単語を出力したい場合はその単語の列番号を入力してください。
回答を出力したい場合は列番後の前にaをつけて入力してください。
<img width="450" alt="test2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614147/b6271761-cb9e-d3ac-7097-46de6021934f.png">
###最後に
今回紹介したbotはとても簡易的ですので、ぜひ自分でアレンジしてみてください。