MiniApp標準化ホワイトペーパー第2版

MiniAppsの普及は、シェアサイクルを煩雑な アプリケーションではなく、シームレスなサービスにするのに役立ちます。

• ユーザーは自分のモバイルデバイス上で任意のMiniAppプラットフォームを選択します。これは通常、すでにログイン済みのスーパーアプリです。
• ユーザーはスーパーアプリ内で、シェアサイクルに貼り付けられたQRコードラベルをスキャンします。
• ホストされたアプリは、自動的にシェアサイクルMiniAppへナビゲートし、 自転車を即座に解錠します。
• 到着すると、ユーザーはMiniApp上で自転車を施錠します。
• 取引が完了し、支払い詳細のメッセージがユーザーに送信されます。

ユーザーにとって、MiniAppsはいくつかの観点から利便性をもたらします。

MiniApp開発者は、プログラミング言語としてHTML/CSS/JavaScriptをそのまま使うことができますが、MiniAppは より柔軟であるため、日常業務で複雑な機能を素早く開発するのに優れています。

このMiniAppは、AI技術で動物を認識するAR動物園を構築しようとするものです。開発者は、 ネイティブ機能または高度な機能へのアクセスを提供するいくつかのコンポーネントやAPIを追加することで、 それを容易に実現できます（たとえば、画像認識、AR 3D動物モデルレンダリング、音声 合成用の音声API、地図SDKによって提供されるARナビゲーションなど）。

MiniAppsは、検索エンジン、ホストされた アプリ内のMiniAppストア、またはQRコードによって発見できます。

開発者にとって、MiniAppsに取り組む動機は非常に明確です。

MiniAppの目標の1つは、異なるプラットフォーム間で情報とサービスを接続することです。そのため、 スマート自動車、音声制御スピーカー、スマートTVなどのIoTアプリケーションに適しています。

現在では、一部のMiniAppsを車載画面やシステムに適合するように変換することが可能です。また、いくつかの MiniAppベンダーは、さまざまな車種にアプリケーションを配布またはアップグレードするのを支援するために、 車載システム向けに特別に設計されたMiniAppプラットフォームを構築しています。これにより、数百万のWeb開発者が 自動車アプリケーションエコシステムに参加できるようになります。

これらの自動車向けMiniAppsは、給油、洗車、 電子料金収受、保険、レストラン予約、エンターテインメントなど、多くのユーザーシナリオに対応できます。たとえば、 システムが残燃料が20%未満であることを検出した場合、所有者に給油 MiniAppを推奨できます。ユーザーは最寄りのガソリンスタンドの情報を取得し、そこへ向かって MiniApp内での支払いを含めた給油を完了できます。つまり「車両から降りずに給油」できます。

IoTデバイスは、MiniAppsを実行するもう1つの担体になりつつあります。IoT向けMiniAppは、 複数のIoTデバイスプラットフォームおよびオペレーティングシステム間の相互運用性を可能にすることを意図しています。 複数のIoTデバイスプラットフォームやIoTオペレーティングシステム間の違いに対処するのではなく、 IoT向けMiniAppsを導入することで、開発者はIoT デバイス上のアプリケーション開発だけに集中すればよくなります。

一例として、HVAC（暖房、換気、および空調） アプリケーションのスイッチパネルがあります。これは画面と複数の物理ボタンを備えています。この場合、 IoT向けMiniAppを導入することで、スイッチパネルの画面UIをWeb 技術を用いて設計および開発し、HVAC情報を表示できます。たとえば、物理ボタンによって入力された目標温度値と、 測定されたリアルタイム温度値を表示できます。

もう1つの例は、タッチスクリーン付きスマートスピーカーです。この場合、IoT向けMiniAppを導入することで、 スマートスピーカーのタッチスクリーンUIをWeb技術を用いて設計および開発し、 音楽や動画の再生、家庭内IoTデバイスの制御、オンラインショッピングを行うことができます。

