※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。
今回はモバイルでのバーコードスキャンを利用したコンポーネントを作成してみたいと思います。
LWC のバーコードスキャンについて
- バーコードスキャナーは下記のアプリケーションで動作します
- Salesforce Mobile app
- Mobile Publisher for Salesforce App
- Mobile Publisher for Experience Cloud
- サポートしているバーコードの種類の一覧はこちら
- 使用に関する制限はこちら
作成する LWC の動き
入力ボックスとボタンがセットになったコンポーネントです。
ボタンをクリックすると QR 読み込み画面が表示され、 QR コードをスキャンすることができます。
スキャンが完了するとスキャンした値が入力ボックスに表示されます。
実装のポイント
- サンプルコードをもとに作成しました。
- スキャンする際の画面に「QR コードを読み込みましょう！」のような表示をするためユーザフェースをカスタマイズしています。
- 「Single Scanning」モードを想定しています。
- 今回はモバイルのレコードページで利用するので
supportedFormFactorを設定しています。（これを設定しないとエラーが発生しました） -
scanningOptionsで利用できる値はこちらを参照しました。
実装したコード
barcodeTest.html
<template>
<lightning-layout class="x-large" horizontal-align="end">
<lightning-layout-item flexibility="grow">
<lightning-input
type="text"
label="input"
variant="label-hidden"
value={value}
></lightning-input>
</lightning-layout-item>
<lightning-layout-item>
<lightning-button-icon
icon-name="utility:scan"
variant="brand"
label="Scan"
alternative-text="Scan"
onclick={beginScanning}
></lightning-button-icon>
</lightning-layout-item>
</lightning-layout>
</template>
barcodeTest.js
import { LightningElement, track } from "lwc";
import { getBarcodeScanner } from "lightning/mobileCapabilities";
export default class BarcodeTest extends LightningElement {
barcodeScanner;
value;
connectedCallback() {
this.barcodeScanner = getBarcodeScanner();
}
beginScanning() {
const backgroundViewHTML = `<header>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
</header>
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<h1 align="right"><a href="nimbusbarcodescanner://dismiss">✖</a></h1>
<h2 align="center">QR コードを読み込みましょう！</h2>
<h3 align="center">カメラで QR コードを写してください。</h3>
</body>
</html>`
const scanningOptions = {
barcodeTypes: [this.barcodeScanner.barcodeTypes.QR],
scannerSize: "XLARGE",
cameraFacing: "BACK",
showSuccessCheckMark: true,
enableBulkScan: false,
enableMultiScan: false,
backgroundViewHTML
};
if (this.barcodeScanner != null && this.barcodeScanner.isAvailable()) {
this.value = "";
this.barcodeScanner
.scan(scanningOptions)
.then(this.processScannedBarcodes.bind(this))
.catch(this.processError.bind(this))
.finally(() => {
this.barcodeScanner.dismiss();
});
} else {
console.log("BarcodeScanner unavailable. Non-mobile device?");
}
}
processScannedBarcodes(barcodes) {
this.value = barcodes[0].value;
}
processError(error) {
if (error.code == "USER_DISMISSED") {
console.log("User terminated scanning session.");
} else {
console.error(error);
}
}
}
barcodeTest.js-meta.xml
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>58.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>*Barcode Test</masterLabel>
<description>Barcode Test</description>
<targets>
<target>lightning__RecordPage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<supportedFormFactors>
<supportedFormFactor type="Small" />
</supportedFormFactors>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>