GrapeCity inc.

Salesforceをもっと便利に、もっと快適に。

技術記事

技術記事ではGrapeCity for Salesforceに関する技術的なトピックスや話題を取り上げてご紹介いたします。

2017.11.15

バーコードで現場とSalesforceを接続!

本日11月15日に「GrapeCity Barcode for Salesforce」(以下、GarpeCity Barcode)がバージョンアップし、バーコードの読み取り機能が追加されました。簡単な動画を作りましたので、まずはこちらをご覧ください。

GrapeCity BarcodeはSalesforceプラットフォーム上にバーコード業務を構築できるSalesforce専用バーコードコンポーネントです。この製品の特長は使う側(ユーザー)も手軽に簡単に使え、構築する側(システム管理者、開発者)も手軽に簡単に構築できる点にあります。

GrapeCity Barcodeの特長

1)バーコードの読み取りはスマートフォンで

専用デバイス(バーコードリーダー)は不要です。無償提供しているGrapeCity Barcode専用のモバイルアプリ(Android/iOS)をインストールすれば、スマートフォンでバーコードの読み取りが可能です。

GrapeCity Barcode専用のモバイルアプリはSalesforceのモバイルアプリ「Salesforce1」とほぼ同等の機能を保有しています。「Salesforce1」ユーザーであれば違和感なく操作が行えます。

2)Salesforce関連知識だけでOK

LightningやVisualforceといったSalesforce関連知識だけで簡単にバーコードの生成・読み取り機能を使うことができます。専用バーコードリーダーやモバイルアプリの開発知識は不要です。

動画サンプルの解説

実際の操作性については動画を見ていただいたことでご理解いただけたと思います。以下では、動画サンプルを例にVisualforceでどのように読み取り機能を開発するのか、ということを解説したいと思います。サンプルコードは下記からダウンロードできます。

サンプルコードをダウンロードする

1)サンプルのシナリオ(イベント出欠管理)

  1. 参加証にあるQRコードを読み取る。参加証にはキャンペーンメンバーのIDをQRコード化したものを張り付けてあります。

    受講票
    参加証
  2. QRコードから読み取ったキャンペーンメンバーのIDを使ってキャンペーンメンバーのレコードを取得する。
  3. 取得したキャンペーンメンバーレコードの「状況」を「出席」に更新する。

    キャンペーンメンバーが「出席」に更新されている
    キャンペーンメンバーが「出席」に更新されている

2)コードの解説

このサンプルでは「CampaignMemberScanDemo」というVisualforceページと「CampaignMemberScanDemoController」というApexクラスを作成しています。

  1. Visualforceページ「CampaignMemberScanDemo」
    「CampaignMemberScanDemo」の48~53行目をご覧ください。GcBarcodeScannerVFというタグがあります。GrapeCity BarcodeをSalesforce組織にインストールすると、このタグが使えるようになります。このタグをVisualforceページに記述することで読み取り用のボタンが配置されます。各属性は以下のように指定します。

    id コンポーネントを識別するための任意のIDを指定します。
    buttonText ボタンのキャプションを指定します。
    onScanComplete スキャン成功後に動作するAPEXを指定します。
    scanResults スキャン結果を格納するページコントローラのプロパティを指定します。
    reRender スキャン後に更新される、このページ内のセクションを指定します。
    styleClass ボタンに適用するCSSのクラス名を指定します。
    「CampaignMemberScanDemo」の抜粋(48~53行目)
    <gcbc:GcBarcodeScannerVF id="gcBarcodeSanner_single" 
                          buttonText="読取" 
                          onScanComplete="{!onSingleScanCompleteAction}" 
                          scanResults="{!SingleScanResult}" 
                          reRender="singleScanOutput" 
                          styleClass="slds-button slds-button--brand" />
  2. Apexクラス「CampaignMemberScanDemoController」

    「CampaignMemberScanDemo」のコントローラーです。63~66行目をご覧ください。これがスキャン結果を格納するページコントローラのプロパティSingleScanResultです。

    「CampaignMemberScanDemoController」の抜粋(63~66行目)
    public string SingleScanResult{
        get;
        set;
    }

    つづいて、2~19行目をご覧ください。このonSingleScanCompleteActionでスキャン成功後の動作を規定しています。スキャン結果SingleScanResult(キャンペーンメンバーのID)を使って対象のキャンペーンメンバーを取得し「状況」を「出席」に更新しています。

    「CampaignMemberScanDemoController」の抜粋(2~19行目)
    public PageReference onSingleScanCompleteAction(){        
        getSingleScanOutputMessage();
        System.debug('onSingleScanCompleteAction');
        System.debug('SigneScanResult=' + this.SingleScanResult);
        if (String.isNotEmpty(this.SingleScanResult)) {
            String[] rs = splitMultipleScanResult(this.SingleScanResult);
            List<CampaignMember> cms = [SELECT ID, Status, CompanyOrAccount, Lead.Description, Lead.ID FROM CampaignMember WHERE ID in :rs];
            if (cms.size() > 0) {
                for (CampaignMember m : cms) {
                    if ('出席' <> m.Status)
                      m.Status = '出席';
                }
                update cms;
            }
        }
    
        return null;
    }

    Visualforceの開発経験のある方であれば、違和感なく普通のVisualforceの開発ということがご理解いただけたと思います。ストレートに言ってしまうと、開発者の観点ではバーコード読み取りが行えるVisualforceのタグが増えただけです。あとは普通のVisualforceの開発と変わりません。

