Tableauと4Dを連携させる方法

9月 8, 2020 3 読了時間

4D Webinar – How to Connect Tableau with 4D では、William Taylor (Technical Account Manager, 4D US)がTableauツールの概要と4Dデータの可視化に使用できる方法について説明しました。このブログ記事では、技術的な詳細を掘り下げ、その仕組みをより深く理解できるようにします。これにより、例えば、4D RESTとTableauだけで、最高額の請求書を表示するビジュアルを構築することができます。

TIP: 4DとTableauでインボイスを作成する

Tableauとは？

Tableauは、ビジネスインテリジェンスに使用されるデータビジュアライゼーションツールです。生データを理解しやすい形式に単純化するのに役立ちます。Tableauの主な仕事は、様々な場所に保存されているデータを接続し、抽出することです。あらゆるプラットフォームからデータを引き出すことができ、あらゆるデータベース…4Dデータベースを含む…からデータを抽出することができます。抽出されたデータは、Tableau Desktopに接続することができます。ここでデータアナリストが作業し、ビジュアライゼーションを開発するのです。

既存のAPIから直接Tableauにデータをインポートし、非常に簡単にダッシュボードを作成するためには、Web Data Connectorを使用する必要があります。

このブログポストですべてカバーしますが、まずは前提条件について説明します。

前提条件

このブログポストでは、以下のことを行います。

4D RESTを設定し、APIをセットアップします。
Web Data Connector SDKの取得と設定
Web Data Connectorを作成する
Tableauに接続する
ダッシュボードを作成する

4D RESTを設定し、APIをセットアップする

アプリケーションの例このブログ記事では、GitHubで既に公開されているInvoiceアプリケーションを使用します。レポジトリをダウンロードするか、クローンしてください。

RESTを通して4Dデータベースのデータにアクセスするために、4Dデータベースを設定する必要があります。やり方は覚えていますよね？

Web/REST リソース」ページで「REST サーバーとして公開する」オプションをチェックし（私たちの場合はInvoiceアプリケーション）、データソース・テーブル（つまり、データを引き出したい場所）が REST で公開されていることを確認する、というのは聞き覚えがありませんか？もしこれがピンと来ないなら、このブログの記事で詳細を確認してください。

APIが正しくセットアップされ、RESTリクエストを使用して4D内でデータを読み込めることを確認するには、ウェブブラウザを開き、ADDRESS:PORTの後に”/rest “を挿入します。 4D REST URLリクエストはすべて/restで始まります。

例えば、[INVOICES]データクラスのすべてのエンティティを取得することを検証してみましょう。

CORSを有効にすることを忘れないでください

CORSの制限（異なるオリジンからのリソースが相互に作用することを制限される）を回避するために、4DでCORSを許可することを確認してください。これは、設定 > Web>オプション（II）タブの新しい設定により、UIから行うことができます。許可するドメイン名（この例では127.0.0.1:8888 – 後ほど説明します）と、利用可能なメソッドを追加することができます。サーバーが次に起動されたとき、ドメインとメソッドが自動的に使用されます。このブログ記事では、さらに詳細を説明し、その方法を紹介しています。

さて、データの準備が整い、CORSが有効になったところで、Tableauの部分に移りましょう!

ウェブデータコネクタ(wdc)

WDCって何？

Tableauはネイティブな4Dインターフェースを持っていませんが、どうにかしてデータにアクセスする必要があります。では、どうやって4Dに接続すればいいのか？

そこで登場するのがTableauのWeb Data Connector(WDC)です。WDCは、ノードのWebサーバーで動作するアプリケーションです。Tableauと4Dの間に位置するミドルウェアレイヤーと考えることができます。TableauはWDCを呼び出し、その中のJavaScriptコードは4Dのようなデータソースからデータを要求します。

WDCのセットアップ

基本的には、次のようなJavaScriptコードを呼び出すHTMLファイルをセットアップする必要があります。

REST API経由でウェブデータに接続します。
受信した4DデータをJSON形式に変換する。
Tableauにデータを渡す。

良いニュースは、Tableauが無料のソフトウェアバンドル(例付き)を提供しており、それを使って始めることができることです!また、コネクタは非常によく文書化されているので、以下の異なるステップに関する詳細については、このページを見てみてください。

以下の依存関係がインストールされていることを確認してくださいgit、node、および npm。
WDC SDKをダウンロードするか、クローンを作成して入手します：git clone https://github.com/tableau/webdataconnector.git
コマンドプロンプトで、リポジトリをダウンロードしたディレクトリに移動します： cd webdataconnector
npmで依存関係をインストールします：npm install –production
テスト用Webサーバーを起動します。
ブラウザを起動し、http://127.0.0.1:8888/Simulator/index.htmlに移動します。
WDCシミュレータが表示されます。

おめでとうございます。おめでとうございます！環境は正しくセットアップされています。それでは、4Dに接続し、Invoiceアプリケーションのデータをロードするためのコネクタを作成しましょう。

注：Tableau は非常によく文書化されています。以下のWDCの作成手順は全てこのページから引用しています。技術的な詳細については、このページを参照してください。

Tableauと4Dを接続するコネクタを作成する

先に述べたように、REST APIをTableauから消費させるためには、WDCを作成する必要があります。これは、2つのものを作成することを意味します。

