# yofuke.link — 正式版モバイルサイト 深夜のためのFANZAアフィリエイトキュレーションサイト、`yofuke.link`の本番デプロイ可能版です。 ## 特徴 - **モバイル特化** — 480px幅で最適化、iOS/Android両対応 - **PWA対応** — ホーム画面追加可能、スタンドアロン表示 - **年齢認証** — 30日Cookie＋localStorage、セッション記憶 - **お気に入り機能** — localStorage永続化 - **ランキング100件** — 週間/月間/年間、ジャンルフィルタ、ページネーション - **作品詳細動的生成** — URLパラメータでID指定、SEO対応 - **Web Share API** — 対応端末で自然な共有、非対応時はクリップボードコピー - **FANZA API準拠のデータ構造** — 本番切替時は1関数のみ変更 ## 構成 ``` yofuke-link-production/ ├── index.html # ホーム(ランキング TOP 10、カテゴリ、特集記事) ├── ranking.html # ランキング100件、フィルタリング ├── detail.html # 作品詳細(?id=xxxxx で動的) ├── manifest.webmanifest # PWAマニフェスト ├── assets/ │ ├── style.css # 共通スタイル(CSS変数、モバイルUI) │ ├── app.js # アプリケーションロジック │ ├── data.js # サンプルデータ(FANZA API形式) │ ├── logo.svg # ロゴマーク │ └── icon.svg # PWAアプリアイコン(512px) ├── docs/ │ ├── fanza-api.md # FANZA API連携ガイド │ └── deploy.md # デプロイ手順(Cloudflare Pages等) └── README.md # このファイル ``` ## ローカル確認 **方法1: 直接開く** `index.html`をブラウザで開くだけで動きます。ただし一部機能(Service Worker等)は動きません。 **方法2: 簡易サーバー** ```bash cd yofuke-link-production python3 -m http.server 8080 # ブラウザで http://localhost:8080 を開く ``` **モバイル表示確認:** Chrome DevToolsを開き、デバイスモード(Cmd+Shift+M)でiPhone 14 Proなどを選択。 ## 本番デプロイ ### Cloudflare Pages(推奨、無料) 1. GitHubリポジトリにコードをプッシュ 2. Cloudflare Pagesで「Create a project」→「Connect to Git」 3. リポジトリ選択、Build command不要(静的サイト) 4. デプロイ完了後、独自ドメイン(`yofuke.link`)を接続 ### Netlify 1. `netlify.toml`は不要(静的サイト) 2. Netlify CLIで`netlify deploy --prod`もしくはGit連携 3. 独自ドメイン設定 ### Vercel 1. `vercel`コマンドで即デプロイ 2. カスタムドメイン設定 ### 静的ホスティング一般 `index.html`があるディレクトリをそのままアップロードすれば動きます。 特別なビルドプロセス不要。 ## FANZA API連携 **現状**: `assets/data.js` にサンプルデータ100件が入っています。 **本番切替**: 詳しい手順は `docs/fanza-api.md` を参照。 要約すると: 1. FANZAアフィリエイトに登録し、API IDとアフィリエイトIDを取得 2. `assets/data.js` の `loadRanking` 関数を差し替え 3. サンプル画像パスをAPIレスポンスの `imageURL.large` に置換 ## 法的コンプライアンス **サイト上で以下を必ず表示:** - 年齢認証モーダル(実装済み、初回訪問時に表示) - フッターに「アフィリエイトプログラム参加」明記(実装済み) - 18歳未満入場禁止の明記(実装済み) - 利用規約・プライバシーポリシーへのリンク(モーダル内、要別途作成) **アフィリエイトリンクには:** - `rel="sponsored nofollow"` を付与(`detail.html`で実装済み) **Google AnalyticsやAdSense:** - Google AdSenseは規約違反なので使用不可 - Google Analytics 4は使用可能だが、アダルトカテゴリで登録すること ## カスタマイズ ### ブランドカラー変更 `assets/style.css` の `:root` セクションでCSS変数を変更するだけで全体が切り替わります。 ### メニュー項目変更 各HTMLの `