Field Service 開発者ガイド
jモバイルデバイスでのバーコードのスキャン
スキャンはモバイル機器上でローカルに実行されるため、ネットワーク接続は必要ありません。BarcodeScanner は、互換性のある Salesforce モバイルアプリケーションでのみ利用可能なプラットフォーム固有の API へのアクセスを必要とします。
BarcodeScanner は、スキャンしたバーコードにエンコードされているデータの文字列値をコンポーネントに返します。デコードされた値の解釈や処理は行いません。
BarcodeScanner API の使用
バーコードスキャン機能を備えた Lightning Web コンポーネントを開発するには、BarcodeScanner API を使用します。
- BarcodeScanner をコンポーネント定義にインポートして、BarcodeScanner API 関数をコードで使用できるようにします。
- スキャンライフサイクル関数をコールする前にテストを実行して、BarcodeScanner を使用できることを確認します。
- スキャンライフサイクル関数を使用して、スキャンを開始、継続および停止します。
Lightning Web コンポーネントへの BarcodeScanner の追加
コンポーネントの JavaScript ファイルで、標準 JavaScript の import ステートメントを使用して BarcodeScanner をインポートします。具体的には、getBarcodeScanner ファクトリー関数を lightning/mobileCapabilities モジュールから次のようにインポートします。
1import { getBarcodeScanner } from "lightning/mobileCapabilities";コンポーネントにインポートしたら、ファクトリー関数を使用して BarcodeScanner のインスタンスを取得します。 BarcodeScanner インスタンスで、ユーティリティ関数と定数を使用して、スキャナーの可用性を確認し、スキャンを設定します。 ライフサイクルスキャン機能を使用して、スキャン操作を実行します。
BarcodeScanner の可用性のテスト
BarcodeScanner は、物理デバイスのハードウェアとプラットフォームの機能に依存します。BarcodeScanner を使用するコンポーネントがデスクトップコンピューター上で問題なく表示されても、スキャン機能が失敗することがあります。このようなエラーを避けるために、BarcodeScanner 機能を使用する前に可用性をテストしてください。
1import { LightningElement } from 'lwc';
2import { getBarcodeScanner } from 'lightning/mobileCapabilities';
3export default class ImplementBarcodeScanner extends LightningElement {
4 const myScanner = getBarcodeScanner();
5
6 barcodeResults = 'Nothing scanned yet!';
7
8 handleBeginScanClick(event) {
9 if(myScanner.isAvailable()) {
10 // Perform scanning operations
11 let scanningOptions = {
12 "barcodeTypes": ["code128","code39", "code93", "ean13", "ean8", "upca", "upce", "qr", "datamatrix", "itf", "pdf417"], "instructionText":"Position barcode in the scanner view.\nPress x to stop.",
13"successText":"Successful Scan!"
14 };
15 myScanner.scan(scanningOptions)
16 .then((results) => {
17 // Do something with the results of the scan
18 this.barcodeResults = '';
19 results.forEach(result => {
20 this.barcodeResults += 'type: ' + result.type + ', value: ' + result.value + '\n';
21 });
22 })
23 .catch((error) => {
24 // Handle cancellation and scanning errors here
25 this.barcodeResults = 'Error code: ' + error.code + '\nError message: ' + error.message;
26 })
27 .finally(() => {
28 myScanner.dismiss();
29 });
30 } else {
31 // Scanner not available
32 // Not running on hardware with a scanner
33 // Handle with message, error, beep, and so on
34 this.barcodeResults = 'Problem initiating scanner. Are you using a mobile device?';
35 }
36 }
37}サポートされているバーコード種別
- Aztec
- code39
- code93
- code128
- dataMatrix
- ean8
- ean13
- interleaved2of5
- pdf417
- qr
- upce
バーコードのスキャン
スキャンライフサイクル機能を使用して、BarcodeScanner でバーコードをスキャンします。
- scan(options) でスキャンを開始します。
- Promise の形式で返されるスキャン結果を処理します。
- Dismiss() でスキャンを終了します。
以下に例を示します。
1myScanner
2 .scan(scanningOptions)
3 .then((result) => {
4 // Do something with the result of the scan
5 console.log(result);
6 this.scannedBarcode = result.value;
7 })
8 .catch((error) => {
9 // Handle cancellation and scanning errors here
10 console.error(error);
11 })
12 .finally(() => {
13 myScanner.dismiss();
14 });スキャン結果やエラーの処理などの詳細は、scan(options) を参照してください。