GASとline messaging APIで洗濯タイマーbotを作った話(その2:GAS編)

# はじめに
[LIGHTzアドベントカレンダー 2021](https://qiita.com/advent-calendar/2021/lightz)の19日目の記事です。

この記事では、google apps script(GAS)を使ってサーバレスでLINEbotを作る方法をご紹介します。
LINE側でのアカウント取得やmessaging APIの初期設定については、[前回の記事](https://qiita.com/cabbit/items/546de0ba56f63711feae)をご参照ください。

# 前回のおさらい
- LINE公式アカウント（無料版）を作成した。
- LINE messaging APIを有効化し、webhookを有効化、[チャネルアクセストークンを取得](https://developers.line.biz/ja/docs/messaging-api/channel-access-tokens/#long-lived-channel-access-tokens)した。


# 今回やること
- いよいよGoogleAppsScript (GAS)を書いていきます！
- まずは「友だちから受け取ったメッセージを取得し、返す」というシンプルなbotをつくります。

# GASを書いてみよう
- googleアカウントにログイン
- [google app script](https://script.google.com/home)のページに移動
- 「新しいプロジェクトを作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160366/62630fcc-8860-a49e-c70e-aa29a1de6f6b.png)
- エディタが開きました！ここにコードを書いていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160366/4977b26c-83d9-af2e-ed43-46b89added01.png)

# ひよこ返しbotのコードを入力

```code.js

//スクリプトプロパティ（後述）で定義したアクセストークンを入れる
const ACCESS_TOKEN = PropertiesService.getScriptProperties().getProperty("ACCESS_TOKEN");
//endpointのURIを定義
const line_endpoint = 'https://api.line.me/v2/bot/message/reply';

//ポストでLINEのメッセージ内容が送られてくるので、送られてきたJSONをパース
function doPost(e) {
  const json = JSON.parse(e.postData.contents);

  //送られてきたメッセージに対して返信するトークンを取得
  const reply_token= json.events[0].replyToken;
  if (typeof reply_token === 'undefined') {
    return;
  }

  //パースされたJSONからメッセージ部分を取得
  const message = json.events[0].message.text;  

  // メッセージをendpointに返信    
  UrlFetchApp.fetch(line_endpoint, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': reply_token,
  // 送信するメッセージ内容を定義（ここでは語尾に「っぴ」をつける）
      'messages': [{
        'type': 'text',
        'text': message+'っぴ', }],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

```

# スクリプトプロパティにアクセストークンを入力
※ アクセストークンの取得方法については[前回の記事](https://qiita.com/cabbit/items/546de0ba56f63711feae#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E5%8F%96%E5%BE%97)で解説しています
- [ファイル]→[プロジェクトのプロパティ]をクリック
- [スクリプトのプロパティ]に下記のように入力
- [保存]を押下で完了。これでソースにアクセストークンをべた書きしなくて良くなります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160366/73774e3a-8c20-ec5c-f1b9-33325ee9df23.png)

# いよいよデプロイ
- [公開]→[ウェブアプリケーションとして導入]をクリック
- 適当にプロジェクト名を設定（日本語でOK）
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160366/49a1dd1d-d4a8-f013-6797-640c7f23c975.png)
- Project Version：Newを選択
- Execute the app as : Meを選択
- Who has access the app: **Anyone,even anonymous**を選択
（重要！LINE側からアクセスする必要があるため、今回はwebアプリは公開する必要があります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160366/13ccaf6e-a20e-849c-fead-7a204680189c.png)

- [Deploy]をクリック
- 下記画面が表示されたらデプロイ完了です！お疲れさまでした。
「Current web app URL」をコピーしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160366/5f398487-84fa-a96e-c16c-df7cbacf5124.png)

※公開したwebアプリのURLの管理には気を付けましょう。

# LINE側のwebhookに公開したwebアプリを設定
- [LINE公式のアカウントマネージャー](https://manager.line.biz/)→アカウントに移動
- 右上の設定ボタンをクリックして、[messaging API]の設定画面に移動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160366/f28283d9-5252-535d-652a-9c508f937ab6.png)
- Webhook URLに先ほどコピペした「Current web app URL」を貼り付け、「保存をクリック」
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160366/e5d8c470-5a5f-d371-c300-d88954b3d400.png)

# 自分のLINEアカウントでテスト
- [LINE公式のアカウントマネージャー](https://manager.line.biz/)の[ホーム]→[友達を増やす]→[友達追加ガイド]から、自分の個人LINEアカウントに追加できます（URL or QRコード）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160366/40e3448a-8d96-4ae1-f06e-ef8102580ae2.png)

-  もちろんアカウントID直打ちで追加してもOK

# なんかしゃべってみる
成功しました。かわいいですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160366/5bd4ae15-de30-c9db-32dc-8b45c7edc574.png)


# ね、簡単でしょう？
GASもLINEbotも初めてでしたが、20分程度で作成できました！
次回はいよいよタイマー機能の実装に入っていきます。つづく。