SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ActiveReports)(AD)

SalesforceのデータをREST API連携で使用する、「ActiveReportsJS」の活用術

JavaScript帳票ライブラリ「ActiveReportsJS」の活用事例

  • X ポスト
  • このエントリーをはてなブックマークに追加

 グレープシティのJavaScriptライブラリ「ActiveReportsJS」は、サーバの処理に依存せず、WebブラウザのJavaScript処理だけで帳票を出力できるライブラリです。本連載では、ActiveReportsJSでSalesforceのデータを扱う方法を紹介します。また、SalesforceのREST APIを使用してデータを取得し、ActiveReportsJSデザイナで帳票のプレビューを表示する方法のほか、作成したActiveReportsJSの帳票をシンプルなHTMLで表示する方法も紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 グレープシティのJavaScriptライブラリ「ActiveReportsJS」は、サーバサイドの技術に依存することなくWebブラウザで帳票を出力することのできる製品です。本記事では、SalesforceのデータをActiveReportsJSで作成した帳票で表示する方法を紹介します。

 外部システムでSalesforceのREST APIを使用するのに必要な設定、REST APIの検証、ActiveReportsJSで作成した帳票へのデータ連携を説明していきます。

対象読者

  • Webページに帳票出力機能を実装したい方
  • バックエンド開発よりフロントエンド開発が得意な方
  • 外部システムからSalesforceのREST APIを使用する方法が知りたい方

Salesforceの環境準備

Salesforce Developer Editionの取得

 ActiveReportsJSで帳票を表示するにあたり、データを取得するSalesforceの環境を準備します。Salesforceでは開発用環境を無料で作成することができます。公式の開発ブログに書かれている作成手順にしたがって作成します。

接続アプリケーションの作成

 開発用の環境を作成できたら、外部からSalesforceのデータにアクセスできるようにするために接続アプリケーションを作成します。設定のアプリケーションマネージャの新規接続アプリケーションボタンから接続アプリケーションを作成できます。まずは下記のように設定します。

項目
接続アプリケーション名 ActiveReportsJS
API参照名 ActiveReportsJS
取引先責任者 メール ご自身のメールアドレス
OAuth 設定の有効化 チェック
コールバックURL https://localost:5500/index.html
選択した OAuth 範囲 APIを使用してユーザデータを管理、いつでも要求を実行

 アプリケーションマネージャに作成した接続アプリケーションが表示されるようになります。参照ボタンからアプリケーションの詳細画面を表示することが可能です。この画面でAPIを使用するときに使うコンシューマ鍵を確認することができます。

補足

 コールバックURLはOAuth認証後に呼び出されるURLです。実際にはクライアントのWebブラウザのリダイレクト先のURLを設定する必要があります。また、一部の認証フローでは使用されません。今回は後の工程でVisual Studio Codeの拡張機能であるLive Serverを使って検証するため、表のURLを設定します。

図1:接続アプリケーションの詳細画面
図1:接続アプリケーションの詳細画面

CORS許可リストの設定

 CORS許可リストにPostmanのオリジンを登録します。PostmanはREST APIの検証に使用します。検証が完了したら許可リストから削除します。

図2:CORS許可リスト画面
図2:CORS許可リスト画面

APIテスターの準備

 APIテスターにPostmanを使用します。Salesforce DeveloperのAPIコレクションを使用することで、簡単にREST APIをテストすることができます。こちらのAPIコレクションをフォークして使用します。

 1. PostmanのWorkspaceを作ります。NameにはSalesforceAPI、VisibilityにPersonalを設定します。

 2. Salesforce Developerの公開ワークスペースにアクセスします。

 3. Salesforce APIs をフォークします。Salesforce APIsの右にあるメニューボタンをクリックし、「Create a fork」をクリックします。LocationにSalesforceAPIを選択します。

図3:SalesforceApisのフォーク
図3:SalesforceApisのフォーク

 4. PostmanからSalesforceにアクセスできるように、アクセストークンを取得します。まずAuthorizationタブの「Get New Access Token」をクリックします。Salesforceのログインが求められたらログインを行います。

図4:アクセストークンの取得
図4:アクセストークンの取得

 5. アクセス許可の画面が表示されるので「許可」をクリックします。

図5:Salesforceへのアクセス許可
図5:Salesforceへのアクセス許可

 6. 発行されたトークンが表示されます。表示されたinstance_urlの値をクリップボードにコピーして、「Use Token」をクリックします。

図6:取得したアクセストークン
図6:取得したアクセストークン

 7. Variablesタブの_endpointのCURRENT VALUEにコピーしたinstance_urlを貼り付けて保存します。

図7:endpointの設定
図7:endpointの設定

 8. アクセストークンを取得したので、SalesforceのREST APIが使用できることを確認します。Salesforce APIsのRESTフォルダの「GET Query」をクリックします。

 9. Query Paramsのqの値をSELECT FIELDS(All) FROM Lead LIMIT 200に変更して「Send」をクリックし、200ステータスのレスポンスが返ることを確認します。こちらのレスポンスデータはのちの工程で使用します。

図8:REST APIを使用したデータの取得
図8:REST APIを使用したデータの取得

次のページ
ActiveReportsJSデザイナで帳票の作成

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(ActiveReports)連載記事一覧

もっと読む

この記事の著者

田島 貴志(タジマ タカシ)

 デロイト トーマツ アクト株式会社 SFDC事業部所属システムエンジニア。Salesforceの製品を使ったソリューションの設計・開発を担当。日々Apex・Aura・LWCを使用した開発を行っている。 

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15399 2022/01/26 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング