01サイトの概要
「無料体験版でVer4.4までしっかり遊べる」をテーマに、ドラクエ10オンラインの攻略情報を50本のガイドにまとめた個人サイトです。友人・知人限定共有を想定し、検索エンジンには非公開（noindex）にしています。
特徴（5つの実装ポイント）
📱
スマホアプリ化
ホーム画面追加でアプリのように起動。全画面表示・アドレスバーなし。
📴
オフライン閲覧
Service Workerで50ページ丸ごとキャッシュ。ネットなしでも読める。
🔔
更新自動検知
サイト更新時に「新しい版があります」とスマホにトースト通知。
🔍
Google検索連携
クエスト名クリックで自動的にGoogle検索、詳細情報にジャンプ。
📮
Discordフィードバック
右下ボタンから誤字報告・要望を送信。Bot対策あり・Discordに即通知。
02アーキテクチャ全体像
3つの登場人物（開発者・利用者・Cloudflare（クラウド））と、それらを繋ぐ静的HTMLファイル群で成り立っています。データベースやサーバーサイド処理はゼロ。
開発者 → Cloudflare Pages → 利用者 の一方向配信。ただしフィードバック（利用者 → 開発者）だけは、Cloudflare Pages Functions + Turnstile + Discord Webhook で実現（詳細は Section 05）
03使用しているサービス・技術
すべて無料枠だけで完結しています。個人開発でこの規模のサイトが月額¥0で運営できる時代です。
☁️Cloudflare Pages ホスティング
世界中のCDNから配信する静的サイトホスティングサービス。GitHub Pagesと似た位置づけ。独自ドメイン・HTTPSも自動化。
💰 Free プラン：帯域・リクエスト無制限（静的サイト）
🔧wrangler CLI デプロイツール
Cloudflare公式のコマンドラインツール。wrangler pages deployでローカルのHTMLをそのままアップロード。
💰 完全無料（オープンソース）
🅰️Google Fonts Webフォント
ドラクエ風のドット絵フォント「DotGothic16」を配信。CDNから自動読み込み・キャッシュも効く。
💰 完全無料・商用OK
🌐Web標準 仕様
Service Worker API（オフライン化）、Web App Manifest（アプリ化）、Fetch API（バージョン検知）など。ブラウザ標準機能のみでPWAを実現。
💰 標準仕様（無料）
🤖Claude Code AI開発補助
Anthropic製のAIコーディング支援ツール。50ページ規模のガイド作成・調査・整合性チェックをAIエージェント並列で実施。
💰 サブスクリプション有料
🐍Python / Bash 運用スクリプト
全HTMLの一括更新・バージョン管理・PWAタグ挿入などの自動化。update-version.py --deployでワンコマンドデプロイ。
💰 標準環境（無料）
⚡Cloudflare Pages Functions サーバーレス関数
Cloudflare Pages内でエッジ実行される軽量なサーバー関数。/feedback エンドポイントで Discord Webhook中継＋Turnstile検証を担当。DB無しでも「送信 → 通知」が成立。
💰 Free プラン：10万リクエスト/日まで無料
🛡️Cloudflare Turnstile Bot対策 / CAPTCHA
reCAPTCHA代替のBot対策サービス。ユーザーの操作パターンから人間かBotかを自動判定し、ほぼクリックレスで検証完了。フィードバック送信フォームに埋め込み。
💰 完全無料・無制限
💬Discord Webhook 通知先
Discordのチャンネルへ「投稿するだけ」の特殊URL。Discord Bot登録不要・OAuth不要で、Cloudflare Functions から POST するだけで整形されたカード（embed）が届く。
💰 完全無料（Discord標準機能）
04PWA（スマホアプリ化）の仕組み
PWA = Progressive Web App。Webサイトなのにネイティブアプリのように振る舞う技術の総称。今回のサイトは以下3つの機能を実装：
① ホーム画面追加・全画面起動
スマホのブラウザで開いて「ホーム画面に追加」すると、アイコンが並んで普通のアプリと見分けがつかない。起動時はアドレスバーが消え、全画面表示（standalone モード）。
- 実装：
manifest.json に display: "standalone" と アイコン画像を指定
- 全HTMLに
<link rel="manifest">と<meta name="apple-mobile-web-app-capable">を追加
② オフライン閲覧（Service Worker）
Service Workerとは、ブラウザとサーバーの間で動く「代理人」。初回起動時に50ページを丸ごとダウンロードしてキャッシュし、2回目以降はネット接続がなくても閲覧できる。
- 戦略：SWR（Stale-While-Revalidate）… キャッシュ即返し ＋ 裏で最新版取得
- 体感速度：常に一瞬で表示（キャッシュから返すため）
- Cloudflare Pagesの
.html → 拡張子なし 308リダイレクトに対応するため、内部でredirect: "follow" ＋ cleanResponse()で新Responseに包み直す実装
③ 更新検知トースト
サイトを更新した時、「新しい版があります」とスマホの画面下部にトースト通知が出る。ETagが使えないCDN環境でも動くよう独自実装。
- 全HTMLに
<meta name="site-version" content="YYYY-MM-DDTHH:MM-vN">を埋め込み
- アプリ起動時にJSがネット直接取得（
cache: 'no-store'）して、埋め込みバージョンを比較
- 違えばトースト表示 → 再読み込みで最新版
05Discordフィードバック機能
右下の 「📮 フィードバック」ボタン から、誤字報告・情報の間違い・要望・感想を送信できます。ユーザーの送信内容は 数秒後にDiscordチャンネルへ届くので、私は即座に確認できます。DBは不要。
実装の3サービス連携
サイト（クライアントJS） → Cloudflare Turnstile（Bot対策）→ Cloudflare Pages Functions（サーバー関数）→ Discord Webhook（通知先）の4段構成。
送信 → 判定 → 中継 → 通知。すべてCloudflareインフラ上で完結・DBなし
送信できる内容（5カテゴリ）
| カテゴリ | 用途 |
|---|
| 📝 誤字脱字 | ページ内の誤字・タイポ報告 |
| ❗ 情報の間違い | 攻略情報の誤り（数値・仕様変更等） |
| 💡 要望 | 「〇〇のガイドが欲しい」等 |
| 😊 感想 | フリー感想 |
| ❓ その他 | 上記に当てはまらないもの |
セキュリティ・プライバシー対策
- Bot対策：Cloudflare Turnstileで自動的にBotをブロック（ユーザーは何もしない）
- 入力サニタイズ：メッセージ最大2000字・その他フィールド500字で自動クリップ
- カテゴリ検証：許可済み5カテゴリ以外はサーバー側で拒否（400エラー）
- Webhook URLは秘匿：
DISCORD_WEBHOOK_URL はCloudflareのシークレット環境変数、クライアント側からは見えない
- DB無し・アカウント無し：個人情報を蓄積しない。国コード・IPはDiscord表示のみ
- お名前は任意：匿名送信OK。デフォルト「（匿名）」
なぜこの構成なのか（設計判断）
- 従来はコメント機能＝DB＋認証＋管理画面が必要 → 今回は「読み専用サイト」なので不要
- お問い合わせフォーム＝メール送信サーバーが必要 → SPF/DKIM設定・スパム対応が面倒
- Discord Webhook ＋ Pages Functions なら 環境変数1つ設定するだけ で送信 → 通知 まで完結
- 個人サイトの規模なら 1日100件を超えるフィードバックは来ない → Free 枠で十分
06入出力フロー図（3シナリオ）
「誰が・何を・どうやりとりしているか」を3つの代表シナリオで示します。
シナリオA：開発者がサイトを更新する
シナリオB：利用者が初回アクセス〜アプリインストール
シナリオC：更新検知トーストが出る仕組み
07運用コストと制約
💰 月額運用費：¥0（完全無料）
Cloudflare Pages Free プランは 静的サイトの帯域・リクエスト無制限、Google Fonts / Web標準技術も無料。開発コスト（Claude Code）を除けば、ゼロ円で運営できています。
Cloudflare Pages Free プランの制限（実務上ほぼ問題なし）
| 項目 | 制限 | 実運用への影響 |
|---|
| ビルド回数 | 500回/月 | 1日16回デプロイしても余裕。実運用では月10回程度 |
| 並列ビルド | 1 | 個人サイトなので問題なし |
| ファイル数 | 20,000ファイル | 現在53ファイル。余裕 |
| 1ファイル最大サイズ | 25MiB | 画像でも十分 |
| 帯域幅 | 無制限 | 友人共有〜不特定多数まで対応可能 |
| リクエスト | 無制限 | 同上 |
| Pages Functions | 10万リクエスト/日 | フィードバック用途では実質使い切れない |
| Cloudflare Turnstile | 無制限 | Bot対策の呼び出し回数制限なし |
技術的な制約と対策
- Cloudflare Pagesは ETag / Last-Modified を返さない → 独自の site-version 埋め込み方式で解決
- 「.html → 拡張子なし」の308リダイレクト → Service Workerで
redirect: 'follow' と cleanResponse() で対応
- データベースなし → ユーザーコメント・フィードバックは受け取れない（あえて割り切り）
- 検索エンジン非公開 →
<meta name="robots" content="noindex,nofollow"> で全ページ除外。URL知っている人だけアクセス可
08まとめ：このサイトが証明していること
この構成が示すのは、「今の時代、個人でもここまで作れる」ということです。
- 📱 スマホアプリを作るのに App Store 登録も月額課金もいらない → PWAで十分
- ☁️ Webサイトの運営費用は月額¥0でも成立する → Cloudflare Pagesの無料枠
- 🤖 50ページのガイド作成・調査・整合性チェックもAIエージェント並列で数時間 → Claude Code
- 📴 「オフラインでも読める攻略本」という体験もWebで作れる → Service Worker
- 🔔 更新通知・自動アプデもアプリストア不要で実装できる → Web標準のみで
- 📮 ユーザーからのフィードバックもDB・認証・メールサーバー無しで受け取れる → Pages Functions + Turnstile + Discord Webhookの3点連携
10年前なら数十万円かかったであろう「アプリ配信・サーバー・CDN」が、いまはすべて無料または月数千円で組めます。プログラミングというより組み合わせと設計の勝負に変わっています。