Domo Embedを使用してDomo外でカードとダッシュボードを共有する

はじめに

Domo Everywhere製品スイートには、任意のWebサイト、アプリケーション、ポータルにDomoをエンベッドすることができるDomo Embedが含まれています。単一のカードから、インタラクティブなダッシュボード、Domo App、さらにはDomoのエクスプローラー全体のエンベッドまで、すべてに対応することができます。この記事では、エンベッドに関するさまざまなオプションについての説明、およびDomoの関連要素を環境に素早く簡単にエンベッドするためのよくある質問に回答しています。

• 公開Webサイト、ブログ、FacebookやTwitterなどのソーシャルメディアプラットフォームにパブリックにエンベッドする。

• Webサイト、ポータル、アプリケーションにプライベートにエンベッドする。

  • ユーザーベース - シングルサインオン（SSO）を有効にし、Personalized Data Permission（PDP）を利用します。ユーザーライセンスはDomo内で作成され、PDPポリシーが行レベルの資格ポリシーとして既知のユーザーに適用されます。このオプションは技術的な観点で設定が最も簡単なオプションですが、大量のユーザーを管理したり、堅牢なPDPの中でオペレーションをフィルタリング/許可するには不向きである可能性があります。
    購入が必要な消費要素は、ユーザーライセンスです。

  • サーバーベース - プログラミングサーバー側のフィルタリングを使用します。Domoの埋め込みコンテンツをホストする環境は、Domoに対して認証が行われ、埋め込みコンテンツが表示される際にどのフィルターを適用すべきかをプログラムで決定し、要求をDomoに送信します。このオプションは最も柔軟性が高いオプションですが、技術的な負荷は大きくなります。プログラミングフィルターを作成および管理する開発者が必要です。
    購入が必要な消費要素は、インプレッション（カード読み込み）です。

  • プラットフォームベース（ベータ） - シングルサインオン（SSO）が有効な状態で編集可能なエクスペリエンスを完了し、Personalized Data Permission（PDP）を利用します。ベータ版に含まれる新機能の試用を希望される場合は、担当のアカウントエグゼクティブまたはカスタマーサクセスマネージャーにお問い合わせください。

適切なエンベッド方法の選択にサポートが必要な場合は、アカウントエグゼクティブまたはカスタマーサクセスマネージャーにお問い合わせください。お客様の使用事例および組織に適したエンベッド方法をお調べいたします。

ユーザーによるパブリックおよびプライベートエンベッドについては、自動生成されるHTML文字列をDomoからコピーし、Webサイトやブログなどの必要な場所に貼り付けることで、iFrameとしてまたはJavaScript API経由で埋め込むことができます。この機能により、消費可能でインタラクティブで利用しやすい方法で、ビジネスデータを共有できるようになります。

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

• カードのタイトル

• カードをドリルダウンする機能

• エクスポートを許可

• データ表にアクセスする機能（プライベートカードのみ）

• まとめ数字

• フィルターの適用と変更を行う機能 （プライベートカードのみ）

• チャートピッカーを使用してチャートタイプを変更する機能

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

Domoダッシュボードでは、以下のオプションを含めるかどうかを選択できます。

• ダッシュボードのタイトル

• フィルターバーを表示

• インタラクションとフィルター

• 各カードの生データのCSVへのエクスポート 

• pフィルターパラメーターをあらゆるカスタムインタラクションリンクの最後に自動的に追加するPersistフィルター

• 新しいタブでリンクを開く

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

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

ビデオ - Domo Everywhere：エンベッドの概要

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

ビデオ - Domoのコンテンツをパブリックにエンベッドする方法

パブリックとプライベートのエンベッドを使用する状況がわからない場合は、こちらのPDFで使用事例を参照してください。

PDF - パブリックエンベッドとプライベートエンベッド

PDFをダウンロードする場合は、こちらをクリックしてください。

この機能を取得する

この機能の使用に興味がある場合は、カスタマーサクセスマネージャー（CSM）にお問い合わせください。

注意事項

すべてのプライベートエンベッドカードまたはダッシュボードに対して、以下が該当します。

• 現在、Webサイト、ポータル、アプリケーションでは、サードパーティのCookieを有効にする必要があります。

• ソーシャルユーザーは、コンテンツをエンベッドしたり、iFrameを作成したり、プライベートにエンベッドしたコンテンツを表示したりすることはできません。閲覧ユーザーは、コンテンツをエンベッドできませんが、プライベートにエンベッドしたコンテンツを表示できます。

• Safariブラウザーでエンベッドが行われている場合は、プレースホルダーのDomo Cookieを設定するために、クライアントウィンドウをCORSエンドポイントに一時的にルーティングする必要があります。これについては、下記の「サードパーティCookieポリシーの問題を解決する」を参照してください。

「ユーザーベース」と「プラットフォームベース」のプライベートエンベッドカードまたはダッシュボードに対して、以下が該当します（これは「サーバーベース」とは関係ありません）。

