Tableauと4D。WDCをGithub Pagesにデプロイする

9月 23, 2020 1 読了時間

Tableauと4Dを接続する方法」のブログ記事で、4Dからデータを要求し、Tableau Publicで可視化するためのWebデータコネクタ（WDC）を作成する方法を学びました。

さて、いよいよWDCをホストする番です!HTMLとJavaScriptファイルのみを使用するため、Github Pagesはそれらを格納するための最良の選択肢です。これにより、他の人があなたのコネクタを彼らのTableauソフトウェアで直接テストすることができます。このブログ記事で、私はどのように進めるかを紹介します。

ボーナス：Chromeを使用してTableau PublicでWDCをデバッグする方法もお見せします。さあ、はじめましょう

始める前に、前回のブログポストを既に読んでいることを確認してください。最後から拾っていきましょう。

GitHubのページを作成する

<username>.github.io という命名規則を使って GitHub で新しいリポジトリを作成します (usernameは GitHub でのユーザー名または組織名です)。このステップはWDCを動作させるために重要です。
リポジトリをローカルマシンにクローンします。
プロジェクトフォルダーにinvoices.htmlとinvoices.jsファイルを追加し、コミットして、変更を GitHub リポジトリにプッシュしてください。
https://username.github.io/invoices.html にアクセスすると、ホストされた Web ページが表示されるはずです。

注意: ここでは、あなたが GitHub に慣れていて、クローンやコミット、プル、プッシュが簡単にできることを想定しています。そうでない場合は、ブログの連載で紹介していますのでご安心ください。

Tableau PublicからGithubページを立ち上げる

WDCがオンラインになったので、Tableau PublicでWDCへの接続を開始します。

WDCのダイアログボックスで、下図のようにWDCのURL (https://username.github.io/invoices.html)を入力します。

しかし、最初に …HTTPs上で4Dを使用する

GitHubのページはHTTPSで読み込まれますが、APIはHTTPで提供されます … これは、混合コンテンツエラーにつながります。

解決策は、HTTPSで4Dを使用することです。そのためには、443ポートを使用し、Enable HTTPSボックスにチェックを入れ（下の画像のように）、有効な証明書をインストールし、インターネット経由でアクセスできるようにAPIを 公開する必要があります。

このブログの記事のために、私は自己署名証明書を使用しました。証明書の管理については、4D Summit 2020のビデオをご覧いただくとより理解が深まると思います。

また、先ほども言ったように、ローカルで動作するRESTアプリケーションをインターネットに公開する必要があります。つまり、インターネット上のどこからでもアクセスできるパブリックIPアドレスが必要です（invoice.jsファイルに書かれているのは、ローカルエリアネットワーク（LAN）内からのみアクセスできるプライベートなものではありません）。

パブリックIPを取得するために（そしてデモのために）、私はngrokというトンネリングツールを使い、ローカルでホストされているWebサーバーをngrok.comのサブドメインでホストされているように見せました。

証明書が準備でき、プロジェクトのルートに配置され、HTTPSが有効になり、パブリックIPアドレスで武装したら、Tableau PublicにGitHub PagesのURLを入力します。

これで、ビジュアライゼーションに使用できるテーブルが表示されます。

おめでとうございます。おめでとうございます！WDCは正常にデプロイされ、アクセスされ、4Dデータを可視化する準備が整いました。

ボーナス：TableauでWDCをデバッグする

WDCを作成すると、シミュレータ(http://127.0.0.1:8888/Simulator/index.html)では問題なく動作するのに、Tableau Publicでデータを読み込めないことがあります。Update Nowボタンを押すと、ローディング画面は表示されるのですが、データが表示されないのです。

どうすればいいのか？何が問題だったのかを正確に知るには？

Tableauでは、ChromeブラウザとChrome DevToolsを使用して、Tableau Publicで実行中のWDCをデバッグする機能があります。以下は、その手順です。

Windows用のChromechrome-win.zip、またはmacOS用のchrome-mac.zipをダウンロードします。
コマンドプロンプトを開き、リモートデバッグオプションでTableauを起動します。
macOSの場合open /Applications/Tableau Filter Public.app –args –remote-debugging-port=9000
Windowsの場合 Navigate to the Tableau directorycd C:\Program FilesTableau Filterof Tableau, then entertableau.exe –remote-debugging-port=9000
Tableauで、デバッグしたいWDCのURLを入力し、Enterキーを押します。WDC ランディングページがロードされた後、Chrome デバッガーを起動してブレークポイントを設定できるように、ページと対話する前に待機します。
Chrome を起動し、URL をhttp://localhost:9000に設定します。
Chrome ブラウザで、このページからデバッグしたい WDC を選択します。

Chromeデバッガーを接続したら、WDCのJavaScriptコード上で自由にエラーを探したり、ブレークポイントを設定したりできます。

Tableau内のWDCのデバッグについてもっと知りたい方は、公式ドキュメントのこのページをチェックしてみてください。デバッグを楽しんでください。

また、何か質問がある場合は、4Dフォーラムでの議論に気軽に参加してください。

Discuss