Domoエンベッド(ベータ版)を使用したDomo外部でのカードとストーリーのシェア
はじめに
「Domo Everywhere: Domo Embed」機能を使用すると、DomoカードとDomoストーリーを次のようにエンベッドできます。
-
SSO対応のウェブサイト、ポータル、アプリケーションにプライベートにエンベッドする。
-
ウェブサイト、ブログ、FacebookやTwitterなどのソーシャルメディアプラットフォームにパブリックにエンベッドする。
エンベッドするには、自動生成される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にエンベッドする前にいつでも実行できます。
/**
* 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ダイアログのコンポーネントを示しています。
次の表では、このダイアログのコンポーネントについて説明します。
コンポーネント | 説明 |
---|---|
表示オプション |
エンベッドするストーリーのカードで特定の機能のオンとオフを切り替えます。次の切り替えが可能です。
|
サイズ設定オプション |
エンベッドされた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を有効にする
この機能を有効にするには、「管理者」のデフォルトのセキュリティ権限、または「エンベッドカード」が有効化されているカスタム権限を持つユーザーが、[管理者設定] > [カンパニー設定] > [会社概要] の順に移動し、[パブリックにカードをエンベッド] ボックスをオンにする必要があります。