はじめに

申し訳ありません。リリース！！言いながら公開できないかもしれません・・

理由はLINE Messaging APIの無料枠、月200通でして。

例えば5人のグループラインに1通送信したら5通のカウントです。。

とてもじゃないけど200通では足りないので、一旦個人的に使います。

ガチで使いたいアプリなので・・

熱烈な公開希望があれば課金しますが、課金しても月5000円で5000通。。。

LINEは商売上手ですね。

公式アカウント増やして対応する手はあるので、その方向で考えてもいいかもです。

使いたい人は公式アカウントを作って登録してねみたいな感じになりますが・・

考えます。

技術構成図

全体像です。わかりにくいと思うので機能ごとに別途、図で解説します。

アプリの使い方の流れ

①LINE登録

公式ラインを友だち登録します。

すると、こんな返信が来ます。(すでに無効なURLですご安心ください。)

この部分の機能は、下記の赤(LINE連携機能)と青(PokéAPI連携)の部分です。

ここでやっているのが過去に書いた記事の内容です。

関連記事

②LINEグループごとのページにアクセス

LINE登録した時に届いたURL(/app/room/[id]/page.tsのところです。)にアクセスしたら使えます。

ユーザー登録は必要なくて、バックエンドで複雑な文字列になるようにURLを作っています。

「URLを知っている人に公開」的なのをイメージして作りました。

さらに合言葉を求めて、URLを知っていてかつ合言葉を知っている人のみが閲覧できるページにしてLINEのメンバー以外には特定されにくく、かつ内容見られる可能性も低減させました。

合言葉はローカルストレージに保存しているので、同じデバイスでは基本的に要求されるのが1度きりになります。

画面スクショ

ちなみに美容院は私ではなく夫の予定です。頻度が倍半分どころじゃなくて不満です。

子供がいると重要な共有事項です。その時間はワンオペ子守担当になるわけなので。。

機能

タスク登録編集削除
LINE通知
検索(予定名での検索)
予定の日付の期間での絞り込み

こんなところです。

新規登録画面

基本スマホ想定なので、右下に新規登録ボタンを設置していまして、クリックでモーダル開きます。

うちの夫と娘の誕生日同じ日なんです。

私6/8生まれ、息子の出産予定日6/13だったので、まさか・・と思いましたが、息子は5/26に生まれたので残念でした。(特技、話の脱線)

こだわったポイント

通知の回数を自由自在にすることです。

時刻までは設定できませんが、当日の23時までなら何回でも1時間単位で設定できるようにしました。

おまけ

検索(予定名)機能と予定日での日付での範囲指定で絞り込み機能を作りました。

少しオーバースペックだなとは思いつつ・・デフォルトでは当日以降の予定のみ昇順で出力していますが、過去のデータ見たいとかあるかなと思い一応つけてみました。

日付の絞り込みのライブラリはreact-datepickerを使いました。

テスト登録ばっかりですが・・一応スクショです。

③通知が届く

アプリの使い方というか機能という感じですが、②のページで設定したスケジュールで通知が届きます。

こんな感じです。

この部分の技術構成図は下記の赤の部分です。

github Actionsという機能を使用して定期的にAPI叩いてLINEにpushメッセージ送信という流れです。

ここに関しても過去の記事がありますので、ご興味ある方は読んでみてください。

関連記事

おまけ(管理画面)

後述するハプニング発生で管理画面の構成はめちゃくちゃです。

当初はここでLINEのAPI tokenを登録する予定だったので必要だったんですが、webhook使って自動的に返信す仕様に変更したので、合言葉の変更くらいできればいいかなと思うんですけど、supabaseでもできるしこの画面いる・・？って感じです。

今後、公式ラインの情報をデータベースに保存してchannel access tokenとかここで管理するようにするかも・・ってことを考えて一旦このままにしておこうかなと思いますが要検討です。

ハプニング

当初、LINE Notify使う予定で管理画面作っていたのに、いざ送信機能だと思ったら来年5月でLINE Notifyのサービス提供終了とのお知らせが・・

顔かなり青くなってたと思います。仕方ないので調べ上げて実装しました。

公式LINEつくらなきゃで結構あたふたしましたが、なんとか形になりました。

LINE Messaging APIを使いました。

関連記事

このアプリを作ろうと思った背景

きっかけは幼稚園の今日は何を持たせたらいいんだ？問題でした。

紙で色々な情報が書いてあって、結局大事なことがどれかわからない、ママ友に聞くみたいなことが頻発していまして、、、

え？今日午前保育だったの？

箸じゃなくてスプーン？？

お弁当ですと？？？

あるあるでした。上書きされたりするのでわかっているつもりが古い情報のままだったり。

とにかく幼稚園の情報はわかりにくい！！

頼れるママ友コミュニティで、誰かが登録しておけば聞かなくても発信してくれる機能欲しい。。

iPhoneのリマインダーだと個人になるからグループラインに、、登録した時点でピコピコ通知はいらない、、

という希望を叶えるべく、GASで作ったのが始まりでした。

ほぼ機能は同じなアプリをだったのですが、夫婦のグループLINE、幼稚園のママ友LINE、ママ友の夫婦LINE、ママ友個人LINEで使っていました。

管理画面とかないのでLINE tokenごとに同じアプリを複製していたイメージです。

素人が作った動くだけのwebアプリですが、あるママ友の需要にドンピシャでうちの夫婦でも使いたいとリクエストされたりして・・・

リマイン君とかありますが、余計な無効化出来ない機能が本当に要らないみたいな感じで仲良くなれなくて幼稚園のママ友LINEで使っているあの機能が欲しいと熱望されて(嬉しくて喜んで)作っていました。

それを今回Next.jsで作り替えたという感じです。

おわりに

ずっとやりたかったので今回完成してホッとしました。(GASは動作が遅すぎで・・)

開発している最中にLINENotifyも終わりということが明らかになり本当にいいタイミングでした。

ママ友と使うのが楽しみです！！