BarcodeScanner ユーザインターフェースのカスタマイズ

BarcodeScanner は、標準的で最低限のユーザインターフェースを備えており、すぐに使用することができます。標準のユーザインターフェースでは十分な情報が得られないアプリケーションや使用事例の場合、または会社やブランドに応じてカスタマイズする場合は、HTML を使用してカスタム UI を作成してください。

HTML を使用してカスタムユーザインターフェースを定義することで、UI の自由度が大きく向上します。次に、最小限のカスタム UI の HTML の例を示します。

静的な HTML 文字列を使用することも、HTML を実行時に生成することも可能です。このための要件は、次のようにさほど多くありません。

<header> 要素は必須であり、変更できません。カスタマイズは、<html> とページの子要素に限定する必要があります。
また、スキャンセッションを終了またはキャンセルするための UI 要素も用意する必要があります。「スキャナの終了」を参照してください。

BarcodeScanner にカスタム UI を適用するには、BarcodeScannerOptions 設定オブジェクトの backgroundViewHTML プロパティに、<header> を含む HTML ページの文字列値を設定します。次に、beginCapture() を呼び出す際に、BarcodeScannerOptions を指定します。

カスタム UI は、BarcodeScanner の標準 UI のすべての部分を覆って、完全に隠します。次の図は、BarcodeScanner によってレンダリングされるスキャナ UI のレイヤを示しています。

カメラビューの下にカスタム UI があり、その下に標準 UI があり、Z 指数が増加していることを示す図

開発を効率化するために、LWC スキャンコードで最新の scan() および dismiss() 関数を使用することをお勧めします。古い beginCapture()、resumeCapture()、および endCapture() 関数は引き続き使用できますが、今後のリリースで廃止される予定です。

カスタム UI を定義すると、標準のスキャナの終了コントロールが置き換えられます。カスタム UI では、スキャナを終了する処理を開発者が作成する必要があります。スキャナを終了する方法には、次の 2 種類があります。

プログラミング: endCapture をコールしてスキャナ UI を終了します。
UI からのトリガ: トリガされると特別な URL (nimbusbarcodescanner://dismiss) に移動するカスタム UI を追加します。

たとえば、次の単純なテキストリンクは、タップするとスキャナを終了します。

これをカスタムユーザインターフェース内の適当な場所に配置します。

カメラビューは常にデバイス画面の中央 (水平方向と垂直方向の両方) に位置し、カスタム UI 上に重ね合わせられます。カスタム UI を設計する際には、この点を考慮し、UI の重要な部分がカメラビューで非表示にならないようにしてください。
カスタム UI は、Lightning Web コンポーネントをホストするメインの Webview コンテナとは別の Webview コンテナでレンダリングされます。カスタム UI をレンダリングする HTML では、コンポーネントで定義された要素やオブジェクトを参照したり、アクセスしたりすることができません。