Dev club season 2 extensionsapi workshop

Information about Dev club season 2 extensionsapi workshop

Published on December 25, 2018

Author: vt5001

Source: slideshare.net

Content

1. #import sys #import tableausdk import* #import tableausdk.HyperExtract import* def createHyper(filename): try: hyper = Extract(filename) if (not hyper.hasTable(‘Extract’): schema = TableDefinition() schema.setDefaultCollation.EN_GB) schema.addColumn(‘ClubJoinDate’, Type.DATETIME) schema.addColumn(‘IsTableauUser’, Type.BOOLEAN) schema.addColumn(‘Name’, Type.UNICODE_STRING) table = hyper.addTable(‘Extract’, schema) if (table == None): print ‘A fatal error occurred’ exit (-1) except TableauException, e: print ‘A fatal error occurred:’, e exit (-1) return hyper def populateHyper(hyper): try: table = hyper.openTable(‘Extract’) schema = table.getTableDefinition() Tableau Developers Club Season 2 /*TableauのAPIすべて*/ Extensions API Workshop 2018.12.20 Junko Fujiwara | Solution Architect @ Tableau

2. このスライドはWorkshop用に作成したものです。 参加者のみなさまには期間限定でファイルをお渡ししておりますが、実際はウェブサイトから必要 なマテリアルをダウンロードしてご利用ください。

3. //Dashboard Extensionsとは Tableau Dashboard Extensions(ダッシュボード拡張機能)は、ダッシュボード内のカスタム 領域から利用でき、Tableau のインターフェイス上で新しいダッシュボード機能の導入や他 アプリケーションとの統合を行えるようにします。 https://tableau.github.io/extensions-api/docs/trex_overview.html TREXファイル で呼び出し 拡張を利用 他のオブジェクト のように操作 Extensions API のJS 双方向の 呼び出し ができる ウェブアプリに Extensionを追加

4. //Getting Started はじめましょう。

5. //Getting Started ・・・その前に。

6. //Getting Started 単なるウェブ=自由度高 特に業務での利用の場合はセキュリティを考慮し 必要なプロセスを通すことを推奨します。 Version 拡張機能は 2018.2以降 接続先 HTTPS接続 利用制限 • TableauServerでのExtensions利用管理 • TableauOnlineでのExtensions利用管理 • DesktopでExtensions利用管理 開発目的でのHTTP localhost接続はOK

7. //Getting Started Tutorial Part0 Step#0 ウェブサーバー上で動かすコンテンツの確認 • 自分のHTML、JS、CSS • 自分のマニフェスト(TREX) • ExtensionライブラリのJS WorkshopではTutorialフォルダとSampleフォルダ内のものを利用します。 はじめにTutorialのPart0を利用します。 コンテンツ <Workshop参加者> 限定公開しているextensions-api-master フォルダー <GitHub利用者> git clone https://github.com/tableau/extensions -api.git <ZIP利用者> ここからZIPをDL: https://tableau.github.io/extensions- api/docs/trex_getstarted.html

8. //Getting Started Tutorial Part0 Step#1 ウェブサーバーを用意しましょう Workshop参加者向け ① すでにlocalhostが上がっている方はそのまま利用 ② VisualStudioなどすぐにlocalhostを起動できる方は そのまま利用(コンテンツ配置後起動してください) ③ 当日参加者で何も持っていない方は; Windows: ダウンロードしたWebrick.exe (ポート8000が開きます) ポート指定は第一パラメーターで指定 MacまたはすでにPythonがある方は次で起動: $ python -m SimpleHTTPServer OR $ python -m http.server

9. //Getting Started Tutorial Part0 Step#2 ウェブサーバー上でコンテンツが動いているか確認しましょう Sample http://localhost:8000/extensions-api-master/Tutorial/part_0/MarksSelection.html (ポート番号はご自身の番号で。パスはコンテンツ配置の場所を指定。) 2-1. Step#1で建てたウェブで参照できるようにコンテンツを配置 2-2. ブラウザを起動 2-3. Tutorial¥Part_0¥MarksSelection.htmlを表示 2-4. Hello Extensions! が表示されます