ユーザー操作がタッチスクリーンに依存する携帯電話上で動作するMiniAppsとは異なり、 TV上で動作するMiniAppsのユーザー操作は、TVリモコンのキーボードとTV画面の フォーカスに切り替わります。

TV向けMiniAppにより、ユーザーはEコマースMiniAppを通じてTV上で商品を購入できます。

また、ユーザーはゲーミングMiniAppsを通じてTV上でゲームをプレイすることもできます。

MiniAppでは、ビュー層は通常ロジック層から分離されています。

ビュー層は、Webコンポーネントやネイティブ コンポーネントの表示を含むMiniAppページのレンダリングを担当します。これはハイブリッドレンダリングと見なすことができます。たとえば、一部のWebコンポーネントは WebViewでサポートされていない、またはパフォーマンス上の制限がある可能性があるため、MiniAppは地図、動画などのネイティブ コンポーネントにも依存します。

ロジック層はJavaScript Workersで実装されます。Workerは、MiniAppのイベント 処理、API呼び出し、ライフサイクル管理を担当します。

拡張ネイティブ機能は通常、ホストするネイティブアプリまたはOSに由来し、支払い、ファイル 処理、画像スキャン、電話発信などを含みます。これらの機能は特定のAPIを通じて呼び出されます。 MiniAppがネイティブAPIを呼び出すと、JavaScript Bridgeを介して、API呼び出しを拡張ネイティブ機能に転送して さらに処理します。そしてJavaScript Bridgeを介して、拡張ネイティブ機能から結果を取得します。

Workerは各Renderに対して接続を確立し、レンダリングが必要なデータをRenderに転送して さらに処理します。

MiniAppページ内のコンポーネントによってイベントがトリガーされると、このページのRenderはイベントを Workerに送信してさらに処理します。同時に、RenderはWorkerから送信されたデータを待機し、 MiniAppページを再レンダリングします。

レンダリングはステートレスと見なすことができ、すべての状態はWorkerに保存されます。

ビュー層とロジック層を分離する利点には、次のものがあります。

• 複数のMiniAppページ間でのデータ共有と相互作用に非常に便利です。
• MiniAppのライフサイクル内で同一のコンテキストを持つことで、 ネイティブアプリ開発の背景を持つ開発者に類似したコーディング体験を提供できます。
• レンダーとJavaScript Workerを分離し並列に実装することで、 JavaScriptの実行がページレンダリングに影響したり遅くしたりする状況を防ぐことができ、 レンダリング性能の向上に役立ちます。

MiniAppプラットフォームは、開発者が見栄えのするUIを構築するのを支援する多くのコンポーネントを提供します。これには、 view、form、imageのような基本的な コンポーネントや、地図のような高レベルコンポーネントが含まれます。

MiniAppベンダーはまた、開発者がWebとネイティブの両方の 機能にアクセスするための多くのAPIを提供します。これには、UI表示API、画像処理APIなどの基本的なインターフェースや、 ユーザーアカウントAPI、地図API、支払いAPIのような高度なものが含まれます。

APIは通常、コンポーネントと連携して動作します。ユーザーがMiniAppページ上の特定のコンポーネントをクリックすると、 関連するAPIを呼び出してユーザーの操作を完了し、必要に応じて現在のMiniAppページを更新します。

ネイティブアプリと同様のユーザー体験を得るため、MiniAppのリソースは通常まとめてパッケージ化されます。 MiniAppパッケージをダウンロードしてインストールした後、MiniAppに必要なすべての静的リソース（すなわち、ページ テンプレート、CSS、JavaScriptファイル、その他の文書）はユーザーの デバイス上に保持されます。これらのリソースは、次回の更新まで余分なダウンロードなしに常に利用できます。

MiniAppパッケージは圧縮ZIPアーカイブであり、次のものを含みます。

• パッケージのルートディレクトリーに配置された構成文書。構成ファイルには、 次の内容を含めるべきです。
  • MiniApp全体の一般的な説明、および
  • ページの設定と起動のための、対応するパスと構成を含む ページの説明。
