Web APIでバーコードを生成する

RayBarcodeのWeb API(REST API)を使ってSalesforceでバーコード画像を生成する方法を説明します。Web APIを使うと、バーコードをPNGまたはSVGの画像として取得できます。生成したバーコード画像は、HTMLの IMG タグなどを使用して表示できます。生成したバーコード画像をレコードに保存することや、PDFに埋め込むこともできます。

Web APIを使う場合、VisualforceページやLightningアプリを使う場合よりも手順が多くなります。その代わり、より細かな制御や他のアプリケーションとの連携が可能になります。

上の図はクリック(タップ)すると拡大できます。

Web APIは、Salesforce ClassicまたはLightning Experienceで使用できます。

前提

次の知識が必要です。

  • Apexの開発またはJavaScriptの開発
  • Visualforceページの開発

利用手順

Web APIを使って、Salesforce上でバーコードを生成する手順は次の通りです。

  1. アクセストークンを生成する。
  2. アクセストークンとURLからバーコードの画像を読み込む。

アクセストークンには15分の有効期限があるため、バーコードを生成する前に毎回アクセストークンを生成する必要があります。

生成したバーコードをWebページで表示するためにHTMLの IMG タグかVisualforceの apex:image タグを使用できます。

アクセストークンの生成

Web APIを使用するにはアクセストークンを生成する必要があります。アクセストークンの生成はApexのgcbc:GcBarcodeGlobalAccessTokenGeneratorクラスの UpdateAccessToken メソッドでおこないます。

Apexコードでの使用例

gcbc.GcBarcodeGlobalAccessTokenGenerator.UpdateAccessToken();

JavaScriptでの使用例

{!requireScript("/soap/ajax/29.0/connection.js")}
{!requireScript("/soap/ajax/29.0/apex.js")}
sforce.connection.sessionId = "{!$Api.Session_ID}";
sforce.apex.execute("gcbc.GcBarcodeGlobalAccessTokenGenerator", "UpdateAccessToken", {}, {
    onSuccess: function(){window.location.reload();},
    onFailure: function(error) {alert(error);}
});

JavaScriptでアクセストークンを生成する場合、SalesforceのApex in AJAX(sforce.apex.execute)をお使いのSalesforce組織で実行します。この操作はその組織のAPI コール数を消費します。24時間以内のAPIの使用状況は、Salesforceの「設定」の「システムの概要」から確認できます。

URLの構文

次のURLに続けて幅や高さ、値などのパラメータを指定します。

PNG形式の場合

https://gcbarcode.azurewebsites.net/api/png/[BarcodeType]?

SVG形式の場合

https://gcbarcode.azurewebsites.net/api/svg/[BarcodeType]?

[BarcodeType]には生成するバーコードのタイプを指定します。使用可能なバーコードの種類は「バーコードの種類」を参照してください。たとえばQRコードの場合、次のようになります。

https://gcbarcode.azurewebsites.net/api/png/qrcode?

URLの「?」以降にはパラメータを指定します。指定するパラメータは以下の通りです。以下の表のチェックマーク(✔)は必須であることを示します。

パラメータ 必須 説明
height バーコード画像の高さをピクセル単位で指定します。実際に生成されるバーコードの画像の高さは、指定したバーコードの規格に基づいてheightに近い値に決定されます。
width バーコード画像の幅をピクセル単位で指定します。実際に生成されるバーコードの画像の幅は、指定したバーコードの規格に基づいてwidthに近い値に決定されます。
token 認証に使用するアクセストークンを指定します。カスタム設定のgcbc__GcBarcodeSetting__c.gcbc__AccessToken__cを指定します。アンダースコアが2つずつ続いている点に注意してください。
value バーコードの値を指定します。指定する値はUTF-8形式でURLエンコードされている必要があります。たとえば「こんにちは」は「%e3%81%93%e3%82%93%e3%81%ab%e3%81%a1%e3%81%af」となり、「https://www.salesforce.com 」は「https%3a%2f%2fwww%2esalesforce%2ecom」となります。
options バーコードタイプ固有の追加オプションを指定します。「バーコードのオプション」を参照してください。

記述例は以下のようになります。

https://gcbarcode.azurewebsites.net/api/png/qrcode?width=300&height=300&value=This%20is%20sample%20Barcode&token=$Setup.gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c

