きっかけ

お買い物の際、家に帰りついた時に「あ、、あれ買ってなかった、、、」となることがよくあります。1度出かけた後、その買い物だけのために外出するのは腰が上がらないので、次の機会にと思うのですが次も必ず買い忘れます。これを防止するためメモアプリやTODOアプリをダウンロードし買い物リストを作成する事をやってきたのですが、そのアプリ自体を開く事を忘れるので、結果買い忘れます、、、。

そこでLINEであれば必ず起動するので、買い物リストが目に入る事も増え、買い忘れることはないのではないかと思いました。買い物リストを管理できそうなbotを探してみたのですが見つからなかったので、今回LINE Botを作成してみました。

やりたいこと

ラインのトーク画面で、買い物リストの追加・編集する
家族などと買い物リストを共有する

作ったLINEBot

(未完成な部分や、不完全な動作がある可能性はありますので、重要なデータ等の追加はご遠慮ください。)

構成

LINE Message API
- WebHook
- 自動応答メッセージ
FireBase
- Functions (WebHookの処理、買い物リスト編集、メッセージ返信)
- FireStore （買い物リストデータ保存）

作成手順

1. LINE Bot の作成

Botを作成するために、プロバイダーとチャネルを手順を参考に作成しました。
Messaging APIを始めよう | LINE Developers

2.自動応答メッセージ作成

送信されたメッセージ毎に返信する定型文を設定することができたので、使い方確認に使用しました。

「使い方」と送信された場合の応答メッセージを設定しています。

3. FireBase プロジェクト作成、環境作成、デプロイ

こちらのドキュメントを参考に、プロジェクト作成から一旦動作する関数をデプロイしました。firestore のエミュレータを使用すればローカルでもfunctionsとfirestoreが動作し、firestoreへのデータの追加などが本番環境のように行えたので開発がやりやすかったです。

はじめに: 最初の関数の記述、テスト、デプロイ | Cloud Functions for Firebase

4. functionsでの処理作成

functionsでLINE MeeageAPIのwebhookを受け取り、リスト追加などの処理を追加しました。
LINE MessageAPIのwebhookは、発生したイベントごとにイベントタイプが割り当てられています。今回は、友達追加時のfollowイベントと、メッセージ受信時のmessageイベントを使用しています。

イベント毎に受信するメッセージは、こちらのAPIリファレンスから確認できます。
メッセージ（Webhook）を受信する | LINE Developers

// 関数の作成
export const lineWebHook = functions
  .https
  .onRequest(async (req, res) => {
    if (req.method == "POST") {
      const reqBody = req.body;
      const reqEvents = reqBody.events;
      await eventHandle(reqEvents);
    }

    res.json({result: "OK"});
  });

// 発生したイベント毎の処理
const eventHandle = async (events: any[]) => {
  events.forEach(async (event) => {
    switch (event.type) {
    case "follow":
      // 友達追加された時の処理
      follow(event);
      break;
    case "message":
      // メッセージを受信した時の処理
      message(event);
      break;
    }
  });
};

実際のトーク画面

追加

複数項目をまとめて追加出来るよう、改行に対応しています。

リスト確認

各項目に連番を振って管理しています。

購入完了

割り当てられた番号を入力することで購入完了とし、リストから除外しています。
こちらも複数まとめて購入完了と出来るよう、改行に対応しています。

やってみたいこと

購入されない項目のリマインド機能
- functionsの定期実行で、一定期間購入されていない項目があれば通知する?
- メッセージの応答ではなく配信は、無料プランの場合200通までしか送れない
共有リストの場合、他のメンバーが追加した項目がある場合に通知
リッチメッセージで、購入完了処理を1タップで行えるようにする

Wood_のブログ

LINE Bot で買い物リストを管理