10. //Getting Started Tutorial Part0 Step#3 マニフェストファイルを作成します 3-1. コンテンツ Tutorial¥Manifests¥Tutorial_Part0.trexをテキスト編集モードへ 3-2. <source-location><url>ノードを探す 3-3. urlに現在ブラウザに表示されているURLを入れる 3-4. 上書き保存 <source-location> <url> http://localhost:8000/extensions-api-master/Tutorial/part_0/MarksSelection.html </url> </source-location>

11. Step#4 Tableau Dashboard でこのコンテンツを表示しましょう。 4-1. Tableau Desktop起動 4-2. サンプルスーパーストアなどで何かグラフを作成 4-3. ダッシュボードを作成 4-4. グラフを挿入 4-5. 拡張子*を挿入し、作成したTREXファイルを指定 4-6. Hello Extensions! と表示されればOK! *日本語版では現在拡張子と表示されますが、拡張機能の意味です。 鋭意改善中。ごめんなさい。 //Getting Started Tutorial Part0

12. Step#5 Part0が成功したので、次にPart1を実行してみましょう このPart1はHello Extensions!の代わりに、 Hello from <ダッシュボード名> を表示します。 →コードを読むと表示できないことがわかります。 修正しても結構ですが、せっかくなので 先にデバッグの方法をお伝えします。 //Getting Started Tutorial Part1

13. Step#6 Part1でダッシュボード名が表示されません。 何が悪いのかデバッグモードでみてみましょう。 6-1. Tableau DesktopをDebugモードで起動 --remote-debugging-port=8696 6-2. ブラウザーを起動します(推奨Chrome/Chromium) 6-3. localhostポート8696へ移動(ブックマーク推奨) 6-4. ダッシュボード上にて、デバッグオプションを変更→再読み込み →一時停止しているのでクリック →ブラウザにてDeveloper Toolsと同様に操作できます (後半でブレークポイント張って遊んでください) //Getting Started Remote Debugging 現在のHTMLが表示されるのでクリック。 サンプルでは、JS内のTableauオブジェクト がないといわれてませんか?

14. サマリー • HTML,JS,CSSはどこでもいいのでウェブサーバーへ配置(本番は必ずHTTPS) • マニフェストファイル(TREX)のURLタグでHTMLへの参照先を明記 • ダッシュボードからマニフェストを読み込む //Getting Started おさらい デバッグ • Tableau Desktopおよびブラウザーでポート8696でつないで通常デバッグ

15. Tutorial Part0から6まで段階的にコードが増えてい ます。APIリファレンスと突き合わせながらみ ていきましょう。 ブレークポイントを張ってデータテーブルの中を見たい場合はマークが選 択されたときのイベントあたりから始めるとわかりやすいです APIリファレンス(ブックマーク推奨☆) https://tableau.github.io/extensions- api/docs/index.html //Next! Tutorial残りを実行してみましょう Part6までいくと、グラフを選択した値が表 で表示されます

16. Sampleには下記が入っています • データソースの参照 • フィルターの参照と操作 • パラメーターの参照 • Extension設定の利用方法 • UINamespaceを利用した構成ダイアログの作り方 //Next! Sampleを実行してみましょう

17. オリジナルの作品を是非ギャラリーでシェアして他の人に利用してもらいましょう。 デザインリファレンス https://tableau.github.io/extensions-api/docs/ux_design.html ギャラリーに公開しましょう https://tableau.github.io/extensions-api/docs/ux_extension_gallery.html //Future これから

#import presentations

Introduction to ml
18. 06. 2020
0 views

Introduction to ml

Python OpenCV Real Time projects
31. 05. 2020
0 views

Python OpenCV Real Time projects

Related presentations


Other presentations created by vt5001