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フォーラムでの議論に気軽に参加してください。