ポスト
SkyVisualEditorには、静的リソースや外部Webサイトの画像を表示する「画像」というコンポーネントがあります。
今回はこのコンポーネントを使い、外部サービスと連携し項目の値をQRコード画像として表示する方法をご紹介します。
まずは画像コンポーネントにURLを指定する方法から。
画像コンポーネントをドラッグ＆ドロップで画面に配置します。
次に配置時に表示される「画像ソース選択」ダイアログで「外部Webサイトの画像を選択」を選びます。
以下のようにURLを直接指定することで外部Webサイトの画像を表示することが出来ます。
例えばURLにhttps://www.terrasky.co.jp/share/img/siteLogo.pngを指定しデプロイすると、以下のように画像が表示されます
では、これを使って外部のサービスと連携してみましょう。
今回は例として「QR code generator」というQRコード画像生成サービスを利用し、
項目の値をQRコード画像としてSalesforce上に表示してみます。
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
「QR code generator」はARSAVA社およびFoundata社が提供するサービスです。
サービス内容や利用規約については
http://goqr.me/
をご参照の上、自己責任でのご利用をお願いします。
弊社は当該サービスについて一切の責任を負わないものとします。
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
設定方法：
1：画面に「QRコードとして表示したい項目」を配置します。
2:「画像」コンポーネントを配置します。
3:配置時に表示される「画像ソース選択」ダイアログで「外部Webサイトの画像を選択」を選びURLを指定します。
QR code generatorを利用して文字列をQRコードに変換するには
https://api.qrserver.com/v1/create-qr-code/?size=幅x高さ&data=変換したい文字列
のように指定します。
例：「Example」という文字列を150px*150pxのQRコードに変換したい場合は以下のように指定します。
https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Example
項目の値をURLに埋め込むには、以下のように記述します。
{!record.項目のAPI参照名}
例：Url01__cというAPI参照名の項目をURLに埋め込みたい場合は
{!record.Url01__c}
と記述します。
つまり、
https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={!record.Url01__c}
のように画像のURLを指定することで項目Url01__cの値をQRコード画像として取得することが出来ます。
4:URLで指定した画像サイズと画像コンポーネントのサイズを合わせます
以上の設定を行いデプロイすると、
このように、項目の値（この場合はURL項目01）がQRコードとして表示されます。
さらに便利に使うための追加設定 ： 画像の表示条件
上記の状態だと、該当項目に値が設定されていない場合でも以下のように画像を表示しようとしてしまいます。
これを回避するには、画像コンポーネントの表示条件で「該当項目が空で無いとき」という条件を設定します。
プロパティ「表示条件」のボタンを押して
ダイアログで「条件設定」を指定し、「項目」にはURLに値を埋め込む項目を、「演算子」には「次の文字列と一致しない」を指定します。「値」は空のままでOKです。
これでデプロイすると、対象項目に値が設定されていた場合のみQRコードが表示されるようになります。
さらに便利に使うための追加設定 その2：項目追加取得
QRコードとして表示したい項目(今回の例では URL項目01:Url01__c)を画面に配置したくない場合もあると思います。
その場合は項目追加取得設定を行うことで実現できます。
Apexクラス拡張→主オブジェクト項目 追加取得ボタンを押してダイアログを開き、
URLに埋め込みたい項目にチェックを入れ「閉じる」ボタンを押すことで追加取得設定が出来ます。
また、該当項目を画面に配置しない場合、画像の「表示条件」設定方法も以下のように変更する必要があります。
プロパティ「表示条件」のボタンを押して
表示されたダイアログに{! record.項目のAPI参照名 != null}のように指定します。
外部サービスを利用して画像コンポーネントにQRコードを表示する方法は以上です。
今回は例として画像コンポーネントにQRコードを表示してみましたが、これを参考に他の外部サービスとの連携にもご活用いただければと思います。
※QRコードは（株）デンソーウェーブの登録商標です。
