バーコードを読み取るアプリの作成

Process Builder and Scanning Rule

Salesforceのプロセスビルダーを使うと、ノーコード、つまりApexでプログラミングせずにバーコードの読み取りアプリを開発できます。この方法では「GC Barcode」アプリからの読み取り結果がSalesforceに格納され、プロセスビルダーで任意のアクションを実行できます。この機能はv3の新機能です。

重要：以下の手順にはSalesforce組織の設定変更があります。本番環境で試す前に、まずはDeveloper EditionやSandboxで試してください。

前提

次の知識が必要です。

  • プロセスビルダーの使い方
  • カスタムメタデータ型へのレコードの追加
  • カスタムオブジェクトに格納されたレコードの取り出し

参照：

プロセスビルダーのための読み取り画面はLightning Componentとして提供されているため、利用する環境ではSalesforceの「私のドメイン」をリリースする必要があります。

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

「私のドメイン」を有効化できない場合、将来のVisualforceベースの読み取り画面の提供をお待ちください。

プロセスビルダーを使った読み取り操作の流れ

ユーザーによるスマートフォンを使った読み取り操作と、システム管理者による読み取り処理のカスタマイズは次の流れで使用できます。

  1. ユーザーがスマートフォンのホーム画面から「GC Barcode」アプリを起動する。
  2. 「GC Barcode」アプリにSalesforceのログイン画面が表示される。
  3. Salesforceのメニューから「GcBarcode Scanner」をタップする。
  4. バーコード読み取り用のカメラ画面が表示される。
  5. カメラ画面を通してバーコードを読み取る。
  6. システム管理者が事前にカスタムメタデータ型「BarcodeScanProcessRule」のルールで処理を定義できる。カスタムメタデータ型のルールに一致しないとき、レコードIDとして処理される。
  7. カスタムオブジェクト「BarcodeScanResult」に読み取り結果のレコードが追加される。
  8. システム管理者が事前にプロセスビルダーで「BarcodeScanResult」に追加されたレコードの処理方法を定義できる。
  9. 「GcBarcode Scanner」アプリが「BarcodeScanResult」の「JumpToRecordId」カスタム項目に格納されたIDのレコードを表示する。
sequenceDiagram participant ユーザー participant GC Barcodeアプリ participant Salesforce ユーザー->>GC Barcodeアプリ: スマートフォンでアプリを起動 Salesforce->>ユーザー: Salesforceログイン画面を表示 ユーザー->>GC Barcodeアプリ: Salesforceにログイン Salesforce->>ユーザー: Salesforceのホーム画面を表示 ユーザー->>GC Barcodeアプリ: Salesforce上の「GcBarcode Scanner」を開く GC Barcodeアプリ->>ユーザー: カメラ画面を表示 ユーザー->>GC Barcodeアプリ: カメラでバーコードを読み取り GC Barcodeアプリ->>Salesforce: 読み取ったデータをSalesforceに渡す Salesforce-->GC Barcodeアプリ: 読み取ったデータをルールで判定 Salesforce-->GC Barcodeアプリ: 読み取ったデータをレコードに保存 Salesforce-->GC Barcodeアプリ: プロセスビルダーでレコードを処理 Salesforce->>ユーザー: 「JumpToRecordId」のレコードを表示

アプリの構成

まず、プロセスビルダーのためのアプリをスマートフォンの「GCBarcodeアプリ」から表示できるようにします。

»

Creating Visualforce page

ここでは、Visualforceページを使用してバーコードを読み取る方法を説明します。バーコードの読み取りにはスマートフォンのカメラを使うため、作成したVisualforceページは専用のスマートフォンアプリから表示して使用します。このVisualforceページをPC（Mac）のブラウザーやSalesforceアプリから表示した場合は動作しません。

前提

次の知識が必要です。

  • Visualforceページの開発
  • CSSの開発
  • JavaScriptの開発
  • Salesforceモバイルアプリケーションの開発

利用手順

バーコード読み取り画面の開発手順は次のようになります。

  1. 画面のレイアウトを決定する。最小の構成で「読み取りボタン」と「読み取り結果の表示領域」が必要。
  2. 読み取りが成功した後の処理をコントローラー（Apexクラス）で受ける。
  3. コントローラーから読み取り結果を返す。
  4. 作成したVisualforceページをSalesforceに表示する。

実際の開発例は、このページのチュートリアルを参照してください。

チュートリアル1. 読み取ったバーコードの値を画面に表示する

まずは１回の読み取り操作で１つのバーコードを読み取り、結果をVisualforceページに表示する最小の例を紹介します。

  1. 読み取り成結果を受け取るコントローラー（Tutorial1Controller.cls）を作成する。
  2. 読み取り成画面となるVisualforceページ（Tutorial1.vfp）を作成する。この画面は「読み取りボタン」と「読み取り結果の表示領域」を持つ。
  3. Visualforceページの「Lightning Experience、Salesforce、Lightning コミュニティで利用可能」をチェックをオンにする。
  4. 「設定 > アプリケーションの設定 > 作成 > タブ」でVisualforceタブを追加する。例：「Tutorial1」タブ
  5. 「設定 > 管理者設定 > モバイル管理 > Salesforceナビゲーション」で、Salesforceのナビゲーションメニューにタブを追加する。
// Tutorial1Controller.cls
public with sharing class Tutorial1Controller {
    
    // 読み取り成結果を格納するSingleScanResultプロパティ
    public string SingleScanResult {get;set;}

    // 読み取り成結果を表示する要求に対して読み取り成結果を返す
    public string getSingleScanOutputMessage() {
        return this.SingleScanResult;
    }
}

<!-- GrapeCity Barcode for Salesforce バーコード読み取り サンプルコード -->
<!-- Tutorial1.vfp -->
<apex:page controller="Tutorial1Controller">
    <!-- Lightning Design Systemを有効にする -->
    <apex:slds />
    <!-- 見出しを表示する -->
    <apex:sectionHeader title="バーコードの読み取り"/>
    <!-- 読み取りボタンを表示する -->
    <gcbc:GcBarcodeScannerVF
        id="scanButton"
        buttonText="読み取り開始"
        continuousScan="false"
        reRender="singleScanOutput"
        scanResults="{!SingleScanResult}" 
        styleClass="slds-button slds-button--brand slds-m-top--medium" 
        style="width:200px;" />
    <!-- 結果の表示領域 -->    
    <apex:outputPanel id="singleScanOutput" layout="block">
        {!SingleScanOutputMessage}        
    </apex:outputPanel>
</apex:page>

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

»

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の場合:

»

Copyright © MESCIUS inc. All rights reserved.