CLS Tools ユーザガイド - 基本パッケージ

CLS ToolsではSalesforceの機能を拡張するためのLightningコンポーネントを提供します。

主にSalesforceに新たなデータの表示方法を追加いたします。

2021年1月現在、以下の機能が提供されています。

QRコード（基本パッケージ）

• QRコードの表示、読込機能を提供します。

ガントチャート（拡張パッケージ）

• 日時項目を２つ以上含む主要標準オブジェクト、カスタムオブジェクトをガントチャートとして表示します。

   

汎用検索（拡張パッケージ）

• 主要標準オブジェクト、カスタムオブジェクトを対象に、クラシカルな検索画面を実現するための検索条件及び検索結果コンポーネントを提供します。

本ドキュメントでは基本パッケージについて記述いたします。

目次

システム要件

• 対応Webブラウザ

  • Google Chrome 最新の安定版

  • Microsoft Edge 最新の安定版

  • Mozilla Firefox 最新の安定版

  • Safari 最新の安定版

     

• 対応環境

  • 使用可能なインタフェース

    • Lightning Experience

  • Salesforceのエディション

    • Enterprise、Unlimited、Force.com、Developerの各エディション

       

• ハードウェア要件

  • マウスあるいはトラックパッド

  • 物理キーボード

    • タッチ操作およびソフトウェア キーボードでは操作できない場合があります

言語

表示言語はログインユーザの言語設定により決定されます。

翻訳リソースとして日本語および英語を提供いたします。

Salesforceの翻訳機能（トランスレーションワークベンチ）により各種言語に対応した翻訳設定を変更・追加できます。

基本パッケージ

CLS Toolsにおいて共通で利用されるオブジェクト、ラベル等に加えて、QRコードの表示及び読み込み機能を提供いたします。

CLS Tools の各機能を使用する場合、必ずインストールが必要となります。

処理はすべてSalesforceプラットフォーム及びブラウザ上で動作し、弊社システムを含む外部にデータを送信することはありません。

提供コンポーネント

基本パッケージには以下のようにQRコードに関連するLighting コンポーネント及びVisualforce コンポーネントが含まれています。

• Lightning Component

  

  • QR Code

    • QRコードを表示します。

      固定の文字列及び、指定項目の内容をQRコードとして表示（レコードページ配置時）します。

      独自のカスタムLightningコンポーネントに配置し、使用することも可能です。

       

  • QR Code Reader

    • パソコンやスマートフォンのカメラを使用し、QRコードを読み込むことができます。

       

  • QR Code Trademark

    • QRコードの商標はデンソーウェーブの登録商標です。QRコードの名称を使用するページには登録商標文を配置する必要があります。

      必要に応じて本コンポーネントをページ内に配置してください。

       

      ─────改ページ─────

  • QR Code SaveScanData

    • QR Code Readerコンポーネントを配置したページにセットで配置することにより、読み込み内容をカスタムオブジェクトに記録します。

      本コンポーネントは表示内容を持ちません。

      保存時及び保存失敗時にページにToast表示を行ないます。

       

• Lightning Event

  • QRCode Read Event

    • QR Code ReaderによりQRコードを読み込んだ際に本Eventが発行されます。
    • 独自のLiightning コンポーネント（Aura）によりEventをハンドリングして独自処理を実装することができます。

     

• Visualforce Component

  • QRCodeCmp

    • Visualforce ページ及びVisualforce Email TemplateでQRコード表示するコンポーネントです。

設定

QRコード関連コンポーネントのうちLightning Component「QR Code SaveScanData」を利用するために管理者権限でいくつかの設定を行う必要があります。

プロファイル、権限セットを使用し以下の設定を行います。

• Apexクラスへのアクセス権付与

　　　以下のApexクラスにアクセス権を付与します。

　　　　CLS_Base.QRCordReader_Ctrl

• オブジェクトへのアクセス権付与

　　　以下のSObjectへの作成権限とその項目へのを与える必要があります。

　　　　QRCode Scan Data

上記の設定のため、以下の設定済み権限セットを使用することができます。

• 権限セット

  CLS_QRCode

ライセンスの割当て

新規インストールすると３０日間のトライアルライセンスが５本割当てられます。

