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

Deeplからの自動翻訳

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を使用する必要があります。

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

前提条件

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

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

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 – 後ほど説明します)と、利用可能なメソッドを追加することができます。サーバーが次に起動されたとき、ドメインとメソッドが自動的に使用されます。この ブログ記事では、さらに詳細を説明し、その方法を紹介しています。

blank

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

  • 以下の依存関係がインストールされていることを確認してくださいgitnode、および 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シミュレータが表示されます。

blank

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

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

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

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

  1. 私たちのJavaScriptコードとWDCライブラリにリンクしているHTMLページ。このページには、データを取得する前にユーザーがどのようにコネクタと対話できるかを示す、シンプルなボタン要素も含まれています。
  2. スキーマを定義し、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ページは非常にシンプルです。

  1. Bootstrapによるページの美化とフォーマット。
  2. JSONデータを取得するためのjQuery。
  3. WDC APIのメインライブラリ(tableauwdc-2.3.latest.js)。
  4. 次に作成する、ロジックを実行する JavaScript ファイル(invoices.js)です。
  5. そして最後に、シンプルなボタン“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 ファイルへのパスを導入します。

blank

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

blank

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

blank

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

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

Tableau PublicでWDCを使用する

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

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

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

blank

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

blank

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

blank

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

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

blank

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

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

Avatar
Intissarは、プロダクトマーケティングマネージャーとして2017年に4Dに入社しました。彼女は、プロダクト、マーケティング、エンジニアリング、およびテクニカルサポートチームと密接に連携し、さまざまな顧客に対して新機能の「理由」、「方法」、「内容」をアピールするために働いています。この密接な連携により、メッセージングフレームワークを作成し、4Dブログやウェブサイトのための詳細なコンテンツやコードサンプルを書き上げることができるのです。VINCI大学でコンピュータサイエンスのエンジニアの学位を取得後、彼女はソフトウェアエンジニアとしていくつかのスタートアップ企業で働きました。ソフトウェアの仕様、設計、開発、ユーザートレーニング、サポート、チームマネジメントなどの実務経験を持ちます。