こんにちは。システムソリューション営業本部の吾妻です。

ローコード開発製品のPower Pagesを利用すると、ドラッグ＆ドロップ式のデザインツールやテンプレートを活用することによって、Webサイトを手軽に構築できます。画像や文章を貼り付けただけのWebサイトであれば、専門的なプログラミングスキルがなくてもスピーディーに構築できる一方で、標準機能の範囲から外れたロジックを追加しようとすると、JavaScriptの知識が必要になり、構築の難易度が上がってしまうデメリットもあります。


そこで、今回は「ロジックまわりの実装」も、なるべくローコードで実装するための方法を考えていきたいと思います。

具体的には、Power Pagesで作成しにくいロジックの部分はPower Automateのクラウドフローに任せて、Power Pagesサイトからそのクラウドフローを呼び出すことによって、Power Pagesサイトに「動き」をつけていくことにします。この方法には、ローコードで実装できる範囲が広がるだけでなく、画面の見た目を担うフロントエンド（UI）と、実際の処理を行うビジネスロジックを分離できるという大きな利点があります。これにより、コードの保守性や再利用性が高まり、チーム内での役割分担もしやすくなります。


本記事の前提となるPower Pagesの概要については、こちらでご紹介しています。ぜひご覧ください。

必要となるライセンス

今回ご紹介する構成を実現しようとする場合、Power Pagesのライセンスと、Power Automateのライセンスをそれぞれ用意する必要があります。

Power Pages の価格		Power Automate の価格
（2025/7/15時点）

Power Pagesについては、アクセスするユーザーの性質によって 認証済みユーザー と 匿名ユーザー の2種類のライセンスを使い分けます。

社内向けのポータルサイトのように、Microsoft Entra IDで認証された特定のユーザーがアクセスする場合には、 認証済みユーザー を選択します。一方で、製品情報やアンケートフォームのように、ログインすることなく一般ユーザーがアクセスできるようにしたい場合には、 匿名ユーザー を選択します。


また、Power Automateについては、今回の用途では Power Automate Processライセンス を割り当てます。

Processライセンス は、一般的に有償版ライセンスとして購入されることが多い Premiumライセンス とは異なり、ユーザー単位でプロセスを自動化するためのライセンスではなく、非アテンド型モードのRPAと同じように、ユーザーに紐づかない形でプロセスを自動化するためのライセンスです。後ほどクラウドフローの実行結果から検証してみますが、今回の構成では、特定個人のアカウントによってクラウドフローが実行されるのではなく、Pagesのために自動的に用意されるシステムアカウントによってクラウドフローが実行されるため、 Processライセンス を選択する必要があります。

クラウドフローの実装

Power Pagesに統合するためのクラウドフローを実装する場合には、 Power Automate ホームページ（make.powerautomate.com）ではなく、Power Pages（make.powerpages.microsoft.com）のデザインスタジオ（設計スタジオ）から作りはじめます。




Power PagesサイトからPower Automateクラウドフローにパラメーターを渡し、また、クラウドフローからサイトに処理結果を返すために、クラウドフローのトリガーには「Power Pages がフローを呼び出すタイミング」トリガーを、最後のアクションには「応答」アクションを配置します。応答アクションでは、JSON形式で戻り値を定義します。

トリガー		応答アクション
「Power Pages」コネクタからトリガーを選択する		JSONテキストを定義する
パラメーターに使用できるデータ型は4種類ある

上のようにトリガーとアクションを設定したフローを試しに実行してみると、「Power Pages がフローを呼び出すタイミング」トリガーでは以下のようなデータが取得されることを確認できます。この図から、クラウドフローを実行しているのが「Portals-＜サイト名＞ #」ユーザーであること、Power PagesサイトにログインしているユーザーのIDは、userIdプロパティとして、取引先担当者のレコードのGUIDが格納されていること、の2点を確認することができます。

ちなみに、このような手順でデザインスタジオからクラウドフローを作りはじめた場合には、フローの「新しいデザイナー」で編集することができます。

