diff --git a/map4.js b/map4.js
index 162c369..6f4fe95 100644
--- a/map4.js
+++ b/map4.js
@@ -515,3 +515,51 @@
 }
 
 window.addEventListener("DOMContentLoaded", main);
+
+// Supabase クライアント
+const supa = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
+
+// ユーザー名（localStorage）
+let userName = localStorage.getItem("userName");
+if (!userName) {
+  userName = prompt("名前を入力してください");
+  localStorage.setItem("userName", userName);
+}
+
+// グループ名（すでにあなたのマップに存在する想定）
+const groupName = localStorage.getItem("group");
+
+// DOM
+const chatList = document.getElementById("chatList");
+const chatInput = document.getElementById("chatInput");
+const chatSend = document.getElementById("chatSend");
+
+// メッセージ送信
+chatSend.addEventListener("click", async () => {
+  const text = chatInput.value.trim();
+  if (text === "") return;
+
+  await supa.from("messages").insert({
+    group_name: groupName,
+    user_name: userName,
+    message: text
+  });
+
+  chatInput.value = "";
+});
+
+// メッセージ取得（2秒ごと）
+async function loadMessages() {
+  const { data } = await supa
+    .from("messages")
+    .select("*")
+    .eq("group_name", groupName)
+    .order("created_at", { ascending: true });
+
+  chatList.innerHTML = data
+    .map(m => `<div><strong>${m.user_name}:</strong> ${m.message}</div>`)
+    .join("");
+}
+
+setInterval(loadMessages, 2000);
+loadMessages();