ここでは、GrapeCity BarcodeとVisualforceページを使用してバーコードを表示する方法を説明します。作成したVisualforceページは、Salesforce ClassicでもLightning Experienceのどちらでも表示できます。
Visualforceページへのバーコードの表示はHTMLのタグを書くことに似ています。Visualforceページの作成には、開発者の知識が必要です。
Visualforceページを作成するには、Salesforce Classicの場合、「設定 > 開発 > Visualforceページ」を表示します。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」を表示します。または、開発者コンソールを使用します。
gcbc:GcBarcodeVFコンポーネントを挿入するには、Visualforceページに以下のコードを追加します。バーコードの種類を指定しない場合、既定ではQRコードを生成します。
<apex:page>
<gcbc:GcBarcodeVF value="12345" />
</apex:page>
より細かくパラメーターを指定すると次のようになります。次の例は、QRコードを紫色、画像のサイズを200x200ピクセル、画像のファイル形式をPNGに指定しています。
<apex:page>
<gcbc:GcBarcodeVF value="QRCodeValue" type="qrcode" imageWidth="200" imageHeight="200" outputFormat="PNG" options="{'BackColor':'purple','ForeColor':'white'}" />
</apex:page>
次の例は、UTF-8形式でQRコードを生成します。
<apex:page>
<gcbc:GcBarcodeVF value="日本語" type="qrcode" imageWidth="200" imageHeight="200" outputFormat="PNG" options="{'BackColor':'white','ForeColor':'black','EncodingCodePage':'65001'}" />
</apex:page>
次の例は、日本語をURLエンコードしない値と、URLエンコードした値です。
<apex:page>
<gcbc:GcBarcodeVF value="https://www.google.co.jp/search?q=%E3%83%90%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89" type="qrcode" imageWidth="200" imageHeight="200" outputFormat="PNG" />
<gcbc:GcBarcodeVF value="https://www.google.co.jp/search?q=バーコード" type="qrcode" imageWidth="200" imageHeight="200" outputFormat="PNG" />
</apex:page>
パラメーターの詳細は、このページの「gcbc:GcBarcodeVFコンポーネントの属性」を参照してください。Optionsの詳細は「バーコードのオプション」を参照してください。
バーコードでは既定で人間が読める文字や数字の形式が表示されます。これを非表示にするには、オプションに showMessage
を指定します。
<apex:page>
<gcbc:GcBarcodeVF value="1234567890" type="Code39" outputFormat="SVG" options="{'ShowMessage':'false'}" />
</apex:page>
二次元コードでは人間が読める文字や数字の形式が表示されません。バーコードの値をテキストで表示したい場合、代わりに apex:outputText
などを併用してください。
<apex:page >
<!-- バーコードの値を変数に格納する -->
<apex:variable var="barCodeValue" value="1234567890" />
<!-- 変数の値をもとにバーコード画像を表示する -->
<gcbc:GcBarcodeVF value="{!barCodeValue}" type="QRcode" outputFormat="SVG" />
<!-- 変数の値をテキストとして表示する -->
<apex:outputText value="バーコードの値: {0}">
<apex:param value="{!barCodeValue}"/>
</apex:outputText>
</apex:page>
属性名 | 属性型 | 説明 |
---|---|---|
id | String | コンポーネントを識別するためのID。 |
imageHeight | Integer | バーコード画像の高さをピクセル単位で指定します。実際に生成されるバーコードの画像の高さは、type属性で指定したバーコードの規格に基づいてimageHeightに近い値になります。既定値は100ピクセルです。 |
imageWidth | Integer | バーコード画像の幅をピクセル単位で指定します。実際に生成されるバーコードの画像の幅は、type属性で指定したバーコードの規格に基づいてimageWidthに近い値になります。既定値は100ピクセルです。 |
outputFormat | String | バーコード画像の形式を指定します。「PNG」または「SVG」を指定できます。既定値は「SVG」です。この値は大文字で指定します。 |
options | String | バーコードタイプ固有の追加オプションを指定します。「バーコードのオプション」を参照してください。 |
type | String | 生成するバーコードの種類を指定します。「バーコードの種類」を参照してください。既定値は「QRCode」です。 |
value | String | 必須項目。バーコードの値を設定します。値は事前にエンコードしておく必要があります。 |
GcBarcodeVF Visualforceコンポーネントでエラーが発生した場合、バーコードの画像の代わりにバーコードの値がテキストで表示されます。さらに、バーコードの下部に「Show Error」リンクが表示されます。
たとえば、JANコードは数値以外の文字列を受け付けないので、次のようなコードはエラーになります。
<apex:page showHeader="true" sidebar="false">
<h1>Example of Error</h1>
<gcbc:GcBarcodeVF value="abc" type="JAN13" />
</apex:page>
「Show Error」リンクをクリックすると、エラーメッセージが表示されます。エラーメッセージは英語で表示されます。メッセージ内容の説明はエラーメッセージを参照してください。
gcbc:GcBarcodeVFコンポーネントではエラーの表示方法をカスタマイズすることはできません。エラーをカスタマイズする場合は、LightningコンポーネントかWeb APIを使用します。
Copyright © MESCIUS inc. All rights reserved.