How Capacitor Handles Platform Differences

Capacitor iOSとAndroid向けのアプリを同じコードベースで開発するのに役立つプラットフォームの差異を解決するためのソリューションです。

• プラットフォーム検出: Capacitor.getPlatform() プラットフォーム固有のcodeを適用するには
• 組み込みプラグイン:カメラ、ストレージ、位置情報などの機能に統一されたAPIを提供
• カスタム プラグイン: 一意の要件に対してネイティブ code を追加します。
• UI の調整: iOS (例: "SF Symbols", ラウンドド ボタン) と Android (例: "Material Icons", 左寄せのボタン) のデザイン規則に従います。 アイコン: iOS (例: "SF Symbols", ラウンドド ボタン) と Android (例: "Material Icons", 左寄せのボタン) のデザイン規則に従います。 設定: 両方のプラットフォームの設定を調整します。
• ライブ アップデート: 両方のプラットフォームの設定を調整します。 capacitor.config.json Live Updates with Capacitor
• for both platforms. Capgo__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

Capacitor bridges the gap between web and native app development, making it easier to create cross-platform apps while maintaining platform-specific optimizations.

クロスプラットフォーム開発：CapacitorJSを…

どうして Capacitor プラットフォームを管理するCode

Capacitorは、プラットフォーム固有のcodeを管理するツールを提供し、iOSとAndroid向けに独自のAPIを使用して、開発者が単一のAPIでカスタマイズされたエクスペリエンスを作成できるようにします。

Codeでプラットフォームを検出する

Capacitorの組み込みプラットフォームAPIを使用すると、現在のプラットフォームを検出することが簡単です。 Capacitor.getPlatform() メソッドは、実行中の環境を識別し、条件付きロジックを適用するのを容易にします。

import { Capacitor } from '@capacitor/core';

const platform = Capacitor.getPlatform();
if (platform === 'ios') {
  // Code specific to iOS
} else if (platform === 'android') {
  // Code specific to Android
}

このアプローチは、特に 生体認証の場合に便利です。iOSでは Face ID and Android relies on Fingerprint Authentication. Along with platform detection, Capacitor’s built-in plugins simplify native integration.

指紋認証

Capacitorには、プラットフォーム固有の差異をスムーズに処理するためのコアプラグインが付属しています。これらのプラグインは、ネイティブ実装の複雑さを管理しながら、統一されたJavaScriptインターフェイスを提供します。

各プラグインは、プラットフォームのネイティブAPIを自動的に使用するため、スムーズなパフォーマンスと機能性を保証します。

カスタムプラットフォームプラグインの作成

ビルトインのプラグインが必要な要件に合わない場合、特定のネイティブAPIにアクセスするためのカスタムプラグインを作成できます。ここでは、以下の手順に従ってください。

1. プラグインの定義

   @Plugin({
     name: 'CustomFeature',
     platforms: ['ios', 'android']
   })

2. ネイティブの追加Code

   @PluginMethod()
   async customFunction(): Promise<void> {
     if (Capacitor.getPlatform() === 'ios') {
       // Add iOS-specific code
     } else {
       // Add Android-specific code
     }
   }

3. プラットフォームハンドラーの実装

   • iOS (Swift):

     @objc func customFunction(_ call: CAPPluginCall) {
       // Add native iOS functionality
     }

   • Android (Kotlin):

     @PluginMethod
     fun customFunction(call: PluginCall) {
       // Add native Android functionality
     }

カスタムプラグインは、APIを簡単に使用し、パフォーマンスと機能性を保証するネイティブ機能にアクセスできます。これにより、開発プロセスを複雑にしないことが保証されます。

プラットフォーム固有のUIガイドライン

iOSとAndroidのデザインルール

iOSとAndroid向けのデザインを作成する際は、各プラットフォームのネイティブなデザインパターンに従うことが重要です。各プラットフォームのユーザーは、ナビゲーション、フォント、ボタン、ヘッダー、アイコンなどについて異なる期待をしています。ここでは、それらを比較してみましょう。

クロスプラットフォームデザインスタンダード

各プラットフォームには独自のルールがありますが、両方で一貫したブランドアイデンティティを維持することは重要です。ここでは、どのようにして一貫性を保つことができるかを説明します。

const sharedStyles = {
  primaryColor: '#007AFF', // iOS blue
  androidPrimaryColor: '#6200EE', // Material Design purple
  borderRadius: Capacitor.getPlatform() === 'ios' ? '10px' : '4px'
};

