Lightningアプリケーションの開発

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

前提

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

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

「私のドメイン」を有効化できない環境では、代わりにVisualforceの利用を検討してください。

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

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

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

チュートリアル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. 「1列」を選択していることを確認し、「完了」をクリックする。
  7. 「Lightningアプリケーションビルダー - MyBarcodeScanDemoApp」が表示されることを確認する。
  8. 左ペインに表示されるcBarcodeScannerLTDemoアイコンをドラッグして、キャンバス領域にドロップする。
  9. 「MyBarcodeScanDemoApp」の保存と有効化を実行する。

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

Salesforce Classicの場合:

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

Lightning Experienceの場合:

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

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

  1. スマートフォンで「RayKit」アプリを実行する。
  2. Visualforceページを開発しているSalesforceにログインする。Sandboxにログインする場合、右上のノートとペンのアイコンをタップし「接続を選択」でSandboxを選ぶ。
  3. Salesforce1のナビゲーションメニューから「MyBarcodeScanDemoApp」をタップする。
  4. 「読み取り開始」ボタンをタップする。
  5. カメラ画面でQRコードを読み取る。
  6. 読み取り結果「日本株式会社」が表示される。

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

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

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

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

gcbc:GcBarcodeScannerLTコンポーネントによって、独自の読み取り開始ボタンを持つLightningアプリケーションを開発できます。gcbc:GcBarcodeScannerLTコンポーネントを使用するには、新しいLightningコンポーネントを作成し、そのLightningコンポーネントをLightningアプリケーションに配置します。

作成したLightningアプリケーションを実行すると、ユーザは「読み取り開始」ボタンをタップしてスマートフォンのカメラによるバーコードの読み取り画面を開くことができます。バーコードまたは二次元コードが正常に読み取りできた場合、スマートフォンはフィードバックとしてビープ音を再生します。読み取られた値は、開発者がscanResults属性から取得することができます。同時に、scannedTypes属性には読み取られたバーコードの種類に関する情報が含まれます。scanResultsscannedTypesの両方は、返されたバーコード値が複数のレコードである場合、複数のレコードを分割するためのカンマを含む文字列です。読み取りが終了すると、onScanCompleteイベントがトリガされます。

gcbc:GcBarcodeScannerLTコンポーネントを使用する手順は次の通りです。

  1. Salesforceの「開発者コンソール」を起動する。Salesforce Classicの場合は画面上のユーザ名をクリックし、「開発者コンソール」をクリックします。Lightning Experienceの場合は、画面右上の歯車アイコンをクリックし、「開発者コンソール」をクリックします。「開発者コンソール」はお使いのSalesforceの言語設定にかかわらず英語で表示されます。
  2. 「開発者コンソール」のメニューから「File > New > Lightning Component」をクリックする。
  3. 「New Lightning Bundle」画面の「Name」に任意のコンポーネント名を設定する。例:MyFirstBarcodeScanner
  4. 「MyFirstBarcodeScanner.cmp」に次のコードを入力し、キーボードの「Ctrl + S」を押下して保存する。Macの場合は、CtrlキーをCommandキー(⌘キー)に読み替えてください。

    <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>
    

  5. 右の一覧から「CONTROLLER」をクリックする。

  6. 「MyFirstBarcodeScannerController.js」に次のコードを入力し、キーボードの「Ctrl + S」を押下して保存する。このコードは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("読み取り失敗");
        }
    },
    })
    

  7. 「開発者コンソール」のウィンドウを閉じる。

注意:「開発者コンソール」では、コードが保存されていない状態でウィンドウを閉じても、警告などのメッセージが表示されません。再度「開発者コンソール」を開き、変更したコードが保存されているかどうか確認してください。もしコードが保存されていない場合、再度コードを入力してキーボードの「Ctrl + S」を押下して確実にコードを保存してください。

Lightningアプリケーションを新規に作成し、さきほど作成したLightningコンポーネントを配置します。

前項の「Lightningアプリケーションビルダーの場合」を参考に、作成した「MyFirstBarcodeScanner」Lightningコンポーネントを画面に配置します。

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

barcodeFormatuseFrontCameraIfAvailableはGrapeCity Barcode v3で新たに追加された属性です。

属性名 属性型 説明
barcodeFormat string スキャナが認識するバーコード形式を指定します。バーコードの種類の値は、読み取るバーコードの種類を参照してください。複数の種類のバーコードを読み取る場合は、バーコード形式をコンマ(,)で区切ります。既定ではすべてのバーコード形式が認識対象です。
body component[] aura:componentから継承されます。コンポーネントの本体。 マークアップでは、これはタグ本体のすべてです。
buttonText string 読み取りボタンのキャプションを取得または設定します。たとえば「読み取り開始」と指定します。
class string コンポーネントに適用されるCSSスタイル。 このスタイルは、コンポーネントによって出力される基本スタイルに追加されます。
continuousScan boolean エンドユーザが読み取り画面を終了するか、連続読み取りのコールバックサービスが読み取り終了を返すまで、RayKitアプリが連続読み取りを実行するかどうかを指定します。既定値はfalseです。
continuousScanCallback string 連続読み取りを制御するためのWebServiceのコールバック。コールバックの詳細は連続読み取り機能の開発で説明します。
scanResults string 読み取り結果。読み取り結果が複数の場合はコンマ(,)で区切られます。
scannedTypes string 読み取ったバーコードの種類。読み取り結果が複数の場合はコンマ(,)で区切られます。バーコードの種類の値は、読み取るバーコードの種類を参照してください。
useFrontCameraIfAvailable boolean フロントカメラ(インカメラ)を使用するかどうかを指定します。trueのときフロントカメラを使用します。falseのときフロントカメラを使用しません。既定値はfalseです。フロントカメラが利用可能でない場合はバックカメラ(リアカメラ、背面カメラ)を使用します。フロントカメラはQRコードのみの対応です。QRコード以外の対応はベータ扱いです。

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

イベント名 イベント型 説明
onScanComplete gcbc:GcBarcodeScanFinish 読み取りが完了したときのイベントです。

gcbc:GcBarcodeScannerLTコンポーネントのメソッド

メソッド名 構文 引数 戻り値 説明
scan scan() なし なし カメラによるバーコードの読み取り画面を開きます。

リファレンス(英語)

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 © 2019 GrapeCity inc. All rights reserved.