プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

LINE ボット 『リフティング回数レコーダー』を作成してみた

第25回伊勢IT交流会でネタがなかったので、ちょうど作りたいと思っていた、 LINE ボットを GAS を利用して作ってみました。

作ったボットは『リフティング回数レコーダー』というものです。

子どもがサッカーやってるんですが、そこではリフティングを頑張るのが推奨されてます。で、毎日、リフティングやって、保護者が回数を数えているので、どうせなら簡単に記録しておきたいなと思ったのが発端です。

LINE ボットを作るには、 Webhook を受け取るサーバーが必要になります。サーバーを立てるとなると面倒だし、第一お金もかかってしまいます。その点、 GAS を使えば、ウェブアプリとしてデプロイすることができるので、これならお金もかからずにお手軽に遊べそうです。

ということで、ボットとしては、まだ未完成なのですが、作っていく際に気づいたあれこれをメモっておきます。

GAS を Web アプリとして仕立てる

GAS のリファレンスを見ると、 doGet() と doPost() を関数として用意して、デプロイする際に『ウェブアプリ』を選択すれば、それだけでよいようです。

たとえば、こんな風に定義してみます。

function doGet(e) {
  let param = e;
  Logger.log("GET: " + JSON.stringify(param));

  return ContentService.createTextOutput(JSON.stringify(param)).setMimeType(ContentService.MimeType.JSON);
}

function doPost(e) {
  let param = e;
  Logger.log("POST: " + JSON.stringify(param));

  return ContentService.createTextOutput(JSON.stringify(param)).setMimeType(ContentService.MimeType.JSON);  
}

関数を定義したら、Apps Script の編集画面の右上にある『デプロイ』を選択します。

デプロイの設定画面で、『デプロイタイプを選択してください』とあるので、

左上あたりにある歯車アイコンをクリックして、『ウェブアプリ』を選びます。ウェブアプリ用の設定画面が表示されるので、

  • 『次のユーザーとして実行』:自分
  • 『アクセスできるユーザー』:全員

として、デプロイします。『アクセスできるユーザー』の『全員』は Google アカウントを持たない場合も含まれており、LINE の Webhook から呼び出す場合は、こちらを選んでおく必要があります。

デプロイに成功したら、curl で呼び出してみます。

mor@DESKTOP-DE7IL4F:~$ curl -L https://script.google.com/macros/s/デプロイID/exec
{"contextPath":"","parameters":{},"contentLength":-1,"parameter":{},"queryString":""}mor@DESKTOP-DE7IL4F:~$
mor@DESKTOP-DE7IL4F:~$

こんな感じで返ってきました。問題なく動作しているようです。

なお、上記のサンプルコードでは認証は求められないのですが、コード内部で Google Drive へのアクセスがあったりすると、最初にデプロイする際に、

という感じで承認を求められますので、画面の指示に従って、承認を行います(実行ユーザーに対する承認ということですね)。

LINE ボット

GAS をウェブアプリとしてデプロイできるようになったので、本題の LINE ボットを作ります。

LINE ボットは Messaging API の Webhook URL で指定した URL に POST でイベントが送られてくるので、それを処理するようにしてやればOKです。

おおまか処理としては

  • LINE からイベントが送られてくる(複数の可能性あり)
  • 複数イベントをループでひとつづく処理する
  • イベント種類に応じて、ボットで行いたい処理を決める

という感じです。今回は、 message イベントにのみ対応するように実装しました。message イベントではメッセージの最初に行いたい処理を記述することで、リフティング回数の登録と確認ができるようにしました。

スプレッドシート

リフティング回数の記録は、せっかく GAS を使うので、スプレッドシートにユーザーごとのシートを用意して、そこに記入していくようにします。

ユーザー名は、 LINE の Webhook で取得できる『ユーザーID』を使ってます。GAS だと簡易的に DB の代わりもさせられるので、その点も楽ですね。

スプレッドシート(というより Google Drive)を扱ううえで、ちょっと注意が必要だったのが、

  • ファイルを新規作成すると必ずルートフォルダに作られるので、所定のフォルダに動かすのは自分でやる
  • 同名ファイル/フォルダ をいくつでも作成可能

なので、コードでファイルを指定して開くときも、ファイル名で指定すると複数のファイルが取得されたりします。そのあたりの扱いが WIndows などとはちょっと違うので注意が必要です。

具体的な中身は GitHub にアップしたコードを見てください。

github.com

(参考)

Messaging API と GAS を連携

LINE ボットは以前試した際に理解したのですが、LINE Official Account manager で公式アカウントを作り Messaging API を有効にして、 Webhook URL を指定してやればOKです(LINE Developer Console から作る方法ありですが、公式アカウントが勝手に作られます)。

なので、GAS 側の処理を記述したら、デプロイを行って、URLを Messaging API の Webhook URL として入力します。

ちなみに、このとき、 LINE Developer Console を開いて、 Messaging API の設定画面で

Webhook URL のところにある『検証』を押しても、下記のようなエラーになり検証できません。

GAS をウェブアプリとして公開している場合、一度リダイレクトされるので、それが影響しているっぽいですね。 ただ、実際に Webhook として用いることはできるので、ご安心を。

GCP プロジェクトへの切り替え

