Domoエンベッド（ベータ版）を使用したDomo外部でのカードとストーリーのシェア

はじめに

「Domo Everywhere: Domo Embed」機能を使用すると、DomoカードとDomoストーリーを次のようにエンベッドできます。

SSO対応のウェブサイト、ポータル、アプリケーションにプライベートにエンベッドする。
ウェブサイト、ブログ、FacebookやTwitterなどのソーシャルメディアプラットフォームにパブリックにエンベッドする。

重要：セキュリティ上の理由から、Domo Everywhere: Domo Embedは、HIPAA準拠のDomoインスタンスでは使用できません。

エンベッドするには、自動生成されるHTML文字列をDomoからコピーして、iFrameとしてまたはJavaScript API経由で、ウェブサイトやブログなどの必要な場所に貼り付けます。この機能を使用すると、ビジネスデータの共有が使いやすくなり、インタラクティブにアクセスできるようになります。

個別にエンベッドされたカードでは、以下に示す、[詳細ビュー] で標準的に使用できるカード機能を組み込むかどうかを選択できます。

エンベッドするカードのサイズは、設定済みサイズを選択して設定することも、カスタムの幅と高さを入力して設定することもできます。

Domoストーリーでは、以下のオプションを含めるかどうかを選択できます。

ストーリータイトル
インタラクションとフィルター
各カードの生データのCSVへのエクスポート
pフィルターパラメーターをあらゆるカスタムインタラクションリンクの最後に自動的に追加するPersistフィルター
新しいタブでリンクを開く

Domo Everywhere: Domo EmbedはPDPと互換性がありますが、プライベートにエンベッドするカードにのみ適用されます。

アクティビティログを使用して、エンベッドしたコンテンツを管理用に表示できます。

パブリックとプライベートのエンベッドを使用する状況がわからない場合は、それぞれの使用事例について、こちらのPDFを参照してください：Public Embed and Authenticated Embed1.pdf

ビデオ - Domoカードをエンベッドする

ビデオ - Domo Everywhere: Public Embed

PDF - Public Embed and Authenticated Embed

このPDFをコンピューターにダウンロードするには、PDF上部にマウスポインタを置き、をクリックします。

注意事項

カードをプライベートにエンベッドするには、次の条件をすべて満たす必要があります。

Domo、ウェブサイト、ポータル、アプリケーションでは、SSO（シングルサインオン）を有効にする必要があります。
- [管理者設定] > [SSO] で [招待した人のみにDomoへのアクセスを許可] オプションが有効になっている場合、Domo以外のユーザーは、カードにアクセスしようとしても却下されます。このオプションを無効にすると、Domo以外のユーザーは、デフォルトユーザーのアクセス権で自動的にプロビジョニングされます。デフォルト設定は「パワーユーザー」です。
- アクセス権限についての詳細は、「Domoでのアクセスを制御する」を参照してください。
現在、ウェブサイト、ポータル、アプリケーションでは、サードパーティのCookieを有効にする必要があります。
ソーシャルユーザーは、コンテンツをエンベッドしたり、iFrameを作成したり、プライベートにエンベッドしたコンテンツを表示したりすることはできません。閲覧ユーザーは、コンテンツをエンベッドできませんが、プライベートにエンベッドしたコンテンツを表示できます。
Safariブラウザでエンベッドが行われている場合は、プレースホルダーのDomo Cookieを設定するために、クライアントウィンドウをCORSエンドポイントに一時的にルーティングする必要があります。これについては、下記の「SafariのサードパーティCookieポリシーの問題を解決する」を参照してください。

次のことにも注意してください。

セキュリティ上の理由から、従業員がカードをパブリックにエンベッドできないようにする場合は、 [管理者設定] > [カンパニー設定] > [会社概要] の順に選択して [パブリックにカードをエンベッド] ボックスをオフにすることで、会社に対してこの機能を無効にできます。
Sumoピボット表を除くすべてのカードタイプをプライベートにエンベッドできますが、現在パブリックにエンベッドできるのは、KPIカードとカスタムアプリのみです。現在、メモカードやDoc Cardなど、他のカードタイプをエンベッドすることはできません。
カードをパブリックにエンベッドする場合は、タイトル、ドリルダウン、まとめ数字、チャートピッカーはいずれも使用できますが、フィルターはまだ使用できません。セキュリティ上の理由から、この機能ではカード末尾の表ビューを使用できません。
カードを個別にエンベッドする場合、複数のカードを1ページにエンベッドすることはできますが、カードごとに個別にコードを生成する必要があります。
パフォーマンスを低下させないために、1ページにエンベッドするカードは10個以内にすることをお勧めします。
Sumoピボットテーブルはサポートされません。

