Visualforceページの開発

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

前提

次の知識が必要です。

  • Visualforceページの開発
  • CSSを使った開発
  • JavaScriptを使った開発
  • Salesforce1モバイルアプリケーションの開発

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

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

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

利用手順

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

  1. 画面のレイアウトを決定する。最小の構成で「読み取りボタン」と「読み取り結果の表示領域」が必要。
  2. 読み取りが成功した後の処理をコントローラ(Apexクラス)で受ける。
  3. 連続読み取りの場合、連続読み取りの動作を制御するコールバックをWebServiceで作成する。
  4. コントローラから読み取り結果を返す。
  5. 作成したVisualforceページをSalesforce1のナビゲーションメニューに表示する。

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

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

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

次の手順ではPC(Mac)のブラウザを使用します。

  1. Salesforce Classicの場合、「設定 > ビルド > 開発 > Apexクラス」を開く。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > カスタムコード > Apexクラス」を開く。
  2. 読み取り結果を受け取るコントローラ Tutorial1Controller.cls を作成する。
// Tutorial1Controller.cls
public with sharing class Tutorial1Controller {
    
    // 読み取り結果を格納するSingleScanResultプロパティ
    public string singleScanResult {get;set;}

    // 読み取り結果を表示する要求に対して読み取り結果を返す
    public string getSingleScanOutputMessage() {
        // 読み取り結果に値が存在する場合
        if (this.singleScanResult != null) {
            // UTF-8でURLエンコードした結果を返す
            return EncodingUtil.urlDecode(this.singleScanResult, 'UTF-8');
        }
        return this.singleScanResult;
    }
}

次に「読み取り開始」ボタンを置く画面となるVisualforceページ Tutorial1.vfp を作成します。この画面は「読み取り開始」ボタンと「読み取り結果の表示領域」を持ちます。

  1. Salesforce Classicの場合、「設定 > ビルド > 開発 > Apexクラス」を開く。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > カスタムコード > Apexクラス」を開く。
  2. 後述の「Tutorial1.vfp」を貼り付ける。
  3. Visualforceページの「Lightning Experience、Salesforce1、Lightning コミュニティで利用可能」をチェックをオンにする。
  4. 「プレビュー」をクリックする。
  5. 「読み取り開始」ボタンが表示されるが、PC(Mac)のブラウザではクリックできない。
<!-- RayBarcode バーコード読み取り サンプルコード -->
<!-- Tutorial1.vfp -->
<apex:page controller="Tutorial1Controller">
    <!-- Lightning Design Systemを有効にする -->
    <apex:slds />
    <!-- 見出しを表示する -->
    <apex:sectionHeader title="チュートリアル1"/>
    <!-- 読み取りボタンを表示する -->
    <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>

Salesforce1から表示できるように、タブをナビゲーションメニューに構成する。

Salesforce Classicの場合:

  1. 「設定 > ビルド > 作成 > タブ」でVisualforceタブを追加する。例:「チュートリアル1」タブ
  2. 「設定 > 管理 > モバイル管理 > Salesforce ナビゲーション」で、Salesforce1のナビゲーションメニューにタブを追加する。

Lightning Experienceの場合:

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

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

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

チュートリアル2. 読み取ったバーコードの値をSalesforce上のデータと照合する

次に、読み取った結果をSalesforce上のデータと照合し、結果を返します。ここでは、「日本株式会社」という名前の取引先のレコードが存在していると仮定し、「日本株式会社」という値を持つQRコードを読み取った場合に成功、それ以外の名前を読み取った場合にエラーとします。読み取りに成功した場合は、電話番号も表示します。

下記のコードでは「Accounts」が「取引先」を示します。必要に応じて、他のオブジェクトのAPI名に書き換えたり、「日本株式会社」を既存の別の名前に変更したりして試してください。

次の手順ではPC(Mac)のブラウザを使用します。

  1. Salesforce Classicの場合、「設定 > ビルド > 開発 > Apexクラス」を開く。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > カスタムコード > Apexクラス」を開く。
  2. 読み取り結果を受け取るコントローラ Tutorial2Controller.cls を作成する。
