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

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

前提

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

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

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

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

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

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

チュートリアル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アプリをSalesforceアプリのナビゲーションメニューに追加します。

Salesforce Classicの場合:

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

Lightning Experienceの場合:

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

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

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

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

gcbc:GcBarcodeScannerLTDemoコンポーネントの属性については、こちらを参照してください。

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

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

作成したLightningアプリケーションを実行すると、ユーザは「読み取り開始」ボタンをRayBarcode Readerアプリによるバーコードの読み取り画面を開くことができます。バーコードまたは二次元コードが正常に読み取りできた場合、スマートフォンはフィードバックとしてビープ音を再生します。読み取られた値は、開発者が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コンポーネントの属性やイベント

gcbc:GcBarcodeScannerLTコンポーネントの属性やイベントについては、こちらを参照してください。

Copyright © 2020 GrapeCity inc. All rights reserved.