• Domo、Webサイト、ポータル、アプリケーションでは、SSO（シングルサインオン）を有効にする必要があります。

  • [管理者設定] > [SSO] で [招待した人のみにDomoへのアクセスを許可] オプションが有効になっている場合、Domo以外のユーザーは、カードにアクセスしようとしても却下されます。このオプションを無効にすると、Domo以外のユーザーは、デフォルトユーザーのアクセス権で自動的にプロビジョニングされます。デフォルト設定は「パワーユーザー」です。

  • アクセス権限についての詳細は、「Domoでのアクセスを制御する」を参照してください。

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

• セキュリティ上の理由から、従業員がカードをパブリックにエンベッドできないようにする場合は、[管理者設定] > [カンパニー設定] > [会社概要]の順に選択して [パブリックにカードをエンベッド] ボックスのチェックを外すことで、会社に対してこの機能を無効にできます。

• プライベートエンベッドは、Sumoピボット表を除くすべてのタイプのカードで利用できます。現在、NotebookのカードとDoc Cardは単体では埋め込みできませんが、ダッシュボードの一部として埋め込むことができます。

• カードをパブリックにエンベッドする場合は、タイトル、ドリルダウン、まとめ数字、チャートピッカーはいずれも使用できますが、フィルターはカードで使用されている列にのみ使用可能です。セキュリティ上の理由から、この機能ではカード末尾の表ビューは使用できません。

• カードを個別にエンベッドする場合、複数のカードを1ページにエンベッドすることはできますが、カードごとに個別にコードを生成する必要があります。

サードパーティCookieポリシーの問題を解決する（廃止）

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

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

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

1. Domoで [管理]、[セキュリティ]、[エンベッド設定] の順に移動し、ブラウザーにアクセスするすべてのドメインの名前を入力します。（管理者設定でこのページにアクセスするには、「管理者」のデフォルトのセキュリティプロフィール、または「エンベッドカード」が有効化されたカスタム権限が必要です。）バウンスページは、ユーザーのブラウザーが、このホワイトリストに登録されたいずれかのURLからアクセスする場合にのみ機能します。

2. 以下のJavaScriptを実行します。embeddingsiteテキストは自分のDomoドメイン名に置き換えてください。このJavaScriptは、ブラウザーがDomoからのCookieを許可するかどうかを調べます。許可しない場合は、Domoインスタンスのバウンスページが表示されます。このJavaScriptは、Domoカードをブラウザーにエンベッドする前にいつでも実行できます。 
    

