PowerApps を Web サイトなどのサービスに統合するIntegrate PowerApps into websites and other services

多くの場合、作成したアプリを、ユーザーが業務を行っている場所で使用できると非常に便利です。The apps you build are often most useful when they're available right where people are doing their work. PowerApps では、アプリを iframe に埋め込むことで、そのアプリを Web サイトや Power BI、SharePoint などのサービスに統合できます。PowerApps enables you to embed apps in an iframe so that you can integrate those apps into websites and other services, such as Power BI or SharePoint.

このトピックでは、アプリを埋め込むためのパラメーターを設定する方法を説明した後で、Asset Ordering (資産の注文) アプリを Web サイトに埋め込みます。In this topic, we'll show you how to set parameters for app embedding; then we'll embed our Asset Ordering app in a website.

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

次の制限事項を考慮してください。Keep the following restrictions in mind:

  • 埋め込みアプリにアクセスできるのは、同じテナント内の PowerApps ユーザーだけです。Only PowerApps users in the same tenant can access the embedded app.
  • PowerApps で Internet Explorer 11 がサポートされるのは、互換表示がオフになっている場合のみです。PowerApps supports Internet Explorer 11 only with Compatibility View turned off.

(iframe を使用せずに) SharePoint Online に PowerApps を統合することもできます。You can also integrate PowerApps into SharePoint Online (without using an iframe). 詳しくは、「PowerApps を使用して、SharePoint 内からアプリを生成する」をご覧ください。For more information, see Generate an app from within SharePoint using PowerApps.

アプリの URI パラメーターの設定Set URI parameters for your app

アプリを埋め込む場合は、まず Uniform Resource Identifier (URI) のパラメーターを設定して、iframe がアプリの場所を認識できるようにします。If you have an app you want to embed, the first step is to set parameters for the Uniform Resource Identifier (URI), so that the iframe knows where to find the app. URI の形式は次のとおりです。The URI is in the following form:

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

: URI がページ上で見やすいように、改行を追加しています。Note: We added a line break so the URI displays better on the page.

この URI の [AppID]('[' と ']' を含む) を、対象のアプリの ID に置き換えるだけです。The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). ID を調べる方法は後で説明しますが、その前に、URI で使用できるすべてのパラメーターを以下に示します。We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID] - /providers/Microsoft.PowerApps/apps/[AppID] の形式で、[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. 実行するアプリの ID を指定します。It provides the ID of the app to run.
  • screenColor - ユーザーのアプリの読み込みエクスペリエンスを向上するために使用します。screenColor - is used to provide a better app loading experience for your users. このパラメーターは RGBA (赤の値、緑の値、青の値、アルファ) の形式で、アプリが読み込まれるときの画面の色を制御します。This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. アプリのアイコンと同じ色に設定することをお勧めします。It is best to set it to the same color as your app's icon.
  • source - アプリには影響しませんが、埋め込みのソースを示すわかりやすい名前を追加することをお勧めします。source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • 最後に、Param() 関数 を使用してカスタムパラメーターを追加すると、その値をアプリで使用できます。Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. これは [AppID]&param1=value1 のように、URI の末尾に追加されます。They are added to the end of the URI, such as [AppID]&param1=value1. これらのパラメーターは、アプリの起動中は読み取り専用となります。変更が必要な場合はアプリを再起動する必要があります。These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

アプリ ID を調べるGet the App ID

アプリの ID は powerapps.com で調べることができます。埋め込むアプリに対して次の手順を実行します。The app ID is available on powerapps.com. For the app you want to embed:

  1. powerapps.com[アプリ] タブで、省略記号 ( . . .In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ) をクリックまたはタップし、[詳細] を選択します。), then Details.

    アプリの詳細の表示

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

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

  3. URI の [AppID] 値を置き換えます。Substitute the [AppID] value in the URI. 資産の注文アプリの場合、URI は次のようになります。For our Asset Ordering app, the URI looks like this:

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

Web サイトにアプリを埋め込むEmbed your app in a website

アプリの埋め込みは、サイトの HTML コード (または、Power BI や SharePoint などの iframe をサポートするその他のサービス) に iframe を追加することと同じほど、簡単にできるようになりました。Embedding your app is now as simple as adding the iframe to the HTML code for your site (or any other service that supports iframes, such as Power BI or SharePoint):

<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 で置き換えます。Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

次の図は、サンプルの Contoso 社 Web サイトに埋め込まれた資産の注文アプリを示しています。The following image shows the Asset Ordering app embedded in a Contoso sample website.

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

アプリのユーザーの認証に関して、次の点に注意してください。Keep the following points in mind for authenticating users of your app:

  • Web サイトが Azure Active Directory (AAD) ベースの認証を使用する場合は、追加のサインインは必要ありません。If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Web サイトが他のサインイン機構を使用する場合や、認証されない場合は、iframe でユーザーに対してサインイン プロンプトが表示されます。If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. アプリの作成者がアプリをユーザーと共有していれば、ユーザーはサインイン後にアプリを実行できるようになります。After they sign-in, they will be able to run the app as long as the author of the app has shared it with them.

このように、アプリの埋め込みは簡単で有用です。As you can see, embedding apps is simple and powerful. 埋め込みにより、Web サイトや Power BI ダッシュボード、SharePoint ページなどの、担当者やお客様が業務を行う場所にアプリを配置できます。Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.