プログラマーのメモ書き

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

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

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

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

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

今後

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

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

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

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

Excel の右クリックメニューへのメニュー追加でトラブル

先日、お客様から普段使ってるPCでトラブルがあったので予備のノートPCに変えたら、Excelで右クリックメニューに追加しているはずのメニューが表示されなくなった、と連絡がきました(マクロでメニューの追加表示処理を行っているファイルになります)。

最初は、ファイルが壊れたか?と思ってファイルを送ってもらってこちらで試しても問題なく動作します。

じゃあ、環境が変わったのだから、Excelのマクロ周りの設定かな?と思って、そちらも確認してもらっても、こんな感じに

『警告を表示してすべてのマクロを無効にする』が選ばれていました。おまけに、ファイルを開いた際に黄色の警告バーで『マクロを有効にする』を押した覚えもあるとのことでした。

という感じで、どうなってんの?と、ちょっとはまってしまったので、顛末をメモにして残しておきます。

調査

まずは、何が起きているか調査しました。ネットをあさってみると、割とすぐ、似たような現象に触れている記事を見つけることができました。

「追加したはずの右クリックメニューが表示されない」事件 - Infomentのブログ ~Excel VBA奮闘記~

これによると、改ページプレビューの場合、右クリックメニューが表示されないことがある、とのことでした。でも、問題が起きてるPCで開いているのは、『標準』ビューだしなー、と思って、もうちょっと記事を追いかけてみると、

「追加したはずの右クリックメニューが表示されない事件」の真相 ① - Infomentのブログ ~Excel VBA奮闘記~

とあります。

CommandBars に 『Cell』の名前を持つオブジェクトが複数ある、とあります。

まさかと思って、問題が起きているPCでの挙動をよく見てみると、『標準』ビューでは右クリックメニューの追加メニューが表示されていないのですが、『改ページプレビュー』で右クリックすると、見事に追加メニューが表示されていました。

ああ、これですね。 どうも、CommandBarsのオブジェクトの並びがExcelによって変わっているようです(問題が起きているノートと問題がないPCのExcelのバージョンは全く同じでしたので、バージョン以外で何が影響しているかまでは分かりませんでした)。

対応策

原因が分かってしまえば、あとは簡単です。 今回の場合は、どちらのビューの場合にも右クリックメニューを表示させれば問題ないはずです。

ということで、 ThisWorkbook に

Private Function listupCommandBars() As Collection

    Dim lst As Collection
    Set lst = New Collection
    
    ' 指定の名前を持つコマンドバーをリストアップ
    Dim cmdbar As CommandBar
    For Each cmdbar In Application.CommandBars
    
        If cmdbar.Name = "Cell" Then
            lst.add cmdbar
        End If
    Next

    Set listupCommandBars = lst
End Function


' コンテキストメニューの追加
Public Sub addContextMenu()

    Dim lst As Collection
    Set lst = listupCommandBars
    
    Dim cmdbar As CommandBar
    For Each cmdbar In lst
        addContextMenuOnCmdbar cmdbar
    Next
    
End Sub
Private Sub addContextMenuOnCmdbar(ByRef cmdbar As CommandBar)

    Dim ctx_menu As CommandBarControl
    
    Set ctx_menu = cmdbar.Controls.add(Type:=msoControlButton, temporary:=True)

    With ctx_menu
        .Caption = "テスト"
        .OnAction = callbackMethodTest
        .BeginGroup = True
    End With
End Sub

' コンテキストメニューの削除
Public Sub removeContextMenu()

    Dim lst As Collection
    Set lst = listupCommandBars
    
    Dim cmdbar As CommandBar
    For Each cmdbar In lst
        removeContextMenuOnCmdbar cmdbar
    Next

End Sub
Private Sub removeContextMenuOnCmdbar(ByRef cmdbar As CommandBar)
    ' コンテキストメニュー未登録時にはエラーが発生するので回避できるようにする
    On Error Resume Next
    cmdbar.Controls( "テスト").Delete
    On Error GoTo 0
End Sub

