6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【クソアプリ】GitHub Pages × Firestore で「みんなで育てる短歌ジェネレーター」を作ったら地獄が生まれた話

Last updated at Posted at 2025-12-18

【クソアプリ】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 は便利

リアルタイム更新は楽しい

でも辞書は汚染される

生成される短歌は地獄

クソアプリは世界を救わない

でも作るのは楽しい

✅ 最後に

クソアプリアドベントカレンダーに参加している皆さんへ。

あなたのくそアプリも、誰かの心を救うかもしれない。
いや、救わないかもしれない。
でも作るのは楽しいのでヨシ!

まだ、うんちはフレーズ追加してません
まだ、全然フレーズは登録されてません
まだ、地獄にはなっていません

ここから遊べます
https://moyorino.github.io/tanka-generator/

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?