はじめに

Native UIをWebアプリへシームレスに組み込む。

Webの柔軟性とネイティブプラットフォームのコントロールや機能を組み合わせて画面を構築できます。WebView Native UI Engineは、Webのレイアウトとナビゲーションを維持しながら、それらを一体の体験として連携させます。

Web UIとNative UIを、ひとつの体験に。

ネイティブコンポーネントも、周囲の画面の一部として自然に動作すべきです。たとえば次のような場面です。

• 一緒にスクロールする。 読者がフィードをスクロールすると、ネイティブ広告が周囲のWebコンテンツとともに移動します。
• レイヤーを重ねる。 ネイティブのナビゲーションコントロールの上にWebアラートを表示します。閉じると、そのコントロールを再びネイティブで操作できます。

スクロールとオーバーレイは、画面のライフサイクル全体でWeb UIとNative UIを共存させるという、より大きな目的の例です。

オーバーレイ表示の概念図です。Engineはネイティブの外観をWebレイヤーへ投影します。実際のネイティブビューをDOM内で並べ替えるものではありません。

https://github.com/user-attachments/assets/2768f014-7325-49c7-b848-25052756c36dhttps://github.com/user-attachments/assets/2768f014-7325-49c7-b848-25052756c36d

Webアラートの下にあるネイティブコントロールと、それに続いてWebコンテンツとともにスクロールするネイティブ広告です。iOS Simulatorで収録しています。

プラグイン開発者のためのライブラリ

WebView Native UI Engineは、CapacitorとCordovaのプラグイン開発者向けライブラリです。プラグインに組み込むことで、各アプリが描画レイヤー間の連携を独自に実装せずに、Web主体の画面へネイティブコンポーネントを取り込めます。

WebViewの上にあるネイティブビューは、DOMのスクロール、クリッピング、重なり順には自動で参加しません。Webモーダルのz-indexを高くするだけでは、その上に表示できません。Engineがこの境界を越えて表示を連携させるため、プラグインが提供するコントロールやネイティブ機能に集中できます。

ツールバー、タブバー、コントロール、キャプチャ可能なSDKビューに利用できます。既存のプラグインAPIとビジネスロジックは維持できます。アプリは利用するプラグインを通じて、これらの機能を得られます。

仕組み

プラグインはネイティブビューと、Webレイアウト内の配置を定めるDOMコンテナを提供します。EngineはDOMの計測、対応するネイティブスクロール追従、ネイティブ表示とWeb表示の切り替えを調整します。

Webレイヤーが表示を担う必要がある場合、Engineは準備済みのネイティブコンポーネントの画像をそのコンテナに表示します。ネイティブ表示に戻せる状態になったら、操作可能なビューの配置と復元を調整します。

この画像は一時的な見た目の投影であり、もうひとつの操作可能なコントロールではありません。クリックの転送やライブ動画の再生は行いません。Liquid Glassのハイライトの違いを含め、キャプチャの可否やプラットフォームの描画上の制約は引き続き適用されます。適切な画像を利用できない場合は、組み込み側で設定したWebフォールバックを使います。コンポーネントを選ぶ前に、概念と制約とプラットフォームの対応状況を確認してください。

開発を始める

EngineはiOSとAndroidに対応しています。IonicとAngularは任意です。ネイティブビューとそのDOMコンテナから始め、UIに必要なライフサイクル通知を接続します。組み込みガイドでは、ランタイムの起動と任意のフレームワーク対応を説明します。

npmとネイティブ依存でEngineのバージョンを揃え、再現可能なビルドのために依存関係のロックファイルを保持してください。Androidの配置にはAPI 23以上が必要で、合成済みスナップショットはAPI 26以上で利用できます。

任意のIonic連携

Engine対応プラグインを利用するIonicアプリでは、@webview-native-ui/engine/ionicエントリーポイントが、Ionicオーバーレイのライフサイクルイベントをネイティブ投影へ接続します。

import { enableSupportIonicOverlays } from '@webview-native-ui/engine/ionic';

enableSupportIonicOverlays();

プラグインがすでに有効化している場合を除き、アプリの起動時に一度呼び出してください。直接インポートするアプリでは、@webview-native-ui/engineを直接依存に追加する必要があります。この共通のフレームワーク連携がプラグイン間の被覆を調整します。各プラグインは自身の表示APIを引き続き管理します。設定、対応するオーバーレイ、レンダラー用ヘルパーは、Ionicオーバーレイ対応を参照してください。

貢献

リポジトリの開発、検証、公開については、開発とリリースを参照してください。

ライセンス

MITです。ライセンスの通知と帰属表示の要件を満たせば、商用利用、変更、再配布が可能です。Engineのライセンスは、依存するアプリケーションやプラグインのライセンスを変更しません。

任意の共有コントロールランタイムとアダプター間の責任範囲は、共有コントロールを参照してください。