多くの場合、作成したアプリを、ユーザーが業務を行っている場所で使用できると非常に便利です。 PowerApps では、アプリを iframe に埋め込むことで、Web サイトや Power BI ダッシュボードに統合できます。

このトピックでは、アプリを埋め込むためのパラメーターを設定する方法を説明した後で、Asset Ordering (資産の注文) アプリを Web サイトとダッシュボードに埋め込みます。

埋め込みアプリが表示された Power BI ダッシュボード

: 同じテナント内の PowerApps ユーザーのみが埋め込みアプリにアクセスできます。

(iframe を使用せずに) SharePoint Online に PowerApps を統合することもできます。 詳しくは、「PowerApps を使用して、SharePoint 内からアプリを生成する」をご覧ください。

アプリの URI パラメーターの設定

アプリを埋め込む場合は、まず Uniform Resource Identifier (URI) のパラメーターを設定して、iframe がアプリの場所を認識できるようにします。 URI の形式は次のとおりです。

https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
source=iframe&appId=/providers/Microsoft.PowerApps/apps/[AppID]

: URI がページ上で見やすいように、改行を追加しています。

この URI の [AppID] を、対象のアプリの ID に置き換えるだけです。 ID を調べる方法は後で説明しますが、その前に、URI で使用できるすべてのパラメーターを以下に示します。

  • appID - /providers/Microsoft.PowerApps/apps/[AppID] の形式で、 実行するアプリの ID を指定します。
  • hideNavBar - アプリに Dynamics 365 のヘッダーを表示するかどうかを制御するブール値 (true または false) です。 サイトに埋め込むアプリがそのアプリのみの場合は、true 値にすることをお勧めします。
  • screenColor - ユーザーのアプリの読み込みエクスペリエンスを向上するために使用します。 このパラメーターは RGBA (赤の値、緑の値、青の値、アルファ) の形式で、アプリが読み込まれるときの画面の色を制御します。 アプリのアイコンと同じ色に設定することをお勧めします。
  • source - アプリには影響しませんが、埋め込みのソースを示すわかりやすい名前を追加することをお勧めします。
  • 最後に、Param() 関数 を使用してカスタムパラメーターを追加すると、その値をアプリで使用できます。 これは [AppID]&param1=value1 のように、URI の末尾に追加されます。 これらのパラメーターは、アプリの起動中は読み取り専用となります。変更が必要な場合はアプリを再起動する必要があります。

アプリ ID を調べる

アプリの ID は powerapps.com で調べることができます。 埋め込むアプリに対して次の手順を実行します。

  1. powerapps.com[アプリ] タブで、省略記号 ( . . . ) をクリックまたはタップし、[詳細] を選択します。

    アプリの詳細の表示

  2. アプリ ID をコピーします。

    詳細からのアプリ ID のコピー

  3. URI の [AppID] 値を置き換えます。 資産の注文アプリの場合、URI は次のようになります。

    https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=iframe&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    

Web サイトにアプリを埋め込む

アプリを埋め込むには、次のようにサイトの HTML コードに iframe を追加するだけです。

<iframe width="[W]" height="[H]" src="https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
source=website&screenColor=rgba(165,34,55,1)&appId=/providers/Microsoft.PowerApps/apps/[AppID]"/>

iframe の幅と高さの値を指定し、[AppID] を対象のアプリの ID で置き換えます。

次の図は、サンプルの Contoso 社 Web サイトに埋め込まれた資産の注文アプリを示しています。

埋め込みアプリが表示された Contoso 社 Web サイト

アプリのユーザーの認証に関して、次の点に注意してください。

  • Web サイトが Azure Active Directory (AAD) ベースの認証を使用する場合は、追加のサインインは必要ありません。
  • Web サイトが他のサインイン機構を使用する場合や、認証されない場合は、iframe でユーザーに対してサインイン プロンプトが表示されます。 アプリの作成者がアプリをユーザーと共有していれば、ユーザーはサインイン後にアプリを実行できるようになります。

Power BI ダッシュボードにアプリを埋め込む

測定、実行、自動化というビジョンに基づいて考えると、多くの場合、アプリを使用する最適な場所は、測定するデータと監視するレポートのコンテキスト内です。

この例では、自社製品の売上を監視するための Power BI ダッシュボードを作成しました。 このダッシュボードでコンピューター ハードウェアの販売動向を監視し、ダッシュボード内の埋め込みアプリから新しいハードウェアの在庫を直接注文します。 アプリの埋め込みにより、在庫担当者は、使い慣れた BI ダッシュボードから離れずに 1 か所で業務を行えるようになります。

次の図では、資産の注文アプリがダッシュボードに直接埋め込まれ、ハードウェアの注文プロセスのコンテキストを提供する売上高と並んで表示されています。

埋め込みアプリが表示された Power BI ダッシュボード

Power BI ダッシュボードにアプリを埋め込むには、次の手順に従います。

  1. 先ほどの説明に従って URI を作成します。

    https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    
  2. iframe に URI を追加します。 ここでは、タイルにスクロール バーを使わずに済むように、幅と高さを 98% に設定しています。

    <iframe width="98%" height="98%" src="https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2"/>
    
  3. アプリを埋め込む Power BI ダッシュボードに移動します。

  4. ダッシュボードの上部のメニュー バーで、[タイルの追加] をクリックまたはタップします。 スペースの制約によっては、プラス (+) 記号だけが表示される場合もあります。

    Power BI ダッシュボードでのタイルの追加

  5. [Web コンテンツ] タブをクリックまたはタップし、[次へ] を選択します。

    ダッシュボードへの Web コンテンツの追加

  6. [埋め込みコード] フィールドに iframe のコードを貼り付けて、[適用] をクリックまたはタップします。

    Web コンテンツの埋め込みコード

  7. ダッシュボードにタイルが表示され、他のタイルと同じように好みの場所に移動できます。 ダッシュボードにタイルを追加する方法の詳細については、「画像、テキスト、ビデオ、その他をダッシュボードに追加する」をご覧ください。

このように、アプリの埋め込みは簡単で有用です。 埋め込みにより、Web サイトと Power BI ダッシュボードの、担当者やお客様が業務を行う場所にアプリを配置できます。