どうする Power Pages？Web 開発者からみる Power Pages / How to deal with Power Pages

Transcript

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

   View Slide

2. 自己紹介
   篠原敬志 (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 書いています。
   

   View Slide

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

   View Slide

4. Power Pages について
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. 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
    

    View Slide

11. Power Pages のカスタマイズ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. まとめ
    

    View Slide

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

    View Slide

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

    View Slide