ドキュメント概要
ネイティブのコントロールや機能を備えた、Web主体の画面を構築できます。このガイドでは、Web UIとNative UIを共存させるためにEngineをプラグインへ組み込む方法を説明します。まず共通のモデルで、ネイティブコンポーネントをWebレイアウト内に配置する仕組み、表示を担うレイヤー、ライブビューへの操作の復帰を理解してください。スクロールとオーバーレイは、この連携の例であり、別々の組み込みモデルではありません。
次に、自分の管理範囲に合う最小の組み込みを選びます。ネイティブビューとDOMコンテナを登録し、UIに必要なライフサイクル通知を接続します。高度なAPIを追加するのは、レンダラーのバッチ処理や配置をすでに管理している場合だけです。
解決したい問題から選ぶ
| 状況 | 入口 | 理由 |
|---|---|---|
| 対応可能なネイティブSDKビューをスクロールするWebフィードに配置したい | 基本登録とプラットフォームの制約 | DOMコンテナに関連付けます。ネイティブ追従と一時的な画像表示のどちらを使うかは、プラットフォームとレイアウトに依存します。 |
| Webモーダルでプラグインのネイティブタブバーを覆いたい | 基本登録、続いてフレームワークの組み込みガイド | ビューとDOMホストを登録し、オーバーレイのライフサイクルを接続します。Engineが表示の切り替えと復元を調整します。 |
| 非表示だったフォールバックが、古いトグルの選択状態で戻ってくる | 値のバインディング | 表示場所とは独立して、現在のネイティブデータをフォールバックホストへ反映します。 |
| 背景のツールバーボタンと前面モーダルのボタンで、ハンドオフのライフタイムを分けたい | レンダラーのサーフェス | 所有者を分け、1つのサーフェスを閉じたときに別のコントロールが復元されないようにします。 |
| 既存のレンダラーで更新が重複する、またはネイティブの確認応答が失われる | 更新キュー | 最新状態を読む処理を直列化し、ユーザー操作を再実行せずに接続を調整します。 |
全体の読む順序を以下に示します。各例で説明する処理をレンダラーが所有していなければ、高度なAPIは読み飛ばしてかまいません。
1. 仕組みを理解する
概念と制約では、投影でできること、ライブのネイティブUIやWebフォールバックとの違い、プラグインに残る責務を説明します。
2. 初期化して組み込む
基本的な初期化で最小の呼び出しと必須入力を確認し、次のプラットフォーム・フレームワークのガイドを1つ選びます。
- Capacitorプラグイン：依存関係、ネイティブプラグインのフック、イベント転送、終了処理。
- Cordovaプラグイン：Cordovaの起動とリソース処理を使う、同じ登録方式。
どちらの方式でも、2つ目のアプリ側Engineラッパーや、高度なレンダラーAPIは不要です。
3. 任意の動作を追加する
登録設定には、デフォルト値と各設定が必要になる状況をまとめています。必要な詳細だけを確認してください。
- 通知：外観や表示が変わったことをEngineへ伝えます。
- 値のバインディング：フォールバックホストのコンポーネントデータを、ネイティブの状態に合わせます。
- キャプチャのタイミング：ネイティブの外観が安定してからピクセルを準備します。
- Ionicオーバーレイ：共有のアプリ初期化関数を1つ使い、Ionicの被覆を連携させます。
- カスタムWebオーバーレイ：プラグインからpause/resumeを再エクスポートし、アプリが独自のオーバーレイの前後で呼び出せるようにします。
4. レンダラーを所有する場合に高度なAPIを使う
追加する前に高度なAPIを選択してください。これらのガイドは既存レンダラーの異なる要件に対応するもので、必須のセットアップ手順を順に並べたものではありません。
リファレンス
いずれの方式でも、実装時の契約と対応動作の確認に使えます。
貢献
開発とリリースでは、リポジトリ構成、ローカル検証、CI、公開を扱います。Engineの利用には必須ではありません。