# Ponshu Room 配布ページ - デプロイガイド

**作成日**: 2026-02-23
**対象**: Vercel配布ページのセットアップ

---

## 🎯 **目的**

日本酒アプリの4つのAPK(Maita/Eiji × Lite/Pro)を、美しい配布ページ経由でダウンロード可能にする。

---

## 📂 **ファイル構成**

### **配布ページ** (`web/download/`)

```
web/download/
├── index.html          # 旧バージョン (v1.0.12)
├── index_v2.html       # 新バージョン (v1.0.16) ← 今回作成
├── style.css           # スタイルシート (共通)
└── DEPLOYMENT_GUIDE.md # このガイド
```

### **APKファイル** (`build/apk_releases/2026-02-23_13-17-01/`)

```
build/apk_releases/2026-02-23_13-17-01/
├── ponshu_room_lite_maita.apk (90MB)
├── ponshu_room_lite_eiji.apk  (90MB)
├── ponshu_room_pro_maita.apk  (90MB)
├── ponshu_room_pro_eiji.apk   (90MB)
└── README.md
```

---

## 🚀 **デプロイ方法**

### **Option A: Synology File Station + Vercel (推奨)**

APKは大容量(90MB×4)なので、Synologyでホスティングし、Vercelは配布ページのみ。

#### **Step 1: SynologyにAPKを配置**

```bash
# ローカルPCから Synology へ転送
scp -r build/apk_releases/2026-02-23_13-17-01/ \
  admin@synology.local:/volume1/web/ponshu/apks/

# または Synology File Station の Web UI でアップロード
# ディレクトリ: /volume1/web/ponshu/apks/2026-02-23_13-17-01/
```

**Synology File Station設定**:
1. File Station を開く
2. `/volume1/web/ponshu/apks/` を作成
3. APKファイルをアップロード
4. 右クリック → 「共有リンクを作成」
5. 公開URLを取得 (例: `https://your-nas.synology.me/sharing/xxxxx`)

#### **Step 2: Tailscale Funnel or DDNS設定**

**Tailscale Funnel (推奨)**:
```bash
# Synology SSH で実行
tailscale funnel on 443
# アクセス先: https://YOUR-TAILSCALE-NAME.ts.net/ponshu/apks/
```

**または Synology DDNS**:
- Control Panel → External Access → DDNS
- プロバイダー: Synology
- ホスト名: `your-nas.synology.me`
- SSL証明書設定

#### **Step 3: index_v2.html のURL更新**

[index_v2.html](./index_v2.html) の18行目を編集:

```javascript
// 変更前
const APK_BASE_URL = 'https://YOUR_SYNOLOGY_OR_VERCEL_URL/apks/2026-02-23_13-17-01';

// 変更後 (Tailscale Funnel)
const APK_BASE_URL = 'https://YOUR-TAILSCALE-NAME.ts.net/ponshu/apks/2026-02-23_13-17-01';

// または (Synology DDNS)
const APK_BASE_URL = 'https://your-nas.synology.me/ponshu/apks/2026-02-23_13-17-01';
```

#### **Step 4: Vercelにデプロイ**

```bash
# web/downloadディレクトリに移動
cd web/download

# vercel.jsonを作成 (既に存在する場合はスキップ)
cat > vercel.json << 'EOF'
{
  "buildCommand": "echo 'Static files'",
  "outputDirectory": ".",
  "framework": null
}
EOF

# index_v2.html を index.html にリネーム
mv index.html index_old.html
mv index_v2.html index.html

# Vercel CLI でデプロイ
vercel --prod

# または Vercel Dashboard から GitHub連携
```

**Vercel Dashboard経由**:
1. https://vercel.com/dashboard
2. "Add New Project"
3. GitHub リポジトリを選択
4. Root Directory: `web/download`
5. Deploy

---

### **Option B: Vercel単独 (APKも含める)**

Vercelの無料プランはファイルサイズ制限があるため、**非推奨**ですが可能です。

```bash
# web/download ディレクトリ構成
web/download/
├── index.html
├── style.css
└── apks/
    └── 2026-02-23_13-17-01/
        ├── ponshu_room_lite_maita.apk
        ├── ponshu_room_lite_eiji.apk
        ├── ponshu_room_pro_maita.apk
        └── ponshu_room_pro_eiji.apk

# .vercelignore を作成 (不要ファイル除外)
cat > .vercelignore << 'EOF'
*.md
DEPLOYMENT_GUIDE.md
index_old.html
EOF

# デプロイ
vercel --prod
```

**注意**: Vercel無料プランはデプロイサイズ制限があるため、4つ全てのAPK(360MB)を含めると失敗する可能性あり。

---

## 🔐 **セキュリティ設定**

### **Option 1: Basic認証 (Vercel)**

`vercel.json` に追加:

```json
{
  "headers": [
    {
      "source": "/apks/:path*",
      "headers": [
        {
          "key": "WWW-Authenticate",
          "value": "Basic realm=\"APK Download\""
        }
      ]
    }
  ]
}
```

### **Option 2: アクセストークン (推奨)**

