gcbc-gc-barcode-scanner-lwcコンポーネント

gcbc-gc-barcode-scanner-lwcコンポーネントについて説明します。

gcbc-gc-barcode-scanner-lwcコンポーネントの属性

gcbc-gc-barcode-scanner-lwcは、独自の読み取り開始ボタンを持つLightning Webコンポーネントで開発する際に使用するコンポーネントです。

属性名（HTML テンプレート） 属性名（JavaScript） 属性型 説明
title title String 画面の上部に表示されるタイトルを指定します。文字列は中央寄せで表示されます。表示される文字列は、画面の端で自動改行されます。文字数制限はないですが、表示領域からはみ出してしまった文字列は省略されます。また、改行（\r\n）・タブ・スペースの入力が可能です。ただし、文字列の先頭と末尾の空白文字（タブやスペースなど）を取り除きます。既定値は空白です。
font-color fontColor String タイトルのフォント色を指定します。デフォルト色は白です。属性値は大文字と小文字を区別しません。指定可能な色についてはこちらのリンクの「Fields」欄を参照してください。　例）font-color=“Aquamarine”
font-size fontSize Number タイトルのフォントサイズを指定します。既定値は16です。　例）font-size=“20”
background-color backgroundColor String 余白エリアの背景色を指定します。デフォルト色は黒です。属性値は大文字と小文字を区別しません。指定可能な色についてはこちらのリンクの「Fields」欄を参照してください。　例）background-color=“Blue”
opacity opacity Number 余白エリアの透明度を調整します。既定値は0.7です。指定可能な値の範囲は0~1です。0だと完全透明、1だと不透明となります。　例）opacity=“0.3”
barcode-format barcodeFormat string スキャナーが認識するバーコード形式を指定します。バーコードの種類の値は、読み取るバーコードの種類を参照してください。複数の種類のバーコードを読み取る場合は、バーコード形式をコンマ（,）で区切ります。既定ではすべてのバーコード形式が認識対象です。
button-text buttonText string 読み取りボタンのキャプションを取得または設定します。たとえば「読み取り開始」と指定します。
continuous-scan continuousScan boolean エンドユーザーが読み取り画面を終了するか、連続読み取りのコールバックサービスが読み取り終了を返すまで、RayBarcode Readerアプリが連続読み取りを実行するかどうかを指定します。既定値はfalseです。
continuous-scan-callback continuousScanCallback string 連続読み取りを制御するためのWebServiceのコールバック。コールバックの詳細はWebServiceを使った連続読み取り機能の開発で説明します。
scanResults string 読み取り結果。読み取り結果が複数の場合はコンマ（,）で区切られます。
scannedTypes string 読み取ったバーコードの種類。読み取り結果が複数の場合はコンマ（,）で区切られます。バーコードの種類の値は、読み取るバーコードの種類を参照してください。
use-front-camera-if-vailable useFrontCameraIfAvailable boolean フロントカメラ（インカメラ）を使用するかどうかを指定します。trueのときフロントカメラを使用します。falseのときフロントカメラを使用しません。既定値はfalseです。フロントカメラが利用可能でない場合はバックカメラ（リアカメラ、背面カメラ）を使用します。フロントカメラはQRコードのみの対応です。QRコード以外の対応はベータ扱いです。
scan-button-style scanButtonStyle string 読み取りボタンのスタイルを設定します。
onscancomplete onScanComplete Event Handler 読取り完了後の処理を行う関数を指定します。詳細は後述の「読取り完了イベント」を参照してください。

読み取り完了イベント

読み取りが完了するとイベントが発生します。読取り完了イベントでは、完了後の処理をするためコードを記述することができます。

イベントで渡されるデータは以下のとおりです。

{ detail: 
  { 
    success: true,
    scanResults: "value1,value2,value3",
    scanTypes: "QRCode,QRCode,QRCode" 
  }
}
  • detail.success: スキャンに成功するとtrue、失敗するとfalseです。
  • detail.scanResults: 読み取り結果。読み取り結果が複数の場合はコンマ（,）で区切られます。
  • detail.scanTypes: 読み取ったバーコードの種類。読み取り結果が複数の場合はコンマ（,）で区切られます。

読取り完了後の処理の例は以下のとおりです。

html

....
<gcbc-gc-barcode-scanner-lwc
    data-id="single-scan-button"
    button-text="読み取り"            
    onscancomplete={onSingleScanComplete}>
</gcbc-gc-barcode-scanner-lwc>
....

js

....
onSingleScanComplete(event) {
        const data = event.detail;
        if (data && data.success) {
            // 読取り成功時の処理
        } else {
            alert("読み取りはできませんでした。");
        }
    }
....
Copyright © 2024 MESCIUS inc. All rights reserved.