Creating Lightning App

ここでは、Lightningアプリケーションを使用してGrapeCity Barcodeでバーコードを読み取る方法を説明します。バーコードの読み取りにはスマートフォンのカメラを使うため、作成したLightningアプリケーションは専用の「GC Barcodeアプリ」から表示して使用します。このLightningアプリケーションをPC（Mac）のブラウザーやSalesforceアプリから表示した場合は、読み取りボタンが無効となり、ユーザーは操作できません。

前提

Lightningアプリにgcbc:GcBarcodeScannerLTDemoコンポーネントを配置するには、Salesforceの「私のドメイン」をリリースする必要があります。

「私のドメイン」が有効になっていない場合、次の手順に沿って有効化してください。

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

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

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

チュートリアル3. Lightningアプリケーションを作る

gcbc:GcBarcodeScannerLTDemoコンポーネントはLightningアプリ開発のためのデモコンポーネントです。開発者は後述のgcbc:GcBarcodeScannerLTコンポーネントを使って開発を進める前に、gcbc:GcBarcodeScannerLTDemoコンポーネントで読み取り機能を試すことができます。

gcbc:GcBarcodeScannerLTDemoコンポーネントを表示するには、Salesforceの「Lightningアプリケーションビルダー」でLightningアプリを開発します。

次の手順ではPC（Mac）のブラウザーを使用します。

  1. Salesforce Classicの場合、「設定 > ビルド > Lightningアプリケーションビルダー」に移動します。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > ユーザーインターフェース > Lightningアプリケーションビルダー」に移動する。
  2. 新しいLightningページを作成するには、Lightningページセクションにある「新規」ボタンをクリックする。
  3. 「Lightningページを新規作成」が表示される。
  4. 「アプリケーションページ」が選択状態になっていることを確認して「次へ」をクリックする。
  5. 「表示ラベル」に任意の名前を入力し、「次へ」をクリックする。例：「MyBarcodeScanDemoApp」
  6. 「１列」を選択していることを確認し、「完了」をクリックする。
  7. 「Lightningアプリケーションビルダー - MyBarcodeScanDemoApp」が表示されることを確認する。
  8. 左ペインに表示されるcBarcodeScannerLTDemoアイコンをドラッグして、キャンバス領域にドロップする。
  9. 「MyBarcodeScanDemoApp」の保存と有効化を実行する。

次に、作成したLightningアプリをSalesforceのナビゲーションメニューに追加します。

Salesforce Classicの場合:

  • 「設定 > 管理者設定 > モバイル管理 > Salesforceナビゲーション」で、Salesforceのナビゲーションメニューにタブを追加する。

Lightning Experienceの場合:

  • 歯車アイコンをクリックした後「設定 > アプリケーション > モバイルアプリケーション > Salesforce > Salesforceナビゲーション」で、Salesforceのナビゲーションメニューにタブを追加する。

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

  1. スマートフォンで「GC Barcode」アプリを実行する。
  2. Visualforceページを開発しているSalesforceにログインする。
  3. Salesforceのナビゲーションメニューから「MyBarcodeScanDemoApp」をタップする。
  4. 「読み取り開始」ボタンをタップする。
  5. カメラ画面でバーコードを読み取る。

gcbc:GcBarcodeScannerLTDemoコンポーネントの属性

gcbc:GcBarcodeScannerLTDemoには、値を設定できる属性はありません。

属性名 属性型 説明
body component[] aura:componentから継承されます。コンポーネントの本体。マークアップでは、これはタグ本体のすべてです。

チュートリアル4. Lightningコンポーネントを作る

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コンポーネントを配置します。

gcbc:GcBarcodeScannerLTコンポーネントの属性

属性名 属性型 説明
body component[] aura:componentから継承されます。コンポーネントの本体。 マークアップでは、これはタグ本体のすべてです。
buttonText string 読み取りボタンのキャプションを取得または設定します。たとえば「読み取り開始」と指定します。
class string コンポーネントに適用されるCSSスタイル。 このスタイルは、コンポーネントによって出力される基本スタイルに追加されます。
continuousScan boolean エンドユーザーが読み取り画面を終了するか、連続読み取りのコールバックサービスが読み取り終了を返すまで、GC Barcodeアプリが連続読み取りを実行するかどうかを指定します。既定値はfalseです。
continuousScanCallback string 連続読み取りを制御するためのWebServiceのコールバック。コールバックの詳細は連続読み取り機能の開発で説明します。
scanResults string 読み取り結果。読み取り結果が複数の場合はコンマ（,）で区切られます。
scannedTypes string 読み取ったバーコードの種類。読み取り結果が複数の場合はコンマ（,）で区切られます。バーコードの種類の値は、読み取ったバーコードの種類を参照してください。

gcbc:GcBarcodeScannerLTコンポーネントのイベント

イベント名 イベント型 説明
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.