13
13

More than 5 years have passed since last update.

Tableau Online を SharePoint Online に埋め込んでみる

Last updated at Posted at 2018-04-02

Tableau Online とは

Tableau Online は Tableau Software 社が提供する SaaS 型の Business Intelligence プラットフォームです。
https://www.tableau.com/ja-jp/products/cloud-bi
Tableau Desktop で作成したコンテンツを Tableau Online にアップロードすることで企業内に広く分析結果を共有をすることができます。

SharePoint Online とは

公式 より 抜粋

コンテンツ、知識、アプリケーションを共有および管理してチームワークを強化し、情報をすばやく検出して、組織全体でシームレスに共同作業できます。

従来 SharePoint Server として提供されていた機能を Office 365 上で SaaS として提供しているものが SharePoint Online です。Office 365 E3 というライセンスに SharePoint Online のライセンスも含まれています。色々な機能があるのですが、今回は Tableau Online を埋め込むポータルサイトとして使用してみます。

Tableau Online の埋め込み (Embedded) とは

CRM や ERP など 入力系の Web アプリケーション において、入力したデータをグラフ化する機能やレコード単位で検索する機能があったりするのですが一般的には以下の課題があり、別途 BI ツールを使って分析をされているケースがほとんどです。
・他のシステムやデータと紐づけて分析できない
・表現力が限定的
・スナップショットのデータしか見れず、履歴で追えない

そこで、Tableau Online を使ってコンテンツを作成し、そのコンテンツを Web アプリケーション上に画面統合してしまおう、というのが埋め込み (Embedded) となります。埋め込みには Tableau 社が提供している JavaScript API を使うか、 HTML のインラインフレーム (iframe) を使うかの大きく 2 種類の方法があります。
Tableau 社ドキュメント 埋め込みコードの書き出し
Tableau 社ホワイトペーパー : BI の埋め込みで考慮するべき 7 つの基準
GitHub ドキュメント : JavaScript API Samples

設定手順

Tableau Online と Azure AD の設定

SharePoint Online の認証基盤すなわち Office 365 の認証基盤は Azure AD なので、 Tableau Online も Azure AD と SSO 連携しておけば、設定が楽です。Tableau Online と Azure AD の SSO 連携については以下の記事を参照ください。
Tableau Online で Azure AD と SAML 連携してみる
埋め込みをする場合は 追加の設定 を忘れずに設定してください!

SharePoint Online のサイト作成、セキュリティ設定

Office 365 にログインします。https://www.office.com
image.png
SharePoint をクリック

image.png
サイトの作成をクリック

image.png
(どちらでも構いませんが、) コミュニケーション サイト をクリック
チームサイトとコミュニケーションサイトの差異は以下ドキュメントを参照ください
チームまたはコミュニケーション サイトを作成する - Office サポート

image.png
サイト名を入力 (同一テナント内で一意な値となります) して完了をクリック

image.png
サイトが作成されました。右上にある設定アイコンから サイト情報 をクリックします。

image.png
すべてのサイト設定を表示をクリック

image.png
HTML フィールドのセキュリティ をクリック

image.png
このドメインからの iframe を許可: に tableau.com を入力し、追加、OK。これで Tableau Online のコンテンツを SharePoint 上に埋め込むことができるようになりました。左側のメニューからホームをクリックして元のページに戻ります。

SharePoint Online のページ編集、コンテンツの埋め込み

image.png
編集 をクリックします。

image.png
セクションの境目のところにカーソルを持っていくと、 + アイコンが出てきてコンテンツを挿入ができます。今回は 埋め込み パーツをクリックします。

image.png
埋め込みコードとして iframe を含む HTML で記述します。

HTML
<iframe src="Tableau Online のコンテンツ URL" width="645" height="380"></iframe>

width と height はコンテンツに合わせて調整ください。 また、Tableau Online のコンテンツ URL は共有メニューから取得できます。
image.png

image.png
発行ボタンをクリック

image.png
SharePoint Online に Tableau Online のダッシュボードを埋め込むことができました。

まとめ

Tableau Online のコンテンツを設定ベースで SharePoint Online のサイトに埋め込みました。今回は Azure AD で SSO 連携していることが前提で進めているので SharePoint Online を使っていますが、 Salesforce や ServiceNow などといったクラウドサービスでも認証連携さえクリアすれば同様に埋め込みができます。画面を統合することでエンドユーザの操作性があがるため、埋め込む先のアプリケーションだけでなく Tableau の利用頻度向上にもつながっていくと思います。

参考

SharePoint ページにコンテンツを埋め込む機能を許可または制限する
Embedding a Tableau Server View on Sharepoint Online

13
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
13