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

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

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

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

Web APIの詳しいURL構文についてはリファレンスを参照してください。このページではWeb APIの使用例について説明します。

前提

次の知識が必要です。

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

利用手順

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

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

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

生成したバーコードを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の「設定」の「システムの概要」から確認できます。

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 © 2020 GrapeCity inc. All rights reserved.