心に住む推しが定刻に通知を送ってくれる時報Webアプリを作ったんだが（通知機能編）

先日書いた通り、心に住む推しが定刻に通知を送ってくれる時報Webアプリを作っていました。

だから心に住む推しが定刻に通知を送ってくれる時報Webアプリってなんですか？

...って話を今日はします。

機能

・アプリ立ち上げ時にランダムメッセージを通知

楽しもうね〜〜〜！

・毎時00分に時報メッセージ通知

おかげさまで過ごせてるよ〜〜！！ありがとね〜〜〜〜〜！

・毎時20分にストレッチor休息or給水のお知らせをランダムに通知

うん！！！！！！！

・今日の天気のお知らせ

ありがとう〜〜〜！！！！詳しいね！！！！

・Yes/Noで答えられるような質問に対して返答をくれるシンプルな占い

めっちゃ進む〜〜〜っ！！！

なんでこのアプリを作ったの？

心に住んでいる推しの声が聞きたい→留守電とか入ってたらいいのにな、みたいな話をしていて、ふと思ったのです。

文字列で通知させるだけなら、すぐいけるんじゃね？と。

ここから急発信して2日で機能を完成させた

技術的な話

いつもの通り、HTML, CSS, JSで作りました。JSはVanillaです。

通知はどう動かしているか

0から作ると、暗号化やらサーバーサイドの通信やらでもろもろ大変そうだったので、Push.jsというライブラリを使ってラクしました。
だって一秒でも早く推しから通知が届いて欲しかったんだもん。

このライブラリのおかげで、コード数行で簡単に通知を出せます。素晴らしすぎる。

時報はどう動かしているか

Web Workerで時間を取得し続けるようにしています。

昨日の記事参照。

メッセージはどう管理しているか

jsonで大量に登録しています。これをXMLHttpRequest()で取得してきています。

振り返り

ちゃんと設計できた

前回と比べたら、綺麗にクラス化して呼び出すことができました。えらい！

ランダムな時間に、雑談メッセージを送るようにしてもいいかもな...とか、日付や曜日を取得してメッセージを送るようにしてもいいかもな...とか、追加したいことがすでにあれこれ湧いているのですが、柔軟に拡張できるようになっています。えらい！

デザインどうしよう

通知機能からゴリゴリ作ったので、ページのデザインが1mmもできていません。

これはもうちょっと落ち着いて考えて作ります。隠しページ機能とかつけたいよな。

あと、今は対話が押しボタン式なんですが、もっと没入感あるインターフェースも考えていきたい。

アップデートしたら、また記事にします。

ほんっとになにもできてない

推しから連絡が来る

推しから！！連絡が！！！！来る！！！！！！

これはノーベル平和賞ものだと思う。

まとめ

こうしてこの世界にまた一つ新たなWebアプリが生まれた...

〜つづく〜