• アプリレベルのライフサイクルコールバックを処理するスクリプトを含む、1つのアプリレベルロジックファイル。
• ページ構造用のテンプレートコード、ページ スタイリング用のCSSスタイルシート、ページロジック用のJavaScriptコードを含む1つまたは複数のファイル。
• 完全性検証のためのデジタル署名サポート。

検索および実行時に特定のMiniAppを見つける目的で、MiniAppは パッケージ名またはプラットフォーム上の識別子を持たなければなりません。ユーザーが認識するためのアイコンも必要です。

MiniAppページに加えて、MiniAppsは情報の断片またはMiniApp ウィジェットとして表示することもできます。この形式では、開発者は自分たちのサービスやコンテンツをさまざまなホストシナリオ、 いわゆるホスト環境（例: アシスタント、デバイスのグローバル検索など）に配置できます。この機能は、 MiniAppのサービスやコンテンツを具体的なシナリオと結び付け、ユーザーに さらなる利便性を提供します。

たとえば、ユーザーが旅行の列車チケットを購入した場合、スマートアシスタント上のMiniAppウィジェットは列車の最新状況を即座に表示します。 ユーザーはこのウィジェットをクリックし、より詳細な 情報を得るために全画面のMiniAppページへ移動できます。

MiniAppページの場合と同様に、ウィジェットもURIスキームによって記述されます。ホスト環境は、 URIパスを通じて読み込むMiniAppパッケージと対応するウィジェットを指定し、 URIクエリパラメーターを通じてデータをウィジェットに渡します。ウィジェットが読み込まれると、ホスト環境内で 表示およびレンダリングされます。セキュリティと独立性を確保するため、ホストとウィジェットからのデータ、および 異なるウィジェットからのデータは分離されます。

多くのシナリオでは、ウィジェットはより複雑な操作のためにMiniAppページを開くことができます。そのような場合、 ウィジェットは対応するMiniAppとデータを共有する必要があることがよくあります（例: 一貫したログイン 状態を維持する）。したがって、ウィジェットとMiniAppのデータは双方からアクセスできます。言い換えると、 MiniAppウィジェットとページは同じデータアクセス権を持ちます。

ウィジェットの目標の1つは、ユーザーに従来のアプリという概念を忘れさせ、 サービスという形式でユーザーのニーズを真に満たすことです。そのため、すべてのアプリ呼び出し経路に加えて、ウィジェットは、 テキストキーワード、音声 分析、画像認識、コードスキャン、イベントインテントなど、異なるシナリオで異なる方法によってトリガーできます。

注: ウィジェットは中国市場ではQuick Appによって実装されています。

MiniAppsを発見、起動、アクセスするための入口は複数あります。複数の WebView内のWebコンテンツとは異なり、同じMiniAppに対しては1つのインスタンスだけが作成されるため、MiniAppはその状態と データをグローバルに一貫した形で保持します。たとえば、あるユーザーが初めてQRコードの入口からMiniAppを 開いてログインした後、次回MiniAppストアのような別の入口から戻った場合でも、 ユーザーはログイン状態のままです。

MiniAppsのエントリーには、次のものが含まれますが、これらに限定されません。

• MiniAppマーケットプレイス
• 検索エンジン
• スマートアシスタント
• QRコード
• SMS/テキスト
• 物理オブジェクト（AI付き）
• ブラウザー
• カレンダー項目
• 音声メッセージ（AI付き）

MiniAppsは、実践を通じて有効であることが証明されたいくつかの仕組みにより、 パフォーマンスとユーザー体験の向上を試みています。

パッケージング

MiniAppのコンストラクターにより、ユーザーはMiniAppを初めて開くときだけ パッケージをダウンロードすればよく、その後はMiniApp内の静的リソース（例: ページ、 スクリプト、CSS）を再度ダウンロードする必要がないため、以降のページの読み込みや 遷移がより効率的になります。この機能はユーザー体験を向上させ、ネットワークトラフィックを 節約します。

