アプリの画面をカスタマイズする

RayBarcodeの専用アプリRayBarcode Readerの画面をカスタマイズすることができます。

ここでは、カスタマイズ可能な箇所やVisualforce・Lightningコンポーネントを使ったカスタマイズ方法について説明します。

カスタマイズ可能な箇所

上記の画像のよう、RayBarcode Readerアプリに以下の要素を設定できます。

  • タイトル
  • タイトルのフォント色
  • タイトルのフォントサイズ
  • 余白エリアの背景色
  • 余白エリアの透明度

チュートリアル6と7では、1回の読み取り操作でバーコードを読み取り結果をVisualforce・Lightningページに表示する最小の例を挙げて説明します。

チュートリアル6。Visualforceコンポーネントを使ってアプリの画面をカスタマイズする

gcbc:GcBarcodeScannerVFコンポーネントの「title」「font-color」「font-size」「background-color」「opacity」属性値を設定することで実装可能です。

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

まずは、読み取り結果を受け取るコントローラを作成します。

  1. Salesforce Classicの場合、「設定 > ビルド > 開発 > Apexクラス」を開く。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > カスタムコード > Apexクラス」を開く。
  2. 「新規」ボタンをクリックする。
  3. 後述のソースコードを貼り付け、Tutorial6Controller.cls を作成する。
// Tutorial6Controller.cls
public with sharing class Tutorial6Controller {
    
    // 読み取り結果を格納する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ページ Tutorial6.vfp を作成します。この画面は「読み取り開始」ボタンと「読み取り結果の表示領域」を持ちます。

  1. Salesforce Classicの場合、「設定 > ビルド > 開発 > Visualforce ページ」を開く。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > カスタムコード > Visualforce ページ」を開く。
  2. 「新規」ボタンをクリックする。
  3. 表示ラベルや名前欄に”Tutorial6”を入力し、オプション「Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能」にチェックを入れる。
  4. 後述のソースコードを貼り付けて、「保存」ボタンをクリックする。

    <!-- RayBarcode Readerアプリの画面カスタマイズ サンプルコード -->
    <!-- Tutorial6.vfp -->
    <apex:page controller="Tutorial6Controller">
    <!-- Lightning Design Systemを有効にする -->
    <apex:slds />
    <!-- 見出しを表示する -->
    <apex:sectionHeader title="チュートリアル6"/>
    <!-- 読み取りボタンを表示する -->
    <gcbc:GcBarcodeScannerVF id="scanButton"
        title="RayBarcodeウェブセミナー"
        font-color="Yellow"
        font-size="20"
        background-color="DarkGreen"
        opacity="1"
        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>                
    
  5. 作成したVisualforceページをSalesforceアプリから表示できるようにするため、タブをナビゲーションメニューに追加する。

    Salesforce Classicの場合:

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

    Lightning Experienceの場合:

    1. 歯車アイコンをクリックした後「設定 > プラットフォームツール > ユーザインターフェース > タブ」でVisualforceタブを追加する。
    2. 「設定 > プラットフォームツール > アプリケーション > モバイルアプリケーション > Salesforce > Salesforce ナビゲーション」で、Salesforceアプリのナビゲーションメニューにタブを追加する。
  6. 作成したVisualforceページがモバイルナビゲーションに追加されていることを確認する。

  7. 「読み取り開始」ボタンをタップし、RayBarcode Readerアプリの画面がカスタマイズされていることを確認する。

チュートリアル7。Lightningコンポーネントを使ってアプリの画面をカスタマイズする

gcbc:GcBarcodeScannerLTコンポーネントの「title」「font-color」「font-size」「background-color」「opacity」属性値を設定することで実装可能です。

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

まずは、gcbc:GcBarcodeScannerLTコンポーネントを使って新しいLightningコンポーネントを作成します。

  1. Salesforceの「開発者コンソール」を起動する。Salesforce Classicの場合は画面上のユーザ名をクリックし、「開発者コンソール」をクリックします。Lightning Experienceの場合は、画面右上の歯車アイコンをクリックし、「開発者コンソール」をクリックします。「開発者コンソール」はお使いのSalesforceの言語設定にかかわらず英語で表示されます。
  2. 「開発者コンソール」のメニューから「File > New > Lightning Component」をクリックする。
  3. 「New Lightning Bundle」画面の「Name」に任意のコンポーネント名を設定する。例:Tutorial7
  4. 「Tutorial7.cmp」に次のコードを入力し、キーボードの「Ctrl + S」を押下して保存する。Macの場合は、CtrlキーをCommandキー(⌘キー)に読み替えてください。
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="singleScanResult" type="String"/>
    <aura:attribute name="singleScanResultOutout" type="String"/>  
    
    <h1>チュートリアル7</h1>
    <br/>
    <gcbc:GcBarcodeScannerLT
        aura:id="single-scan-button" 
        title="RayBarcodeウェブセミナー"
        font-color="Yellow"
        font-size="20"
        background-color="DarkGreen"
        opacity="1"
        buttonText="読み取り開始"
        scanResults="{!v.singleScanResult}"
        onScanComplete="{!c.onSingleScanComplete}"
        />            
    <br/>
    <ui:outputText value="{!v.singleScanResultOutout}"/>    
</aura:component>

5. 右の一覧から「CONTROLLER」をクリックする。
6. 「Tutorial7Controller.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コンポーネントを配置します。

  1. Salesforce Classicの場合、「設定 > ビルド > Lightning Bolt > Lightning アプリケーションビルダー」を開く。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > ユーザインターフェース > Lightning アプリケーションビルダー」を開く。
  2. 「新規」ボタンをクリックする。
  3. 「Lightning ページを新規作成」ウィンドウで、以下のように設定する。
    • 「アプリケーションページ」 を選択し、「次へ」 をクリックする。
    • 表示ラベルに適切なラベル名を入力し、「次へ」をクリックする。例:Tutorial7
    • 「1つの範囲」を選択して [完了] をクリックする。
  4. Lightning ページの編集画面にて、以下を参考に設定します。
    • 左側のコンポーネントエリアの「カスタム」からさきほど作成した「Tutorial7」を選択して、画面中央の「ここにコンポーネントに追加」上へドラッグ&ドロップする。
  5. 「保存」ボタンをクリックする。
  6. 「有効化」ボタンをクリックする。
  7. 有効化のウィンドウの 「モバイルナビゲーション」タブで、以下のように設定します。
    • 「アプリケーションにページを追加」をクリックして、作成した Lightning ページが追加されていることを確認する。
  8. 「読み取り開始」ボタンをタップし、RayBarcode Readerアプリの画面がカスタマイズされていることを確認する。

モバイルアプリケーションに表示が反映するまで時間がかかることがあります。 動作を確認する場合、モバイルアプリケーションからログアウトしてログインし直します。

Copyright © 2020 GrapeCity inc. All rights reserved.