Microsoft Flow と Web サイトおよびアプリを統合するIntegrate Microsoft Flow with websites and apps

アプリまたは Web サイトに Microsoft Flow を埋め込むと、ユーザーは簡単に個人的なタスクや仕事のタスクを自動化できるようになります。Embed Microsoft Flow right into your app or website to give users a simple way to automate their personal or professional tasks.

ユーザーは、フローを作成するために、Microsoft アカウントか、Azure Active Directory の職場または学校アカウントが必要です。To create flows, users will need either a Microsoft Account or a work or school account in Azure Active Directory. Microsoft Flow は、システムで使用されている ID をどれでもサポートするホワイトラベル ソリューションなどをサポートしていません (既に Microsoft アカウントまたは AAD を使用している場合を除く)。Microsoft Flow doesn't support, for example, a whitelabel solution that supports whatever identity your system uses (unless it already uses Microsoft Accounts or AAD).

前提条件Prerequisites

シナリオに応じたテンプレートの表示Show templates for your scenarios

開始するには、Web サイトにフロー テンプレートが直接表示されるように、次のコードを追加します。To start, add this code to show the flow templates directly in your website:

<iframe src="https://flow.microsoft.com/{locale}/widgets/templates/?q={search term}
&pagesize={number of templates}&destination={destination}"></iframe>

: ページでコードを見やすいように改行を追加してあります。Note: We added a line break so the code displays better on the page.

パラメーターParameter 説明Description
localelocale テンプレート ビューを表す 4 文字の言語と地域コード。The four-letter language and region code for the template view. たとえば、en-us は英語 (米国) を表し、de-de はドイツ語を表します。For example, en-us represents American English, and de-de represents German.
search termsearch term ビューに表示するテンプレートの検索語句。The search term for the templates that you want to show in the view. たとえば、Wunderlist のテンプレートを表示するには、wunderlist を検索します。For example, search wunderlist to show templates for Wunderlist.
number of templatesnumber of templates ビューに表示するテンプレートの数。The number of templates that you want to show in the view.
destinationdestination ユーザーがテンプレートをクリックしたときに開くページ。The page that opens when users click the template. テンプレートの詳細を表示するには details を指定し、Microsoft Flow デザイナーを開くには new を指定します。Specify details to show the details about the template, or specify new to open the Microsoft Flow designer.
parameters.{name}parameters.{name} フローに渡す追加のコンテキスト。Additional context to pass into the flow.

destination パラメーターが new の場合は、ユーザーがテンプレートをクリックしたときに Microsoft Flow が開くため、デザイナーでフローを作成できます。If the destination parameter is new, Microsoft Flow opens when users click a template, and they can create a flow in the designer. アプリの内部から完全に利用したい場合は、次のセクションを参照してください。See the next section if you want to have the full experience work from inside of the app.

フローに追加のパラメーターを渡すPassing additional parameters to the flow

ユーザーが Web サイトやアプリで特定のコンテキストにいる場合は、そのコンテキストをフローに渡すことができます。If the user is in a certain context in your website or app, you might want to pass that context to the flow. たとえば、ユーザーが Wunderlist で特定のリストを表示している間に、"リストに項目が追加されたときに通知を受け取る" テンプレートを開くとします。For example, a user might open a template for Notify me when an item is added to a list while looking at a certain list in Wunderlist. 次の手順に従うと、リスト ID を "パラメーター" としてフローに渡すことができます。By following these steps, you can pass in the list ID as a parameter to the flow:

  1. フロー テンプレートを発行する前に、そのテンプレートでパラメーターを定義します。Define the parameter in the flow template before you publish it. パラメーターは、@{parameters('parameter_name')} のような形式にします。A parameter looks like @{parameters('parameter_name')}.
  2. iframe src でパラメーターを渡します。たとえば、listName というパラメーターがある場合は、&parameters.listName={the name of the list} を追加します。Pass the parameter in the iframe src. For example, add &parameters.listName={the name of the list} if you have a parameter called listName.

完全なサンプルFull sample

ドイツにおける Wunderlist に関する上位 4 つのテンプレートを表示し、myCoolList のユーザーを開始するには、次のとおりです。To show the top four templates about Wunderlist in German and to start the user with myCoolList:

<iframe src="https://flow.microsoft.com/de-de/widgets/templates/?q=wunderlist
&pagesize=4&destination=details&parameters.listName=myCoolList"></iframe>

フローの管理の埋め込みEmbed the management of flows