同時に、MiniAppには事前ダウンロードの仕組みがあり、MiniAppパッケージを 事前にダウンロードしたり、最初のページのために個別に事前ダウンロードしたりできます。また、ダウンロード中に並列でストリーミング 展開を行うことで、MiniApp起動 段階の所要時間を最小化し、初回起動時の最初のページのパフォーマンス低下とのバランスを取ります。

複数のレンダリングビュー

MiniAppはレンダービュー間でネイティブのページスタック管理を使用し、ページ切り替えは ネイティブコードによって駆動されます。そのため、ページ内のジェスチャー操作や ページ間の切り替えは、ネイティブとまったく同じ滑らかな体験を実現できます。

ビュー層とロジック層が分離されているため、ビュー層は独立してレンダリングできます。 JavaScriptロジックコードにブロックされることなく、ページのレンダリング速度を 大幅に向上させることができます。

ランタイム環境の事前構築と再利用

MiniAppのランタイム環境は通常、MiniAppの起動前に事前構築されるため、 MiniAppの起動時間が短縮されます。事前構築される内容には、レンダリングビュー、静的リソース、 開発者定義のプリフェッチリクエスト、MiniAppsランタイムコンテナーが含まれます。MiniAppが アクティブ化されると、事前構築されたレンダリングビューを引き継ぎ、その後、次のために新しいレンダービューを キャッシュプール内に事前構築し続けます。レンダービューの数には制限があります。 いずれかのレンダービューが閉じられた場合、または数の制限を超えた場合、 最も古く開かれたレンダービューが破棄されます。MiniAppアプリケーションが終了すると、ランタイム は破棄され、アプリケーション環境とリソースを再利用できます。

事前定義されたコンポーネントとAPI

MiniAppプラットフォームは、非常に豊富なコンポーネントとAPIを提供します。 これらのコンポーネントとAPIは通常、開発者のパフォーマンス 要件を満たすようによく設計されています。

JavaScriptフレームワークのプリセットとホットリロード

MiniAppのランタイム環境には、ネイティブコードによって提供される基本機能と フレームワークという2つの主要部分が含まれます。これには、開発者APIとJavaScriptによって実装されたいくつかのコンポーネントが含まれます。 JavaScriptフレームワークはネイティブアプリに組み込まれており、MiniAppを実行する前に MiniAppランタイム環境にあらかじめ読み込まれます。JavaScript フレームワークはホットリロード（使用中の再読み込み）が可能であり、パフォーマンス向上のための多くの可能性をもたらします。

MiniAppプラットフォームは、ユーザーがMiniAppにログインするためのさまざまな方法を提供します。ユーザーが すでに本人認証済みでプラットフォームにログインしている場合、 プラットフォームのログイン情報をMiniAppと共有でき、MiniApp独自のアカウント システムとプラットフォームのアカウントシステムとの相互運用を迅速に実現できます。これにより、MiniAppへのアクセスプロセスがより円滑になります。

たとえば、SMS認証を用いた従来のログインプロセスはより時間がかかります。ユーザーは まず携帯電話番号を手動で入力し、SMSを受信した後に認証コードを入力してログインする必要があります。 MiniAppの利点は、開発者がプラットフォームによって提供されるコンポーネント/APIを使用して、 ユーザーの携帯電話番号を安全かつ便利に取得できることです。ユーザーに対して 携帯電話番号によるワンクリックログインプロセスを認可するよう促すことで、 ユーザーにとって全体のプロセスを簡単にし、開発者にとってユーザー情報を取得するコストを削減します。

MiniAppのサブパッケージ化は、MiniAppパッケージの開発プロセスを改善するためのビルド機構です。 これは、開発者が異なる業務モジュールを異なるサブパッケージに分割するのに役立ちます。

開発者にとって、MiniAppには既定でメインパッケージがあります。これは起動ページファイルと 共通リソースを含みます。サブパッケージは、開発者の業務 モジュールを柔軟に分割するビルド形式です。ユーザーは、必要に応じて異なるサブパッケージを読み込んだ後、特定のページを開くことができます。

