Merge commit '7b7ac73169255ae569ab38756f14a139dd255b9c'

WINDOWS_PORT.md

@@ -1,160 +0,0 @@
-# JR四国アプリ Windows版 (React Native for Windows) 引き継ぎ資料
-
-## プロジェクト概要
-
-JR四国の列車走行位置・運行情報アプリ。Expo Managed Workflow (React Native) で構築。  
-Android/iOS向けに運用中。このタスクは **Windows PC版の追加** を目的とする。
-
-- **リポジトリ**: `/home/ubuntu/jrshikoku` (Ubuntu開発サーバー) → Windows環境に clone/コピーして作業
-- **ブランチ**: `experiment/pc-version`（mainブランチ: `master`）
-- **React Native**: 0.83.2 / **Expo**: ^55.0.8
-
----
-
-## これまでの経緯
-
-### 試みたこと: Electron + Expo webビルド
-
-`npx expo export -p web` でWebビルドし、ElectronでラップしてCORSをメインプロセスで回避する方法を試みた。
-
-**結果**: 動作はしたが根本的な問題が多く断念。
-
-| 問題 | 原因 |
-|------|------|
-| `injectJavaScript` が動かない | Electron `<webview>` はクロスオリジンにJS注入できない |
-| 列車描画が壊れる | `window.ReactNativeWebView` が未定義でスクリプトがクラッシュ |
-| 操作感が悪い | WebViewがiframe/Electron webviewタグになり、ネイティブのスクロール感が失われる |
-| `usage.htm`（利用規約）が毎回出る | `injectJavascript` が動かないため `goBack()` 処理が機能しない |
-
-**結論**: `react-native-webview` をネイティブとして動かせないWeb系アプローチには限界がある。
-
----
-
-## 推奨アプローチ: React Native for Windows (RNW)
-
-### なぜRNWが良いか
-
-- `react-native-webview` が **WebView2 (Chromium)** として動く → `injectJavaScript` がモバイルと同じ挙動
-- ネイティブアプリなので CORS 制限がない
-- スクロール・タッチ感がネイティブ
-- このアプリの主要機能（走行位置WebView、API通信）がそのまま動く可能性が高い
-
-### バージョン対応
-
-RN 0.83.2 に対応する RNW は **0.83.x**。
-
-```
-yarn add react-native-windows@0.83.x
-```
-
----
-
-## セットアップ手順 (Windows)
-
-### 1. 前提環境のインストール
-
-[Microsoft公式ドキュメント](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies) に従う。
-
-必要なもの:
-- **Visual Studio 2022** (Community可)  
-  - ワークロード: 「C++ によるデスクトップ開発」「ユニバーサル Windows プラットフォーム開発」
-  - 個別コンポーネント: 「Windows 11 SDK (10.0.22621.0 以上)」「C++ CMake ツール」
-- **Node.js** LTS
-- **Git**
-
-```powershell
-# winget で一括インストール (任意)
-winget install Microsoft.VisualStudio.2022.Community
-winget install OpenJS.NodeJS.LTS
-winget install Git.Git
-```
-
-### 2. リポジトリをWindowsにクローン
-
-```powershell
-git clone <リポジトリURL>
-cd jrshikoku
-git checkout experiment/pc-version
-yarn install
-```
-
-### 3. RNW の初期化
-
-```powershell
-yarn add react-native-windows@0.83.x
-npx react-native-windows-init --overwrite
-```
-
-→ `windows/` ディレクトリが生成される。
-
-### 4. ビルド & 実行
-
-```powershell
-npx react-native run-windows
-```
-
----
-
-## 予想される問題と対処
-
-### Expoモジュールの非対応
-
-Expo Managed Workflow のモジュールはネイティブコードを自動生成するが、RNW は公式サポート外。  
-以下のモジュールはWindowsで動かない可能性が高い（クラッシュしたらスタブに差し替える）:
-
-| モジュール | 状況 | 対処 |
-|-----------|------|------|
-| `expo-notifications` | Windowsプッシュ通知は別実装が必要 | Platform.OS === 'windows' でスキップ |
-| `expo-felica-reader` | ハードウェア依存、Windows非対応 | スタブに差し替え |
-| `expo-live-activity` | iOS専用 | すでにPlatform.OS === 'web' ガード済み |
-| `expo-linear-gradient` | RNW向けは要確認 | react-native-linear-gradient に差し替えも |
-| `react-native-maps` | Windows未対応 | metro.config.js でスタブを当てる |
-
-### Platform.OS の値
-
-RNW では `Platform.OS === 'windows'`（`'web'` でも `'ios'` でもない）。  
-既存の `Platform.OS === 'android'` ガードがある箇所は意図通り動く（Windowsはスキップされる）。
-
-### `react-native-webview` のCORS
-
-ネイティブアプリなので基本的にCORSはない。ただし JR四国の `X-Frame-Options` は  
-iframeではなく WebView2 で直接開くため無関係。
-
----
-
-## アプリ構成の重要ポイント
-
-### 走行位置タブ (`components/Apps/WebView.tsx`)
-
-最重要コンポーネント。`react-native-webview` の WebView に `train.jr-shikoku.co.jp/sp.html` を読み込み、大量の JavaScript (`injectJavascript`) を注入して列車データを描画している。
-
-- `injectJavascript`: `lib/webViewInjectjavascript.ts` で生成。ユーザー設定・ダークモード等を考慮した巨大スクリプト
-- `injectJavascriptBeforeContentLoaded`: モックAPI使用時のみ、XHRインターセプター
-- `window.ReactNativeWebView.postMessage` でアプリ側に列車クリック等のイベントを送る
-
-### 状態管理
-
-Context API (stateBox/) で全状態を管理。Redux等は使用していない。
-
-### API
-
-バックエンド: `jr-shikoku-backend-api-v1.haruk.in`（外部サーバー）  
-列車走行位置: JR四国公式 `train.jr-shikoku.co.jp`（WebView内で直接アクセス）
-
----
-
-## Claudeへの指示テンプレート
-
-```
-このプロジェクトはExpo React NativeのJR四国アプリ(RN 0.83.2)。
-experiment/pc-versionブランチで作業中。
-React Native for Windows (RNW 0.83.x) を使ってWindows PC版を作りたい。
-
-まず package.json と windows/ ディレクトリの存在を確認し、
-RNW の初期化が完了しているか確認してから作業を開始してほしい。
-
-主要な懸念点:
-1. expo-notifications など Expo 系モジュールが Windows ビルドを壊す可能性
-2. react-native-maps は Windows 非対応（metro.config.js でスタブを当てる予定）
-3. Platform.OS === 'windows' の分岐が必要になる箇所を確認すること
-```