ホーム > 使い方 > バーコードの読み取り > バーコード読み取りのSalesforceアプリケーションの作成 > Lightning Webコンポーネントを使った開発

Lightning Webコンポーネントを使った開発

ここでは、Lightning Webコンポーネントを使ってバーコードの読み取るアプリケーションを作る方法について説明します。作成したバーコードの読み取り画面は、Salesforceモバイルアプリケーションから表示して使用します。このアプリケーションをブラウザーから表示した場合は、読み取りボタンが無効となり、ユーザーは操作できません。

１回ごとの読み取りと連続読み取り

ここではユーザーが「読み取り開始」ボタンをタップしてから１個のバーコードを読み取る方法を説明します。複数のバーコードがあるとき、ユーザーはバーコードの個数と同じ回数だけ「読み取り開始」ボタンをタップします。

１回の操作で複数のバーコードを連続して読み取るには、WebServiceを使った連続読み取り機能の開発を参照してください。

Lightning Webコンポーネントでアプリケーションを作る

このページでの手順は、Salesforce CLIやVisual Studio CodeなどLightning Webコンポーネントの開発環境が整っており、組織を操作するSalesforce DXプロジェクトでLightning WebコンポーネントやApexクラスなどを作成およびデプロイすることを前提としています。

myFirstBarcodeScannerLwcという名前でLightning Webコンポーネントを新規に作成する。
myFirstBarcodeScannerLwcに次のコードを記述する。
myFirstBarcodeScannerLwcを組織にデプロイします。

myFirstBarcodeScannerLwc.html

<template>
    <h1>読み取りを実行する</h1>
    <div slot="actions">
        <gcbc-gc-barcode-scanner-lwc data-id="single-scan-button" button-text="読み取り"
            onscancomplete={onSingleScanComplete}>
        </gcbc-gc-barcode-scanner-lwc>
    </div>
    <lightning-formatted-text value={singleScanResultOutput}></lightning-formatted-text>
</template>

myFirstBarcodeScannerLwc.js

import { LightningElement, track } from 'lwc';

export default class MyFirstBarcodeScannerLwc extends LightningElement {
    @track singleScanResultOutput;

    onSingleScanComplete(event) {
        const data = event.detail;
        if (data && data.success) {
            const results = data.scanResults;
            this.singleScanResultOutput = decodeURIComponent(results);
        } else {
            alert("読み取りはできませんでした。");
        }
    }
}

myFirstBarcodeScannerLwc.js-meta

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

次に、作成したLightning Webコンポーネントをタブに設定します。

Salesforce Classicの場合、「設定 > ビルド > 作成 > タブ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > ユーザーインタフェース > タブ」をクリックする。
「Lightning コンポーネントタブ」の「新規」ボタンをクリックする。
「Lightning コンポーネント」に「c:myFirstBarcodeScannerLwc」を選択する。
「タブの表示ラベル」に「MyFirstBarcodeScannerLwc」を入力する。
「タブ名」に「MyFirstBarcodeScannerLwc」を入力する。
「タブスタイル」に任意のスタイルを選択する。
「次へ」をクリックし、タブをプロファイルに割り当て、保存する。

動作を確認します。次の手順で、このページに表示されているQRコードを読み取れるか確認してください。

スマートフォンでSalesforceモバイルアプリケーションを実行する。
対象のSalesforce組織にログインする。
Salesforceモバイルアプリケーションのメニューから「MyFirstBarcodeLwc」をタップする。
「読み取り」をタップする。
カメラ画面でQRコードを読み取る。
読み取り結果「日本株式会社」が表示される。

gcbc-gc-barcode-scanner-lwcタグに属性を追加することで、gcbc-gc-barcode-scanner-lwcコンポーネントを構成できます。各属性の説明はリファレンスのgcbc-gc-barcode-scanner-lwcコンポーネントの属性を参照してください。

より実践的なRayBarcodeの使い方はサンプルパッケージを参照してください。