RayBarcodeではURLの長さの上限の規定を設けていません。URLの長さの上限は、ユーザが呼び出しに使用するブラウザの仕様に依存します。Internet ExplorerやMicrosoft Edgeの場合、Google Chromeよりも短い長さで上限に達する場合がある点に留意してください。

参考:Internet Explorer では URL に最大 2,083 文字が使用可能 (Microsoft)

VisualforceページとJavaScriptでの用例

HTMLのIMGタグを使う場合は次のようになります。

<!-- RayBarcode サンプルコード -->
<!-- gcbarcode_sample_webapi_1.vfp -->
<apex:page>         
    <script src="/soap/ajax/29.0/connection.js" type="text/javascript"></script>
    <script src="/soap/ajax/29.0/apex.js" type="text/javascript"></script>
    <script type="text/javascript">
        // セッションIDを確実に設定する
        sforce.connection.sessionId = "{!$Api.Session_ID}";
        // Apex in AJAXでRayBarcodeのApexクラスを呼び出す
        sforce.apex.execute("gcbc.GcBarcodeGlobalAccessTokenGenerator", "UpdateAccessToken", {}, {
            onSuccess: function(){},
            onFailure: function(error) {alert(error);}
        });
    </script>
    <!-- サンプルバーコードを表示する -->
    <img alt="バーコード画像" id="qrcode" title="QRコード" src="https://gcbarcode.azurewebsites.net/api/png/qrcode?width=300&height=300&value=This%20is%20sample%20Barcode&token={!$Setup.gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c}" width="297" height="297" />
</apex:page>

IMGタグの代わりに apex:image タグを使う場合は次のようになります。

<!-- RayBarcode サンプルコード -->
<!-- gcbarcode_sample_webapi_2.vfp -->
<apex:page>         
    <script src="/soap/ajax/29.0/connection.js" type="text/javascript"></script>
    <script src="/soap/ajax/29.0/apex.js" type="text/javascript"></script>
    <script type="text/javascript">
        // セッションIDを確実に設定する
        sforce.connection.sessionId = "{!$Api.Session_ID}";
        // Apex in AJAXでRayBarcodeのApexクラスを呼び出す
        sforce.apex.execute("gcbc.GcBarcodeGlobalAccessTokenGenerator", "UpdateAccessToken", {}, {
            onSuccess: function(){},
            onFailure: function(error) {alert(error);}
        });
    </script>
    <!-- サンプルバーコードを表示する -->
    <apex:image alt="バーコード画像" id="qrcode" title="QRコード" value="https://gcbarcode.azurewebsites.net/api/png/qrcode?width=300&height=300&value=This%20is%20sample%20Barcode&token={!$Setup.gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c}" width="297" height="297" />
</apex:page>

VisualforceページとApexでの用例

JavaScriptではなく、カスタムコントローラApexクラスとVisualforceページでバーコードを表示するには、次のようになります。

まずカスタムコントローラApexクラスでアクセストークンを更新します。コンストラクタでアクセストークンを更新することはできません。コンストラクタで更新しようとすると「DML currently not allowed」エラーが発生するため、メソッドを作成して action 属性で呼び出します。

// RayBarcode サンプルコード
// GcBarcodeSampleWebApiPageController.cls
public class GcBarcodeSampleWebApiPageController {
    public void initialize () {
        gcbc.GcBarcodeGlobalAccessTokenGenerator.UpdateAccessToken();
    }
}

次に、作成したカスタムコントローラApexクラスを使用するVisualforceページを作成します。カスタムコントローラApexクラスでアクセストークンを更新する場合は、JavaScriptによるアクセストークンの更新は不要です。

<!-- RayBarcode サンプルコード -->
<!-- gcbarcode_sample_webapi_3.vfp -->
<apex:page controller="GcBarcodeSampleWebApiPageController" action="{!Initialize}">
    <!-- サンプルバーコードを表示する -->
    <apex:image id="qrcode" alt="バーコード画像" title="QRコード" value="https://gcbarcode.azurewebsites.net/api/png/qrcode?width=300&height=300&value=This%20is%20sample%20Barcode&token={!$Setup.gcbc__GcBarcodeSetting__c.gcbc__AccessToken__c}" width="297" height="297" />
</apex:page>
Copyright © 2018 GrapeCity inc. All rights reserved.