ユーザーにとっては、MiniAppを起動すると、メインパッケージが既定でダウンロードされ、 メインパッケージ内のページが起動されます。ユーザーがサブパッケージ内のページを開く必要がある場合、 MiniApp Runtimeはサブパッケージのダウンロードと読み込みを開始し、サブパッケージページを起動します。

このようなサブパッケージのビルド機構により、複数の チームが共同開発する際の分離と協業がより良くなります。ユーザーがMiniAppsを使用する際には、サブパッケージ化の仕組みによって MiniAppホームページの読み込み速度を向上させ、必要に応じてサブパッケージを読み込み、ユーザー体験を最適化できます。

MiniAppにおいて、アドオン/拡張は、既存の MiniAppに特定の機能を追加するカプセル化されたモジュールであり、コンポーネント、JavaScriptモジュール、またはページであり得ます。アドオン/拡張は、 単独で実行されるのではなく、MiniApp内でのみ実行できます。開発者は MiniAppと同じようにアドオン/拡張を開発し、それをMiniAppプラットフォームにアップロードして、他のMiniAppsが 再利用できるようにできます。

MiniAppは、アドオン/拡張によって次のことをサポートします。

• コード再利用によって開発コストを削減し、開発者が新機能を容易に追加できるよう支援する
• 開発者が意識しなくても機能を自動的に更新する
• 未使用の機能を読み込まないことでMiniAppsのパッケージサイズを削減する

アドオン/拡張の仕組みは、MiniApps開発の障壁を下げ、 より多くの開発者をMiniAppエコシステムにもたらします。

MiniAppはWebレンダリングとネイティブレンダリングのハイブリッドソリューションです。 Webとネイティブからのレンダリング結果を組み合わせる良い方法があれば非常に有用です。

提案: MiniAppには、ネイティブのレンダリング結果をWeb レンダリング結果へ統合するのを支援する標準化されたAPIが必要です。

MiniAppは、ユーザーがネイティブアプリを使用しているときと同様の体験を得られるよう、 ページ切り替え中にトランジションアニメーションを提供したいと考えていますが、現状ではそれはほぼ不可能です。

提案: MiniAppには、MiniAppページ切り替え中にトランジションアニメーションを追加するためのAPIが必要です。

MiniAppは、標準化された配布形式を通じて、複数のMiniAppホスティングプラットフォーム向けの パッケージおよび解析規約を形成できます。現在、各MiniAppホスティングプラットフォームは異なる 開発ツール（異なるパッケージング方法）を提供しており、MiniAppは異なる MiniAppホスティング環境で異なる方法で解析されます。

提案: MiniAppは、配布 プロセス中には実際にはパッケージ化（圧縮）されたファイル集合です。統一されたファイル接尾辞でMiniApp（.ma）を記述し、 .maファイルを作成する方法と.maファイルを解析する方法を指定できます。

MiniApp内の人気ページについては、別のMiniAppから参照される可能性があり、 ユーザーが訪問したときに正確に呼び出されることが期待されます。

提案: MiniAppにアクセスするための標準化されたプロトコル（URIスキーム）を定義する。

AndroidウィジェットやApple dashboardのように、ユーザーはWebページやアプリページを開くことなく、 MiniAppウィジェットで直接情報を取得したりタスクを完了したりできます。MiniAppウィジェットは、 デスクトップやダッシュボードなど、Webブラウザーの外部の環境に表示できます。

提案:

• MiniAppウィジェットは、WebViewまたはネイティブアプリ ページのいずれかのホスト環境内に表示できます。ホスト環境は、パッケージとウィジェットページを記述する、 対応するURIパスでウィジェットを読み込みます。
• MiniAppウィジェットは、ローカルデータまたはサーバーからのデータにアクセスできます。同時に、MiniAppウィジェットは 同じパッケージ内のMiniAppと通信できます。
• MiniAppウィジェットはインタラクティブであるべきです。つまり、任意のユーザー 行動/操作に応答できるべきです。MiniAppウィジェットはWebページまたはアプリページを開く能力を持つべきです。

