diff --git a/firebase.js b/firebase.js index 7022ff2..75273b7 100644 --- a/firebase.js +++ b/firebase.js @@ -1,155 +1,25 @@ // firebase.js import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js"; -import { - getFirestore, - collection, - addDoc, - onSnapshot, - query, - orderBy, - deleteDoc, - doc, - updateDoc, - serverTimestamp +import { + getFirestore, collection, addDoc, query, orderBy, onSnapshot } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore.js"; -// Firebase 設定 +// Firebase設定(自分のFirebaseコンソールの値に置き換える) const firebaseConfig = { apiKey: "AIzaSyB9dSyM4ThvkJb0LadQHH3UeAzEdf5ZTcw", authDomain: "iki-ikimap.firebaseapp.com", projectId: "iki-ikimap", - storageBucket: "iki-ikimap.appspot.com", + storageBucket: "iki-ikimap.firebasestorage.app", messagingSenderId: "513869697456", appId: "1:513869697456:web:22696630d0174e80bcc675", measurementId: "G-N2VWBTHNS2" }; -// Firebase 初期化 +// Firebase初期化 const app = initializeApp(firebaseConfig); const db = getFirestore(app); -window.db = db; -window.commentsCollection = collection(db, "comments"); +// コメントコレクション参照 +const commentsCollection = collection(db, "comments"); -// グローバルマーカー配列(マップと同期) -window.markers = []; - -// Firestore にコメントを保存 -window.saveCommentToFirestore = async (entry) => { - try { - if (!entry.lat || !entry.lng || !entry.comment) { - alert("コメント、緯度、経度の情報が不足しています。"); - return; - } - - const newEntry = { - ...entry, - timestamp: serverTimestamp() - }; - - const docRef = await addDoc(window.commentsCollection, newEntry); - console.log("Document written with ID: ", docRef.id); - - // 最後のマーカーに docId を割り当て - const markerIndex = window.markers.length - 1; - if (window.markers[markerIndex]) { - window.markers[markerIndex].docId = docRef.id; - } - } catch (e) { - console.error("Firestore 書き込みエラー:", e.message, e.stack); - alert("コメントの保存に失敗しました。"); - } -}; - -// Firestore からコメント削除 -window.deleteCommentFromFirestore = async (docId) => { - try { - await deleteDoc(doc(window.commentsCollection, docId)); - console.log("Document successfully deleted!"); - } catch (e) { - console.error("Firestore 削除エラー:", e.message); - alert("コメントの削除に失敗しました。"); - } -}; - -// コメント更新 -window.updateCommentInFirestore = async (docId, newComment) => { - try { - await updateDoc(doc(window.commentsCollection, docId), { comment: newComment }); - console.log("Document successfully updated!"); - } catch (e) { - console.error("Firestore 更新エラー:", e.message); - alert("コメントの更新に失敗しました。"); - } -}; - -// Firestore からリアルタイムでコメントを取得・表示 -window.loadCommentsFromFirestore = function () { - document.getElementById("comments-list").innerHTML = ""; - window.markers.forEach(marker => map.removeLayer(marker)); - window.markers = []; - - const q = query(window.commentsCollection, orderBy("timestamp", "asc")); - - onSnapshot(q, (snapshot) => { - snapshot.docChanges().forEach((change) => { - const data = change.doc.data(); - const docId = change.doc.id; - - if (change.type === "added") { - addCommentToHistory({ ...data, docId }); - - const marker = L.marker([data.lat, data.lng]).addTo(map); - marker.docId = docId; - window.markers.push(marker); - - marker.bindPopup(` -
-

日時: ${data.timestamp?.toDate?.().toLocaleString() || "取得中..."}

-

コメント: ${data.comment}

-
- `); - } - - if (change.type === "modified") { - const historyEntry = document.querySelector(`.history-entry[data-doc-id="${docId}"]`); - if (historyEntry) { - historyEntry.querySelector(".comment-text").textContent = data.comment; - } - - const marker = window.markers.find(m => m.docId === docId); - if (marker) { - marker.setPopupContent(` -
-

日時: ${data.timestamp?.toDate?.().toLocaleString() || "取得中..."}

-

コメント: ${data.comment}

-
- `).openPopup(); - } - } - - if (change.type === "removed") { - const historyEntry = document.querySelector(`.history-entry[data-doc-id="${docId}"]`); - if (historyEntry) { - historyEntry.remove(); - } - - const markerIndex = window.markers.findIndex(m => m.docId === docId); - if (markerIndex !== -1) { - map.removeLayer(window.markers[markerIndex]); - window.markers.splice(markerIndex, 1); - } - } - }); - }); -}; - -// 初期ロード時に読み込み -window.addEventListener('load', () => { - window.loadCommentsFromFirestore(); - - // Leaflet mapのサイズを補正(地図が隠れる問題対策) - setTimeout(() => { - map.invalidateSize(); - }, 100); -}); +export { db, commentsCollection, addDoc, query, orderBy, onSnapshot };