個人開発を始めて4ヶ月。
2つ目のWebアプリをリリースしました。
今回はそのアプリの内容やこだわったポイントを紹介します。
■どんなアプリ？
簡単に言うと「駅にある伝言板アプリ」です。
昔、駅の改札付近に設置されていた、待ち合わせや連絡に使われていた伝言板をWeb上で再現しました。
各都道府県を選択し、その都道府県の伝言板にメッセージを残すことができます。
■作った動機
最近レトロなものにハマっており、ふと「駅の伝言板」に目が留まりました。現代ではほぼ姿を消してしまった伝言板ですが、知っている人には懐かしさを、知らない人には新鮮さを感じてもらえるかもと思いました。あとは単純に作ってみたかった、というのが正直なところです（笑）
■主な機能
・日本地図から都道府県を選択できる
・選んだ県の黒板にメッセージを投稿できる
・投稿したメッセージは24時間でリセットされる
・一度投稿したメッセージは編集・削除できない
UIにはこだわりました。伝言板画面では黒板風のデザインを採用し、駅名看板風に都道府県名を表示することで、駅の雰囲気をできる限り再現してみました。
日本地図画面
伝言板画面
■使用技術
フロントエンド Next.js / Tailwind CSS
バックエンド Next.js Route Handlers / Prisma
データベース PostgreSQL
■一番苦労したこと
日本地図の実装が一番悩みました。他のサイトで日本地図を表示している事例はすぐ見つかったのですが、「どうやって実装しているか」を調べるのに
時間がかかりました。
最終的には @svg-maps/japan を使い、都道府県ごとのSVGパスをsvgタグ・pathタグで描画する方法で実装できました。同じように地図実装で詰まっている方の参考になれば嬉しいです。
■まとめ
昔、駅で伝言板を使ったことがある方も、見たことがない方も、ぜひ一度使ってみてください。懐かしさや新鮮さを少しでも感じてもらえたら嬉しいです。
アプリはこちら➡️ https://kokuban-japan-v1.vercel.app/
「この記事はnoteにも掲載しています」