URLに簡易トークンを追加:

```javascript
// index.html 内
const APK_URLS = {
  maita: {
    lite: `${APK_BASE_URL}/ponshu_room_lite_maita.apk?token=MAITA_SECRET_123`,
    pro: `${APK_BASE_URL}/ponshu_room_pro_maita.apk?token=MAITA_SECRET_123`
  },
  eiji: {
    lite: `${APK_BASE_URL}/ponshu_room_lite_eiji.apk?token=EIJI_SECRET_456`,
    pro: `${APK_BASE_URL}/ponshu_room_pro_eiji.apk?token=EIJI_SECRET_456`
  }
};
```

Synology側で `.htaccess` でトークン検証:

```apache
RewriteEngine On
RewriteCond %{QUERY_STRING} !token=(MAITA_SECRET_123|EIJI_SECRET_456)
RewriteRule ^apks/.* - [F,L]
```

---

## 🧪 **動作確認**

### **ローカルテスト**

```bash
# Simple HTTP Server で確認
cd web/download
python -m http.server 8000

# ブラウザで開く
# http://localhost:8000/index.html
```

**確認項目**:
- [ ] ユーザー選択画面が表示される
- [ ] Maita/Eiji選択後、適切なダウンロードリンクが表示
- [ ] Lite/Proボタンクリックでダウンロード開始
- [ ] ダークモード切り替えで見た目が変わる

### **本番確認**

Vercelデプロイ後:
```
https://your-project.vercel.app/
```

**確認項目**:
- [ ] Synology上のAPKファイルにアクセス可能
- [ ] CORSエラーが出ない
- [ ] ダウンロード速度が許容範囲
- [ ] スマホ/PCどちらからもアクセス可能

---

## 📊 **配布ページの特徴**

### **実装済み機能**

1. **ユーザー選択**
   - Maita/Eiji 選択画面
   - LocalStorageに保存 (次回訪問時は自動選択)
   - ユーザー変更ボタン

2. **バージョン選択**
   - Lite版 (Free)
   - Pro版 (Pro Badge)

3. **デザイン**
   - 和風 (和紙×墨×琥珀)
   - ダークモード自動切替
   - レスポンシブ (モバイル/デスクトップ)

4. **情報表示**
   - バージョン: v1.0.16
   - ファイルサイズ: 90MB
   - 対応OS: Android 8.0+
   - 主要機能アイコン (撮影/AI解析/コレクション/マップ)

---

## 🔄 **更新手順**

### **新しいAPKバージョンをリリースする場合**

```bash
# 1. 新しいAPKをビルド
bash build_4_apks.sh

# 2. Synologyに新しいディレクトリで配置
scp -r build/apk_releases/NEW_TIMESTAMP/ \
  admin@synology.local:/volume1/web/ponshu/apks/

# 3. index.html のAPK_BASE_URLを更新
# APK_BASE_URL = '.../apks/NEW_TIMESTAMP'

# 4. バージョン番号更新
# <footer><p>vX.X.X (YYYY-MM-DD)</p></footer>

# 5. Vercel再デプロイ
vercel --prod
```

---

## 🐛 **トラブルシューティング**

### **問題1: APKダウンロードが403エラー**

**原因**: Synology File Stationの共有設定が誤っている

**解決策**:
```bash
# SSHでパーミッション確認
ls -la /volume1/web/ponshu/apks/

# 644に変更
chmod 644 /volume1/web/ponshu/apks/*/*.apk
```

### **問題2: CORSエラー**

**原因**: Synology NginxがCORSヘッダーを返していない

**解決策**:
Synology Control Panel → Application Portal → Reverse Proxy → Custom Header:
```
Access-Control-Allow-Origin: *
```

### **問題3: Vercelデプロイが失敗**

**原因**: APKファイルサイズが大きすぎる

**解決策**:
- `.vercelignore` にAPKを追加
- APKはSynologyでホスティング (Option A)

---

## 📝 **配布URLの共有方法**

### **Eijiへの共有**

```
件名: Ponshu Room APKダウンロード

本文:
日本酒アプリの最新版をビルドしました。
以下のURLからダウンロードできます。

https://your-project.vercel.app/

ユーザー選択画面で「Eiji」を選択してください。
- Lite版: 基本機能のみ
- Pro版: 将来的に追加機能を予定

インストール方法:
1. APKをダウンロード
2. 「提供元不明のアプリ」を許可
3. インストール実行

何か問題があればお知らせください。
```

---

## 🎉 **完成後のチェックリスト**

- [ ] SynologyにAPKファイル配置完了
- [ ] Tailscale Funnel または DDNS設定完了
- [ ] index.html のURL更新完了
- [ ] Vercelにデプロイ完了
- [ ] ローカルテスト完了
- [ ] 本番環境でMaita用Lite版ダウンロード確認
- [ ] 本番環境でEiji用Lite版ダウンロード確認
- [ ] スマホからアクセス確認
- [ ] ダークモード確認
- [ ] EijiへURL共有

---

**次のステップ**: フィードバック収集 → v1.0.17で改善