Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Jochun

[React][PowerBI] ReactアプリにPowerBIを埋め込む

Last updated at Posted at 2024-08-07

環境

MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

目次

開発環境を整備する

ディレクトリを整備する

  1. ディレクトリを作成する

    terminal
    mkdir powerbi-tutorial

  2. ディレクトリに移動する

    terminal
    cd powerbi-tutorial

ディレクトリにcreate-react-appをインストールする

  1. ディレクトリに移動する
    terminal
    npm install create-react-app
    or
    terminal
    npm install -g create-react-app

ルートディレクトリにPowerShellをインストールする

  1. ディレクトリに移動する

    terminal
    cd ~

  2. PowerSHellを検索する

    terminal
    brew search powershell

  3. PowwerShellをインストールする

    terminal
    brew install powershell/tap/powershel

  4. PowwerShellをTerminal上で動かす

    terminal
    pwsh

Reactプロジェクトを作成する

  1. ディレクトリに移動する

    terminal
    cd powerbi-tutorial

  2. create-react-appを使用してreact-powerbi-embedのTypeScritのReactプロジェクトを作成する

    terminal
    npx create-react-app react-powerbi-embed --template typescript

  3. react-powerbi-embedに移動する

    terminal
    cd react-powerbi-embed

  4. react-powerbi-embedを起動する

    terminal
    npm start
    1. terminalにport3000の画面が使われている可能性がありと表示された場合、別ポートで起動する[Y]
      terminal
      ? Something is already running on port 3000. Probably:
      image.png

  5. アプリが起動する
    image.png

  6. react-powerbi-embedのアプリを停止する

    terminal(起動画面)
    control+z
or
control+c

  7. powerbi-client-reactライブラリをインストールする

    terminal(起動画面)
    npm install powerbi-client-react

PowerBIレポートを選ぶ

  1. アプリからアプリの取得をクリック
    image.png
    image.png

  2. 下記から、任意のアプリを選ぶ（今回はNFL Analytics by P3を選ぶ）
    image.png
    image.png

  3. ワークスペースからNFL Analytics by P3を選ぶ
    image.png

  4. レポートを選ぶ
    image.png

  5. 開いたレポートのURLをメモする（後に使用）※1
    image.png

    レポートURL:<コピーしたレポートのURL>

    ※1:URL内のhttps://~/reports/****/~のreports/直後から次の/までの****をコピー

アクセストークンの取得

  1. terminalからPowerShellに移動する

    terminal
    pwsh

  2. PowerShellを用いてPowerBI用のモジュールを追加する

    terminal(PowerShell)
    Install-Module MicrosoftPowerBIMgmt

  3. PowerBIに接続する

    terminal(PowerShell)
    Connect-PowerBIServiceAccount

// 出力結果
To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code <code> to authenticate.

  4. 出力結果のURLとcodeを使ってログインする
    image.png

  5. アクセストークンを取得する

    terminal(PowerShell)
    Get-PowerBIAccessToken -AsString

// 出力結果
Bearer <アクセストークン>

  6. アクセストークンをメモする（後に使用）

    memo
    レポートURL:<コピーしたレポートのURL>
アクセストークン:<コピーしたアクセストークン>

PowerBIレポートをReactアプリに埋め込む

  1. react-powerbi-embedをVScodeで開く

  2. App.tsxを開く
    image.png

    App.tsx
    import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

  3. importを追加する

    App.tsx
    import React from 'react';
import logo from './logo.svg';
import './App.css';
import { PowerBIEmbed } from 'powerbi-client-react';
import { models, Report} from 'powerbi-client';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

  4. 既存のheader要素の内容を削除して、代わりにサンプルを張り付け。（PowerBIEmbedはpowerbi-client-reactが提供するReactコンポーネント。）

    App.tsx
    import React from 'react';
import logo from './logo.svg';
import './App.css';
import { PowerBIEmbed } from 'powerbi-client-react';
import { models, Report} from 'powerbi-client';

function App() {
  return (
    <div className="App">
        <PowerBIEmbed
            embedConfig = {{
                type: 'report',   // Supported types: report, dashboard, tile, visual and qna
                id: '<Report Id>',
                embedUrl: '<Embed Url>',
                accessToken: '<Access Token>',
                tokenType: models.TokenType.Embed,
                settings: {
                    panes: {
                        filters: {
                            expanded: false,
                            visible: false
                        }
                    },
                    background: models.BackgroundType.Transparent,
                }
            }}
        
            eventHandlers = { 
                new Map([
                    ['loaded', function () {console.log('Report loaded');}],
                    ['rendered', function () {console.log('Report rendered');}],
                    ['error', function (event) {console.log(event.detail);}]
                ])
            }
        
            cssClassName = { "report-style-class" }
        
            getEmbeddedComponent = { (embeddedReport) => {
                this.report = embeddedReport as Report;
            }}
        />
    </div>
  );
}