/**
 * 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 Embedを使用する

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

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

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

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

1. カードがあるページまたはカードの詳細ページに移動します。

2. カードのスパナメニューで、[Domo Everywhere] を選択します。

3. [デフォルトサイズ] メニューからエンベッドするカードの設定済みサイズを選択するか、[カスタム] を選択して [幅] フィールドと [高さ] フィールドにサイズを入力します。

4. エンベッドするカードに含めるすべての表示オプションのボックスをオンにします。

5. [エンベッド方法] メニューで、このカードをiFrameでエンベッドするか、JavaScript APIを使用してエンベッドするかを選択します。
   JavaScript API の詳細については、次のセクションを参照してください。

6.  イコンをクリックし、エンベッドするHTMLをコピーします。

7. カードを表示させるウェブサイト、ポータル、アプリケーションに、このHTMLを貼り付けます。貼り付け方法は、ウェブサイト、ポータル、アプリケーションのどれに貼り付けるかによって異なります。詳細については資料を参照してください。

   重要：埋め込みコンテンツを閲覧できるよう、ページとカードはユーザーと共有する必要があります。

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

1. カードがあるページまたはカードの詳細ページに移動します。

2. カードのスパナメニューで、[Domo Everywhere] を選択します。

3. [デフォルトサイズ] メニューからエンベッドするカードの設定済みサイズを選択するか、[カスタム] を選択して [幅] フィールドと [高さ] フィールドにサイズを入力します。

4. エンベッドするカードに含めるすべての表示オプションのボックスをオンにします。現在、パブリックにエンベッドするカードには、
   [表ビューを許可]と[フィルターの変更を許可]を使用できません。 

5. [プライバシーのオプション]  メニューの [パブリックに利用する]  を選択します。

6. [パブリックにする] をクリックします。

7. クリップボードアイコンをクリックし、自動生成されたURLをコピーします。 

8. （条件付き）前記の5つのソーシャルメディアプラットフォームにカードをエンベッドする場合は、そのプラットフォームのアイコンをクリックし（必要に応じてログインし）、プラットフォームの指示に従ってURLを貼り付けます。それ以外の場合は、Webサイトやブログなどを開いて、必要に応じてURLを貼り付けます。

JavaScript APIを使ってエンベッドカードとダッシュボードをフィルタリングする

https://developer.domo.com/docs/overview/embedded-analyticsの「JavaScript APIを使って埋め込みコンテンツをフィルタリングする」でコード例を参照してください。

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

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

ダッシュボード向けDomo Embedを使用する

Domo Everywhere Embedをご使用であれば、あらゆるDomoダッシュボードを埋め込むことができます。ダッシュボードの [シェア]  メニューに移動し、[エンベッドダッシュボード] を選択すると、このオプションにアクセスできます。ダッシュボードのエンベッドでは、カードのエンベッドで使用できるJavaScript APIは使用できず、iFrameのみを使用してエンベッドできます。 
 

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

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

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

Domo外でダッシュボードをプライベートにエンベッドするには

1. Domoでダッシュボードに移動します。

2. カードの  メニューで、[ダッシュボードをエンベッド] を選択します。

3. ダッシュボードカードに含めるすべての表示オプションのボックスをオンにします。

4. [幅] フィールドと [高さ] フィールドにサイズを入力します。

5. [エンベッドオプション] メニューで [プライベート] を選択します。

6.  アイコンをクリックし、エンベッドするHTMLをコピーします。

7. Domoダッシュボードを表示させるWebサイト、ポータル、アプリケーションに、このHTMLを貼り付けます。貼り付け方法は、Webサイト、ポータル、アプリケーションのどれに貼り付けるかによって異なります。詳細については資料を参照してください。

   重要：埋め込みコンテンツを閲覧できるよう、ページとカードはユーザーと共有する必要があります。

Domo外でダッシュボードをパブリックにエンベッドするには

1. Domoでダッシュボードに移動します。

2. カードの  メニューで、[ダッシュボードをエンベッド] を選択します。

3. ダッシュボードカードに含めるすべての表示オプションのボックスをオンにします。

4. [幅] フィールドと [高さ] フィールドにサイズを入力します。

5. [エンベッド オプション]  メニューで [パブリック]  を選択します。

6. クリップボードアイコンをクリックし、自動生成されたURLをコピーします。 

7. Webサイトやブログなどを開いて、必要に応じてURLを貼り付けます。

PDP Playbookでプライベートエンベッドする

PDP Playbookによるプライベートエンベッドを設定する

プライベートエンベッドは、DomoのSSOを利用してDomoプラットフォームでユーザーを認証します。埋め込みコンテンツはJavascript APIまたはiFramesのいずれかを介してエンドユーザーに提供されます。プライベートエンベッドはPDPと組み合わせて、外部のエンドユーザーを含むエンドユーザーに適切なコンテンツを提供することができます。エンベッドを使って外部エンドユーザーにコンテンツを提供する場合、次の2つの方法のいずれかが推奨されます。

• ホワイトラベルのサブスクライバーインスタンスからカードをエンベッドする（「Domo Publish」を参照）。この場合、精通したエンドユーザーがDomoアプリケーションにアクセスしようとすると、ホワイトラベルのインスタンスのみが表示されます（例：Buzz機能なし）。
• プログラムエンベッドを使用する。プログラムエンベッドを使用するのは、エンドユーザーがDomoの認証ユーザーではない場合です。これにより、エンドユーザーはDomoアプリケーションにアクセスできなくなります。つまり、ポータルまたはアプリケーションコードが認証を処理し、エンドユーザーに対し適切なデータを確実に表示させます。詳細については、「Domo Embedでプログラムによるフィルターを使用する」を参照してください。

プライベートエンベッドを実装するには

1. SSOを設定します。 

2. 上記で説明したように、プライベートエンベッドを有効にします。

3. PDPを設定します。 

4. エンベッドするカード/ページを設定します。 

5. ポータルまたはアプリケーションでiFrameまたはJavascriptコードを使用してカード/ページをエンベッドします。

   重要：埋め込みコンテンツを閲覧できるよう、ページとカードはユーザーと共有する必要があります。

これらのステップについては、以下で説明します。 

SSOを設定する

「SAMLを使用するDomoのシングルサインオンの説明と設定」を参照してください。 

プライベートエンベッドを有効にする

エンベッドは追加料金で利用できるプレミアム機能です。インスタンスで機能を有効にするには、Domo Everywhereを購入し、CSMにお問い合わせください。

PDPを設定する

「PDPポリシーを作成および削除する」を参照してください。

カード/ページを設定する

エンベッド向けのカードとページの設定は簡単に行うことができます。詳細は、「カード向けDomo Embedを使用する」および「ダッシュボード向けDomo Embedを使用する」を参照してください。

エンベッドカード/ページを管理する

[管理者設定] > [Domo Everywhere]では、エンベッドのために設定されているすべてのカードとダッシュボードの一覧を見ることができます。

カード/ページをエンベッドする

カードはIframeまたはJavaScriptを使ってエンベッドできます。顧客のWebサイトに含めるコードは、エンベッドカードの設定時に取得されます。 

Domo Embedを有効にする

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