はじめに
自己紹介
徳島のWeb制作会社に入社して1年半のマークアップエンジニアです。
実務では基本的にコーポレートサイトなどのコーディング業務を行なっております。
最近はフロントエンドエンジニアとしてのキャリアアップを目指して勉強中です。
趣味はバンド活動で、ベースを弾いております。
僕がやっているバンドのMVです
LINE botを作ろうと思ったきっかけ
バンドマンの皆さん、スタジオの予定ってどうやって管理してますか？
うちはメンバーがグループLINEにスタジオの予約完了画面をスクショで貼ってくれるのですが、これがまた情報が流れていっちゃって「次の練習っていつだっけ？」なんてことがしょっちゅう...
さらには利用するスタジオが二箇所あるため、当日違うスタジオに行っているメンバーがいることも...
そこで思いついたのが、「LINEで送ったら、次の練習日を教えてくれるBotがあったら便利だな！」ということで、LINE Messaging APIとGoogleのVision API、Calendar APIを組み合わせて、バンド練習の日程を自動で教えてくれるBotを作ってみました！
作ったLINE botの詳細
LINEで送ったスクショから練習予定を読み取って、それをGoogle Calendarに保存して、
「次のスタジオいつ？」と誰かが発信するとbotが答えてくれます。
Google Vision APIを使用しているので予定を追加する際はスクショを送るだけです。
この記事では、どうやってこのBotを作ったか、使った技術やちょっとしたハマりポイントも紹介していきます！
それではどうぞ最後までお付き合いください！
使用技術
- 使用言語：JavaScript(Node.js 22.14.0)
- フレームワーク：Express.js
- ホスティング：Vercel
- LINE Messaging API：LINE Botの送受信に使用
- Google Cloud Vision API：画像から場所と日付を読み取るために使用（OCR機能）
- Google Calendar API：予定を管理＆取得
全体の流れ
まずは、Botがどんな流れで動いているのか、ざっくり紹介します。
1. LINEでスタジオ予約スクショ送信
2. Google Vision APIで画像から文字を抽出（OCR）
3. 日付・場所情報を取り出す
4. Google Calendarに登録
5. 「次のスタジオいつ？」というメッセージに反応
6. Google Calendarを参照して、次の予定を返信
Botの構成
実装はかなりシンプルで、以下のような構成になっています。
🟢 LINE Bot (Express)
┣ 📮 POST /webhook → LINEからのメッセージを受け取る
┃ ┣ 📸 画像メッセージならVision APIでOCR
┃ ┃ ┗ 📅 OCR結果から日付・場所を抽出してGoogle Calendarへ登録
┃ ┗ ❓ テキストメッセージが「次のスタジオいつ？」なら→Google Calendarから次回予定を取得して返信
内容については明日以降で追記します...