【クソアプリ】GitHub Pages × Firestore で「みんなで育てる短歌ジェネレーター」を作ったら地獄が生まれた話
こんにちは。
今日は 「なぜこんなものを作ってしまったのか」 という後悔とともに、
GitHub Pages × Firebase Firestore を使って
みんなで短歌を育てるクソアプリを作った話を書きます。
✅ そもそも何を作ったのか
5音と7音のフレーズをランダムに組み合わせて短歌を生成
ユーザーがフレーズを追加できる
Firestore でリアルタイム共有
GitHub Pages で無料公開
誰でも編集できるので地獄のような辞書が育つ
つまり、
「インターネットの民が共同で短歌を破壊する装置」
が完成しました。
✅ なぜ作ったのか
クソアプリアドベントカレンダーに参加したかった
まともなアプリを作る気力がなかった
でも Firebase を触りたかった
そして短歌が好きだった(過去形)
✅ 技術構成(まとも)
GitHub Pages(無料)
Firebase Firestore(無料枠)
JavaScript(フレームワークなし)
リアルタイム更新(onSnapshot)
スパム対策(クライアント + Firestore ルール)
✅ 技術構成(くそ)
辞書が無限に汚染される
5音に「うんち」が追加される
7音に「うんちうんちうんち」が追加される
生成される短歌が地獄
✅ Firestore のルールで最低限の文明を守る
Firestore のルールを設定しないと、
世界中の誰でも無限にうんちを投稿できるので、
最低限の文明を守るためにルールを設定します。
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /phrases/{docId} {
allow read: if true;
allow write: if
request.resource.data.keys().hasOnly(["type", "text", "createdAt"]) &&
(request.resource.data.type == "5" || request.resource.data.type == "7") &&
request.resource.data.text.size() >= 2 &&
request.resource.data.text.size() <= 20 &&
request.resource.data.createdAt <= request.time.toMillis();
}
}
}
✅ 不正なフィールド禁止
✅ 長文スパム禁止
✅ 未来時刻の偽装禁止
✅ うんちの大量投稿は防げない
✅ index.html に Firebase を読み込む(文明の利器)
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
import {
getFirestore,
collection,
addDoc,
getDocs,
onSnapshot
} from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
const firebaseConfig = {
apiKey: "YOUR_KEY",
authDomain: "YOUR_DOMAIN",
projectId: "YOUR_PROJECT_ID"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
window.db = db;
window.collection = collection;
window.addDoc = addDoc;
window.getDocs = getDocs;
window.onSnapshot = onSnapshot;
</script>
✅ script.js:リアルタイム更新で地獄が同期される
Firestore の onSnapshot() を使うと、
誰かが「うんち」を追加した瞬間に全員の画面に反映されます。
function startRealtimeListener() {
const q = collection(db, "phrases")
onSnapshot(q, (snapshot) => {
snapshot.docChanges().forEach(change => {
if (change.type === "added") {
const data = change.doc.data()
if (data.type === "5" && !phrases5.includes(data.text)) {
phrases5.push(data.text)
}
if (data.type === "7" && !phrases7.includes(data.text)) {
phrases7.push(data.text)
}
}
})
console.log("✅ リアルタイム更新:地獄が同期されました")
})
}
✅ フレーズ一覧ページも作った
Firestore の内容をリアルタイムで表示するページも作りました。
つまり、
「うんち」が追加された瞬間に一覧ページにも反映される
という、
インターネットの闇を可視化する装置が完成しました。
✅ GitHub Pages で公開(無料で地獄を世界へ)
GitHub Pages の設定で
Branch: main / Folder: /
にすると、世界中に公開できます。
無料で地獄をばらまけます。
✅ まとめ:クソアプリは世界を救わない
Firestore は便利
GitHub Pages は便利
リアルタイム更新は楽しい
でも辞書は汚染される
生成される短歌は地獄
クソアプリは世界を救わない
でも作るのは楽しい
✅ 最後に
クソアプリアドベントカレンダーに参加している皆さんへ。
あなたのくそアプリも、誰かの心を救うかもしれない。
いや、救わないかもしれない。
でも作るのは楽しいのでヨシ!
まだ、うんちはフレーズ追加してません
まだ、全然フレーズは登録されてません
まだ、地獄にはなっていません