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

  • [アーティクル]

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

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

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

最初に、レポートのモバイル レイアウトを作成する必要があります。このレイアウトを作成するためのモバイル アプリ の Power BI レポートの最適化 確認してください。

レポートのモバイル レイアウトに Power BI レポートを埋め込むには、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 Client Page クラスは、hasLayout メソッドを次のように定義します。

hasLayout(layoutType: any): Promise<boolean>

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

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

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

イベントをスワイプする

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

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'

関連コンテンツ