Lightningアプリにバーコードを表示する

Lightningアプリケーションビルダーまたは開発者コンソールでRayBarcodeを使って、Lightningアプリの画面にバーコードを表示する方法を説明します。作成したLightningアプリはLightning ExperienceまたはSalesforce Classicで表示できます。

前提

Lightningアプリに gcbc:GcBarcode コンポーネントを配置するには、Salesforceの「私のドメイン」をリリースする必要があります。

「私のドメイン」が有効になっていない場合、次の手順に沿って有効化してください。

「私のドメイン」を有効化できない環境では、「Visualforceページにバーコードを表示する」を検討してください。

Lightningアプリケーションビルダーの場合

  1. Salesforce Classicの場合、「設定 > ビルド > Lightningアプリケーションビルダー」に移動します。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > ユーザインターフェース > Lightningアプリケーションビルダー」に移動する。
  2. 新しいLightningページを作成するには、Lightningページセクションにある「新規」ボタンをクリックする。
  3. 「Lightningページを新規作成」が表示される。
  4. 「アプリケーションページ」が選択状態になっていることを確認して「次へ」をクリックする。
  5. 「表示ラベル」に任意の名前を入力し、「次へ」をクリックする。例:「MyFirstBarcodeApp」
  6. 「1列」を選択していることを確認し、「完了」をクリックする。
  7. 「Lightningアプリケーションビルダー - MyFirstBarcodeApp」が表示されることを確認する。
  8. 左ペインに表示されるGcBarcodeアイコンをドラッグして、キャンバス領域にドロップする。
  9. キャンバス領域に空のバーコードが表示される。
  10. バーコードを選択して、右ペインで ValueString 属性の値を設定する。「!」マークのアイコンにマウスカーソルを合わせることで、各パラメータの説明がツールチップで表示される。
  11. ValueString 属性以外の項目をクリックした後、再度 ValueString 属性の項目をクリックするとバーコードが表示される。
  12. 右ペインで属性の値を設定して、バーコードを設定する。例えば、任意のバーコードの種類を選択して、表示する ValueString 属性を設定する。
  13. 「MyFirstBarcodeApp」の保存と有効化を実行する。

各パラメータの説明はリファレンスのgcbc:GcBarcodeコンポーネントの属性を参照してください。

開発者コンソールの場合

Salesforceの「開発者コンソール」を起動するには、Salesforce Classicの場合は画面上のユーザ名をクリックし、「開発者コンソール」をクリックします。Lightning Experienceの場合は、画面右上の歯車アイコンをクリックし、「開発者コンソール」をクリックします。「開発者コンソール」はお使いのSalesforceの言語設定にかかわらず英語で表示されます。

  1. 「開発者コンソール」のメニューから「File > New > Lightning Application」をクリックする。 開発者コンソールのメニュー操作
  2. 「New Lightning Bundle」画面が表示され、「Name」と「Description」を記入します。
  3. 以下のコードを記述してGcBarcodeコンポーネントを挿入し、キーボードの「Ctrl + S」を押して保存します。Macの場合は、CtrlキーをCommandキー(⌘キー)に読み替えてください。注意: valueString 属性に値が設定されていない場合は、バーコードが表示されません。 valueString 属性の値をURLエンコードする必要はありません。
<!-- Barcode_Lightning.app -->
<aura:application>
    <gcbc:GcBarcode valueString="QRCodeValue"/>
</aura:application>
  1. 新規作成されたLightningアプリケーションをプレビューするには、右側にある「Preview」ボタンをクリックします。
  2. 指定したvalueString 属性に対するQRCode画像が表示されます。

gcbc:GcBarcode タグに属性を追加することで、GcBarcode Lightningコンポーネントを構成できます。各パラメータの説明はリファレンスのgcbc:GcBarcodeコンポーネントの属性を参照してください。

<gcbc:GcBarcode
    valueString="490210200005"
    type="EAN13"
    options='{"CompositeType":"CCA", "CompositeValue":"COCACOLA"}'
    imageWidth="200"
    imageHeight="100"
    outputFormat="SVG"
    />

注意:「開発者コンソール」では、コードが保存されていない状態でウィンドウを閉じても、警告などのメッセージが表示されません。再度「開発者コンソール」を開き、「Ctrl + S」でコードが保存されているかどうか確認してください。

Copyright © 2020 GrapeCity inc. All rights reserved.