まとめ

バーコードは現実の人や商品などのリアルな世界とシステムをつなぐことができる優れた仕組みです。GrapeCity BarcodeはSalesforce上にその仕組みを提供し、新しい可能性を広げます。例えば、今回のサンプルではイベント出欠管理を例にしましたが、リアルタイムでSalesforceの顧客データとつながることになるので、来場情報を担当営業へすぐに通知するなどさらなる顧客満足度向上につなげることもできます。その他にもPartner Communityと組み合わせることで、外注業者や代理店での報告業務や入荷検品業務を構築できるなどSalesforceの可能性を広げる様々な使い方ができます。

Salesforceプラットフォーム上にバーコード業務を構築できるSalesforce専用バーコードコンポーネント「GrapeCity Barcode for Salesforce」は無料で30日間フル機能をトライアルできますので、ご自身の環境でぜひお試しください。本記事のサンプルはコードを公開していますので、ご自身の環境でお試しいただけます。手順は下記をご参照ください。

補足 - サンプルを自身の環境に取り込む手順

  1. ご自身のセールスフォース環境を用意します。Developer EditionやSandoxなどでもお試しいただけますが、キャンペーンオブジェクトを利用するため、マーケティングユーザのアカウントを用意する必要があります。
  2. ご自身のセールスフォース環境にGrapeCity Barcodeをインストールします。
    AppExchangeサイトでGrapeCity Barcode for Salesforceを入手する
  3. Apexクラス「CampaignMemberScanDemoController」とVisualforceページ「CampaignMemberScanDemo」を作成します。
    ソースコードは下記からダウンロードできますので、コピー&ペーストで作成してください。
    その際に、Visualforceページ「CampaignMemberScanDemo」には「Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能」にチェックを付けて下さい。
    サンプルコードをダウンロードする
  4. Visualforceページのタブを作成します。[設定]-[作成]-[タブ]からVisualforceタブを作り「CampaignMemberScanDemo」を指定してください。
  5. モバイルナビゲーションに作成したタブを指定します。[モバイル管理]-[Salesforceナビゲーション]から指定してください。
  6. GrapeCity Barcode専用モバイルアプリをスマートフォン端末にインストールしてください。
    • Apple Storeからダウンロード
    • Google Playで手に入れよう
  7. 任意のキャンペーンを作成してください。作成したキャンペーンの[高度な設定]で状況を「登録」「送信済み」「出席」「欠席」の4つを作成してください。

これでサンプルの取り込みは完了です。任意のキャンペーンメンバーを作り、キャンペーンメンバーIDをQRコード化(フリーのQRコード作成サイトでOKです)したものをGrapeCity Barcode専用モバイルアプリからログインし、上記で作成したタブからスキャンしてみてください。

技術記事の一覧に戻る

無料で30日間フル機能をお試しいただけます

GrapeCity for Salesforceは、AppExchageサイトからトライアルできます。
無料で30日間フル機能をお試しいただけます。