Lightning app

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

前提

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

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

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

  1. Salesforce Classicの場合、「設定 > ビルド > Lightningアプリケーションビルダー」に移動します。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > ユーザーインターフェース > Lightningアプリケーションビルダー」に移動する。
  2. 新しいLightningページを作成するには、Lightningページセクションにある「新規」ボタンをクリックする。
  3. 「Lightningページを新規作成」が表示される。
  4. 「アプリケーションページ」が選択状態になっていることを確認して「次へ」をクリックする。
  5. 「表示ラベル」に任意の名前を入力し、「次へ」をクリックする。例：「MyFirstBarcodeApp」
  6. 「１列」を選択していることを確認し、「完了」をクリックする。
  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」を押して保存します。注意： 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
    valueString="490210200005"
    type="EAN13"
    options='{"CompositeType":"CCA", "CompositeValue":"COCACOLA"}'
    imageWidth="200"
    imageHeight="100"
    outputFormat="SVG"
    />

エンコーディング形式

GrapeCity Barcodeでは既定のエンコーディング形式にShift-JIS（シフトJIS）を使用します。UTF-8を使用する場合はオプションを指定する必要があります。

Lightningアプリケーションビルダーの場合、次の値を「Options」に設定します。

{'EncodingCodePage':'65001'}

開発者コンソールの場合、次のようになります。

<gcbc:GcBarcode
    valueString="490210200005"
    type="QRCode"
    options='{"EncodingCodePage":"65001"}'
    imageWidth="200"
    imageHeight="100"
    outputFormat="PNG"
    />

gcbc:GcBarcodeコンポーネントの属性

属性名 属性型 説明
imageHeight Integer バーコード画像の高さをピクセル単位で指定します。実際に生成されるバーコードの画像の高さは、type属性で指定したバーコードの規格に基づいてimageHeightに近い値になります。既定値は100ピクセルです。
imageWidth Integer バーコード画像の幅をピクセル単位で指定します。実際に生成されるバーコードの画像の幅は、type属性で指定したバーコードの規格に基づいてimageWidthに近い値になります。既定値は100ピクセルです。
outputFormat String バーコード画像の形式を指定します。「PNG」または「SVG」を指定できます。既定値は「SVG」です。この値は大文字で指定します。
options String バーコードタイプ固有の追加オプションを指定します。「バーコードのオプション」を参照してください。
type String 生成するバーコードの種類を指定します。「バーコードの種類」を参照してください。既定値は「QRCode」です。　
valueString String 必須項目。バーコードの値を設定します。Lightningアプリでは値をURLエンコードする必要はありません。

gcbc:GcBarcodeコンポーネントのイベント

イベント名 イベント型 説明
onError gcbc:GcBarcodeError エラー処理を行う関数を指定します。詳細は後述の「エラー処理」を参照してください。

リファレンス（英語）

Aura DocumentationでLightningコンポーネントの属性の完全なリストと英語のリファレンスを参照できます。

Aura Documentationは、以下のURLでアクセスできます。

https://[YOUR INSTANCE or CUSTOMDOMAIN].lightning.force.com/auradocs/reference.app?#reference?descriptor=gcbc:GcBarcode&defType=component

たとえば、Lightning Experienceに切り替えた画面でブラウザーのアドレスバーのURLが「ap0.lightning.force.com」で始まる場合、Aura DocumentのURLは次のようになります。

https://ap0.lightning.force.com/auradocs/reference.app?#reference?descriptor=gcbc:GcBarcode&defType=component

日本語のリファレンスは、このページの「gcbc:GcBarcodeコンポーネントの属性」と「gcbc:GcBarcodeコンポーネントのイベント」を参照してください。

エラー処理

エラーが発生した場合、GcBarcodeコンポーネントで onError イベントが発生します。 onError イベントでは、エラーメッセージを取得できます。

既定では、エラーがサーバー側で発生した場合、回復できないエラーとなります。その場合、以下のようなAuraのエラーメッセージが表示されます。

このようなエラーが発生する場合、以下の解決方法を試してみてください。

  • ブラウザーでWebページの「再読み込み」または「更新」を実行する
  • ブラウザーをシークレットモードで実行する。またはInPrivateモードで実行する。
  • Salesforceからログアウトし、再度ログインする
  • Salesforceアプリの場合、アプリのプロセスを終了し、もう１度起動する

開発者は、すべてのエラーを処理するためにコードを記述でき、必要に応じて既定のエラーメッセージを表示しないこともできます。

コードは以下のとおりです。

// エラーイベントを処理する
<gcbc:GcBarcode
    valueString="Barcode Value"
    imageWidth="200"
    imageHeight="200"
    onError="{!c.HandleError}"
    />

// エラー処理を行う
HandleError : function(component, event, helper){    
        var message = event.getParam("message");
        $A.log(message);
        // エラー処理用のロジック
        event.setParam("handled", true); // 既定のエラー処理を防止する
    }
Copyright © MESCIUS inc. All rights reserved.