こんにちは！個人開発でちょっとしたお役立ちツールを作っています。
「今月、これ解約しなきゃ…！」と思っていたのに、うっかり忘れて無駄にお金を払ってしまった経験はありませんか？
そんな悩みを解決するために作った 「サブスク管理アプリ(SubManager)」 に、新しく カレンダー通知機能 を追加しました！
専門的な知識がなくてもサクッと理解できるように、どんな仕組みで動いているのかを簡単にご紹介します。
どんな機能？
自分が登録しているサブスク（NetflixやAmazon Primeなど）の 次回支払日の前日 に、スマホのカレンダー（GoogleカレンダーやiPhoneの標準カレンダー）に 「明日が支払日ですよ！」という通知（リマインド） を送れるようになりました。
アプリの画面から「ベルのマーク（通知）」のボタンを押すだけで、カレンダーに予定を登録できます！
どうやって実現したか（技術の裏側）
このアプリは「サーバー」を持たず、完全にみなさんのブラウザ（ChromeやSafari）の中だけで動いています。
そのため、一般的なアプリのように「サーバーから直接スマホに通知を送る（プッシュ通知）」ということができません。
そこで使ったのが、「カレンダーに予定を登録するためのデータ（.icsファイル）」をブラウザで作って、ダウンロードしてもらうというシンプルな裏技です！
仕組みはとてもシンプル！
JavaScriptを使って、カレンダーが読み取れる形式（iCalendar形式）のテキストを作ります。
// カレンダー用の予定データ（テキスト）を用意する
const icsContent = `
BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
DTSTART:20260301
DTEND:20260302
SUMMARY:【更新】Netflix の支払い
BEGIN:VALARM
TRIGGER:-P1D // 1日前に通知(アラーム)を鳴らす設定
END:VALARM
END:VEVENT
END:VCALENDAR
`;
// 用意したテキストから、目に見えない「ファイル」を作る
const blob = new Blob([icsContent], { type: 'text/calendar;charset=utf-8' });
const url = URL.createObjectURL(blob);
// ファイルのダウンロードをスタートさせる！
const a = document.createElement('a');
a.href = url;
a.download = `payment_event.ics`;
a.click();
このように、
「文字を組み合わせて用意し、それをファイルとしてユーザーの端末に保存させる」
という仕組みになっています。
工夫したポイント
-
前日に忘れず通知（アラーム機能）
ただ予定を入れるだけではなく、「1日前（-P1D）」にスマホへアラート通知が鳴るようにしました。これにより、解約手続きをする時間が確保できます。 -
終日（1日中）の予定として登録
時間の決まっていない「終日の予定」としてカレンダーに書き込まれるように設定しているため、予定表が見やすくなります。
おわりに
難しい仕組みやサーバー（データベース）を構築しなくても、アイデア次第で「アプリのような便利機能（通知機能）」を作ることができます！
同じようなツールを作っている方や、ブラウザだけで動くアプリを作りたい方の参考になれば嬉しいです。
「こんな機能があったらもっと便利！」というアイデアがあれば、ぜひコメントで教えてください！