プラットフォームツール > アプリケーション > パッケージ > インストール済みパッケージ から「CLS Tools Base」パッケージの「ライセンスの管理」を開き、利用ユーザへライセンスを付与します。

基本パッケージのライセンスを３０本以上ご契約された場合、ライセンスは組織ライセンスに変更され、ゲストユーザによる利用が可能になります。

Lightningコンポーネント利用方法

QR Code

　Lightningページ/Communityページに配置して利用します。

• 設定項目

  • Value

    表示する値を固定文字列で指定します。

    次の「Value Field API Name」が指定されている場合、この値は無視されます。

     

  • Value Field API Name（レコードページに配置したときのみ表示）

    項目のAPI名を指定します。

     

  • Margin width

    QRコードの周囲のマージン幅を指定します。

     

  • Scale

    QRコードのドットサイズを指定します。

    生成されるQRコードが小さい場合、値を大きくすることで全体のサイズを調整します。

     

  • Show Value under QRCode

    チェックをつけるとQRコードの下にその内容を表示します。

• 技術情報

  QRコードの表示はJavascriptライブラリによってブラウザ上で行っています。

  https://github.com/soldair/node-qrcode

QR Code Trademark

• QRコードの商標はデンソーウェーブの登録商標です。QRコードの「名称」を使用するページには登録商標文を配置する必要があります。

  必要に応じて本コンポーネントをページ内に配置してください。

QR Code Reader

• Lightningページ、Lightning Community ページに配置することで、パソコンやスマートフォンのカメラを使用しQRコードを読み込むことができます。

• 設定項目

  • Max width for Screen

    カメラ画像のスクリーン幅をPixel単位で指定します。

    高さは使用カメラのアスペクト比に従ってスキャン時に自動で決定されます。

     

  • Show Scan Data

    チェックするとスキャンした情報を表示します。

     

  • Show component title

    チェックするとコンポーネントのタイトルと登録商標文を表示します。

    デフォルトのタイトルは「QR コード リーダー（QR Code Reader）」です。

• 利用方法

  1. カメラのついたパソコンやスマートフォンでコンポーネントを配置したページを開きます。

     

      

  2. 「Scan」ボタンを押下するとQRコードのScanが開始されます。

     初回実行時にはブラウザによるカメラ機能へのアクセス許可が求められます。

      

  3. QRコードが見つかると画像は停止し赤いラインでQRコードが囲われます。

     

      

  4. 「Show Scan Data」がチェックされている場合、画像エリアの下にその内容が表示されます。

     URLの場合、リンクとして表示されます。

      

  5. もう一度「Scan」ボタンを押下するとスキャンが再開します。

      

     ※携帯電話など複数のカメラが存在する場合、コンポーネント右下にカメラの切り替えボタンが表示されます。

• 注意事項

  色の薄いQRコードやあまりに小さなQRコードなど、認識が難しいケースがあります。

  ご留意ください。

• 技術情報

  QRコードの解析処理は以下のJavascriptライブラリによります。

  https://github.com/cozmo/jsQR

   

   

QR Code SaveScanData

• QR Code Readerコンポーネントを配置したページにセットで配置することにより、読み込み内容をカスタムオブジェクト（QRCode Scan Data）に記録します。

  本コンポーネントは表示内容を持ちません。

  保存時及び保存失敗時にページにトースト表示（小さなウィンドウによるポップアップ表示）を行ないます。

   

• オブジェクト定義

  保存先となるカスタムオブジェクトは以下の構造を持っています。

  ラベル	API参照名	名前空間	データ型
  Record Name	Name		自動採番
  Location	Location_ _c	CLS_Base	位置情報
  ScanData	ScanData_ _c	CLS_Base	ロングテキスト（131072）

  位置情報は保存処理において、ブラウザの取得する情報が記録されます。

  初回実行時にはブラウザによるGPS機能へのアクセス許可が求められます。

  GPS機能を持たないブラウザではLocation情報は記録されません。

Visualforceコンポーネント利用方法

QRCodeCmp

