全体像 / ガイド
ネイティブUIを使う
アプリの状態・ルーティング・イベント処理を保ったまま、WebのコントロールをネイティブUIで表示します。
Capacitorプラグインには、用意されたNative UIを使う（現在iOS）、Dynamic Colorを使う（現在Android）、自分でNative UIを作る、という3つの機能があります。標準導入は最初の二つを組み合わせます。この章では用意されたコントロールを扱います。
通常のコントロールとVertical Barsはデフォルトで有効です。通常導入にはデバイスのレイアウト通知の接続も含みます。導入後はアプリで調整したいコントロールや動作の設定を読み進めてください。
アプリの動作はWeb側で管理する
Webの要素がコントロールの状態と操作を表します。Native UIは対応するコントロールを描画し、操作を既存のWebのハンドラーへ戻します。画面遷移・検証・アプリの状態更新はそのハンドラーが担当し、ネイティブ側に同じ処理を二重実装しません。
既存の画面に合う導入方法を選ぶ
Ionicで全体を導入するなら標準導入を使います。Native UIだけを導入する場合は、iOS 27テーマ・既存のWebテーマ・Ionicを使わないHTMLのいずれかを下の表で選びます。同じ機能の導入方法の違いなので、順番に三つとも実行する必要はありません。非対応のコントロールはWebで操作できる状態を保ち、既存のイベント処理も確認します。
Native UIの導入方法を選ぶ
| Ionicでの導入 | iOS 27テーマを使う |
|---|---|
| 既存テーマでの導入 | 既存のWebテーマを使う |
| HTMLでの導入 | Ionicを使わずHTMLで導入する |