--- title: Sisenseの埋め込み分析機能【SaasにBIをEmbedded】 description: 近年、どのBIツールにおいても組み込み分析については、語られていることかと思いますが、もちろんSisenseにおいても組み込みは実装可能です。用途によって、3つの方法から選ぶことができます。今回は、Sisenseの組み込みの方法について説明、また組み込みを手軽に体験できるPlaygroundを紹介していこうと思います image: https://knowledge.insight-lab.co.jp/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-24%20191440.png --- ![INSIGHT LAB_文字のみ_WHT-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png) ![INSIGHT LAB_文字のみ](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png) [![お問い合わせ](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/a4a0266e-14ad-4388-b83f-681a6f35b8a7.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/a4a0266e-14ad-4388-b83f-681a6f35b8a7) - [Sisenseとは](https://service.insight-lab.co.jp/sisense) - [Sisenseナレッジ](https://knowledge.insight-lab.co.jp/sisense) - [セミナー](https://event.insight-lab.co.jp/sisense-seminar) - [トレーニング](https://service.insight-lab.co.jp/data-analytics-dojo/training_course) - [お役立ち資料](https://download.insight-lab.co.jp/sisense/download) ###### 5 分で読むことができます。 # [Sisenseの埋め込み分析機能【SaasにBIをEmbedded】](https://knowledge.insight-lab.co.jp/sisense/information/embed-dashboard) 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 更新日時 2020年10月16日 ###### Topics: [コラム](https://knowledge.insight-lab.co.jp/sisense/tag/column) [特徴・強み](https://knowledge.insight-lab.co.jp/sisense/tag/特徴-強み) ![Sisenseダッシュボードの組み込みについて](https://knowledge.insight-lab.co.jp/hubfs/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202020-09-24%20191440.png) 近年、どのBIツールにおいても組み込み分析（Embedded、埋め込み等）については、語られていることかと思いますが、もちろんSisenseにおいても組み込みは実装可能です。 用途によって、3つの方法から選ぶことができます。 今回は、Sisenseの組み込みの方法についての説明、また組み込みを手軽に体験できる[Embed Playground](https://sisense.dev/playground)を紹介していこうと思います。 ![](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) 以下のホワイトペーパーでは、自社プロダクトやSaasサービスにBI機能を埋め込む際のポイントを紹介しています。ぜひダウンロードしてご活用下さい。 [**自社プロダクトにOEMでBI実装を成功させる7つのステップ**](https://download.insight-lab.co.jp/oem-embeded-sisense) [![自社プロダクトにOEMでBI実装を成功させる7つのステップ](https://knowledge.insight-lab.co.jp/hubfs/image-png-Feb-09-2022-02-10-28-14-AM.png)](https://download.insight-lab.co.jp/oem-embeded-sisense) 目次 ## 埋め込みを体験してみる [Sisense Embed Playground](https://sisense.dev/playground)では、Sisenseのダッシュボード、ウィジェットを、サンプルのウェブサイトにクリック操作のみでコードを生成し、サイトに埋め込むといった疑似体験ができます。 URLはこちら： [Sisense Embedded Playground](https://sisense.dev/playground/) [![play](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/play.png?width=820&name=play.png)](https://sisense.dev/playground) 無料で登録なしに誰でもアクセスできるので、 Sisenseのダッシュボードの組み込みってどうなんだろうって疑問を持っている方には実際に触り、 組み込みのイメージを掴むのに最適だと思います。   ## Sisenseの組み込みの種類 まずは、Sisenseの組み込みについて紹介したいと思います。 Sisenseには組み込みの方法として以下の3種類が用意されています。 | 方法 | 難易度 | カスタマイズ性 | 要約 | | --- | --- | --- | --- | | iFrame | ★☆☆ | ★☆☆ | お手軽組み込み | | Embed SDK | ★★☆ | ★★☆ | iFrameをJSで拡張したもの | | Sisense JS | ★★★ | ★★★ | JSでカスタマイズ性は高い |   それぞれの機能について、コミュニティのサイトで見つけた表を翻訳したものも参考までに。   |   | iFrame | EmbedSDK | SisenseJS | | --- | --- | --- | --- | | デプロイまでの時間 | 5-10時間 | 10-15時間 | 50-150時間 | | ダッシュボード自体を埋め込み可能か | 〇 | 〇 | × | | 個々のウィジェットを埋め込み可能か | 〇 | 〇 | 〇 | | SSOを使用可能か | 〇 | 〇 | 〇 | | カスタマイズ性 | Sisense上で定義されたスタイルのみ | 親アプリケーションからパラメータ取得可能 | ・スタイル、UIをフルにカスタマイズ可能。 ・独自のフィルターを作成可能 | | JSライブラリーとの互換性 | 〇 | 〇 | AngularJSとJqueryについて、エラーが起きる可能性あり | | エクスポート機能 | 〇 | 〇 | 再度作成する必要あり |   それぞれ、Embed Playgroundでの例を見ながら、解説していきます。   ### iFrame **htmlのiFrameを使ってウィジェットまたは、ダッシュボードを埋め込む方法です**。 ダッシュボード、ウィジェットには個々のURLが生成されているのですが、このURLをiFrameのsrcに指定します。オプションとしてヘッダー、ナビゲーションペイン、フィルタペインなどの表示をコントロールできることができ、その場合は、URLの末尾にオプションで指定したものが追記されます。 カスタマイズ性は低いですが、その分Javascriptを書く必要がないので、**最も簡単な組み込みの方法です**。 Sisense社によると、簡単な組み込みの場合はiFrameで事足りますが、複雑なケースの場合は後述する、Embed SDKやSisense JSを使うことをお勧めするとのこと。 例として、Playgroundでダッシュボードをサイトに埋め込んでみましょう。   ここでは、iFrameでダッシュボードのみ、オプションはなしで組み込みます。 左上のEmbed Dashboardを選び、View Codeをクリック。 ![iframe_1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/iframe_1.png?width=414&name=iframe_1.png) 左下にiFrameのコードが生成されます。 ![iframe_2](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/iframe_2.png?width=423&height=293&name=iframe_2.png) Runを押すと、 ![iframe_3](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/iframe_3.png?width=820&name=iframe_3.png) サイトにiFrameでダッシュボードが組み込まれました。 なお、実際のダッシュボードではダッシュボードメニューからコードを生成することができます。これをコピーして、組み込み先のサイトに貼り付ける形です。   ##### 実際のダッシュボード： ![embed where](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/embed%20where.png?width=457&name=embed%20where.png) 埋め込みコードをクリックすると、組み込み用のコードを自動生成してくれます。iFrameの場合は、HTML Codeを使用します。 ![embed where 2](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/embed%20where%202.png?width=318&name=embed%20where%202.png)   ### Embed SDK Javascriptのライブラリです。Sisenseのドキュメントによると、 「Sisenseとホストページの間のpostMessageコミュニケーションを使い**iFramesの機能を拡張したもの**」と定義されています。Javascriptで実装するものですが、ダッシュボード全体をそのまま埋め込み、iFrameよりはカスタマイズ性はありますが、後述するSisense JS程は高くありません。 iframeとの違いは、**JAQLの操作（フィルターの追加、削除）やダッシュボードのエクスポート、またSisenseアプリの情報（例えば、現在のログインしているユーザー名など）が取得可能**となります。Embed SDKはJS内でSisenseFrameクラスを生成するのですが、その際にアクセスできるイベント、メソッドがあります。 Playgroundで同様にサンプルを見ていきましょう。 先ほどと同様に例として、左上からダッシュボードを選択、オプションはなしです。 ![sdk_1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/sdk_1.png?width=391&name=sdk_1.png) Viewをクリックすると、コードが生成されます。 今度はJSが生成されました。 ![2_code](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/2_code.png?width=600&name=2_code.png)   Runを押すと、サンプルダッシュボードが表示されます。 ![sample_2](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/sample_2.png?width=600&name=sample_2.png)   ### Sisense JS Sisense.jsというJavascriptのライブラリです。iFrameなしで、ウェブページに組み込むことが可能になります。**ウィジェットレベルでのみの実装**となります。HTMLの紐づくIDのコンテイナーをCSSで形を整えてあげれば、自在にウィジェット、フィルター、またダッシュボードのリフレッシュのアクションを組み込んだりすることが可能です。JSを触る分難易度も上がるのですが、**カスタマイズ性は3つの方法の中で一番高い**なので、実際に選ばれるケースが多いのではないでしょうか。 Playgroundで例を見ていきましょう。３つのデザイン（Grid）が用意されています。 ![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/js_1-300x263-1.png?width=300&height=263&name=js_1-300x263-1.png) 任意のものを選び、View Codeを押すと、HTMLとJSのコードが生成されました。 ![ls_2](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/ls_2.png?width=628&name=ls_2.png) コードをRUNすると、サンプルが見れます。 ##### ロードマップ風レイアウト: ![js_3_r](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/js_3_r.png?width=1356&name=js_3_r.png) ##### 記事風レイアウト: ![js_3_a](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/js_3_a.png?width=820&name=js_3_a.png)   ウィジェット単位で、組み込むことができ、CSSでコンテナー（ウィジェットを埋め込んでいるHTMLのID）を整えれば**UIも自由自在です**！ ボタン一つでレイアウトの変更といったことも可能です。 ![](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/Imported_Blog_Media/js_3_other-300x209-1.png?width=300&height=209&name=js_3_other-300x209-1.png)   ## まとめ 今日は、Sisenseの組み込みを体験できる[Embed Playground](https://sisense.dev/playground)の紹介、および組み込みの3つの方法について紹介しました。 実際には、この３つのうちどちらかの方法で埋め込みを実装しただけでは、ダッシュボードが外部ウェブサイトに上手く表示されるわけでなく、例えば**認証機能のあるサイトに埋め込む場合にはSSO認証の設定をする必要があります**。この辺については、また次回にお話しさせて頂ければと思います。 それではまた！Viva, Sisense！！       **Saasに分析機能を埋め込みたい方必見です！！** **[![資料をダウンロードする](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/870cbb43-05ad-4c20-bf95-b9ec09409708.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/870cbb43-05ad-4c20-bf95-b9ec09409708)** - [Tweet](https://twitter.com/share) ![Turtle](https://knowledge.insight-lab.co.jp/hubfs/Sunflower.jpg) #### 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 可視化領域を中心とした業務に従事しています。 ###### [前の投稿](https://knowledge.insight-lab.co.jp/sisense/widget/foldable_widget) [![【Dashboard】ウィジェットを折りたたみ表示する](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/97dc471a60f79a72dd05475b7f3f7523-1024x529-2.png)](https://knowledge.insight-lab.co.jp/sisense/widget/foldable_widget) ###### [【Sisense Dashboard】ウィジェットを折りたたみ表示する](https://knowledge.insight-lab.co.jp/sisense/widget/foldable_widget) ###### [次の投稿](https://knowledge.insight-lab.co.jp/sisense/administration/roe-level-security-1) [![【Security】Sisenseで行レベルセキュリティを設定してみよう -1](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/04_admin-1024x455-2.png)](https://knowledge.insight-lab.co.jp/sisense/administration/roe-level-security-1) ###### [【Sisense Administration】Sisenseで行レベルセキュリティを設定してみよう -1](https://knowledge.insight-lab.co.jp/sisense/administration/roe-level-security-1) RECOMMEND こちらの記事も人気です。 ###### 4 分で読むことができます。 #### [【Sisense Administaration】無料のSSL証明書"Let's Encrypt"でSSL化してみる](https://knowledge.insight-lab.co.jp/sisense/administration/ssl_lets_encrypt) ###### 2020年 10月 16日 ###### 8 分で読むことができます。 #### [【API連携】Spotify音楽データの分析①【Sisense】](https://knowledge.insight-lab.co.jp/sisense/information/spotify_music_data_1) ###### 2020年 10月 16日 ###### 2 分で読むことができます。 #### [【Sisense Widget】折れ線グラフを階段状に表示する](https://knowledge.insight-lab.co.jp/sisense/widget/step_line_chart) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Widget】Radar Chartを使ってポケモンの種族値を表示してみた](https://knowledge.insight-lab.co.jp/sisense/widget/radarchart) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Formula】CASE関数を使って条件分岐する](https://knowledge.insight-lab.co.jp/sisense/formula/case) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Widget】折れ線グラフにおける欠落値の対処法](https://knowledge.insight-lab.co.jp/sisense/widget/line-graph) ###### 2020年 10月 16日 ##### 運営会社 運営会社 - [会社概要](https://www.insight-lab.co.jp/about/company.html) - [お問い合わせ](https://contact.insight-lab.co.jp/main) ##### メニュー メニュー - Sisenseとは - [Sisenseナレッジ](https://knowledge.insight-lab.co.jp/sisense) - [セミナー](https://event.insight-lab.co.jp/sisense-seminar) - [お役立ち資料](https://download.insight-lab.co.jp/sisense/download) [![INSIGHT LAB_文字のみ_WHT-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=200&height=55&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png "INSIGHT LAB_文字のみ_WHT-1")](https://www.insight-lab.co.jp/) - [プライバシーポリシー](https://www.insight-lab.co.jp/privacy.html) Copyright © 2020 INSIGHT LAB, Inc.