SafariのサードパーティCookieポリシーの問題を解決する

Safariには、クライアントが許可なくサードパーティドメインのCookieを設定することをブロックする、サードパーティCookieポリシーがあります。これは、Domoカードだけでなく、サードパーティのソースからエンベッドされたすべてのスクリプトおよびウィジェットに適用されます。つまり、クライアントがエンベッドソリューションに移動する段階でDomoドメインにCookieが設定されていない限り、プライベートにエンベッドしたDomoコンテンツをSafariで表示することはできません。多くの場合、Domoカードからアイデンティティープロバイダー（IdP）の認証エンドポイントへの無限リダイレクトループが発生します。IdPが認証リクエストの試行を制限している場合、429（Too Many Requests）エラーが表示されることがありますが、そうでない場合はエラーは発生しません。

この問題の回避策として、DomoエンジニアはCORSエンドポイントを追加しました。クライアントウィンドウの場所をエンベッドサイトからこのエンドポイントに一時的にルーティングすると、プレースホルダーのDomo Cookieが設定され、DomoドメインにはSafariウィンドウの完全なコンテキストが設定されます。その後すぐにエンベッドサイトにリダイレクトされますが、Domoコンテンツは表示されません（ユーザーはほとんど気付きません）。SafariのDomoドメインにCookieが設定されると、クライアントはエンベッドしたコンテンツに必要なサードパーティのDomo Cookieをすべて設定できるようになります。

これが機能するには、次の2つを実行する必要があります。

Domo で [管理]、[セキュリティ]、[エンベッド設定] の順に移動し、Safariにアクセスするすべてのドメインの名前を入力します。（管理者設定でこのページにアクセスするには、「管理者」のデフォルトのセキュリティプロフィール、または「エンベッドカード」が有効化されたカスタム権限が必要です。）バウンスページは、ユーザーのブラウザが、このホワイトリストに登録されたいずれかのURLからアクセスする場合にのみ機能します。
以下のJavaScriptを実行します。embeddingsiteテキストは自分のDomoドメイン名に置き換えてください。このJavaScript は、ブラウザがDomoからのCookieを許可するかどうかを調べます。許可しない場合は、Domoインスタンスのバウンスページが表示されます。このJavaScriptは、DomoカードをSafariにエンベッドする前にいつでも実行できます。

重要： このコードは、1クライアントにつき2回以上実行しないでください。無限ループに陥る可能性があります。無限ループを回避する1つの方法として、Cookieまたは「Localstorage」変数を設定して、次のコードがすでに実行されているかどうかを確認します。

