カスタムモバイルアプリケーションでのプレビュー

iOS および Android 用の独自のカスタムネイティブアプリケーションを開発する場合、それらを適応させて Lightning Web コンポーネントをプレビューできます。モバイルデバイスにアプリケーションをインストールするための設定を提供し、プレビューをホストするいくつかの手段を実装します。実行時に、lwc:preview コマンドの高度な機能を使用して、アプリケーションにプレビューを送信します。

カスタムアプリケーションのプレビューを学習するための最良の方法は、github.com/forcedotcom/LWC-Mobile-Samples の例を学習することです。このリポジトリには、プレビューをホストするために作成されたサンプルのネイティブモバイルアプリケーションと、それらのアプリケーションでプレビューするサンプルの Lightning Web Components プロジェクトが含まれます。これらのアイテムをまとめたものが、lwc:preview コマンドの高度なパラメータです。

LWC-Mobile-Samples リポジトリの最上位にある HelloWorld プロジェクトが最も容易に開始できる場所です。この Lightning Web コンポーネントプロジェクトは、JSON 設定ファイルとモバイルアプリケーションバンドルスクリプトを含めることで lwc:preview 要件を満たします。これらのファイルは、HelloWorld プロジェクトのルートフォルダにあります。

• JSON の構成ファイル: mobile-apps.json
• iOS バンドルスクリプトファイル: configure_ios_test_app.ts
• Android バンドルスクリプトファイル: configure_android_test_app.ts

バンドルスクリプトファイル名は mobile-apps.json の get_app_bundle ペアで指定します。

LWC-Mobile-Samples リポジトリの apps フォルダには、HelloWorld コンポーネントの対象である iOS および Android のネイティブアプリケーションがあります。これらのネイティブアプリケーションはベアボーン (必要最小限の) プロジェクトであり、その各プロジェクトで Lightning Web コンポーネントプレビューのコンテナを、本質的にテンプレートアプリケーションであるものに追加します。iOS では、このコンテナは WKWebView のインスタンスです。Android では、WebView オブジェクトです。この 2 つのクラス (WKWebView と WebView) を実装に応じて選択できます。独自のアプリケーションの場合は、Web コンテンツのホストに最適なものを使用できます。

iOS アプリケーションと Android アプリケーションは同じプレビューフローに従います。

1. JSON ファイルの設定値と起動引数を解析します。
2. 起動引数を使用してプレビュー URL を作成します。preview_server_enabled 引数が true で、起動引数に Web ドメインとポート番号が含まれない場合、ローカルの非公開アドレスとポート番号に基づいて URL を設定します。
3. Web ビューオブジェクトをインスタンス化します。
4. プレビューを表示するには、コンポーネント名を含む URL を Web ビューに送信します。

このサンプルでは、起動引数の設定を表示する [デバッグ情報] ボタンも追加します。

プラグインで設定ファイルが確実に見つかり、使用されるようにするには、次のガイドラインに従います。

• 要件 (すべての事例): 設定ファイルに mobile-apps.json という名前を付けます。プラグインでは他の設定ファイル名は受け入れられません。

preview コマンドの省略可能な -f および -d パラメータを使用して、カスタムの場所を指定します。

• -f では、設定ファイルの場所を指定します。このパスには絶対パスまたは相対パスを使用できます。
• -d では、プロジェクトのルートディレクトリを指定します。

モバイル拡張機能プラグインでは、この 2 つのパラメータが次のように使用されます。

• -f が指定され、-d が指定されていない場合、-f の値を使用してファイルの場所を判別します。

• -f と -d が指定されている場合、プラグインでは両方の値を考慮してファイルの場所を判別できます。

  • -f で相対パスが使用されている場合、ファイルの場所は、まず -d で指定されたディレクトリから計算されます。-d が指定されていない場合、パスは現在の作業ディレクトリに対して計算されます。
  • -f で絶対パスが指定されている場合、-d の値は設定ファイルの場所の計算では無視されます。

計算されたパスに設定ファイルが見つからない場合、プラグインは、失敗したパスを表示するエラーメッセージを投稿します。

VS Code では、設定ファイルのカスタムパスを指定することはできません。VS Code では、常に Lightning Web コンポーネントプロジェクトのデフォルトルートフォルダで mobile-apps.json が検索されます。

関連トピック

• コマンドラインからのコンポーネントのプレビュー