GASを使ってすべて無料＆サーバレスでLINEBot①

15172 ワード
spreadsheet Line GoogleAppsScript gas linebot GoogleAppsScript テキストリンク

はじめに

この記事は 私が初めてWebアプリっぽいものを作ったときのメモです。GAS使えばはじめてでもWebアプリを簡単に作れました。

作ったもの

すべて無料＆サーバレスで、クイズが出来るLINE Botです。
「クイズ」とチャットすると1つの画像と4つの選択肢が表示されます。その画像が何のお題をもとに描かれた絵なのかを選択肢の中から当てます。


構成

  • Database

    • Googleフォームと紐づいたスプレッドシート

  • クイズ問題用画像ファイルサーバ

    • Googleフォームと紐づいたGoogleDriveのフォルダ

  • プログラム

    • GoogleAppsScript

  • お題追加の仕組み

    • Googleフォームを使いました。

この構成のおすすめポイント

  • お題の追加にフォームを使っているので誰でも簡単に追加できるしちょっとしたバリデーションもやってくれる。
  • プログラムがフォームと紐づいたスプレッドシートを直接参照しているので、リアルタイムでお題が反映される。
  • 画像保存場所はそのままなのでらくちん。（お題追加フォームでアップロードされるDriveのフォルダをそのままプログラムが参照）

現状の問題点

  • LINEの仕様上PC版LINEでボタンテンプレートが表示できない。
    • ⇒Flex Messageを使ってpc版でも表示できるようになった。が、なぜかDriveの画像ファイルをPC版だと表示できない・・・。（スマホ版では表示される）

用意するもの

LINE アカウント
Google アカウント（フリー。SuiteアカウントでもOK。）

無料でどこまで出来るか。

無料アカウントによる制限は次の2つを抑えておけば良さそうです。
どちらも利用制限を超えた場合でも自動的に課金されることはないので必要になったら課金を考えればいいですね。

LINE

  • Post API（Botからの発信）と一部APIの呼び出しを行おう場合課金制（1000通までは無料）
    • 友達が1000人いた場合同じメッセージを全員に一斉配信したらおしまい。
    • 受信したメッセージに対して何かメッセージを返すという動作はすべて無料。このBotではPost APIを使う予定はないので完全無料で使用できそうです。

Google

  • 無料枠では、URLFetch の呼び出し回数が20000 個/日となっているようです。

（2020年05月04日 現在）

LINEの用語について理解する

LINE Bot開発を始めるには、LINE Developersコンソールからプロバイダを作成し、その中にチャネルの作成が必要です。
プロバイダが会社、チャネルがその会社が提供するサービス、というイメージでしょうか。

プロバイダ

チャネルにアプリを提供する個人または組織。たとえば、個人や企業の名前をプロバイダーとして使用できます。プロバイダーは、LINE Developersコンソールで作成できます。
（公式ドキュメント）https://developers.line.biz/ja/docs/glossary/#provider

チャネル

LINEプラットフォームが提供する機能を、プロバイダーが開発するサービスで利用するための通信路。チャネルは、LINE Developersコンソールで作成できます。
（公式ドキュメント）https://developers.line.biz/ja/docs/glossary/#channel

開発の進め方

  1. LINE Developersアカウントを取得する。
  2. LINE プロバイダ作成
  3. LINE チャネル作成
  4. LINE Messaging API トークン（ロング）取得
  5. GAS プロジェクト作成
  6. LINE Webhook設定
  7. GAS GCPプロジェクトと紐づけ
  8. GAS コーディング
    1. Flex Message の JSON作成
  9. GAS デプロイ
  10. GAS コードに修正があった場合にはバージョンをNewで再デプロイ

この記事は6まで。

開発中に使うやつ、と、使うと便利なやつ

  1. テスト用にクローンとなるLINEチャネル
    1. リリースしてからのデバッグとかアップデート用にあると便利です。
  2. LINE Official Account Manager
    1. Botのプロフ設定変更などを行います。簡単なリッチメニューやテンプレートメッセージはコーディングしなくてもここから作れます。
  3. LINEDevelopersコンソール
    1. LIFFの設定、Webhook設定、プログラム的設定などを行います。
  4. FlexMessage Simulator
    1. 凝ったデザインやpc対応のためにFlexMessageを作成する時にこれを使うと簡単にjsonを作ってくれます。無料。
    2. https://developers.line.biz/flex-simulator/?status=success
  5. LINE Bot Designer
    1. 上と同じですが、こちらはFlex以外のテンプレートなども作成できます。無料。
  6. Google Cloud Platformアカウント（GCP）
    1. GASでデバッグする際、デフォルトではWebアプリのデバッグは難しいです。GCPアカウントを取得してGCPとGASのプロジェクトを紐づけることにより、GCPに、より詳細なログが出力できるようになるのでデバッグがとても捗ります。これがないとWebアプリのconsole.logの出力を確認出来ないみたいです。 ただ、課金制なのでちょっと怖いので私はテスト環境でのみ使用しています。無料枠もあります。

