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

モバイル拡張機能プラグインをインストールして Xcode および Android Studio を設定したら、コマンドラインから直接プレビューを起動できます。コーディング時の変更はモバイルプレビューにすぐに反映されます。

force:lightning:lwc:preview コマンドでは、2 つのパラメータセット (3 つの基本パラメータと 4 つの詳細パラメータ) がサポートされています。すべてのコールには、最初の 2 つの基本パラメータと、必要に応じて 3 つ目のパラメータが必要です。詳細パラメータでは、プレビューをホストするカスタムアプリケーションを指定および設定できます。

  • -n、--componentname

    コンポーネントの名前。

  • -p、--platform

    プレビューで使用するモバイルプラットフォーム。Android または iOS (大文字と小文字は区別されない) のいずれかになります。

  • (省略可能) -t、--target

    対象仮想デバイスの名前。このデバイスは、プレビューをホストする iOS シミュレータまたは Android エミュレータ設定です。新規または既存のデバイスの名前を渡すことができます。選択したプラットフォームで認識されない名前を入力すると、システムのデフォルト設定を使用してデバイスが作成されます。省略した場合、指定されたプラットフォームのデフォルトの仮想デバイスが起動します。「デバイスの管理」を参照してください。

  • (省略可能) -a、--targetapp

    プレビューの対象アプリケーション。有効な値は browser、つまりデフォルトのモバイルブラウザ、またはアプリケーション ID です。デフォルト設定は browser です。

  • (省略可能) -d、--projectdir

    CLI プロジェクトのルートディレクトリ。デフォルトは現在の作業ディレクトリです。

  • (省略可能) -f、--configfile

    mobile-apps.json という名前のファイル。このファイルでプレビューの拡張設定オプションを指定します。--targetapp にアプリケーション ID を渡す場合、このファイルを提供する必要があります。このファイルへのカスタムパスを指定するには、-f を使用します。このパスは、(プロジェクトの作業ディレクトリに対する) 相対パスまたは絶対パスにすることができます。

  • (省略可能) --confighelp

    拡張設定ファイルのスキーマを表示します。

基本的なコールの macOS の例を次に示します。コンポーネントの名前は helloWorld で、~/Projects/helloWorld/ ディレクトリでそのコンポーネントを開発します。

  1. ターミナルウィンドウで、cd を実行して、Lightning Web コンポーネントプロジェクトのディレクトリに移動します。

  2. Lightning Web コンポーネントサーバを起動します。

    サーバは同期プロセスであるため、サーバが停止するまでこのウィンドウは後続のコマンド入力を受け入れません。

  3. サーバを実行したままにして、プロジェクトディレクトリで 2 番目のターミナルウィンドウまたは Windows コマンドプロンプトを開き、次のコマンドを入力します。

仮想デバイスの起動には数秒かかる場合があります。起動すると、モバイル拡張機能プラグインにより、デバイスのデフォルトブラウザにコンポーネントが表示されます。コンポーネントを調べて操作できます。コンポーネントのコードの視覚的な要素を変更すると、それらの変更はシミュレータにすぐに反映されるため、手動で更新する必要はありません。

デバイスを管理する方法:

  • iOS: Xcode の [Devices and Simulators (デバイスとシミュレータ)] ツールを使用する。
  • Android: Android 仮想デバイス (AVD) マネージャを使用する。

ご使用の環境でサポートされている仮想デバイスのリストを表示するには、device:list コマンドを使用します。

このコマンドは、開発環境が完全に設定され運用可能になった後にのみ使用してください。仮想デバイスイメージは、モバイル拡張機能のシステム要件以上である必要があります。さらに、次の範囲でリストに表示されるデバイスの数が制限される可能性があります。

iOS:

デバイスは、iOS または iPadOS を実行している必要があります。

Android:

既知の制限はありません。

デバイスリストの仕組みについて、次のヒントを参考にしてください。

  • 既存の仮想デバイスと一致しない名前を入力すると、モバイル拡張機能によってその名前のデバイスが作成されます。
  • モバイル拡張機能によって作成された Android 仮想デバイスは、最新の SDK レベルに基づいており、Google API を使用します。

force:lightning:lwc:preview コマンドを使用して、提供する iOS または Android ネイティブモバイルアプリケーションでプレビューを起動できます。これらのカスタムネイティブアプリケーションには、Salesforce 固有の要件は適用されません。アプリケーションで、Lightning Web コンポーネントを表示するための何らかの手段を提供する必要があります。

カスタムアプリケーションでプレビューを起動するには、モバイル拡張機能プラグインにアプリケーションの ID とそのアクセスポイントに関する情報が必要です。--configfile パラメータで指定した JSON 設定ファイルで、次のプロパティを指定します。

  • iOS: 逆引き DNS 形式のアプリケーションの ID。

  • Android: Android Debug Bridge (adb) シェルでサポートされている形式のアプリケーションの ID。たとえば、adb start コマンドで有効な形式は次のとおりです。

アプリケーションのわかりやすい名前。Salesforce VS Code 拡張機能は、この名前を使用してアプリケーションを識別します。

対象デバイスまたはエミュレータにアプリケーションをインストールするための設定を提供する Node.js または TypeScript モジュールの名前。

このモジュールは、アプリケーションバンドルへのパスを String として返す run() メソッドを公開する必要があります。このパスが絶対パスではなく相対パスである場合、モバイル拡張機能では設定ファイルへの相対パスが考慮されます。このモジュールは、アプリケーションバンドルへのアクセスを許可する実装の詳細を提供する役割も果たします。

get_app_bundle 引数が存在する場合、モバイル拡張機能はプレビューを起動する前に run コマンドをコールします。省略すると、モバイル拡張機能はバンドルが対象デバイスまたはエミュレータにすでにインストールされているとみなします。

Android Debug Bridge (adb) シェルからのアプリケーションの起動をサポートする形式での、アプリケーションのメインアクティビティのクラス名。たとえば、adb start コマンドで有効な形式は次のとおりです。

設定ファイルで、.ActivityName (先頭のピリオドを含む) を使用します。

アプリケーションの起動に必要な引数を指定するオブジェクトの配列。各オブジェクトには、1 つの引数の名前と値が含まれます。各引数名と引数値は、名前と値のペアとして表されます。

ネイティブアプリケーションがコンポーネントをプレビューするためにローカル開発サーバを必要とするかどうかを示します。false (デフォルト値) の場合、プレビューコマンドは実行中のサーバインスタンスをチェックせずに続行します。true の場合、プレビューを開始する前に、コマンドは実行中のサーバインスタンスをチェックします。このチェックに失敗した場合、コマンドはエラーを返し、コマンドを再実行する前にサーバを起動するようにユーザに促します。

launch_arguments 以外のプロパティは、単純な名前と値の文字列のペアです。次に、サンプルの設定ファイルを示します。

このファイルのスキーマには、forcedotcom/lwc-dev-mobile GitHub リポジトリの /src/cli/commands/force/lightning/lwc/previewConfigurationSchema.json からアクセスできます。

関連トピック