/** * checkThirdPartyCookies * * Check for CORS support and verify that a cookie has been set on the window context (for Domo) at least once * for Safari support. Once this method has been called, it shouldn't need to be reused until the * browser's cookies/history has been cleared. */ function checkThirdPartyCookies() { try {

// Create a request for setting a 3rd party cookie var xhr = get("https://embeddingsite.domo.com/cookieSupport?action=setCookie").then( function success(xhr) { // CORS may have worked, so now we need to check the cookie value. checkCookie(); }, function failure(xhr) { // The initial request to set a cookie failed, cors is not available on this browser. Hit the bounce Page. window.location = "https://embeddingsite.domo.com/safari-special"; }); /** * checkCookie * * Call the `cookieSupport?action=setCookie&cookieValue={cookieValue}` endpoint to verify that * the original call to set the cookie was done correctly. */ function checkCookie() { // Attempt to retrieve the cookie value var cookieValue = getCookie("safari"); // If the cookie exists, check its value if (cookieValue) { // Create a request to check the cookie value var verifyXhr = get("https://embeddingsite.domo.com/cookieSupport?action=setCookie&cookieValue=" + cookieValue).then(function cookieSuccess(xhr) { // The request succeeded, so we have a response. The responseText should be a boolean value of either be true or false. var response = JSON.parse(responseText); if (!response) { // if its not "true" // We had the wrong cookie value, so hit the bounce Page anyway. window.location = "https://embeddingsite.domo.com/safari-special"; } }, function cookieFailure(xhr) { // There was an issue checking the cookie, so hit the bounce Page. window.location = "https://embeddingsite.domo.com/safari-special"; }); } else { // There was no cookie value, so hit the bounce Page. window.location = "https://embeddingsite.domo.com/safari-special"; } } } catch (error) { // third party cookies are not allowed window.location = "https://embeddingsite.domo.com/safari-special"; } }

/** * getCookie * @param {String} name : the name of a cookie to retrieve a value for */ function getCookie(name) { var value = "; " + document.cookie; var parts = value.split("; " + name + "="); if (parts.length == 2) return parts.pop().split(";").shift(); }

/** * get * @param {String} url : a URL to request from using a GET method */ function get(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.withCredentials = true; xhr.send('null'); xhr.onreadystatechange = function onReadyStateChange() { if(xhr.readyState === 4 && xhr.status !== 200) { reject(xhr); } else if (xhr.readyState === 4 && xhr.status === 200) { resolve(xhr); } } }); }

カード向けDomo Everywhere: Domo Embedを使用する

Domo Everywhere: Domo Embedは、どのようなカードにも使用できます。カードのオプションにアクセスするには、ページレベルまたはカードの詳細ビューで、スパナメニューから [Domo Everywhere] を選択します。

次の図は、カード向けDomo Everywhere: Domo Embedダイアログのコンポーネントを示しています。

次の表では、このダイアログのコンポーネントについて説明します。

コンポーネント	説明
表示オプション	エンベッドするカードで特定のカード機能のオンとオフを切り替えます。次の切り替えが可能です。 [タイトルを表示]。カードのタイトルの表示を切り替えます。 [ドリルを許可]。ドリルダウン機能を切り替えます。 [表ビューを許可]。カードのデータ表を開く機能を切り替えます。このオプションを有効にすると、グリッドアイコンがカード上部に表示されます。エンベッドされたカードの閲覧者は、このアイコンをクリックしてデータ表を開くことができます。プライベートにエンベッドしたカードでのみ使用できます。 [まとめ数字を表示]。カードのまとめ数字の表示を切り替えます。 [フィルターの変更を許可]。カードのフィルターの設定または変更を行う機能を切り替えます。このオプションを有効にすると、ファネルアイコンがカード上部に表示されます。エンベッドされたカードの閲覧者は、このアイコンをクリックしてフィルターオプションを切り替えることができます。現在は、プライベートにエンベッドしたカードでのみ使用できます。 [チャートピッカーを許可]。チャートタイプを変更する機能を切り替えます。このオプションを有効にすると、円チャートアイコンがカード上部に表示されます。エンベッドされたカードの閲覧者は、このアイコンをクリックしてチャートピッカーを開くことができます。
サイズ設定オプション	エンベッドするDomoカードのサイズを設定します。[正方形]（600 x 600ピクセル）、[縦長]（600 x 900ピクセル）、[横長]（900 x 600ピクセル）の3つのデフォルトサイズを使用できます。[カスタム] オプションで独自の幅と高さを設定することもできます。
プレビュー	適用したサイズとオプションの設定でカードのプレビューが表示されます。このプレビューは、エンベッドしたカードと同じように操作できます。たとえば、チャートタイプを変更したり、カードをドリルダウンしたり（ドリルダウンが有効な場合）、凡例のアイテムをクリックして系列アイテムを切り替えたりできます。
エンベッドメニュー	このカードをiFrameでエンベッドするか、JavaScript APIを使用してエンベッドするかを選択します。JavaScript APIの詳細については、次のセクションを参照してください。
プライバシーオプション	このカードをプライベートにエンベッドするか（デフォルト）、パブリックにエンベッドするかを指定します。カードをパブリックにすると、誰でもウェブからそのカードと表示データを閲覧できるようになります。また、そのカードをパブリックカードのニュースフィードに掲載する許可をDomoに与えます。 [パブリック] オプションを選択すると、URLが生成されます（ [リンクをシェア] の下）。これをコピーしてウェブサイト、ブログ、ソーシャルメディアプラットフォームなどに貼り付けることができます。また、5つのソーシャルメディアプラットフォーム（Facebook 、Twitter、Google+、LinkedIn、Pinterest）のいずれかを直接開いて、すぐにカードをエンベッドすることもできます。
HTML文字列	自動生成されたHTML文字列が表示されます。これをコピーして、ウェブサイト、ポータル、アプリケーションに貼り付けます。HTMLをコピーするには、HTML文字列の右にあるボタンをクリックします。

