NotionにTableau(BI)を埋め込む方法1選(Embed)

maes_data(マエス)

2021年5月6日 03:06

まえがき

Tableauユーザーが長年抱えてきた欲望
「ドキュメントやスライドにTableauをembedをしたい」
偶然、夜中に埋め込む方法を見つけました（その為、1選）

会議の議事録、社内のナレッジで embed する時など最適かと思われます。

そして見つけたはいいものの、残念ながら。。。書いている私は、所属会社においてまだNotionを本格導入していないです・・・悲しい

…願わくはどこかNotion導入TableauユーザーさんがうまくEmbedにお役立てできればと思い、本noteを書きます。

追記、モバイル環境だと見れないとnoteに記載しておりましたが、出来ました！（iPhoneにて検証）誤情報失礼しました

テスト環境

1. Tableau Developer Site

この後紹介しますが、 embed に利用する URL リンクは短いです。
セキュリティ上少し不安が残る方は tableau Developer PlogramでAPI テスト前提のTableau Online サイトを入手してください。

https://www.tableau.com/ja-jp/developer

2.notion

Embed対象のNotionのライセンスは有償無償かかわらず利用できそうです。
※少なくとも、私の場合は無償ライセンスで実装することができました。

https://www.notion.so/

3.Apption.co

Notionの調べていた際に、覚えていた数多くのYouTube の動画で紹介されていたNotionにWidgetを埋め込むことができるサービスです。

今回はそのうちの一つ DIY embed URL を利用します。つまり、独自のembedURLを作れるよ！というサービスです。

作り方（とはいえ、アカウント準備さえできていばあと数分です）

アカウントの作成手順は本noteでは紹介を省きます（ちなみに全部無償登録できます、そして簡単です)

①Tableau Online/Severで埋め込みコードを取得する

その結果、下記のようなコードが手に入ると思います。（サイト名等は匿名化してます）

<script type='text/javascript' src='https://XXXXXXX.tableau.com/javascripts/api/viz_v1.js'></script><div class='tableauPlaceholder' style='width: 1920px; height: 858px;'><object class='tableauViz' width='1920' height='858' style='display:none;'><param name='host_url' value='XXXXXXXXXXXXXXXXXXXXXX' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='XXXXXXXXXXXXXXXXXXXXXX' /><param name='name' value='Superstore/Forecast' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /><param name='showAppBanner' value='false' /></object></div>

②Appytionに埋め込みコードをはりつける