どうする Power Pages？ Web 開発者からみる Power Pages 2023/2/28 第 6 回 Japan M365 Dev User Group 勉強会 篠原 敬志 (karamem0)

自己紹介 篠原敬志 (Takashi Shinohara) アバナード株式会社 マネージャー Microsoft MVP for Office Development (2018-2022) Microsoft MVP for M365 Development (2022-) Japan M365 Dev User Group 運営 SharePoint をベースとしたアプリケーション開発に従事していました。近 年は Power Platform、Microsoft 365、Microsoft Azure を使った DX の支援を実施しています。アジャイル コーチ/スクラム マスターとしても 活動しています。 最近はずっと React 書いています。

本日のゴール 2022 年 10 月に一般公開された Power Pages (旧: Power Apps ポータル) を遊び倒します

Power Pages について

Power Pages とは Power Platform の製品群の 1 つ 他の製品とは異なり「外部に公開すること」に全振りしている 実は昔からある (ADX Studio > CRM ポータル > Power Apps ポータル > Power Pages)

Power Pages でできること Dataverse のテーブルに対する CRUD を組織外のユーザーが実行可能 匿名ユーザーまたは認証ユーザー (および管理者) でのアクセス制御 ユーザーの情報は取引先担当者 (Contacts) テーブルに格納される 取引先企業 (Accounts) テーブルによるユーザーのグループ化 セルフ サインアップおよび招待状の引き換え 認証プロバイダーはローカル (非推奨)、Azure AD、Azure AD B2C、OpenID Connect

Power Pages の価格 プラン 認証ユーザー 匿名ユーザー サブスクリプション ￥21,743 (100ユーザー/サイト/月) ￥8,154 (500ユーザー/サイト/月) 従量課金制 ￥435 (ユーザー/サイト/月) ￥33 (ユーザー/サイト/月) ※ https://powerpages.microsoft.com/ja-jp/pricing/

Power Pages のライセンスの考え方 サブスクリプションの場合、実際の使用量に対する課金ではなく、想定されるユーザー数を予測し て事前に購入する 組織内のユーザーが Power Apps のライセンスを保有しているときは、そちらの使用権が使われる ので、認証済みユーザーとしてはカウントされない 認証済みユーザーとしてカウントされたときは匿名ユーザーとしてカウントされない 唯一の匿名ページがサインイン ページである場合は匿名ユーザーとしてカウントされない 匿名ユーザーは Cookie で管理されるので、ユーザーがキャッシュをクリアしたときは別のユーザーとし てカウントされる ※ https://learn.microsoft.com/ja-jp/power-platform/admin/powerapps-flow-licensing-faq

Power Pages のテンプレート Power Pages ではすぐに使えるテンプレート提供されている スターター レイアウト テンプレート (1~5) 放課後プログラムへの登録テンプレート 会議の予約テンプレート 建築許可申請テンプレート 空白のテンプレート Dynamics 365 ではさらに追加のテンプレートが提供される

Power Pages の作成に必要な前提条件 Power Platform 環境に対する読み取り/書き込みアクセス モード Power Platform 環境に対するシステム管理者ロール Azure AD にアプリを登録する権限 テナントで Power Pages の作成が有効化されていること、無効化されている場合は Azure AD のグローバル管理者、Dynamics 365 管理者または Power Platform 管理者ロール ※ https://learn.microsoft.com/ja-jp/power-apps/maker/portals/admin/portal-admin-roles

Power Pages のカスタマイズ

Power Pages のカスタマイズ Power Pages は市民開発者でも扱えるようにはなっているが、細かいカスタマイズをしたい場合 は Web プログラミングの知識が必須となる HTML CSS (Bootstrap) JavaScript (jQuery)

jQuery とは 2006 年に開発された JavaScript ライブラリ 当時は JavaScript の言語機能が弱かったので爆発的に普及したが、JavaScript の言語機能 の強化 (Selector API、Fetch API など) や node.js の普及により徐々に下火に

Bootstrap とは 2011 年に開発された UI フレームワーク グリッド システムによるレスポンシブ デザインが特長で再利用性が高く爆発的に普及したが、 HTML5 の強化 (CSS Grid) や JavaScript フレームワークに特化した UI フレームワーク (React で あれば Material UI など) の台頭により徐々に下火に あまりに安易に使われすぎて見る人が見ると「あっ (察し)」となる

Power Pages でのコーディング デザイナー上で [コードの編集] をクリックすることで VS Code (Online) でページを編集可能 保存すると自動的に Power Pages 側に適用される Git などのソース管理機能はなし (Power Platform Build Tools)

Liquid テンプレートによるカスタマイズ サーバー サイドでの動的な HTML/CSS/JavaScript の生成が可能 条件文や繰り返しなどの基本的な構文をサポート Web ページやユーザーの情報の取得や FetchXML と組み合わせたデータの取得も可能 慣れないと難しいので割り切って JavaScript でごり押しする方法も

Power Pages で Dataverse Web API を叩いてみる DEMO

事前準備 サイト設定の追加 Webapi/テーブルの論理名/Enabled: True Webapi/テーブルの論理名/Fields: 列名 (カンマ区切り) または * (すべての列) テーブルへのアクセス許可の追加 ※https://learn.microsoft.com/ja-jp/power-apps/maker/portals/webapi-tutorial

注意点 API の URL に指定するテーブル名は複数形 (取引先担当者であれば /_api/contacts) 仮想テーブルに対しては実行できない

Power Pages で Graph API を叩いてみる DEMO

事前準備 Azure AD アプリケーションの登録 プラットフォーム構成: シングル ページ アプリケーション Power Pages の URL をリダイレクト URL として追加 アクセス トークンを追加 API のアクセス許可: アクセス許可を追加後、管理者への同意を付与する MSAL.js の読み込み

注意点 Azure AD 認証のみ可能 Power Apps の従量課金制プランよりは割安 Power Apps のライセンスを付与したくないというときには有用

まとめ

まとめ カスタマイズをすればするほど Power Pages の「らしさ」は失われる 開発のコスト、メンテナンス性、などなど リスクも検討する必要がある Power Platform 全般にいえることは Power Pages にも当てはまる

ご清聴ありがとうございました