メインコンテンツまでスキップ
waffle.svg
Domo Knowledge Base

Domo Embedを使用してDomo外でカードをシェアする

Version 3

 

はじめに

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

  • SSO対応のウェブサイト、ポータル、アプリケーションにプライベートにエンベッドする。

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

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

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

次を含む [詳細ビュー] で、標準的に使用できるカード機能を組み込むかどうかを選択できます。

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

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

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

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

トレーニングビデオ - Domoカードをエンベッドする

Domo Embedの基本機能の概要について説明します。 

 

トレーニングビデオ - インスタンスでカードをパブリックにする

インスタンスでカードをパブリックにする方法を学ぶことで、内部または外部からエンベッドできるようになります。

 

注記:この製品トレーニングビデオは、Domoのお客様とクライアント様のみを対象としています。

注意事項

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

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

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

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

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

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

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

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

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

  • Sumoピボットテーブルを除くすべてのカードタイプをプライベートにエンベッドできますが、現在パブリックにエンベッドできるのは、KPIカードとカスタムアプリのみです。現在、メモカードやドキュメントカードなど、他のカードタイプをエンベッドすることはできません。

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

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

  • 現在、カードのページを1つのiFrameとしてエンベッドすることはできません。

  • パフォーマンスを低下させないため、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つを実行する必要があります。

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

  2. 下の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) {
  var promise = new Promise();
  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) {
      promise.reject(xhr);
    } else if (xhr.readyState === 4 && xhr.status === 200) {
      promise.resolve(xhr)
    }
  }
  return promise;
}

Domo Everywhere: Domo Embedを使用する

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

domo_embed_option.png
 

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

domo_embed_ui2.png

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

コンポーネント 説明

表示オプション

エンベッドするカードで特定のカード機能のオンとオフを切り替えます。次の切り替えが可能です。

  • [タイトルを表示]。カードのタイトルの表示を切り替えます。

  • [ドリルを許可]ドリルダウン機能を切り替えます。

  • [表ビューを許可]。カードのデータ表を開く機能を切り替えます。このオプションを有効にすると、グリッドアイコン がカード上部に表示されます。エンベッドされたカードの閲覧者は、このアイコンをクリックしてデータ表を開くことができます。プライベートにエンベッドしたカードでのみ使用できます。 

  • [サマリーナンバーを表示]。カードのサマリーナンバーの表示を切り替えます。

  • [フィルターの変更を許可]。カードのフィルターの設定または変更を行う機能を切り替えます。このオプションを有効にすると、ファネルアイコン がカード上部に表示されます。エンベッドされたカードの閲覧者は、このアイコンをクリックしてフィルターオプションを切り替えることができます。現在は、プライベートにエンベッドしたカードでのみ使用できます。

  • [チャートピッカーを許可]チャートタイプを変更する機能を切り替えます。このオプションを有効にすると、円チャートアイコン がカード上部に表示されます。エンベッドされたカードの閲覧者は、このアイコンをクリックしてチャートピッカーを開くことができます。

サイズ設定オプション

エンベッドする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_embed_copy.png ボタンをクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript APIを使用する

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

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

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

2. HTMの<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>

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

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

Domo Embedを有効にする

この機能を有効にするには、管理者ユーザーが [管理者設定] > [カンパニー設定] > [会社概要] に移動し、「パブリックにカードをエンベッド」ボックスを選択する必要があります。

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