# スマホブラウザ対応（レスポンシブ＋PWA対応）：優先順位付きチェックリスト
1. レスポンシブ対応（CSS）
- meta viewport タグを に追加
```
```
- ゲーム画面を canvas などで構成している場合、width: 100vw; height: 100vh; 等で全画面に最適化
- フレックスボックスやグリッドを使い、スマホとPCでレイアウトが崩れないようCSSを調整
- 文字やUIパーツ（スコア、ボタン）などの相対サイズ（em, %, vh/vw）化
2. タップ・スワイプ操作対応（JavaScript）
- スマホ用にボタンUIを表示（など）
- タッチイベント対応（touchstart, touchend, touchmove）を追加
- 既存のキーボードイベント（keydown）との切り分け
- iOSのスクロール誤爆対策（event.preventDefault() など）
3. PWA対応（Progressive Web App）
- manifest.json をプロジェクト直下 or /public に設置
- 必須項目：name, short_name, start_url, icons, display, theme_color, background_color
- サービスワーカー（service-worker.js）の作成と登録
- オフライン対応やキャッシュの管理が可能
- navigator.serviceWorker.register() をJSで実行
- HTTPSでホストされている必要がある（Netlify/GitHub PagesならOK）
4. モバイルファーストテスト
- Chromeデベロッパーツールでモバイルモードの動作検証
- Lighthouse でPWAチェック（パフォーマンス・アクセシビリティ等）
# この構成でネイティブアプリ化（Capacitor.js 等）は可能？
スマホブラウザ対応（レスポンシブ＋PWA対応）バージョンが完成後、ネイティブアプリ化をする上での注意点。
結論：基本的にそのまま流用可能、ただし以下の点に注意してください：
## そのまま活かせる部分
- HTML/CSS/JS構成 → そのまま www/ 配下に入れてOK
- PWA用の manifest.json や service-worker.js も問題なし（むしろ推奨）
## 気をつけるべき点
- PWA用の service-worker.js は一部のアプリストアでは不要（オフラインキャッシュなどはCapacitorの仕組みに委ねる場合もある）
- 外部APIアクセス時にCORS制限の扱いが変わる（ブラウザ環境と違うので要注意）
- ネイティブ連携が必要な場合（ファイルアクセス・通知など）はCapacitorプラグイン導入が別途必要
次に進めるフェーズとしては、
1. スマホブラウザで快適に動くようにレスポンシブ対応と操作最適化
2. そのコードベースのままCapacitor.jsでアプリ化し、Android StudioやXcodeでビルド
という流れが自然です。