という感じで、右クリックメニュー追加・削除用の処理を書いておいて、実際に右クリックメニューを追加したいワークシート側で

Option Explicit

' ワークシートがフォーカスを失ったら、追加したメニューを取り除く
Private Sub Worksheet_Deactivate()
    'Debug.Print "worksheet.deactivate called"
    ThisWorkbook.removeContextMenu
End Sub

' コンテキストメニューの追加
'   ワークシート上で右クリックすると、メニューが追加されて表示される
'
Private Sub Worksheet_BeforeRightClick(ByVal target As Range, Cancel As Boolean)
    ThisWorkbook.removeContextMenu
    ThisWorkbook.addContextMenu
End Sub

こんな感じにして、対応しました。

まとめ

このマクロ、細かい修正はあれこれ手を入れていますが、おおもとの部分は結構前に作ったはずです。それでも、つい最近までこんな問題があることに気が付きませんでした。Excel、怖いな。

Hugo で一覧ページを表示しない方法

Google Play で公開している避難所検索@伊勢ですが、ほそぼそとメンテナンスしています。

先日、Play Console を見ていたら、まだプライバシーポリシーを追加していなかったことに気づいたので、仕事が一段落したタイミングでプライバシーポリシーを追加しました。インターネット上にプライバシーポリシーのページを作って、そのURLを Play Console で指定するだけなのでそんなにややこしい話でもないはずです。

ということで、避難所検索@伊勢のサポートページに、サクッと追加しようと思いきや、意外と手間取ってしまいました。なので、その顛末をメモにしておきます。

避難所検索@伊勢のサポートページについて

森ソフトのWebサイトは Hugo で運用しており、その中の一つとして、避難所検索@伊勢のサポートページがあります。このページは、

サーバー名/escape/

で公開しており、 Hugo のディレクトリ構成は下記のようになっています。

content
├── about.md
├── contact.md
├── escape
│   ├── images
│   │   └── google-play-badge.png
│   └── index.md
├── maptile.md
└── news
    ├── 20180122.md

escape フォルダが、こちらの記事で少し触れた Leaf Bundle になっている形です(index.md ファイルとともに、画像ファイルを置いています)。

これに対して、プライバシーポリシーのページを

サーバー名/escape/privacypolicy/

のような形で追加したいと考えました。

問題

ところが、 content/escape のフォルダは Leaf Bundle のため、単純に別記事の .md ファイルを追加しても、記事として公開されません。 また、もし、 content/escape のフォルダを Branch Bundle に変更すると、複数記事を持つことができるのですが、記事一覧のリストページが生成されてしまいます (url も『 BrachBundle のフォルダ名/記事のファイル名』の形式になってしまいちょっと冗長です)。

なので、どう対応すればよいのか?ということで悩んでしまいました。

解決策

いろいろと試したところ、今回の結論としては、 Branch Bundle に変更して、リストページを自動的に生成させないようにすることで、対応しました(もっといい解決方法があるかもしれませんが、その辺は Hugo に詳しい方にお願いしたいと思います)。

以下で、実際に設定した内容について示したいと思います。

headless 設定について

Leaf Bundle だと、 Front matter に

headless: true

を追加すると、その Leaf Bundle を生成しないようにできるようです(これを Headless Bundle と呼ぶようです)。

実際、適当な Leaf Bundle を作って試してみると、 Leaf Bundle は headless になって、その URL でなにも表示されなくなります。

これと同じことが、 Branch Bundle でできれば、リストページが作成されなくなると思ったのですが、残念ながら Branch Bundle の場合は Front Matter に headless を追加しても普通にリストページが表示されました( headless は Leaf Bundle でのみ有効なようです)。

これだと困るので調べていくと、 Branch Bundle でリストページを生成しない方法がありました。

_build オプション

こちらの記事

How to disable list page only? - support - HUGO

に紹介されているように、Front Matter に _build オプションを追加すると、指定したページを生成しなくなるそうです。

ということで、 escape フォルダにある index.md を _index.md に変更し( Branch Bundle に変更し)、このファイルの Front Matter を下記のようにすると