しかし、（記事執筆時点では）一旦この画面を閉じてしまうと、デザインスタジオ（Power Pages側）でフローを編集するUIがなく、Power Automateホームページからフローデザイナーを開く必要があり、かつ、Power AutomateホームページではPower Pages用のフローを開くと強制的にクラシックなUIに切り替わってしまうようです。

そのため、「新しいデザイナー」でアクションを編集したい場合には、最初の1回で作り切る必要があり、ここは改善が待たれる部分です。




フローの内容を編集し終わったら、セキュリティを確保するためにWebロールを割り当てます。 これにより、意図しないユーザーからの実行を防ぎ、許可されたロールを持つユーザーのみにアクセス権が与えられ、このフローを呼び出せるようになります。

また、一意なGUIDを含むURLが発行されるので、フローを呼び出す側のJavaScriptに埋め込むために、手元に控えておきます。

ここまでの手順で、呼び出される側であるクラウドフローの準備が完了しました。

Pagesの実装

クラウドフローを呼び出す側となる、Power Pagesサイトの設定を行っていきます。今回は、ページに配置した画像をクリックするとクラウドフローが呼び出されるようにしたいと思います。画像でなくても、クリックイベントが設定できる要素であれば問題ありません。


以下の実装は、Power Pagesのデザインスタジオで「コードの編集」をクリックすることによって、Visual Studio Code for the Webを開いて行います。

①img要素にid属性を付与

まずは、HTMLファイルを開いて、クリックイベントを設定したい要素に対して、id属性を設定します。

②クリックイベントを定義

次に、JavaScriptファイルに、クリックイベントを処理するためのイベントリスナーを定義します。

フローを呼び出す際には、一般的なFetch APIではなく、Power Pages基盤で用意されているajaxSafePost関数を使用します。公式ドキュメントでも推奨されているこの方法を使うことで、Power Pagesがユーザーの認証情報を自動的に処理してくれるため、開発者は認証・認可の複雑な仕組みを意識することなく安全にフローを呼び出せるようになります。

以下の画像では、添付ファイルとして「固定の文字列（テキストファイルをBase64エンコードしたイメージ）」を埋め込んだものを指定していますが、動的に選択してフローに受け渡したい場合には、<input type="file">要素とFile APIを組み合わせることで実現できます（<input type="file">要素は、デザインスタジオのコンポーネントとしては用意されていないので、直接HTMLに記述します）。

おまけ（ボタンの活用）

HTMLにおいて、クリックイベントを発生させるUIとしてまず思い浮かべるのは、「ボタン」要素だと思います。

デザインスタジオでも、コンポーネントとして「ボタン」が用意されているのですが、ローコードの範囲（＝デザインスタジオからできる操作）だと、クリックされたときにJavaScriptの特定の関数を実行させるような機能は用意されていませんでした。なので、ボタンにクリックイベントを設定する場合にも、JavaScriptコードは記述する必要があります。




ちなみに、リンク先を指定して遷移させるだけであれば、ローコードでも実現できます。




Dataverseテーブルのフォームには、「フォームが読み込まれたとき（OnLoad）」「データが保存されたとき（OnSave）」といったイベントをきっかけに、JavaScript Webリソースで定義した関数を呼び出す機能が用意されているので、Power Pagesにも同様の機能が追加されると、よりローコードで実装できる領域が広がるので望ましいと思います。

動作確認

動作確認は、Power Pagesサイトを公開してから、クリックイベントを設定した要素をクリックすることで行います。

フロントエンド側では、ajaxSafePost関数のdoneメソッドに記述した関数が実行されたことを確認できれば、正常に動作していることを確認できます。




Power Automateホームページでは、一般的なクラウドフローと同様に実行履歴から、正常に実行完了しているか確認できます。




このように、最低限クラウドフローを呼び出す部分だけJavaScriptで定義できれば、複雑なロジックを実行させるのはすべてPower Automateに任せることができます。