Compare commits
1 Commits
develop
...
experiment
| Author | SHA1 | Date | |
|---|---|---|---|
|
c1b4adc310 |
160
WINDOWS_PORT.md
Normal file
160
WINDOWS_PORT.md
Normal file
@@ -0,0 +1,160 @@
|
||||
# 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' の分岐が必要になる箇所を確認すること
|
||||
```
|
||||
Reference in New Issue
Block a user