12/20 Tableau Developers Club にて藤原さんから実施していただいたExtensions APIのハンズオンの資料です。

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残りを実行してみましょう
Part６までいくと、グラフを選択した値が表
で表示されます

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
これから