ローカル保存可能な SNS 風メモアプリを作った

投稿日:

カテゴリ:デジタル

ブラウザのローカルストレージでデータの管理・保存が可能な SNS ライクなメモ帳アプリケーションを作成した。

この記事の目次

作ったきっかけ

心身の健康を保つために、しばらく前から Twitter(X)などの SNS から離れた生活を送っている。Twitter をやめた理由は以下の記事が詳しい。

ネットの喧騒から解放されて穏やかに過ごせるようになった反面、ひとつ困ったのが、自分の言葉を気軽に呟ける場所がなくなったことだった。短文で気軽に投稿できるタイムライン形式自体はメモ帳として優秀だと感じていた。

巷には SNS 風メモアプリが多数存在しているが、そもそもスマホ専用のアプリだったり、パソコンから使えても投稿の同期やエクスポートは有料だったりして、いまいち使い心地が悪かった。

パソコンでもスマホでも使えて、面倒な会員登録は一切不要。データのエクスポートも自由にできる。そんなメモアプリがあったらいいなと思い、Gemini の力を借りつつ自作してみた。

作ったもの:つぶやきメモ

作ったメモアプリは GitHub Pages で公開している。

ソースコードは以下のページで公開している。アプリの詳しい使い方は、こちらの README を参照。

つぶやきのデータはすべてブラウザのローカルストレージに保存され、JSON 形式でデータをインポート/エクスポートできる。これにより、複数端末間での引き継ぎが容易になった。

アプリを作成するにあたっていちばん大変だったのは、返信機能の実装だ。返信に返信、さらに返信……とスレッドを続けていくと、HTML の入れ子構造が無限に続いて見た目がとんでもないことになってしまったので、階層が深くならないようにする必要があった。

また、つぶやきごとの固有 ID は、初めは now.getTime() で投稿日時をミリ秒に直したものをそのまま設定していたが、万が一同じミリ秒になって ID が重複する可能性を考えて、randomUUID() で ID を生成する方法に変更した。

あとがき

ブラウザのローカルストレージでデータの管理・保存が可能な SNS ライクなメモ帳アプリケーションを作成した。

誰の目も気にする必要がないため、読書メモやテレビ番組や動画の感想などのちょっとした日常の記録が書きやすくなった。たまに愚痴なんかも書いて、いい感じのストレス発散ができている。

バイブコーディングに関しては、以前よりかなり簡単にアプリが作成できるようになったと実感する反面、結局自分にプログラミングの知識がある程度はないと、提示されたコードが本当に適切なのか判断できないのだなと思わされた。少なくとも AI のコード全く精査せずそのまま載せるのはやめとこっと。

タグ:Web 制作, SNS