Domo外でカードをプライベートにエンベッドするには

カードがあるページまたはカードの詳細ページに移動します。
カードのスパナメニューで、[Domo Everywhere] を選択します。
[デフォルトサイズ] メニューからエンベッドするカードの設定済みサイズを選択するか、[カスタム] を選択して [幅] フィールドと [高さ] フィールドにサイズを入力します。
エンベッドするカードに含めるすべての表示オプションのボックスをオンにします。
[エンベッド方法] メニューで、このカードをiFrameでエンベッドするか、JavaScript APIを使用してエンベッドするかを選択します。
JavaScript APIの詳細については、次のセクションを参照してください。
アイコンをクリックし、エンベッドするHTMLをコピーします。
カードを表示させるウェブサイト、ポータル、アプリケーションに、このHTMLを貼り付けます。貼り付け方法は、ウェブサイト、ポータル、アプリケーションのどれに貼り付けるかによって異なります。詳細については資料を参照してください。

Domo外でカードをパブリックにエンベッドするには

カードがあるページまたはカードの詳細ページに移動します。
カードのスパナメニューで、[Domo Everywhere] を選択します。
[デフォルトサイズ] メニューからエンベッドするカードの設定済みサイズを選択するか、[カスタム] を選択して [幅] フィールドと [高さ] フィールドにサイズを入力します。
エンベッドするカードに含めるすべての表示オプションのボックスをオンにします。現在、パブリックにエンベッドするカードには、
[表ビューを許可] と [フィルターの変更を許可] を使用できません。
[プライバシーのオプション] メニューの [パブリックに利用する] を選択します。
[パブリックにする] をクリックします。
クリップボードアイコンをクリックし、自動生成されたURLをコピーします。
（条件付き）前記の5つのソーシャルメディアプラットフォームにカードをエンベッドする場合は、そのプラットフォームのアイコンをクリックし（必要に応じてログインし）、プラットフォームの指示に従ってURLを貼り付けます。それ以外の場合は、ウェブサイトやブログなどを開いて、必要に応じてURLを貼り付けます。

JavaScript APIを使用する

JavaScript APIを使用してカードをエンベッドするには、次のように操作します。

次のHTMLをHTMLドキュメントの<head>セクションに追加し、「yourinstance」をURL、「yourkey」をAPIキーに置き換えます。

<script src="http://yourinstance.domo.com/embed/yourkey/domo.js"></script>

2. HTMLの<body>セクションで、Domoカードをエンベッドする場所に<div>を挿入します。

3.Domo.embedを使用してDIVにカードをエンベッドします。
現在使用できる関数はこれのみです。Domo.embedを使用して、ID、クラス、DOM要素のいずれかで <div>にカードをエンベッドできます。

例：

Domo.embed(…).intoElementWithId(‘divid’);

Domo.embed(…).intoElementWithClass(‘class’);

Domo.embed(…).intoElement(document.body);

HTML全体の例：

<html>

<head>

<script

src="http://domo.domo.com/embed/eyJhbGciOiJIUzI1NiJ9.eyJjdXN0b21lciI6IioiLCJhbGxvd2VkRG9tYWlucyI6IioiLCJleHBpcmVzIjoibmV2ZXIifQ.30NufBEghPEJMCFf2TwKMAHT6arvgPZ-badTqI49Q8I/domo.js"></script>

</head>

<body>

<div id=“my-chart” style="width: 600px; height: 600px;"></div>

<script>

Domo.embed({

type: "Card",

id: 1491996447,

viewId: 1123,

options: {

showTitle: false,

showSummaryNumber: true,

allowDrill: true,

allowTableView: true,

allowFilters: true,

allowChartPicker: true

}

}).intoElementWithId(“my - chart”);