私たちのJavaScriptコードとWDCライブラリにリンクしているHTMLページ。このページには、データを取得する前にユーザーがどのようにコネクタと対話できるかを示す、シンプルなボタン要素も含まれています。
スキーマを定義し、Tableauに渡される4Dデータを取得するJavaScriptファイル。

HTMLページ(ユーザーインターフェース)の作成

GitHubからクローンしたwebdataconnectorフォルダに、Invoicesという 名前のフォルダをもう一つ作成します。Invoicesフォルダの中にinvoices.htmlページを作成し、以下のコードをコピーペーストしてください。

<html>
  <head> 
     <meta http-equiv="Cache-Control" content="no-store" /> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script> 
     <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script> 
     <script src="invoices.js" type="text/javascript"></script> 
 </head> 
 <body> 
  <div class="container container-table"> 
   <div class="row vertical-center-row"> 
    <div class="text-center col-md-4 col-md-offset-4"> 
     <button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get Data from 4D!</button> 
    </div> 
  </div> 
 </div> 
</body> 
</html>

このHTMLページは、非常にシンプルに理解することができます。このHTMLページは非常にシンプルです。

Bootstrapによるページの美化とフォーマット。
JSONデータを取得するためのjQuery。
WDC APIのメインライブラリ(tableauwdc-2.3.latest.js)。
次に作成する、ロジックを実行する JavaScript ファイル（invoices.js）です。
そして最後に、シンプルなボタン“Get Data from 4D!「というシンプルなボタンがあり、ユーザーがこのコネクタと対話することができます。

JS ファイル（ロジック）の作成

ファイル構造を invoices.jsにコピーします。ここでは、2つの関数に注目します。

getSchema– ここで、データを1つまたは複数のテーブルにマッピングする方法を定義します。

myConnector.getSchema = function (schemaCallback) { 
 var cols = [ { 
  id: "invoiceNum", 
  alias: "The Invoice Number", 
  dataType: tableau.dataTypeEnum.string 
 }, { 
  id: "total", 
  alias: "The Invoice Amount", 
  dataType: tableau.dataTypeEnum.int 
 }]; 
var tableSchema = { id: "invoices", alias: "List of Invoices", columns: cols }; 
schemaCallback([tableSchema]); };

getData– 4Dデータを取得し、Tableauに渡します。jQuery$.getJSON関数は、4D データベースからデータを取得し、成功ハンドラを使用して、レスポンスパラメータ (resp) に返されたデータを格納します。次に、JSON オブジェクトの要素を単純に反復処理し、tableData配列にデータを格納します。

myConnector.getData = function(table, doneCallback) { 
$.getJSON("http://192.168.223.26:80/rest/INVOICES", function(resp) {
 var result = resp.__ENTITIES, tableData = []; 
  for (var i = 0, len = result.length; i < len; i++) { 
   tableData.push({ 
    "invoiceNum": result[i].Invoice_Number, 
    "total": result[i].Total
     }); 
   } 
table.appendRows(tableData); 
doneCallback(); 
 });
};

最後に、HTML ファイルで作成したボタンのクリックに応答するイベントリスナーを追加します。

$(document).ready(function () { 
  $("#submitButton").click(function () { 
   tableau.connectionName = "Invoices"; 
   tableau.submit(); 
 }); 
});

コードの準備ができたので、テストしてみましょう。

コネクタのテスト

シミュレータを開き（ブラウザを起動して http://127.0.0.1:8888/Simulator/index.html に移動）、コネクタの URL に HTML ファイルへのパスを導入します。

コネクタをロードし、Get Data from 4D！ボタンをクリックします。

Fetch Table Dataボタンをクリックすると、Tableauのテーブルに4Dデータが表示され、実行されているのが確認できるはずです。

ブラボー、成功ですさて、いよいよTableau Publicでコネクタをテストしてみましょう。

注：もし、1つまたは2つのステップで失敗しても、心配ありません。必要なファイルをまとめておきました。HDIをダウンロードし、invoicesフォルダをwebdataconnectorフォルダのREADME.mdファイルと同じ階層に置き、そこから続けてください!

Tableau PublicでWDCを使用する

Tableau Publicは、Tableau Desktopの無料版で、数分でデータを見て理解することができます。無料版には全てのネイティブコネクタはありませんが、必要なのはWeb Data Connectorだけであり、それは利用可能です!

ツールをダウンロードし、起動し。

Web Data Connectorをクリックします。
URLを使用して作成したWeb Data Connectorをロードします ： http://127.0.0.1:8888/invoices/invoices.html
Get Data from 4Dボタンをクリックします。

次に、Update Nowボタンをクリックします。この操作により、先ほど追加したgetData関数が起動します。

次にSheet 1をクリックします（下図参照）。ここで、グラフを作成します。

例えば、最高額の請求書を視覚的に表現したいとします。

請求書番号」を（左側の「寸法」セクションから）上部の「列」セクションにドラッグしてください。次に、「請求書合計」を（左側の「メジャー」セクションから）上部の「行」セクションにドラッグします。さあ、魔法がかかったようです。

出来上がりです。最高額の請求書は、IDがINV00042で、合計金額が2.284であるものです。

Tableauツールは信じられないほど豊富で強力であり、ドキュメントもよく書かれています。さらに上を目指すなら、チェックして試してみてください。次回のブログ記事では、Tableau Web Data ConnectorをGitHubでホストする方法について見ていきたいと思います。

Discuss