Capacitorがプラットフォームの差異をどのように処理するか

Capacitor iOSとAndroid向けのアプリを同じコードベースで開発するのに役立つプラットフォーム固有の差異に対処し、ネイティブ機能の統合を簡素化し、プラットフォームガイドラインへの準拠を確保し、パフォーマンスを最適化します。主な特徴は次のとおりです。

• プラットフォーム検出：使用 Capacitor.getPlatform() To code
• Built-in プラグイン: iOS と Android の両方で機能する統合 API
• カスタム プラグイン: 一意の要件に対してネイティブ codeを追加
• UI アダプテーション: iOS (例: SF Symbols、丸いボタン) と Android (例: Material Icons、左寄せのボタン) のデザイン規則に従う フォント: iOS と Android の両方で使用できるフォント SF Symbols: iOS のデフォルトのアイコン
• Material Icons：設定を調整する capacitor.config.json 両方のプラットフォームに適用される。
• リアルタイムの更新 Capgo：アップデートを即時実行して、アプリストアの遅延を回避し、24時間以内に95％のユーザー採用率を達成する。

比較

Capacitorは、Webアプリとネイティブアプリの開発の間のギャップを埋め、クロスプラットフォームアプリの作成を容易にし、プラットフォーム固有の最適化を維持します。

クロスプラットフォーム開発: CapacitorJSを…に探索する

How Capacitor Code

Capacitor offers tools to manage platform-specific code, allowing developers to create tailored experiences for iOS and Android using a single API.

Detect Platforms in Code

With Capacitor’s built-in platform API, detecting the current platform is simple. The Capacitor.getPlatform() __CAPGO_KEEP_0__

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

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

__CAPGO_KEEP_1__ __CAPGO_KEEP_0__iOSとAndroidの両方に対応する独自の体験を作成するために、iOSとAndroidの両方に対応する独自の体験を作成するために単一の__CAPGO_KEEP_2__を使用することができます。 Face ID とAndroidは指紋認証に依存しています。プラットフォームの検出とともに、Capacitorの組み込みプラグインはネイティブの統合を簡素化しています。

プラットフォーム固有の機能

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 プラットフォーム固有の設定を定義するファイルを使用してください:

{
  "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__の設定が完了したら、各プラットフォーム向けにパフォーマンスを向上させるためにビルド設定を調整してください。

プラットフォーム固有のビルド設定

iOSとAndroid向けにアプリを最適化するためにビルド設定を微調整してください。

iOSの場合は、 Info.plist ファイル:

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

Androidの場合は、 android/app/build.gradle:

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

ビルド設定の重要な点を以下に示します。

iOSとAndroidの両方で Capgo

両方のプラットフォームのガイドラインに沿った Capacitor Capgo

Capgo Features

Capgoは、24時間以内に95%のアクティブユーザーがアップデートを実行するという実績があり、23.5万のアップデートを実行しています。 [1] これらの機能により、 アップデート管理 プラットフォーム

Capgoプラットフォーム管理

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

プラットフォームはAppleとGoogleのオーバー・ザ・エアアップデートの要件に準拠しています。 [1].

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

結論

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

プラットフォームの差異を効果的に管理することは、Capacitor でクロスプラットフォーム開発を強化します。プラットフォームの検出と設定のための組み込みツールを備えているため、開発者はiOSとAndroid両方に対してSmoothなエクスペリエンスを提供することができます。各プラットフォームの独自のデザインスタンダードと機能を尊重することができます。

プラットフォームの適切な管理に焦点を当てると、開発チームは更新を迅速にリリースし、ユーザーの満足度を向上させることができます。ツールとしては、Capgo が、均一なプラットフォームの扱いが更新の成功率を高め、ユーザーのエクスペリエンスを向上させることを示しています。 [1].

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

これらの洞察は、実践的な改善を導くことができます。

次のステップ

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

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

プラットフォーム管理の成功は、適切なツールを使用し、プラットフォーム固有のガイドラインに従うことによって達成されます。強力な検出と管理戦略に焦点を当てると、開発者はiOSとAndroid両方でアプリが平滑に動作することを保証できます。

Capacitorがプラットフォームの差異をどのように処理するかについては、続きます

__CAPGO_KEEP_0__を使用している場合 Capacitorがプラットフォームの差異をどのように処理するかについては、続きます __CAPGO_KEEP_0__を使用して、ネイティブメディアとインターフェイスの動作を計画する場合、__CAPGO_KEEP_1__-live-activitiesと接続する capgo/capacitor-live-activitiesを使用する native capability in Using @capgo/capacitor-live-activities について @capgo/capacitor-live-activities native capability in Using @capgo/capacitor-live-activities について Using @capgo/capacitor-video-player native capability in Using @capgo/capacitor-video-player について @capgo/capacitor-video-player native capability in Using @capgo/capacitor-video-player について Using @capgo/capacitor-native-navigation native capability in Using @capgo/capacitor-native-navigation について