// Tutorial2Controller.cls
public with sharing class Tutorial2Controller {
    
    // 読み取り結果を格納するSingleScanResultプロパティ
    public string singleScanResult {get;set;}

    // 読み取り結果を表示する要求に対して読み取り結果を返す
    public string getSingleScanOutputMessage() {
        string result = '存在しません';

        // 読み取り結果に値が存在する場合
        if (this.singleScanResult != null) {
            string accountName = EncodingUtil.urlDecode(this.singleScanResult, 'UTF-8');
             // 読み取った値に一致する最初の1件の
             // 取引先名と電話番号を「取引先」から取得する
             if (!Schema.Account.getSObjectType().getDescribe().isAccessible()){
                 return result;
             }
             Account[] accounts = [SELECT Name, Phone FROM ACCOUNT WHERE Name=:accountName LIMIT 1];
             // 0件以上の結果がある場合
             if (accounts.size() > 0) {
                 result = '存在します。電話番号は' + accounts[0].Phone;
             }
        }
        return result;
    }
}

次に「読み取り開始」ボタンを置く画面となるVisualforceページ Tutorial2.vfp を作成します。この画面は「読み取り開始」ボタンと「読み取り結果の表示領域」を持ちます。

<!-- RayBarcode バーコード読み取り サンプルコード -->
<!-- Tutorial2.vfp -->
<apex:page controller="Tutorial2Controller">
    <!-- Lightning Design Systemを有効にする -->
    <apex:slds />
    <!-- 見出しを表示する -->
    <apex:sectionHeader title="チュートリアル2"/>
    <!-- 読み取りボタンを表示する -->
    <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>

RayKitアプリでSalesforceにログインし、Salesforce1ナビゲーションメニューから「チュートリアル2」をタップして動作を確認します。次の1つ目のQRコードは「日本株式会社」、2つ目のQRコードは「米国株式会社」という値を表します。

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

属性名 属性型 説明
barcodeFormat String スキャナが認識するバーコード形式を指定します。バーコードの種類の値は、読み取るバーコードの種類を参照してください。複数の種類のバーコードを読み取る場合は、バーコード形式をコンマ(,)で区切ります。既定ではすべてのバーコード形式が認識対象です。
buttonText String ボタンのキャプション。たとえば「読み取り開始」と指定します。既定値はEmpty(空文字)です。
continuousScan Boolean 連続でバーコードを読み取る場合true、それ以外の場合false。既定値はfalseです。falseの場合、アプリはバーコードが見つかった後に読み取り画面からページに戻ります。 trueの場合、アプリはバーコードを検出した後にcontinuousScanCallbackを呼び出します。 continuousScanCallbackがBarcodeScanResponse::shouldContinueScanプロパティがtrueのBarcodeScanResponseを返す場合、Visualforceページに戻る代わりに、バーコードが見つかった後に読み取り画面に残り、一定の間隔の後に他のバーコードを検索し、ユーザがキャンセルするまで読み取り、またはcontinuousScanCallbackは、BarcodeScanResponse::shouldContinueScanプロパティがfalseであるBarcodeScanResponseを返します。
continuousScanCallback String 連続でバーコードを読み取る場合の操作を制御するコールバック。コールバックの詳細は連続読み取り機能の開発で説明します。
id String コンポーネントを識別するためのID。
onScanComplete String 読み取りが完了したときのアクションハンドラ。 このアクションを使用して、読み取り結果を処理します。 このサーバー側コントローラー・ハンドラーは、バーコードが記録された後に呼び出されます。 このメソッドでは、サーバー側でデータを更新したり、新しいページにジャンプしたりすることができます。
reRender String バーコードが検知された後に更新される、このページ内のセクションを指定します。
scanResults String バーコードが見つかったときに読み取り結果を受け入れるページコントローラのプロパティ。 連続読み取りの場合、結果はコンマ(,)で区切られます。読み取りデータに含まれるコンマ(,)は「%2C」として返ります。
scannedTypes String 読み取った各結果のバーコードの種類を格納します。複数のタイプはコンマで区切られます。バーコードの種類の値は、読み取ったバーコードの種類を参照してください。
styleClass String ボタンに適用するCSSのクラス名。たとえばVisualforceページにLightning Design Systemなどのスタイルシートを適用しているとき、そのスタイルシートのクラス名を指定できます。
style String ボタンに直接適用するCSS。たとえばボタンのサイズを指定します。
useFrontCameraIfAvailable Boolean フロントカメラ(インカメラ)を使用するかどうかを指定します。trueのときフロントカメラを使用します。falseのときフロントカメラを使用しません。既定値はfalseです。フロントカメラが利用可能でない場合はバックカメラ(リアカメラ、背面カメラ)を使用します。フロントカメラはQRコードのみの対応です。QRコード以外の対応はベータ扱いです。
Copyright © 2019 GrapeCity inc. All rights reserved.