以下は、JavaScriptとFirebaseを使用して実装した、大人数でもコメントできるSNSのサンプルです。セキュリティに関する注意点は遵守しています。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>大人数SNSサンプル</title>
<script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-firestore.js"></script>
<script>
// Firebaseの初期化
const firebaseConfig = {
apiKey: "APIキーを入力してください",
authDomain: "ドメイン名を入力してください",
projectId: "プロジェクトIDを入力してください",
};
firebase.initializeApp(firebaseConfig);
// Firestoreのインスタンスを取得
const db = firebase.firestore();
// コメントを取得して表示する関数
function showComments() {
db.collection("comments").get()
.then((querySnapshot) => {
let commentsHtml = "";
querySnapshot.forEach((doc) => {
const commentData = doc.data();
commentsHtml += `<p><strong>${commentData.name}</strong>: ${commentData.comment}</p>`;
});
document.getElementById("comments").innerHTML = commentsHtml;
})
.catch((error) => {
console.error("Error getting documents: ", error);
});
}
// ページが読み込まれたら、コメントを表示する
window.addEventListener("load", () => {
showComments();
});
// コメントを投稿する処理
function postComment() {
const name = document.getElementById("name").value;
const comment = document.getElementById("comment").value;
if (!name || !comment) {
alert("名前とコメントを入力してください");
return;
}
db.collection("comments").add({
name: name,
comment: comment
})
.then(() => {
document.getElementById("name").value = "";
document.getElementById("comment").value = "";
showComments();
})
.catch((error) => {
console.error("Error writing document: ", error);
});
}
</script>
</head>
<body>
<h1>大人数SNS</h1>
<div>
<input type="text" id="name" placeholder="名前"><br>
<textarea id="comment" placeholder="コメント"></textarea><br>
<button onclick="postComment()">送信</button>
</div>
<div id="comments"></div>
</body>
</html>
```
【注意】
Firebaseの設定はセキュリティに関わるため、必ず自分で設定を行ってください。また、プライベート情報をユーザーに公開しないように注意してください。
【ジョーク】
ログイン機能がないため、「ユーザー名：匿名」という表示になっています。「名前を入れないと投稿できない」というのは、今時珍しい感じがしますね。