:root {
  --app-header-height: var(--platform-header-height, 56px);
  --app-safe-area-top: var(--platform-safe-area-top, 0px);
}

Capacitor を使用すると、プラットフォーム固有のUIコンポーネントを統合することができ、機能の統一性を維持することができます。また、システム全体の設定、例えばダークモードとダイナミックタイプの管理も可能です。プロセスを完了するには、プラットフォーム固有のビルド設定がこれらのガイドラインと一致していることを確認してください。

プラットフォームの設定と構成

プラットフォームを管理した後、プラットフォーム code の適切な構成が必要です。両方のiOSとAndroidでアプリが正常に動作するようにするためです。

プラットフォーム設定 capacitor.config.json

を使用して capacitor.config.json __CAPGO_KEEP_0__ファイルで、プラットフォーム固有の設定を定義してください。

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "ios": {
    "contentInset": "always",
    "backgroundColor": "#ffffff",
    "scheme": "myapp",
    "preferredContentMode": "mobile"
  },
  "android": {
    "backgroundColor": "#FFFFFF",
    "allowMixedContent": true,
    "captureInput": true,
    "webContentsDebuggingEnabled": true
  }
}

ここでは、考慮すべき設定オプションがいくつかあります。

__CAPGO_KEEP_0__

Platform-Specific Build Settings

各プラットフォームのパフォーマンスを向上させるために、ビルド設定を調整してください。

iOSとAndroidのアプリを最適化するためにビルド設定を調整してください。 Info.plist iOSの場合は、

<key>NSCameraUsageDescription</key>
<string>Required for document scanning</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Required for store locator</string>

ファイル: android/app/build.gradle:

android {
    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 33
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt')
        }
    }
}

Androidの場合は、

アプリを更新する Capgo

維持 Capacitor アプリ iOS と Android の両方で効率的に更新されるアプリは重要です。 Capgo は、両方のプラットフォームのガイドラインに沿ったライブ アップデート システムを提供します。

Capgo の機能

Capgoは、24時間以内に95%のアクティブユーザーが更新を実行した23.5万の更新を実行 [1]これらの機能により アップデート管理 iOS、Android両方のプラットフォームで滑らかで効率的な体験を提供します。

Capgo プラットフォーム管理

Capgoのチャンネルシステムにより、更新の管理が容易になります。開発者はiOS向けの機能をベータユーザーとともにテストし、Android向けの更新を段階的にリリースし、パフォーマンスメトリクスをトラッキングできます。

AppleとGoogleのオーバー・ザ・エア更新要件に準拠しています [1].

現在、750の製品アプリがCapgoに依存しており、82%のグローバル更新成功率を維持しています [1]CI/CD統合により、デプロイメントが簡素化され、ロールバック機能により、問題が発生した場合に前のバージョンに戻すことができます。リアルタイム分析により、更新パフォーマンスに関する洞察を得て、アプリの安定性を維持できます。

結論

プラットフォーム管理の利点

Capacitorでプラットフォームの差異を効果的に管理することで、クロスプラットフォーム開発が向上します。プラットフォームの検出と設定のための組み込みツールを備えているため、開発者はiOSとAndroid両方で滑らかな体験を提供することができます。

プラットフォーム管理に重点を置くことで、開発チームは更新を迅速にリリースし、ユーザーの満足度を向上させることができます。Capgoなどのツールは、一貫したプラットフォームハンドリングが高い更新成功率と良好なユーザー体験につながることを示しています [1].

「私たちはアジャイル開発を実践しており、@Capgoはユーザーに継続的に提供するmission-criticalなツールです！」
– Rodrigo Mantica [1]

これらの洞察は、実際の改善を実現するための指針となります。

次のステップ

これらの利点を最大限に活用するには、以下の戦略を実施することを検討してください。

Capgoのようなツールを使用することで、開発者はワークフローを改善することを目指すことができます。エンドツーエンド暗号化やCI/CD統合などの機能により、チームは一貫性を維持しながら効率的に更新を展開できます。

プラットフォーム管理における成功は、適切なツールの使用とプラットフォーム固有のガイドラインへの従順に依存します。開発者は、iOSとAndroid両方でアプリが平滑に動作することを保証するために、強力な検出と管理戦略に焦点を当ててください。