Share via

モバイル レイアウトを使用した Power BI レポートの埋め込み

  • [アーティクル]

モバイル ユーザーは、任意の Power BI レポート ページを横向きに表示できます。 ただし、レポート作成者は、モバイル デバイス用に最適化され、縦向きで表示される追加のビューを作成できます。 このデザイン オプション (Power BI Desktop と Power BI サービスの両方で使用できます) を使用すると、作成者は、出先のモバイル ユーザーにとって意味のある視覚化だけを選択して再配置することができます。

Power BI DesktopまたはPower BI サービスで作成されたモバイル レイアウトがレポートにある場合は、このレイアウトを使用してレポートを Web アプリケーションに埋め込むことができます。

モバイル レイアウトを使用してレポートを埋め込む方法

最初に、レポートのモバイル レイアウトを作成する必要があります。このレイアウトを作成するためのモバイル アプリ用の Power BI レポートの最適化に関するページをチェック。

レポートのモバイル レイアウトに Power BI レポートを埋め込むには、settings オブジェクトで を layoutType に models.LayoutType.MobilePortrait 設定する必要があります。

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

レポート設定の詳細については、「レポート設定の 構成」を参照してください。

モバイル デバイス専用のレイアウトの種類は 2 つあります。

  • MobilePortrait - 縦向きビュー用に最適化されています。 これは、レポート用に作成したモバイル レイアウトです。

  • MobileLandscape - 横向きビュー用に最適化されています。 これは、レポートの通常のレイアウトです。

注意

レポート レイアウトは、デバイスの実際の向きに layoutType 関係なく、 プロパティによって決定されます。

たとえば、次のコードは、モバイル レイアウトでレポートを埋め込む方法を示しています。

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: reportId,
    embedUrl: embedUrl,
    tokenType: tokenType,
    accessToken: accessToken,
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

レポートが既に読み込まれているときにレポート レイアウトを更新するには、 メソッドを report.updateSettings 使用します。 詳細については、「実行時に レポート設定を更新する」を参照してください。

const newSettings = {
    layoutType: models.LayoutType.MobileLandscape
};

report.updateSettings(newSettings);

レポート ページにモバイル レイアウトがあるかどうかを確認する

Power BI クライアント ページ クラスは、 メソッドを hasLayout 次のように定義します。

hasLayout(layoutType: any): Promise<boolean>

hasLayoutページのレイアウトの種類が指定されている場合、メソッドはブール値を返します。

let pages = await report.getPages();
let mobileLayout = pages[0].hasLayout(models.LayoutType.MobilePortrait);

で段階的埋め込みをhasLayout使用して、レポートを表示する前にページにモバイル レイアウトがあるかどうかをチェックできます。

イベントをスワイプする

モバイル レイアウトにレポートを埋め込む場合は、スワイプ イベントをリッスンし、Web アプリケーションでカスタム コードを実行できます。 2 つのスワイプ イベントがあり、 swipeStartswipeEnd 両方とも次の形式を返します。

interface ISwipeEvent {
  currentPosition: IPosition;
  startPosition: IPosition;
}

interface IPosition {
  x: number;
  y: number;
}

たとえば、 イベントを swipeEnd 使用して左スワイプを検出できます。

report.on("swipeEnd", function(event) {
    const swipeEndEvent = event.detail.swipeEvent;
    if (swipeEndEvent.currentPosition.x < swipeEndEvent.startPosition.x) {
        console.log("Swipe left detected");
    }
});

イベントの処理の詳細については、「イベント を処理する方法」を参照してください。

カスタム レイアウトを使用してアプリを最適化する

また、 カスタム レイアウト 機能を使用して、さまざまなモバイルまたはタブレット画面用に最適化されたカスタマイズされたレイアウトを作成することもできます。

制限事項

  • レポートの初期読み込み後、モバイル レイアウト (縦/横) が初期埋め込み構成オブジェクトに設定されている場合にのみ、レポートモバイルレイアウトへの変更がサポートされます。 それ以外の場合は、最初に を呼び出 powerbi.reset(HTMLElement) して iframe を削除する必要があります。 次に、埋め込み構成オブジェクトで定義されているモバイル レイアウト設定と同じコンテナーを使用して を呼び出す powerbi.embed(...) 必要があります。

  • レイアウトを含 MobilePortrait むレポート ページを埋め込もうとすると、ページにモバイル レイアウトがない場合、ページはレイアウトと共に MobileLandscape 読み込まれます。

  • モバイル レイアウトの使用中にユーザーがページ間を移動できるようにするには、独自のナビゲーションを使用 report.setPage して実装できます。 詳細については、「 ページ ナビゲーション」を参照してください。

  • 上記の構成は、モバイル ビューへの Power BI レポートの埋め込みを参照しています。
    ダッシュボードの埋め込みは、pageView 構成を使用してモバイル レイアウトに構成できます。 pageView: 'oneColumn'

次のステップ