Works一覧に戻る
主催者がGoogleでログインし、イベント名と公開URLを設定 自動生成された参加用QRコードを受付やスクリーンに掲示 参加者が名前またはニックネーム、国、任意の都市を登録 会場の共有画面へ出身地が現れ、人数・国数・都市数もリアルタイムに更新
イベント作成・管理: 開催日時と共有URLを設定し、複数イベントを主催者画面から管理 QR参加: イベントごとの参加用QRコードを画面表示・印刷 リアルタイム地球儀: 参加者の国・都市を光点とラベルで3D表示 ステージ表示: 会場スクリーン向けの全画面ビュー 主催者ダッシュボード: 参加人数・国数・都市数と登録内容を確認し、必要に応じて表示を削除
Next.jsのServer ComponentsとServer Actionsを通して、イベント単位のデータだけを取得・更新 Supabase Realtimeのイベント別通知を受け、地球儀の表示データを再取得 Google OAuthで主催者を認証し、参加者はログインなしで登録可能 Zodによる入力検証、共有レート制限、署名済みHttpOnly Cookieで公開イベントを保護
フロントエンド: Next.js 16（App Router）/ React 19 / TypeScript UI: Tailwind CSS 4 / Base UI 3D可視化: Three.js / react-globe.gl バックエンド: Supabase（PostgreSQL / Google Auth / Realtime / SSR） 入力・QR: Zod / qrcode ホスティング: Vercel
Networking Globe
国際イベントの参加者が、どの国・都市から集まったのかをリアルタイムの3D地球儀で可視化するWebアプリ。
概要
国際イベントの会場で、参加者がどの国・都市から集まっているのかを一目で確認できるリアルタイム3D地球儀。主催者がイベントを作成し、参加者は会場のQRコードから出身地を登録する。登録された場所は共有画面へリアルタイムに反映される。
コンセプト
交流機能を増やすのではなく、「この会場に世界のどこから人が集まったかを、かっこよく可視化する」ことだけに集中。スクリーンに浮かぶ光と都市名から、同じ場所に集まった人々の距離や広がりを直感的に感じられる体験を目指した。