Visualforce page

ここでは、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>

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

属性名 属性型 説明
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.