プロバイダの登録

[Line Developer]を検索して、サイトへアクセスします。または下記urlをクリックします。
https://developers.line.biz/ja/


既存のLineアカウントでDeveloper登録を行います。既に登録済の場合はログインを行います。ビジネスアカウントでも問題ありません。

チャネル作成


Create New Channelをクリックします。

Channel種別を選択します。Bot開発を行うには「Messagin API」を選択します。


channel情報を入力します。



使用許諾を確認して、同意する、にチェックします。

チャンネルアクセストークンの発行


作成したチャネル上部メニューの中の"Messaging API"をクリックします。


チャンネルアクセストークンを作成します。issueをクリックします。


作成されたチャンネルアクセストークンをコピーします。このトークンは後程プログラミングで使用しますので保管しておきます。
このトークンは第三者に知られてしまうと、ボットを悪用されてしまう可能性もありますので気を付けて管理します。

GASスクリプト作成


Google DriveにアクセスしてGASスクリプトファイルを新規作成します。

GAS　オウム返しBot
var CHANNEL_ACCESS_TOKEN = 'アクセストークン';
function doPost(e) {
  var replytoken= JSON.parse(e.postData.contents).events[0].replyToken;
  if (typeof replytoken === 'undefined') {
    return;
  }
  var user_message = JSON.parse(e.postData.contents).events[0].message.text;

  var url = 'https://api.line.me/v2/bot/message/reply';
  UrlFetchApp.fetch(url, {
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
    },
    'method': 'post',
    'payload': JSON.stringify({
      'replyToken': replytoken,
      'messages': [{
        'type': 'text',
        'text': user_message,
      }],
    }),
  });
  return ContentService.createTextOutput(JSON.stringify({'content': 'post ok'})).setMimeType(ContentService.MimeType.JSON);
}

テストとして、まずはチャットメッセージをbotがただオウム返しするスクリプトを試してみました。
新規スクリプトファイルの中身を全て削除して、上記のプログラムをコピペします。


Webアプリとして公開します。


Execute the App as をMe（自分のGoogleアカウント）
Who has access to the AppをAnyone , Anonymouseにします。
画像では（全ユーザ）となっていますがこれではダメです。全ユーザはGoogleアカウントでログインが必要だからです。


表示されたURLをコピーします。

LINE Webhookを有効化


Lineのチャネル管理画面のMssaging APIタブの画面に戻り、Webhook Settingsに先ほどコピーしたGASWebアプリケーションのURLをここに張り付けます。全張り付けでOK。


下のスイッチをクリックしてEnableにします。これでLINEとGASがつながります。「Verify」ボタンを押してテストしましょう。
「Success」と表示されれば成功です。

Line Auto-replyの停止


Auto-reply MessageをDisabledにします。


自動応答を有効にすると、上図のようにBotでプログラムされたメッセージと同時に応答メッセージが投稿されてしまいおかしな挙動になります。無効にした方が良いでしょう。

注意すること

  • WebhookのVerifyが上手くいかない場合は、Webhookのところに張り付けたGASのURLの誤り、GASをWebアプリ導入したときの実行者・アクセス権限などを疑いましょう。
  • チャネル名が公開した際のLINE名になります。変更するには7日間期間を開けないといけないので慎重に。また、LINEアカウント認証というものをしてしまうと名前を変更できません。
  • GASスクリプトファイルの内容を更新した際は必ずもう一度Webアプリとして導入を行います。このとき必ずバージョンを「new」としてください。こうしないとLINE側に反映されません。
  • グループlineで使用するには？
    • 「グループ・複数人チャットへの参加を許可する 」の設定を有効にする必要がある。すべてのチャットに反応してしまうので工夫が必要。

つづく