export default App;

  5. embedConfigのidとaccessTokenに取得したレポートURLとアクセストークンを張り付ける。またtokenTypeをmodels.TokenType.Aadを指定する

    App.tsx
    import React from 'react';
import logo from './logo.svg';
import './App.css';
import { PowerBIEmbed } from 'powerbi-client-react';
import { models, Report} from 'powerbi-client';

function App() {
  return (
    <div className="App">
        <PowerBIEmbed
            embedConfig = {{
                type: 'report',   // Supported types: report, dashboard, tile, visual and qna
                id: '<レポートURL>',
                embedUrl: 'https://app.powerbi.com/reportEmbed',
                accessToken: '<アクセストークン>',
                tokenType: models.TokenType.Aad,
                settings: {
                    panes: {
                        filters: {
                            expanded: false,
                            visible: false
                        }
                    },
                    background: models.BackgroundType.Transparent,
                }
            }}
        
            eventHandlers = { 
                new Map([
                    ['loaded', function () {console.log('Report loaded');}],
                    ['rendered', function () {console.log('Report rendered');}],
                    ['error', function (event) {console.log(event.detail);}]
                ])
            }
        
            cssClassName = { "report-style-class" }
        
            getEmbeddedComponent = { (embeddedReport) => {
                this.report = embeddedReport as Report;
            }}
        />
    </div>
  );
}

export default App;

  6. Reactではステート使う事が多いため、Reactのimportを変更しuseStateを読み込む

    App.tsx
    import React from 'react';

    ↓

    App.tsx
    import React, { useState } from 'react';

  7. function直下にステート管理用のコードを追加する

    App.tsx
    const [report, setReport] = useState<Report>();
    App.tsx
    import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { PowerBIEmbed } from 'powerbi-client-react';
import { models, Report} from 'powerbi-client';

function App() {
  const [report, setReport] = useState<Report>();
  return (
    <div className="App">
        <PowerBIEmbed
            embedConfig = {{
                type: 'report',   // Supported types: report, dashboard, tile, visual and qna
                id: '<レポートURL>',
                embedUrl: 'https://app.powerbi.com/reportEmbed',
                accessToken: '<アクセストークン>',
                tokenType: models.TokenType.Aad,
                settings: {
                    panes: {
                        filters: {
                            expanded: false,
                            visible: false
                        }
                    },
                    background: models.BackgroundType.Transparent,
                }
            }}
        
            eventHandlers = { 
                new Map([
                    ['loaded', function () {console.log('Report loaded');}],
                    ['rendered', function () {console.log('Report rendered');}],
                    ['error', function (event) {console.log(event.detail);}]
                ])
            }
        
            cssClassName = { "report-style-class" }
        
            getEmbeddedComponent = { (embeddedReport) => {
                this.report = embeddedReport as Report;
            }}
        />
    </div>
  );
}

export default App;

  8. 指定したsetReportを使うようにgetEmbeddedComponentを変更する

    App.tsx
    getEmbeddedComponent = { (embeddedReport) => {
　this.report = embeddedReport as Report;
}}

    ↓

    App.tsx
    getEmbeddedComponent = { (embeddedReport) => {
  setReport(embeddedReport as Report);
}}

  9. cssClassNameに "report-style-class" が指定されているが、そのようなスタイルは存在しないため、App.cssに以下を追加する

    App.css
    .report-style-class {
    height: 69vh;
    margin: 1% auto;
    width: 60%;
}

  10. サンプルではレポートの背景が透明に指定されているが、見辛いため Default に変更する

    App.tsx
    background: models.BackgroundType.Transparent,

    ↓

    App.tsx
    background: models.BackgroundType.Default

  11. 保存する

アプリを確認する

  1. terminalからアプリを起動する

    terminal
    npm start

  2. localhostでアプリが立ち上がることを確認する
    image.png

ディレクトリ構成

directory_structure
drive/ ←ルートディレクトリ
├── Applications/
├── Syetem/
└── Usr/ ←usr/（隠しファイル）とは異なるファイル
│   ├── shared/
│   └── personnel(ex. Jochun)/　←ホームディレクトリ
│       ├── powerbi-tutorial/
│       │   ├── node_modules/ ←TypeScriptのコンパイラ
│       │   ├── package.json 
│       │   ├── package-lock.json 
│       │   └── reat-powerbi-embed ←Reactプロジェクト
│       ├── jest-tutorial/
│       ├── MyVagrant/
│       ├── Desktop/
│       ├── Downloads/
│       ├── Documents/
│       ├── .config/
│       ├── .ssh/
│       ├── .zshrc/
│       └── .local/
│       │   ├── .bin
│       │   ├──

参考リンク

メイン

サンプルコード

PowerShellについて

PowerBIのアクセストークンについて

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?