ここでは、Lightningアプリケーションを使用してGrapeCity Barcodeでバーコードを読み取る方法を説明します。バーコードの読み取りにはスマートフォンのカメラを使うため、作成したLightningアプリケーションは専用の「GC Barcodeアプリ」から表示して使用します。このLightningアプリケーションをPC(Mac)のブラウザーやSalesforceアプリから表示した場合は、読み取りボタンが無効となり、ユーザーは操作できません。
Lightningアプリにgcbc:GcBarcodeScannerLTDemoコンポーネントを配置するには、Salesforceの「私のドメイン」をリリースする必要があります。
「私のドメイン」が有効になっていない場合、次の手順に沿って有効化してください。
ここではユーザーが「読み取り開始」ボタンをタップしてから1個のバーコードを読み取る方法を説明します。複数のバーコードがあるとき、ユーザーはバーコードの個数と同じ回数だけ「読み取り開始」ボタンをタップします。
1回の操作で複数のバーコードを連続して読み取るには、連続読み取り機能の開発を参照してください。
gcbc:GcBarcodeScannerLTDemoコンポーネントはLightningアプリ開発のためのデモコンポーネントです。開発者は後述のgcbc:GcBarcodeScannerLTコンポーネントを使って開発を進める前に、gcbc:GcBarcodeScannerLTDemoコンポーネントで読み取り機能を試すことができます。
gcbc:GcBarcodeScannerLTDemoコンポーネントを表示するには、Salesforceの「Lightningアプリケーションビルダー」でLightningアプリを開発します。
次の手順ではPC(Mac)のブラウザーを使用します。
次に、作成したLightningアプリをSalesforceのナビゲーションメニューに追加します。
Salesforce Classicの場合:
Lightning Experienceの場合:
動作を確認します。次の手順で、この画面に表示されている次のバーコードを読み取れるか確認してください。
gcbc:GcBarcodeScannerLTDemoには、値を設定できる属性はありません。
属性名 | 属性型 | 説明 |
---|---|---|
body | component[] | aura:componentから継承されます。コンポーネントの本体。マークアップでは、これはタグ本体のすべてです。 |
gcbc:GcBarcodeScannerLTコンポーネントを使用するには、読み取りボタンをタップしてスマートフォンのカメラによる読み取り画面を開きます。バーコードまたは二次元コードが正常に読み取りできた場合、スマートフォンはフィードバックとしてビープ音を再生します。読み取られた値は scanResults
属性から取得することができます。同時に、 scannedTypes
属性には読み取られたバーコードの種類に関する情報が含まれます。 scanResults
と scannedTypes
の両方は、返されたバーコード値が複数のレコードである場合、複数のレコードを分割するためのカンマを含む文字列です。読み取りが終了すると、 onScanComplete
イベントがトリガーされます。
次の例は、gcbc:GcBarcodeScannerLTコンポーネントをページに追加する方法です。
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="singleScanResult" type="String"/>
<aura:attribute name="singleScanResultOutout" type="String"/>
<h1>読み取りを実行する</h1>
<br/>
<gcbc:GcBarcodeScannerLT
aura:id="single-scan-button"
buttonText="読み取り開始"
scanResults="{!v.singleScanResult}"
onScanComplete="{!c.onSingleScanComplete}"
/>
<br/>
<ui:outputText value="{!v.singleScanResultOutout}"/>
</aura:component>
onScanComplete
イベントをハンドルして読み取り成終了通知を受け取ります。サンプルに対して定義された onSingleScanComplete
メソッドは、次のようになります。
({
onSingleScanComplete: function (component, event, helper) {
var result = event.getParam("success");
if (result){
var data = component.get("v.singleScanResult");
// データがデコードされていない場合、
// コンマ(,)はエスケープ文字列(%2C)になります
var decodedData = decodeURIComponent(data);
component.set("v.singleScanResultOutout", decodedData);
}else{
alert("読み取り失敗");
}
},
})
Lightningアプリケーションを新規に作成し、さきほど作成したLightningコンポーネントを配置します。
属性名 | 属性型 | 説明 |
---|---|---|
body | component[] | aura:componentから継承されます。コンポーネントの本体。 マークアップでは、これはタグ本体のすべてです。 |
buttonText | string | 読み取りボタンのキャプションを取得または設定します。たとえば「読み取り開始」と指定します。 |
class | string | コンポーネントに適用されるCSSスタイル。 このスタイルは、コンポーネントによって出力される基本スタイルに追加されます。 |
continuousScan | boolean | エンドユーザーが読み取り画面を終了するか、連続読み取りのコールバックサービスが読み取り終了を返すまで、GC Barcodeアプリが連続読み取りを実行するかどうかを指定します。既定値はfalseです。 |
continuousScanCallback | string | 連続読み取りを制御するためのWebServiceのコールバック。コールバックの詳細は連続読み取り機能の開発で説明します。 |
scanResults | string | 読み取り結果。読み取り結果が複数の場合はコンマ(,)で区切られます。 |
scannedTypes | string | 読み取ったバーコードの種類。読み取り結果が複数の場合はコンマ(,)で区切られます。バーコードの種類の値は、読み取ったバーコードの種類を参照してください。 |
イベント名 | イベント型 | 説明 |
---|---|---|
onScanComplete | gcbc:GcBarcodeScanFinish | 読み取りが完了したときのイベントです。 |
Aura DocumentationでLightningコンポーネントの属性の完全なリストと英語のリファレンスを参照できます。
Aura Documentationは、以下のURLでアクセスできます。
https://[YOUR INSTANCE or CUSTOMDOMAIN].lightning.force.com/auradocs/reference.app?#reference?descriptor=gcbc:GcBarcode&defType=component
たとえば、Lightning Experienceに切り替えた画面でブラウザーのアドレスバーのURLが「ap0.lightning.force.com」で始まる場合、Aura DocumentのURLは次のようになります。
https://ap0.lightning.force.com/auradocs/reference.app?#reference?descriptor=gcbc:GcBarcode&defType=component
日本語のリファレンスは、このページの「gcbc:GcBarcodeScannerコンポーネントの属性」を参照してください。
Copyright © MESCIUS inc. All rights reserved.