• Visualforceコンポーネント「QRCodeCmp」はVisualforce Page / Visualforce Email テンプレートで利用できます。

  指定できる属性を以下に提示します。

  属性	データ型
  cellSize	Integer	QRコードの１以上のドットサイズを指定します
  color	String	QRコードの色を指定します。CSSで利用可能な色を指定します。デフォルトは「black」です。
  contents	String	QRコードとして出力する文字列を指定します。
  type	String	出力方法を指定します (HTML / SVG /GIF)

   

• Visualforce Email テンプレートでの利用方法

  1. 新規テンプレートの作成でVisualforceを指定します。

     

      

  2. QRコードはHTMLメールでのみ表示可能です。「messaging:htmlEmailBody 」を指定します。

     <messaging:emailTemplate subject="Test1" recipientType="Contact" >
     <messaging:htmlEmailBody >
     </messaging:htmlEmailBody>
     </messaging:emailTemplate>
     

     ─────改ページ─────

  3. messaging:htmlEmailBodyの内容として「CLS_Tools_Base:QRCodeCmp」を記述します。

     contents属性にはQRコードとして表示したい内容、type属性には「html」を指定します。

     x
     <messaging:emailTemplate subject="Test1" recipientType="Contact" >
     <messaging:htmlEmailBody >
     <CLS_Base:QRCodeCmp contents="http://www.clstairs.com" type="html"></CLS_Base:QRCodeCmp>
     </messaging:htmlEmailBody>
     </messaging:emailTemplate>
     

• 注意事項

  本来QRコードは最大で7089文字（数字のみの場合）を記録できますが、巨大なQRコードの生成には多大な処理ステップ（=CPU時間）が必要となります。このため、Apexコードではガバナ制限により取り扱える文字数に大幅な制限がかかります。

  パッケージ内ロジックでは特に制限は実施していませんが、可能な限り短い文字列を取り扱うように設計してください。

   

  日本語QRコードを生成する場合、UTF-8エンコードによるバイト列を使用しています。QRコードスキャナによってはUTF-8文字列を読み込めない場合があります。一般的な半角英数字・記号を使用することを心がけてください。

   

   

• 技術情報

  QRコードの生成処理は以下のライブラリをApexにポーティングしたものを利用しています。

  https://github.com/zxing/zxing

   

高度な利用方法

独自のLightningコンポーネントから利用する

Lightningコンポーネント「QR Code」はインストール組織で作成されたカスタムLightning コンポーネントから利用することができます　

Lightning Aura コンポーネントから使用する場合、以下のように「cls_base:qr_code_lwc」タグを使用します。

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <cls_base:qr_code_lwc value="あいうえお"/>
</aura:component>

※2021年1月現在、SFDCの仕様により、カスタムLightning Web Componentから管理パッケージ内のLightningコンポーネントへのアクセスは許可されていません。

パターン１：固定文言あるいはLightningコンポーネントにより求められる値を表示する

パターン２：指定オブジェクトの指定項目を表示する

Scan結果を独自のコンポーネントで利用する

Lightningイベント「QRCode Read Event」はインストールされた組織で独自に開発されたLightning Aura Componentで利用することができます。

aura:handlerにて「cls_base:qr_code_read_event」をハンドリングします。

以下のSampleではQR Codeリーダーで読み取ったデータ表示します。

Sample.cmp

x
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
  <aura:attribute name="data" type="Object"/>
  <!-- Event Handler -->
  <aura:handler event="cls_base:qr_code_read_event" action="{!c.handleEvent}"/>
​
  {!v.data}
</aura:component>

SampleController.js

x
({
    handleEvent : function(component, event, helper) {
    var data = event.getParam("data");
    component.set("v.data", data);
    }
})

独自のVisualforceページにQRコードを表示する

Visualforceコンポーネント「QRCodeCmp」はインストール組織で作成されたVisualforce Pageから利用することができます。

Visualforceページから使用する場合、以下のように「cls_base:QRCodeCmp」タグを使用します。

xxxxxxxxxx
<apex:page>
  <cls_base:QRCodeCmp contents="あいうえお" type="SVG"></cls_base:QRCodeCmp>
</apex:page>

指定できる属性を以下に提示します。

Appendix

カスタムラベル

基本パッケージにはCLS Toolsで利用されているカスタムラベルが定義されています。

基本パッケージ