---
title: "escape branch bundle"
date: 2021-05-31T22:40:00+09:00
_build:
  list: never
  render: never
  publishResources : false
---

このURL(サーバー名/escape/)でアクセスしても何も表示されません(404とかが返るのではなく、空白のページになります)。

できましたね。ということで、これでリストページを抑制することができれば、なんとかなりそうです。

URL を割り振りなおし

Hugo の各記事は Front matter の指定がなければディレクトリ構成から URL が決まります。一方、 Front Matter に url 変数を指定することでその指定した URL で記事を表示させることができます。

ということで、いままでの避難所検索@伊勢の説明ページを改めて、 content/escape/escape.md として保存し、

サーバー名/escape/

でアクセスできるように url 変数を設定します。

---
title: "避難所検索@伊勢 サポートページ"
date: 2021-05-24T10:35:00+09:00
url: "/escape/"
---

さきほどの _build オプションでリストページの生成を抑制していますが、抑制したものと同じ URL を指定しても問題なく表示されました。

レイアウトファイルを切り替え

さて、これで問題ないかと思ったのですが、現在のテーマの場合、リストページ以下の記事の表示と通常の記事では若干レイアウトが異なっています。

リストページ以下の記事の場合

通常の記事の場合

記事の右上に、日付があったり、記事の右側に検索窓があったりと微妙に異なっています。

上記で作成したプライバシーポリシーのページも、 Branch Bundle 以下にあるため、前者のレイアウトになっています。

このままでもいいんですが、やっぱり他とデザイン的に合わせたいので、これを通常の記事用のレイアウトを使うように変更しておきます。

Front Matter に layout 変数を指定するとレイアウトファイルを指定できるそうです。別の方法として、表示対象ページの Content Type を指定することで、結果的に適用するレイアウトファイルを切り替えることもできるようです。

今回は、一部変更した特別なレイアウトファイルを指定するのではなく、通常の記事のレイアウトを適用したいだけなので、後者の方法を採用しました。

具体的な設定方法

いま使っているテーマ(universal)を見ると layouts フォルダ以下に page というがあり、そちらに single.html というファイルがあります。

─ layouts
  ├── 404.html
  ├── _default
  │   ├── list.html
  │   └── single.html
  ├── archetypes
  │   └── default.md
  ├── index.html
  ├── page
  │   └── single.html
  └── partials
      ├── breadcrumbs.html

このファイルは、レイアウトファイルの探索順の type の説明

Type

Is value of type if set in front matter, else it is the name of the root section (e.g. “blog”). It will always have a value, so if not set, the value is “page”.

と書かれている場合の "page" に対応していると思われます(とはいえ、 layouts フォルダ以下のフォルダ名に関するドキュメントを見つけられなかったので、あくまでも推測です)。つまり、type指定がなく、かつセクション以下にない、通常の記事に対応したレイアウトファイルになります。

一方、 Branch Bundle 以下の記事など、セクション内の記事は上記の説明より type がセクション名になるので、こちらではなく _default/single.html を使うと思われます。

ということで、現状のままだと、この escape Branch Bundle は escape セクションとして扱われるので、 type の値もセクション名( escape )になり、検索窓付のレイアウトファイルが適用されることになっていそうです。

なので、Front Matter で type を page にすることで、通常の記事のレイアウトファイルを適用することができそうです。

実際に Front Matter に設定して試してみると、うまくいきました。

---
title: "避難所検索@伊勢 サポートページ"
date: 2021-05-24T10:35:00+09:00
url: "/escape/"
type: "page"
---

同様に、プライバシーポリシーの記事の Front Matter にも type を設定して、想定のように表示されるようにします。

---
title: "避難所検索@伊勢 プライバシーポリシー"
date: 2021-05-31T16:20:00+09:00
type: "page"
---

(こちらは url はデフォルトの値でよいので指定していません)

まとめ

一応、上記の設定でうまく表示することができました。使い始めは簡単なのですが、ちょっと手を加えようとすると英文の記事をあれこれ調べないといけないのがちょっと面倒ですね。もっと、日本語ドキュメントが増えてほしいなー。