初めましてオコメと申します。
今回は大学の期末課題かつ、作ってみたいという思いでsnsを作ってみました。
というわけで......
Next.js+Supabase+OpenLayersで「地図上でつぶやくSNS"Kapoka"」を作り始めました
世界地図上の「場所」を起点に、情報を共有、発信できるSNS「Kapoka」を作り始めたので、
プレスリリース+技術紹介(ちょっとだけ)を兼ねてQiitaにまとめてみます。
自分自身webアプリの開発経験が乏しいのでもっといい方法、サービス、改善点があったら遠慮なくコメントしていってください。
もともとサービス名はGEONEXみたいな感じにしようとしてましたがNASAがすでにその名称を使ってたのでKapokaにしました。
(世界を俯瞰で見ることができるものといえば鳥 → カカポ → カポカ)
サービスコンセプト
Kapokaは「世界地図 × スレッド型SNS」 をコンセプトにしたWebアプリです。
世界地図上の任意の座標にピンを立てる、もしくは現在位置を取得して投稿。
たとえば:
旅行で訪れた場所の体験談・注意点を、その場所のピンにまとめる
Twitterや普通の掲示板だと「場所」の情報が流れてしまいがちですが、
Kapokaでは 「どこで話しているか」 を最初から中心に据えています。
一時期流行ってたyahoo天気をもっとカジュアルに、たくさんの人が気軽に使えるようにした感じです。
現時点の主な機能(開発中)
まだ開発途中ですが、現時点での機能をざっくりまとめると:
🌍 世界地図の表示
OpenLayers を使って、ベースマップを表示
(大学の課題なのでOpenLayersを使ってますが、もっと見やすく使いやすいサービスに切り替える、もしくは自分で選択できるようにしたいと思ってる)
📍 ピンの作成(= スレッドの作成)
任意の場所をクリックしてピンを立てる、もしくは現在位置
タイトル・テキストなどを入力すると、その場所のスレッドが作成される
💬 スレッドへのコメント投稿
各ピン(スレッド)ごとにコメントのタイムラインを保持
👤 ユーザー認証
Supabase Auth を利用したメールアドレス / パスワード認証
現状googleアカウントでの登録が可能ですが安定してないと思うので要改善
🗺 マップ上でのスレッド一覧表示
現在は人が少ないので全ピンを表示、ユーザーが多くなったら一定ズーム範囲内のピンのみを表示して、見やすさを確保する予定。
将来的にはフィルター機能も追加予定
※機能名やUIの細かい挙動は、実装の進捗に応じて変わる可能性があります。
技術スタック
開発者向けに、技術スタックも簡単に紹介します。
フロントエンド
Next.js (App Router)
Tailwind CSS(UIスタイリング)
OpenLayers(地図表示)
バックエンド / BaaS
Supabase←ストレージ、DBなど、大抵ここでやってます
インフラ / その他(予定含む)
Vercel でのホスティング
GitHub でソース管理
将来的に:
多機能なSNSを作りたいと思ってます。
今後追加したい機能
開発ロードマップとして、今後やりたいことをざっと挙げておきます。
GIS機能の追加(GISのサービスをユーザーでもつかえるようにしたい)
🔍 ピン/スレッドの検索機能(キーワード+エリア)
🏷 タグ・カテゴリ機能のさらなる追加(旅行/歴史/ニュース…など)
👥 ユーザープロフィール・フォロー機能関連のさらなる拡充
🌐 多言語対応(英語+中国語を追加したい)
🗺複数のマップを選択肢にする
なぜQiitaで書いているか
Qiitaはたくさんのエンジニアがいますのでその方たちの意見を聞きたいなというのとアクティブユーザーが欲しいというのが理由です。
あとはこういうのを一度書いてみたくて書いてみました。
実装のベストプラクティスや、RLSポリシー、SNSNの運用方法などで
フィードバックをもらえたら嬉しいです。
まだ開発途中のプロジェクトですが、
「こんな機能があると面白そう」
「ここはこういう設計の方がよくない?」
「この技術組み合わせなら、こういうユースケースもあるよ」
などなど、コメント・フィードバックをもらえるととても励みになります。
最後まで読んでいただき、ありがとうございました!
ここに私が作ったSNSのURLを置いておきます、ゲストで参加もできますのでよかったら遊んでみてください!!!!!!!!!!
https://kapoka-coral.vercel.app/