1k-cross-platform

クロスプラットフォーム開発

OneKey でプラットフォーム固有のコードを記述するためのパターンです。

プラットフォーム拡張子

プラットフォーム固有の実装には、プラットフォーム拡張子を使用します。

拡張子	プラットフォーム
.native.ts	React Native（iOS/Android）
.web.ts	Web プラットフォーム
.desktop.ts	デスクトップ（Electron）
.ext.ts	ブラウザー拡張機能

プラットフォームの検出

プラットフォームの検出には必ず platformEnv を使用してください。

// ✅ CORRECT
import platformEnv from '@onekeyhq/shared/src/platformEnv';

if (platformEnv.isNative) {
  // React Native specific code
}

if (platformEnv.isWeb) {
  // Web specific code
}

if (platformEnv.isDesktop) {
  // Desktop (Electron) specific code
}

if (platformEnv.isExtension) {
  // Browser extension specific code
}

// ❌ FORBIDDEN - Direct platform checks
if (typeof window !== 'undefined') { }
if (process.env.REACT_APP_PLATFORM === 'web') { }

使用可能なプラットフォームフラグ

platformEnv.isNative      // React Native (iOS or Android)
platformEnv.isWeb         // Web browser
platformEnv.isDesktop     // Electron desktop app
platformEnv.isExtension   // Browser extension
platformEnv.isIOS         // iOS specifically
platformEnv.isAndroid     // Android specifically
platformEnv.isWebEmbed    // Embedded web components

プラットフォーム固有のファイル構成

MyComponent/
├── index.ts              # Main entry, common logic
├── MyComponent.tsx       # Shared component
├── MyComponent.native.tsx    # React Native specific
├── MyComponent.web.tsx       # Web specific
├── MyComponent.desktop.tsx   # Desktop specific
└── MyComponent.ext.tsx       # Extension specific

バンドラーは、プラットフォームに応じて適切なファイルを自動的に解決します。

例：プラットフォーム固有のストレージ

// storage.ts - shared interface
export interface IStorage {
  get(key: string): Promise<string | null>;
  set(key: string, value: string): Promise<void>;
}

// storage.native.ts
import AsyncStorage from '@react-native-async-storage/async-storage';

export const storage: IStorage = {
  get: (key) => AsyncStorage.getItem(key),
  set: (key, value) => AsyncStorage.setItem(key, value),
};

// storage.web.ts
export const storage: IStorage = {
  get: async (key) => localStorage.getItem(key),
  set: async (key, value) => localStorage.setItem(key, value),
};

// storage.desktop.ts
import { ipcRenderer } from 'electron';

export const storage: IStorage = {
  get: (key) => ipcRenderer.invoke('storage:get', key),
  set: (key, value) => ipcRenderer.invoke('storage:set', key, value),
};

詳細ガイド

クロスプラットフォームのパターンやプラットフォームに関する考慮事項について詳しくは、cross-platform.md を参照してください。

現在の開発ツールと最小プラットフォームバージョンについては、platform-requirements.md を参照してください。値を使用する前に、参照先のリポジトリファイルでバージョンを確認してください。

対象トピック：

• プラットフォーム拡張子とファイル構成
• platformEnv によるプラットフォームの検出
• プラットフォーム固有のインポート
• プラットフォームに関する考慮事項（Extension、Mobile、Desktop、Web）
• 実例
• クロスプラットフォームのチェックリスト

プラットフォームに関する考慮事項

拡張機能（Chrome、Firefox、Edge、Brave）

• MV3／サービスワーカーのライフタイム、権限、CSP、バックグラウンドスクリプトの制限

モバイル（iOS/Android）

• WebView の制限、ネイティブモジュール、バックグラウンド／フォアグラウンドの状態、ディープリンク

デスクトップ（Electron）

• セキュリティ境界、IPC 通信、ファイルシステムへのアクセス

Web

• CORS の制限、ストレージの制限、XSS の防止、バンドルサイズ

チェックリスト

• プラットフォーム固有のコードで正しいファイル拡張子を使用している
• 直接チェックする代わりに platformEnv を使用している
• 共通ロジックを共有ファイルに切り出している
• 対象のすべてのプラットフォームでテストしている

関連スキル

• /1k-coding-patterns - 一般的なコーディングパターン
• /1k-architecture - プロジェクト構成とインポート