MiniAppは、MiniAppページのTime to Interactive（TTI）が完了した時点を知る必要があります。

提案: MiniAppページのTime to Interactiveが 完了したことを通知する標準化されたイベント。

3Dモデルは豊富なディテールによってますます人気になっています。ARと組み合わせることで、2Dよりも 優れたユーザー体験を提供できます。ビジネスケースにはオンラインショッピング、 広告、教育などが含まれる可能性があります。しかし、現在のWebには、3Dモデルを扱うための標準的で便利な方法がありません。 この文書では、音声、動画、画像を対応するHTMLタグで扱うのと同様に、 3Dモデルを直接扱うHTMLタグを定義することを提案します。

• 360度ビュー

  ユーザーはジェスチャーによって、さまざまな角度から3Dモデルを表示できます。また、3Dモデルは 拡大/縮小することもできます。全画面で表示することも、Webページに埋め込んで 他のHTMLコンテンツと一緒に表示することもできます。

• ARで表示

  ユーザーはカメラを使って3Dモデルを現実世界に配置できます。ユーザーはモデルを配置するために異なる 場所を指定できます。

提案: Web上で3Dモデルを指定し、ARによる インタラクティブな3Dコンテンツを可能にする<xmodel>要素。

顔トラッキングは多くの3Dシナリオで使用できます。

ライブ動画における顔エフェクト

ライブ動画内の顔にエフェクトを追加します。これらのエフェクトには、全画面フィルター、顔の変形 とメイク、2Dステッカー、3Dヘッドドレスなどが含まれます。これらのエフェクトの多くは、動画ソースからのリアルタイム 顔トラッキングに大きく依存します。

ゲーム

ゲーム開発者は、トラッキングされた顔に基づいてゲーム戦略を設計できます。たとえば、目がまばたきしたときに特定の ゲームロジックをトリガーしたり、落下する果物が開いた口の中にあるかを確認したりできます。

バーチャルメイク

ユーザーが商品ページ上で口紅、アイシャドウ、眼鏡、帽子を試せるようにして、判断を助けます。

提案: video要素を入力として使用し、各 フレームで顔トラッキング出力を更新するFace Tracking API。これには次が含まれます。

• 各顔のバウンディングボックス
• 各顔の4x4ポーズ行列
• 正規化された（x, y）ランドマーク点
• 頂点、法線、テクスチャ座標を含む顔ジオメトリデータ

手のジェスチャーは、動画エフェクトやAR/VRゲームのシナリオで使用でき、アプリをより印象的かつ インタラクティブにします。

提案: 手の動きを追跡し、手の輪郭を取得するための高レベルAPI。

MiniAppsには、Webへ移行したいAR APIがいくつかあります。これらは、ゲーム、3Dモデルプレビュー、 インタラクティブ広告において、より優れたAR 体験を提供するのに役立つためです。

提案: ARCoreとARKitに基づく低レベルAR APIを提供する。これには次が含まれます。

ワールドトラッキング用のカメラビュー行列

携帯電話の空間的位置および向きを表す4x4ビュー行列を提供します。これは、 開発者が3D仮想世界内のカメラ行列をリアルタイムに更新するために使用できます。 これにより、現実世界の位置と 仮想世界内のオブジェクトの位置を対応付けることができます。

平面検出とトラッキング

現実世界の平面を検出し、それらの平面をリアルタイムで追跡します。各平面の中心位置と向きを表す4x4変換 行列を提供します。これは、地面/机の上に3D仮想オブジェクトを配置するために使用できます。

アンカー

アンカーは、現実世界における固定された位置と向きを定義します。開発者は、 ヒットテストによって取得できる4x4変換行列からアンカーを作成できます。この行列は 各フレームで更新され、行列に対応する仮想オブジェクトが現実シーン内の1つの 位置と方向に固定されるようにします。

ヒットテスト

画面位置に対応する現実世界空間内の位置と向きを表す4x4変換行列を取得し、 クリックや仮想 オブジェクト配置などの機能を実装します。