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

#Tableau Online とは
Tableau Online は Tableau Software 社が提供する SaaS 型の Business Intelligence プラットフォームです。
https://www.tableau.com/ja-jp/products/cloud-bi
Tableau Desktop で作成したコンテンツを Tableau Online にアップロードすることで企業内に広く分析結果を共有をすることができます。
#SharePoint Online とは
[公式](https://products.office.com/ja-jp/sharepoint/sharepoint-online-collaboration-software) より 抜粋
>コンテンツ、知識、アプリケーションを共有および管理してチームワークを強化し、情報をすばやく検出して、組織全体でシームレスに共同作業できます。

従来 SharePoint Server として提供されていた機能を Office 365 上で SaaS として提供しているものが SharePoint Online です。[Office 365 E3](https://products.office.com/ja-jp/business/office-365-enterprise-e3-business-software) というライセンスに SharePoint Online のライセンスも含まれています。色々な機能があるのですが、今回は Tableau Online を埋め込むポータルサイトとして使用してみます。
#Tableau Online の埋め込み (Embedded) とは
CRM や ERP など 入力系の Web アプリケーション において、入力したデータをグラフ化する機能やレコード単位で検索する機能があったりするのですが一般的には以下の課題があり、別途 BI ツールを使って分析をされているケースがほとんどです。
・他のシステムやデータと紐づけて分析できない
・表現力が限定的
・スナップショットのデータしか見れず、履歴で追えない
等
そこで、Tableau Online を使ってコンテンツを作成し、そのコンテンツを Web アプリケーション上に画面統合してしまおう、というのが埋め込み (Embedded) となります。埋め込みには Tableau 社が提供している [JavaScript API](https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api.htm) を使うか、 HTML のインラインフレーム (iframe) を使うかの大きく 2 種類の方法があります。
Tableau 社ドキュメント [埋め込みコードの書き出し](https://onlinehelp.tableau.com/current/pro/desktop/ja-jp/embed_code.html)
Tableau 社ホワイトペーパー : [BI の埋め込みで考慮するべき ７ つの基準](https://www.tableau.com/ja-jp/learn/whitepapers/7-criteria-consider-when-embedding-bi)
GitHub ドキュメント : [JavaScript API Samples](https://github.com/tableau/js-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 連携してみる](https://qiita.com/tab123/private/fa043ceec4bffc92e4b0)
**埋め込みをする場合は [追加の設定](https://qiita.com/tab123/private/fa043ceec4bffc92e4b0#%E8%BF%BD%E5%8A%A0%E3%81%AE%E8%A8%AD%E5%AE%9A) を忘れずに設定してください！**

##SharePoint Online のサイト作成、セキュリティ設定
Office 365 にログインします。https://www.office.com
![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/dbc230e6-4d92-835b-fdca-0db10db77da9.png)
SharePoint をクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/dfe9cb50-b3aa-63bd-e48f-869d0bf60d94.png)
サイトの作成をクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/1e062654-4cd7-b3c6-7651-a4ec3539553c.png)
(どちらでも構いませんが、) コミュニケーション サイト をクリック
チームサイトとコミュニケーションサイトの差異は以下ドキュメントを参照ください
[チームまたはコミュニケーション サイトを作成する - Office サポート](https://support.office.com/ja-jp/article/%E3%83%81%E3%83%BC%E3%83%A0%E3%81%BE%E3%81%9F%E3%81%AF%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B-551e190a-8fbe-47ae-a88a-798b443c46b1)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/3543ef7e-182c-5586-41d7-78ab8d03ee93.png)
サイト名を入力 (同一テナント内で一意な値となります) して完了をクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/9b08e648-b20c-4614-18ad-686de76f0d38.png)
サイトが作成されました。右上にある設定アイコンから サイト情報 をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/0a532b5c-b4c7-69cf-45c9-3817ae613c9a.png)
すべてのサイト設定を表示をクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/29bcccb0-727d-56c9-d1f0-bad134db739c.png)
HTML フィールドのセキュリティ をクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/e02ce413-166a-4037-0b33-7df70393bf2a.png)
このドメインからの iframe を許可: に tableau.com を入力し、追加、OK。これで Tableau Online のコンテンツを SharePoint 上に埋め込むことができるようになりました。左側のメニューからホームをクリックして元のページに戻ります。

##SharePoint Online のページ編集、コンテンツの埋め込み
![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/9825a353-5044-06d6-42f0-8b260f1f2b35.png)
編集 をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/27a08b8d-cd2a-a2db-be00-2147adaae926.png)
セクションの境目のところにカーソルを持っていくと、 + アイコンが出てきてコンテンツを挿入ができます。今回は 埋め込み パーツをクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/6eb33603-68e0-4677-4898-d02390e8cb63.png)
埋め込みコードとして iframe を含む HTML で記述します。

```:HTML
<iframe src="Tableau Online のコンテンツ URL" width="645" height="380"></iframe>
```
width と height はコンテンツに合わせて調整ください。 また、Tableau Online のコンテンツ URL は共有メニューから取得できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/2877bd13-bc92-6fa6-0ba0-3614408bdf9f.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/fef8caf8-8749-d285-870b-c552a54918db.png)
発行ボタンをクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246284/53cece2f-ea06-791d-72d4-3551d5617124.png)
SharePoint Online に Tableau Online のダッシュボードを埋め込むことができました。

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

#参考
[SharePoint ページにコンテンツを埋め込む機能を許可または制限する](https://support.office.com/ja-jp/article/sharepoint-%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%E6%A9%9F%E8%83%BD%E3%82%92%E8%A8%B1%E5%8F%AF%E3%81%BE%E3%81%9F%E3%81%AF%E5%88%B6%E9%99%90%E3%81%99%E3%82%8B-e7baf83f-09d0-4bd1-9058-4aa483ee137b)
[Embedding a Tableau Server View on Sharepoint Online](http://kb.tableau.com/articles/howto/embedding-a-tableau-server-view-on-sharepoint-online)