</script>

</body>

</html>

APIデータをカードとしてレンダリングする

以下は、データをAPIから取得し、カードとしてレンダリングするサンプルコードです。（[]内の値は全て、ご自身のパラメーターに置き換えてください。）

$.ajax({ url: 'https://api.domo.com/v1/datasets/que...ecute/[DataSet ID], type: 'POST', data: JSON.stringify({ "sql": "[Query]" }), beforeSend: function (xhr) { xhr.setRequestHeader('Accept', 'application/json'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Authorization', 'bearer [Auth Token generate using client id and secret]); }, success: function (results) { console.log(results); const data = { // This is the data you get back from the Domo Data API rows: results.rows, // You provide the names, types, and mappings of your ordered columns columns: [ { type: DomoPhoenix.DATA_TYPE.STRING, name: ‘[Column 1]’, mapping: DomoPhoenix.MAPPING.SERIES }, { type: DomoPhoenix.DATA_TYPE.STRING, name: ‘[Column 2]’, mapping: DomoPhoenix.MAPPING.ITEM }, { type: DomoPhoenix.DATA_TYPE.DOUBLE, name: ‘[Column 3]’, mapping: DomoPhoenix.MAPPING.VALUE } ] }; // Chart Options const options = { width: 600, height: 500 }; // Create the chart in Domo const chart = new DomoPhoenix.Chart(DomoPhoenix.CHART_TYPE.BAR, data, options); // Append the canvas element to your app document.getElementById('myDiv').appendChild(chart.canvas); // Render the chart when you're ready for the user to see it chart.render(); }

パブリックにエンベッドしたカードを追跡する

Domoインスタンスでパブリックにエンベッドしたすべてのカードは、 [管理者設定] > [Domo Everywhere] で追跡できます。エンベッド作成者、現在のエンベッドリンクのステータス（パブリックまたは無効）、パブリックビューの数などの情報を確認できます。このタブを表示するには、「管理者」のセキュリティ権限、または「エンベッドカード」が有効化されているカスタム権限が必要です。詳細については、「管理者設定のレイアウト - Domo Everywhereタブ」を参照してください。

ストーリー向けDomo Everywhere: Domo Embedを使用する

Domo Everywhere: Domo Embedは、どのようなDomoストーリーにも使用できます。ストーリーページの [シェア] メニューに移動し、[エンベッドダッシュボード] を選択すると、このオプションにアクセスできます。ストーリーのエンベッドでは、カードのエンベッドで使用できるJavaScript APIは使用できず、iFrameのみを使用してエンベッドできます。

次の図は、ストーリー向けDomo Everywhere: Domo Embedダイアログのコンポーネントを示しています。

次の表では、このダイアログのコンポーネントについて説明します。

コンポーネント	説明
表示オプション	エンベッドするストーリーのカードで特定の機能のオンとオフを切り替えます。次の切り替えが可能です。 [タイトルを表示]。ストーリーのタイトルの表示を切り替えます。iFrameを含むホストページのコンテンツをすでにラベル付けしている場合は、タイトルを非表示にすることができます。 [インタラクションとフィルターを許可] エンベッドされたストーリーカードでインタラクションとフィルターを許可します。エンベッドされたコンテンツ（通常はパブリックでのエンベッドのみ）をロックダウンする場合は、このオプションをオフにする必要があります。インタラクションには、新しいブラウザタブでカード詳細ビューを開く、指定したウェブページを開く、カードのドリルダウンを有効にするといったアクションが含まれます。ストーリーでのインタラクション構成について詳しくは、「カードインタラクションを設定する」を参照してください。この場合のフィルターとは、ページフィルターの使用を指します。これについては、「ページレベルのフィルターを適用する」で説明します。ストーリーをパブリックにエンベッドする場合、ページで使用されている全てのDataSetの全ての列に、フィルターを適用できることに注意してください。カード内で使用されているかどうかは問われません。ただし、機密データを保持する列へのアクセスは、カードのインタラクションを無効にすることで（「カードインタラクションを設定する」で説明）、またはその列を除外するようにデータを変換することで、ブロックできます。 [エクスポートを許可]。各カードの生データをCSV形式にエクスポートします。（[ エクスポート ] ボタンは、エンベッドされたストーリーのカードにマウスポインタを合わせると表示されます。） [Persistフィルター]。 pフィルターパラメーターをあらゆるカスタムインタラクションリンクの最後に自動的に追加するPersist フィルターを有効にすることで、後続のコンテンツでこのページのフィルター周囲のコンテンツが保持されます。Persist フィルターについては、「 pフィルターを使用して、URLクエリパラメーターからエンベッドされたストーリーにフィルターを適用する」を参照してください。 [新しいタブでリンクを開く]。ユーザーがカードのリンクをクリックすると、新しいブラウザウィンドウでリンクが開きます。そうでない場合は、新しいコンテンツはiFrame内で開きます。（リンクをクリックできるようにするには、 [インタラクションとフィルターを許可] オプションをオンにする必要があります。）
サイズ設定オプション	エンベッドされたDomoストーリーの幅と高さを設定します。
エンベッドオプション	このストーリーをプライベートにエンベッドするか、パブリックにエンベッドするかを指定します（デフォルトのオプションは[オフ] です）。ストーリーをパブリックにすると、誰でもウェブからそのコンテンツを閲覧できるようになります。 [パブリック] オプションを選択すると、URLが生成されます（ [リンクをシェア] の下）。これをコピーしてウェブサイト、ブログ、ソーシャルメディアプラットフォームなどに貼り付けることができます。パブリックのエンベッドオプションは認証されないため、フィルターをパーソナライズできません。 [プライベート] オプションを選択した場合、エンベッドされたコンテンツを見るには認証が必要になります。プライベートのエンベッドオプションは認証を使用するため、フィルターをPDPまたはプログラムによるフィルターを使用してパーソナライズできます。
DataSetマッピングのエクスポート	Domoストーリーのカードで使用される元のDataSet IDを全て一覧にした CSVファイルをダウンロードし、それらのDataSet IDを、難読化され、Domoプラットフォームの外部で使用できるデータソースIDにマッピングします。
エンベッドID	プログラムによるフィルターにおいて、HTMLエンベッドコードで使用されます。詳細については、「 Domoエンベッド（ベータ版）でプログラムによるフィルターを使用する」を参照してください。
HTML文字列	自動生成されたHTML文字列が表示されます。これをコピーして、ウェブサイト、ポータル、アプリケーションに貼り付けます。HTMLをコピーするには、HTML文字列の右にあるボタンをクリックします。

Domo外でストーリーをプライベートにエンベッドするには

Domoでストーリーに移動します。
カードのメニューで、[ダッシュボードをエンベッド] を選択します。
ストーリーカードに含めるすべての表示オプションのボックスをオンにします。
[幅] フィールドと [高さ] フィールドにサイズを入力します。
[エンベッドオプション] メニューで [プライベート] を選択します。
アイコンをクリックし、エンベッドするHTMLをコピーします。
Domoストーリーを表示させるウェブサイト、ポータル、アプリケーションに、このHTMLを貼り付けます。貼り付け方法は、ウェブサイト、ポータル、アプリケーションのどれに貼り付けるかによって異なります。詳細については資料を参照してください。

Domo外でストーリーをパブリックにエンベッドするには

Domoでストーリーに移動します。
カードのメニューで、[ダッシュボードをエンベッド] を選択します。
ストーリーカードに含めるすべての表示オプションのボックスをオンにします。
[幅] フィールドと [高さ] フィールドにサイズを入力します。
[エンベッド オプション] メニューで [パブリック] を選択します。
クリップボードアイコンをクリックし、自動生成されたURLをコピーします。
ウェブサイトやブログなどを開いて、必要に応じてURLを貼り付けます。

Domo Embedを有効にする

この機能を有効にするには、「管理者」のデフォルトのセキュリティ権限、または「エンベッドカード」が有効化されているカスタム権限を持つユーザーが、[管理者設定] > [カンパニー設定] > [会社概要] の順に移動し、[パブリックにカードをエンベッド] ボックスをオンにする必要があります。

注記： これは30日間の無料トライアルです。最初の30日間の使用が終了すると、Domoのアカウント担当者から価格設定についてご連絡いたします。