GAS 側の処理を書いて、 LINE のボットの設定も行ったので、これで動作するはずです。

でも、GAS のエディタ上で実行した場合は、画面上でログ(Logger.log や console.log の出力)を見ることができますが、doGet や doPost で呼び出した場合は、このままではログを見ることができません(以前は、何も設定を変えなくても見れたように思いますが、いつのころからか設定が変わったようです)。

LINE とかで連携して動作させる場合、このままログが見れないとデバッグ時とかなかなかつらいものがあります。

で、ログを見れるようにするには、 GAS のプロジェクトの設定を、デフォルトのものから、標準の GCP のプロジェクト (standard GCP Project) に切り替える必要があるそうです。

ということで、この切り替え作業を行っておきます。

標準の GCP プロジェクト (standard GCP Project) への切り替え

標準の GCP プロジェクトへの切り替えは、いろいろな記事で紹介されているので、ここでは詳しく触れません。

これらの記事を読んでいて、気になった点だけ補足しておきます。

  • OAuth 同意画面の設定時、スコープおよびテストユーザーは指定しなくてもよい
  • OAuth 同意画面の構成後、『アプリを公開』を実行し、公開ステータス『本番環境』へ変更する
  • 認証情報『 OAuth 2.0 クライアントID』が自動的に作成されるので、これも明示的に作成しなくてよい

といった点に気をつければ、トラブルも少ないかと思います。

承認について

GCP プロジェクトに切り替え後、同じURLでアクセスすると、画面のような表示が出てきます。

じゃあ、承認してやればいいやと思ったのですが、ブラウザ上には認証できそうなリンクやボタンがありません。

ここで、少々はまったのですが、結論としては、下記の記事にあるように、開発環境上で実行してやることで、認証を呼び出すことができました。

Google Apps Scriptの承認エラー 401の対処方法

適当な関数を選んでエディタから『実行』を呼ぶと、

と表示されるので、あとは画面の指示に従って、承認を行います。

承認時のエラー

もし、途中で、

のようなエラーが表示される場合、OAuth 同意画面の設定で『公開ステータス』が『テスト』のままになっていると思われます(上記の記事にもありますね)。

OAuth 同意画面を開いて、『アプリを公開』を押すと、

のような確認画面が表示されるので、確認を押して、公開します。下記のように、公開ステータスが『本番環境』となってれば、OKです。

ちなみに、参考までに、GCP プロジェクトへ切り替える方法を紹介している昔の記事などでは、GCP の『OAuth 同意画面』で認証が出きるっぽいことが書いてありますが、このあたりのフローがどうも若干変わっているようです。

Google Apps Script試行錯誤 Blog: デフォルトのGCPプロジェクトを標準のGCPプロジェクトに切り替えたい

エラー

標準の GCP プロジェクトに切り替えた後、承認もしたので、動くだろうと思って試してみると、動きません。エディタから動かしてみると、こんな感じになります。

ブラウザだとこんな感じのそっけないメッセージです。

さきほど、プロジェクトを切り替えて、ログがみれるようになったので、そちらを見てみると、 permission denied との文が見られますので、どうも権限関係のようです。 ですが、いろいろと調べてみても、どこから権限を有効にするのかが全然わかりません。

ためしに、GASのファイルをコピーして、同じコードでも別ファイルにして動かすと、問題なく動きます。GASのファイルをコピーすると、プロジェクトはデフォルトのプロジェクトに戻るので、どうも、標準のGCPプロジェクトに切り替えたのが要因のようです。

そんなのも踏まえて探してみると、だいぶ苦労しましたが、やっとのことで探し当てた記事に、ずばり解決策が載ってました。

GASでDriveAppクラスを使うと`Exception: We're sorry, a server error occurred. Please wait a bit and try again.`エラーが出る - Qiita

GCP のプロジェクト側で Google Drive API を有効にするというのがポイントのようです。

『有効なAPIとサービス』を選択し、『APIとサービスの有効化』から Google Drive API を検索します。

Google Drive API が出てきたら、これを有効にます。

この設定後、もう一度実行したら、問題なく表示できるようになりました!

にしても、エラーメッセージの内容から一時的な Google 側の問題なのかな?と思ってしまうので、『権限がないよ』というのをもうちょっとわかりやすく示してほしいものです > Google さん

動作

ここまでできたら、あとは動作させてみます。

公式アカウントのQRコードをラインで読み込んで、友達になります。

登録, 2022/7/2, 10

のように、日付と回数を送ると、登録されます。

スプレッドシート側にも間違いなく追加されています。

また、

確認, 2022/7/2

のように、日付を送ると、その日の回数を表示します。

記録が無いときは、ないことを教えてくれます。

これで、とりあえず最低限の機能は実現できました。

今後

これだけだと、ほんとためしに作りました、というだけですし、インターフェースがいかにも使いにくいです。なので、

  • 登録・確認はメニューからできるようにする
  • 指定した期間の推移をグラフで取得する
  • 同じ日付の場合の重複処理、日付が前後した場合の処理などを実装する
  • 目標回数を設定して、達成できたら、おめでとうメッセージを送る

などを作りこんでいきたいと思います。

そこまでできたら、一番怖いユーザー(子供)のレビューですかね。 もうちょっとかんばります。