はじめに

Web UIをネイティブレイヤーの上へ。
ネイティブからWebへのシームレスな投影で、見た目をそのままに。
概念図です。オーバーレイの表示中は、ネイティブの外観をWebレイヤーへ投影します。
ネイティブコントロールとWebコンテンツが、スクロール画面、画面遷移、オーバーレイを共有するWebViewアプリを構築できます。
 WebViewの境界を越えるWebViewアプリは、Webの柔軟なレイアウトとネイティブプラットフォームの機能を組み合わせます。しかし、ネイティブUIとWebページは別々の描画レイヤーに存在します。WebViewの上に置いたネイティブコントロールは、DOMのスクロール、クリッピング、重なり順に自動では追従しません。Webのモーダルは、z-indexを大きくするだけではその上に表示できません。
この境界を越えるには、ブリッジを呼び出すだけでは足りません。プラットフォームごとに、2つの描画システム間で配置、外観、入力、描画、復元を連携させる必要があります。その仕組みをコンポーネントごとに作り直すと、有用なデザインでも実装と保守に大きなコストがかかります。
WebView Native UI Engineは、この処理を再利用できるようにします。ネイティブUIとWeb主体の画面・操作を組み合わせ、2つのレイヤー間で表示を切り替える仕組みを共有できます。WebViewアプリで実現できることを広げ、それを実際に提供できるものにすることが目標です。
 実現できることWebで設計した画面内のネイティブUI。 ネイティブのツールバー、タブバー、プレーヤーコントロール、対応するSDKビューを、アプリのDOMレイアウトとナビゲーションに組み合わせます。
ネイティブコンテンツと共存するWebオーバーレイ。 ネイティブサーフェスの上にモーダルなどのオーバーレイを表示し、閉じたら操作可能なネイティブUIへ戻します。
ネイティブの外観を保つスクロールと遷移。 ネイティブサーフェスをキャプチャした外観をWebレイヤー上の動きに合わせて表示し、CSSでスタイルを再現する必要をなくします。
コンポーネントとプラットフォームをまたぐ共通基盤。 投影と復元のライフサイクルをiOSとAndroidで再利用し、組み込み先ごとに個別実装する負担を減らします。
 仕組み適切な場面では実際のネイティブビューを使い、Webレイヤーが表示を担う必要があるときは、準備済みの見た目をDOMへ投影します。ネイティブ側が再び表示を担えるようになったら、操作可能なネイティブビューを復元します。既存のDOMコンテナーが、アプリのレイアウトとレイヤー構造の中でWeb投影の配置先になります。
Engineはこの切り替えを連携させますが、ビューの作成と配置は組み込み先のレンダラーが引き続き担当します。投影画像が保持するのは外観であり、実際の操作や動画ではありません。キャプチャの可否とレイアウトの対応状況によって投影できる場面が決まり、利用できない場合には明示的なフォールバックがあります。詳細な動作契約と制約は投影の動作を参照してください。
 組み込みアプリは、Engineを組み込んだプラグインを通じてこれらの機能を利用します。Capacitor・Cordovaのプラグイン開発者は、既存のネイティブコントロールと公開APIを維持したまま、ライブラリ依存として追加できます。同じEngineがiOSとAndroidに対応します。IonicやAngularは必須ではなく、Ionicのオーバーレイ連携は任意です。
Capacitorプラグインガイド — 依存関係をインストールし、既存プラグインに登録、イベント、終了処理を追加します。
Cordovaプラグインガイド — Capacitorに依存せず、同じEngineをCordovaのライフサイクルとリソースハンドラーへ組み込みます。
ネイティブ側での登録によりWebランタイムが起動します。基本の組み込みでは、アプリからEngine専用の初期化処理を呼ぶ必要はありません。プラグインの通常のAPIと通知を維持してください。
現在のAPIは1.0未満の段階です。npmとネイティブ依存では、同じEngineバージョンに固定してください。Androidの配置にはAPI 23以上が必要で、合成済みのスナップショットはAPI 26以上で利用できます。
 関連資料投影の動作と高度な組み込み — DOM要件、ライフサイクル、フォールバック方針、任意のIonic対応、低レベルAPI。
開発とリリース — リポジトリ構成、検証、公開。
 ライセンスMIT。ライセンスの告知・帰属表示の要件を満たせば、商用利用、変更、再配布が可能です。Engineのライセンスによって、依存するアプリやプラグインのライセンスが変更されることはありません。
GitHubでこのページを編集