認証済みの Flow SDK を使用すると、ユーザーは Web サイトまたはアプリから直接フローを作成して管理することができます (Microsoft Flow ポータルに移動する必要はありません)。Use the authenticated Flow SDK to allow users to create and manage flows directly from your website or app (instead of navigating to the Microsoft Flow portal). 認証済み SDK を使用するには、ユーザーが Microsoft アカウントまたは Azure Active Directory にサインインする必要があります。You'll need to sign the user in to Microsoft Account or Azure Active Directory to use the authenticated SDK.

注意

アプリケーションで Microsoft Flow を使用するすべてのユーザーが Microsoft Flow ユーザーになります。All users who use Microsoft Flow in your application will be Microsoft Flow users. Microsoft Flow ブランドを非表示にする方法はありません。There is no way to hide the Microsoft Flow branding.

認証済み SDK の JavaScript を含めるInclude the JavaScript for the authenticated SDK

この例に従って、HTML コードに SDK を含めてください。Include the SDK in your HTML code by following this example. また、SDK をダウンロードして圧縮し、製品とパッケージ化することもできます。You may also download, minify, and package the SDK with your product.

<script src="https://flow.microsoft.com/content/msflowsdk-1.1.js" async defer></script>

ビューを含めるコンテナーを作成するCreate a container to contain the view

次の HTML div を追加します。Add an HTML div:

<div id="flowDiv" class="flowContainer"></div>

状況に適切なサイズで表示されるように、このコンテナーのスタイルを設定することをお勧めします。We recommend that you style this container so that it appears with appropriate dimensions in your experience:

<head>
    <style>
        .flowContainer iframe {
            width: 400px;
            height: 1000px;
            border: none;
            overflow: hidden;
    }
    </style>
</head>

iframe は幅が 320 ピクセル未満の場合に正しく表示されないため、幅が 1200 ピクセルを超えるコンテンツは書き込まれません。Note that the iframe won't render properly below 320 pixels in width and won't fill content above 1200 pixels in width. 高さは任意の値でかまいません。Any height should work.

SDK に対する認証Authentication against the SDK

ユーザーが既に作成したフローを一覧表示し、さらにテンプレートからフローを作成するには、AAD の authToken を指定します。For listing flows that the user has already authored and also to create flows from templates, provide an authToken from AAD.

<script>
    window.msFlowSdkLoaded = function() {
        var sdk = new MsFlowSdk({
            hostName:'https:/flow.microsoft.com'
        });
        var widget = sdk.renderWidget('flows', {
            container: 'flowDiv'
            environmentId: '[environmentId]'    // find environment id from browser URL when you 
                                                // click on 'my flows'
                                                //ex: https://flow.microsoft.com/manage/environments/[environmentId]/flows
        });
        widget.callbacks.GET_ACCESS_TOKEN = function(requestParam, widgetDoneCallback)
       {
            var authCallback = function(token) {
                widgetDoneCallback(null, {
                    token: token // Get AAD access token from your backend system
                });
            };
        }
    }
</script>

次の API 呼び出しを行って、environmentId を検索できます。ユーザーがアクセスできる環境の一覧が返されます。You can find the environmentId by making the following api call, which returns the list of environments user has access to:

GET https://management.azure.com/providers/Microsoft.ProcessSimple/environments
?api-version=2016-11-01 

返される JSON 応答の環境一覧から、環境を選択できます。This returns a JSON response with list of environments, from which you can pick any environment. properties.isDefault=true プロパティをチェックして、既定のユーザー環境を探すことができます。You can look for the default user enviroment by checking the property properties.isDefault=true.

この例では、requestParam は次のように定義されます。In this example, requestParam is defined as:

export interface IRpcRequestParam {
    callInfo: IRpcCallInfo,
    data?: any;
}

次に、widgetDoneCallback はホストがトークンを持つようになったら呼び出す必要のあるコールバック関数です。Next, the widgetDoneCallback is a callback function that needs to be called once the host has the token. これを行うのは、トークンの取得は非同期プロセスである可能性があるためです。This is done because token acquisition is likely an async process. この関数を呼び出すときに渡す必要のあるパラメーターは、(errorResult: any, successResult: any) です。The parameters that need to be passed in when calling this function are (errorResult: any, successResult: any). successResult はコールバックの種類によって異なります。The successResult will depend on the callback type. GetAccessToken の場合、種類は次のとおりです。For GetAccessToken the type is:

export interface IGetAccessTokenResult {
    token: string;
}