Home > How to use > Scanning Barcode > バーコードを読み取るアプリの作成 > Creating Visualforce page

Creating Visualforce page

English version content is under construction. Click here if you’d like to see original Japanese article. Sorry for the inconvenience.

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

前提

次の知識が必要です。

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

利用手順

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

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

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

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

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

読み取り成結果を受け取るコントローラー（Tutorial1Controller.cls）を作成する。
読み取り成画面となるVisualforceページ（Tutorial1.vfp）を作成する。この画面は「読み取りボタン」と「読み取り結果の表示領域」を持つ。
Visualforceページの「Lightning Experience、Salesforce、Lightning コミュニティで利用可能」をチェックをオンにする。
「設定 > アプリケーションの設定 > 作成 > タブ」でVisualforceタブを追加する。例：「Tutorial1」タブ
「設定 > 管理者設定 > モバイル管理 > 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コードを読み取れるか確認してください。

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

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

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

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

// Tutorial2Controller.cls
public with sharing class Tutorial2Controller {
    
    // 読み取り成結果を格納するSingleScanResultプロパティ
    public string SingleScanResult {get;set;}

    // 読み取り成結果を表示する要求に対して読み取り成結果を返す
    public string getSingleScanOutputMessage() {
        string result = "存在しません";
        string accountName = this.SingleScanResult;
        Account[] accounts = [SELECT Name, Phone FROM ACCOUNT WHERE Name=:accountName LIMIT 1];
        if (accounts.size() > 0) {
            result = "存在します";
        }
        return result;
        // return EncodingUtil.urlDecode(this.SingleScanResult, 'UTF-8');
    }
}

<!-- GrapeCity Barcode for Salesforce バーコード読み取り サンプルコード -->
<!-- Tutorial2.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>

動作を確認します。次の1つ目のQRコードは「日本株式会社」、２つ目のQRコードは「米国株式会社」という値を表します。

チュートリアル3. 連続読み取り

チュートリアル2では、１回の読み取り操作ごとに「読み取り開始」ボタンをタップする必要がありました。複数のQRコードを連続してスキャンしたい場合、これでは不便なのでチュートリアル3では連続スキャンを実装します。

連続読み取りを有効にするには、gcbc:GcBarcodeScannerVFコンポーネントのcontinuousScan属性をtrueに設定します。さらにcontinuousScanCallback属性により、連続でバーコードを読み取る場合の操作を制御するコールバックを指定します。

<!-- GrapeCity Barcode for Salesforce バーコード読み取り サンプルコード -->
<!-- Tutorial3.vfp -->
<apex:page controller="Tutorial1Controller">
    <!-- Lightning Design Systemを有効にする -->
    <apex:slds />
    <!-- 見出しを表示する -->
    <apex:sectionHeader title="バーコードの読み取り"/>
    <!-- 読み取りボタンを表示する -->
    <gcbc:GcBarcodeScannerVF
        id="scanButton"
        buttonText="連続読み取り開始"
        continuousScan="true"
        continuousScanCallback=""
        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>

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

属性名	属性型	既定値	説明
buttonText	String	Empty(空文字)	ボタンのキャプション。たとえば「読み取り開始」と指定します。
continuousScan	Boolean	false	連続でバーコードを読み取る場合true、それ以外の場合false。falseの場合、アプリはバーコードが見つかった後にスキャンウィンドウからページに戻ります。 trueの場合、アプリはバーコードを検出した後にcontinuousScanCallbackを呼び出します。 continuousScanCallbackがBarcodeScanResponse::shouldContinueScanプロパティがtrueのBarcodeScanResponseを返す場合、Webページに戻る代わりに、バーコードが見つかった後にスキャンウィンドウに残り、一定の間隔の後に他のバーコードを検索し、ユーザーがキャンセルするまでスキャン、またはcontinuousScanCallbackは、BarcodeScanResponse::shouldContinueScanプロパティがfalseであるBarcodeScanResponseを返します。
continuousScanCallback	String	Empty(空文字)	連続でバーコードを読み取る場合の操作を制御するコールバック。このWebサービスのリクエスト本体は、次のようなコードでBarcodeScanDataに変換できる文字列になります。: (BarcodeScanData)JSON.deserialize(RestContext.request.requestBody.toString(), BarcodeScanData.class);応答はBarcodeResponseScanオブジェクトとする。ジョブを実行するメソッドは、processBarcodeContinuousScanという名前にする必要があります。 processBarcodeContinuousScanの署名は次のようになります。: global static BarcodeScanResponse processBarcodeContinuousScan()
id	String	Empty(空文字)	コンポーネントを識別するためのID。
onScanComplete	String	Empty(空文字)	スキャンが完了したときのアクションハンドラー。このアクションを使用して、スキャン結果を処理します。このサーバー側コントローラー・ハンドラーは、バーコードが記録された後に呼び出されます。このメソッドでは、サーバー側でデータを更新したり、新しいページにジャンプしたりすることができます。
reRender	String	Empty(空文字)	バーコードが検知された後に更新される、このページ内のセクションを指定します。
scanResults	String	Empty(空文字)	バーコードが見つかったときにスキャン結果を受け入れるページコントローラーのプロパティ。連続スキャンの場合、結果はコンマ（,）で区切られます。読み取りデータに含まれるコンマ（,）は「%2C」として返ります。
scannedTypes	String	Empty(空文字)	スキャンした各結果のタイプを格納します。複数のタイプはコンマで区切られます。
styleClass	String	Empty(空文字)	ボタンに適用するCSSのクラス名。たとえばVisualforceページにLightning Design Systemなどのスタイルシートを適用しているとき、そのスタイルシートのクラス名を指定できます。
style	String	Empty(空文字)	ボタンに直接適用するCSS。たとえばボタンのサイズを指定します。

BarcodeScanResponseクラスの属性

コールバックで使用するデータフォーマットです。

属性名	属性型	説明
displayMessage	String	スキャナー画面に表示される文字列メッセージ。
notifyErrorFeedback	Boolean	エラーのフィードバックの有無を指定します。trueのときデバイスでビープ音を再生します。falseのときビープ音を再生しません。実際にビープ音が再生されるかどうかは、スマートフォンの設定により異なります。たとえばマナーモードに設定されている場合、再生されない場合があります。
preserveScanResult	Boolean	trueは現在のスキャンが成功したことを示し、それ以外の場合はfalseを示します。スキャンが成功すると、現在のスキャン結果が履歴データに保存されます。
shouldContinueScan	Boolean	trueは、別のスキャンを続行することを示し、それ以外の場合はfalseを示します。

BarcodeScanDataクラスの属性

Data for callback service.

属性名	属性型	説明
preservedScannedContent	String[]	保存されているすべてのスキャンデータの内容を示します。
preservedScannedType	String[]	保存されたすべてのスキャンされたバーコードタイプリストを示します。
scannedResult	String	現在のスキャン結果を示します。
scannedType	String	現在のスキャンタイプを示します。

preservedScannedTypeまたはscannedTypeには、読み取ったバーコードや二次元コードをもとに次の値が格納されます。

AZTEC
CODABAR (Also called Ames Code, NW-7, Code 2 of 7, ANSI/AIM BC3-1995 or USD-4)
CODE_39
CODE_93
CODE_128（EAN128の場合も「CODE_128」）
DATA_MATRIX
EAN_8（JAN8の場合も「EAN_8」）
EAN_13（JAN13の場合も同じ「EAN_13」）
ITF
IMB
MAXICODE
MSI
PDF_417
QR_CODE
RSS_14
RSS_EXPANDED
UPC_A
UPC_E
UPC_EAN_EXTENSION
PLESSEY