Microsoft Power Pages について

# Power Pages とは

> 2022年5月24日現在

**Power Apps** の機能として提供されていた **Power Apps ポータル (Portals)** が、**Power Platform** の 1 つのサービスとして位置づけられました。

※以下のサイトの情報を和訳しています。

https://docs.microsoft.com/power-pages

**Microsoft Power Pages** は、最新の外部向けビジネス Web サイトを作成、ホスティング、および管理するための、安全なエンタープライズグレードのローコードサービスとしてのソフトウェア (SaaS) プラットフォームです。ローコードメーカーであろうとプロの開発者であろうと、**Power Pages** を使用すると、Web ブラウザーやデバイス間でシームレスに機能する Web サイトを迅速に設計、構成、および公開できます。

![power-pages-site.png (1200×715) (microsoft.com)](https://docs.microsoft.com/power-pages/media/overview/power-pages-site.png)

**Power Pages** は、リッチでカスタマイズ可能なテンプレート、再考されたデザインスタジオによる流動的なビジュアルエクスペリエンス、および独自のビジネスニーズに合ったサイトをすばやく構築するための新しい統合学習ハブを提供します。

**重要**

- **Power Pages** は **PowerApps ポータル** の進化形であり、新しいデザインスタジオやテンプレートなどのPower Pagesによって導入された新機能は、ユーザーがフィードバックを提供できるようにプレビューされています。新しい **Power Pages** デザインスタジオを使用して作成されたサイトを本番シナリオで使用するには、今年後半に **Power Pages** が一般提供されるまで待つことをお勧めします。
- **Power Pages** が **PowerApps ポータル** から継承したすべてのプラットフォーム、サイト管理者、およびプロの開発者機能が一般的に利用可能であり、本番シナリオで使用できます。
  詳細：[Power Pages と Power Apps ポータルの違い][difference-portals]

**Power Pages** は、**Microsoft Power Platform**ファミリの最新メンバーです。**Power Pages** を使用すると、[**Microsoft Dataverse**][dataverse] に保存されているものと同じ共有ビジネスデータを使用してサイトを構築できます。これは、組織内の他の **Microsoft Power Platform** コンポーネントでアプリ、ワークフロー、インテリジェント仮想エージェント、レポート、および分析を構築するために使用します。

![power-platform.png (520×503) (microsoft.com)](https://docs.microsoft.com/power-pages/media/overview/power-platform.png)

## Power Pages 及び Power Apps ポータル

**Power Pages** は、[Power Apps ポータル][power-apps-portals-doc] の基盤の上に構築されており、同じ堅牢な機能とプロの開発者エクスペリエンスを提供するとともに、新しいローコードメーカーエクスペリエンスと、最新のビジネスサイトを設計するためのすぐに使用できるテンプレートを提供します。

詳細：[Power Pages と Power Apps ポータルの違い][difference-portals]

## 無料で試す

[Power Pages][power-pages-trial] を無料で試して、独自のビジネスWebサイトを構築するための機能を調べることができます。

![welcome-to-power-pages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/4a9abdde-d118-e5ca-796e-4b37fae9c267.png)


# Power Pages 機能

**Power Pages** を使用すると、ビジネス向けのプロフェッショナルで安全なサイトをすばやく作成および設計できます。この記事では、**Power Pages** の主な機能の概要を説明します。

## メーカー向けの簡素化されたオーサリングエクスペリエンス

デフォルトのテンプレートを使用して、Power Pages ホームページから直接新しいサイトをすばやく作成するか、既存の業界ベースのスターターテンプレートを選択します。

![create-site_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/cce2de00-4886-c9c9-83b8-923474b9d7fa.png)


詳細：[サイトを作成する](https://docs.microsoft.com/power-pages/getting-started/create-manage)

### デザインスタジオ

メーカーは、コードを 1 行も記述せずに、強力で魅力的なサイトを構築できます。

![デザインスタジオ。](https://docs.microsoft.com/en-us/power-pages/media/overview/design-studio.png)

新しく拡張された[デザインスタジオ](https://docs.microsoft.com/en-us/power-pages/getting-started/use-design-studio)は、次のワークスペースを提供します。

- Web ページを作成、設計、および配置するための[ページワークスペース](https://docs.microsoft.com/en-us/power-pages/getting-started/first-page)
- サイトにスタイルとテーマを適用するための[スタイルワークスペース](https://docs.microsoft.com/en-us/power-pages/getting-started/style-site)
- データ駆動型 Web アプリケーションで使用される Microsoft Dataverse テーブルを作成および変更するための[データワークスペース](https://docs.microsoft.com/en-us/power-pages/getting-started/use-data-workspace)
- 管理およびサイト管理用の[ワークスペースのセットアップ](https://docs.microsoft.com/en-us/power-pages/configure/setup-workspace)

## レスポンシブレンダリング

Power Pages は Bootstrap に基づいており、レスポンシブでモバイルフレンドリーで、さまざまなフォームファクタで利用できるWeb サイトの構築をネイティブにサポートします。

![パワーページのフォームファクタ。](https://docs.microsoft.com/en-us/power-pages/media/overview/form-factors.png)

## プロ開発者向けの高度な開発機能

メーカーは、フュージョンチームのプロ開発者と協力して、Visual Studio Code と Microsoft Power Platform CLI を使用して機能を拡張し、強力なビジネスアプリケーション Web サイトを作成できます。

![VisualStudioCode。](https://docs.microsoft.com/en-us/power-pages/media/overview/vs-code-pac-cli.png)

### 続きを読む：

- [Visual Studio Code と Power Platform CLI の使用](https://docs.microsoft.com/en-us/power-pages/configure/cli-tutorial)
- [コードエディタを使用する](https://docs.microsoft.com/en-us/power-pages/getting-started/code-editor)
- [コードコンポーネントを追加する](https://docs.microsoft.com/en-us/power-pages/configure/component-framework)

## セキュリティとガバナンス

Power Pages の組み込みセキュリティがそのコアです。これにより、組織は、Power Pages 承認ルールを介して、ユーザー（内部または外部）へのビジネスデータへのアクセスを安全に有効にすることができます。詳細：[Power Pages のセキュリティ](https://docs.microsoft.com/en-us/power-pages/security/power-pages-security)

- Power Pages を使用している組織は、さまざまな認証プロバイダーから選択するか、サイトコンテンツへの匿名アクセスを許可できます。詳細：[認証を構成する](https://docs.microsoft.com/en-us/power-pages/security/configure-portal-authentication)
- Power Pages は、国際標準化機構 (ISO)、システムおよび組織管理 (SOC)、およびペイメントカード業界データセキュリティ標準 (PCI DSS) に準拠した Azure App Service としてホストされています。
  詳細：[Microsoft Trust Center](https://www.microsoft.com/trust-center/product-overview)
- Power Pages は、最新の TLS 暗号化標準 (TLS 1.2) をサポートし、Azure DDoS 保護が組み込まれています。また、動的 IP 制限をサポートして、悪意のあるユーザーからのトラフィックを制限し、管理者がインジェクション攻撃、クロスサイトリクエストフォージェリ、サーバー側リクエストフォージェリなどの Web セキュリティの脆弱性に対処するための安全な構成駆動型メカニズムを提供します。
- エッジキャッシングおよび Web アプリケーションファイアウォール (WAF) 機能を使用するように Power Pages を構成することもできます。
  詳細：[ポータルを使用して Azure Front Door をセットアップします](https://docs.microsoft.com/en-us/power-apps/maker/portals/azure-front-door)。

Power Pages は、管理者がサイトと環境の管理とライフサイクルを管理するための便利なツールをいくつか提供します。
詳細：[PowerPagesガバナンス](https://docs.microsoft.com/en-us/power-pages/admin/coe-portals)

## 他の Microsoft Power Platform コンポーネントとの統合

**Power Pages** は、他の [Microsoft Power Platform](https://docs.microsoft.com/en-us/power-platform) コンポーネントとの緊密な統合を提供します。

- **Dataverse** を使用すると、ユーザーはビジネスアプリケーションや **Power Pages** サイトで使用されるデータを安全に保存および管理できます。フォーム、ビュー、グラフ、ダッシュボードなどのモデル駆動型アプリ構造を使用して、**Dataverse** データを簡単に表示します。
- **Power Apps** を使用すると、誰でもノーコード/ローコードのカスタムモバイルおよび Web アプリを作成して、データを共有および収集し、ビジネスプロセスを合理化できます。**SharePoint** にコンテンツを保存するアプリを **Power Apps** を使用して 作成することは、基本的なイントラネットサイトをすばやく構築するための一般的な方法ですが、**Power Pages** は、ビジネス情報へのより安全なアクセスを必要とする外部オーディエンスに焦点を当てた Web サイトに最適です。
- **Power Automate **は、自動化されたワークフローの作成を簡素化します。**Power Pages** では、プラグイン、ワークフロー、自動化されたクラウドフローに、またはビジネスロジックを拡張し、**Dataverse** に出入りするデータやイベントとやり取りするために **Power Automate** を使用します。
- **Power BI** を使用すると、誰でもビジネスデータから視覚的に没入型のインタラクティブな洞察にアクセスできます。**Power Pages** を使用すると、**Power BI** と統合して、レポート、ダッシュボード、タイルなどのコンポーネントにアクセスできます。埋め込み機能を使用して、**Dataverse** の外部にあるデータを表示します。
- **Power Virtual Agents** を使用すると、チームは AI 主導のチャットボットエクスペリエンスを簡単に作成して公開できます。**Power Pages** を使用すると、無数のビジネス目的で、外部向けの Web サイトにチャットボットを追加できます。

# 無料トライアル

![free-trial.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/fb5b276b-4c1e-b15c-9620-eacb461791ed.png)

![welcome-to-power-pages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/4a9abdde-d118-e5ca-796e-4b37fae9c267.png)

![create-site_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/d2a1caae-1dd6-ed7d-9ad5-24cb1be3d538.png)

![create-site_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/f8f920e9-5ae2-1f54-7845-2893756c5ac6.png)

![create-site_003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/93ad7eed-21a7-94b5-759f-739d18099ac4.png)

# テンプレート

[Power Pages Templates | Microsoft Docs](https://docs.microsoft.com/power-pages/templates/)

## 既定の設計テンプレート

![template001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/24021685-8b9b-b8cd-455e-86812f49fa93.png)

この汎用テンプレートを、固有のビジネス要件を満たすようにカスタマイズします。

![desktop-1.1cdc3878.png (969×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-1.1cdc3878.png)

![desktop-2.db56f400.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-2.db56f400.png)

![desktop-3.80ea386d.png (969×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-3.80ea386d.png)

> Power Portals の既定、業種間

この用途の広いテンプレートは、自由にカスタマイズするための基本的な構成要素を提供します。セクションや画像をクリックするだけでカスタマイズできます。

簡単に更新できるページとサブページ構造のシンプルなナビゲーション、そして一般的なページに必要なお問い合わせなどが、すでに用意されています。

### コア要素

- ホーム ページ
- サブページ
- お問い合わせ
- 検索結果

[Default template | Microsoft Docs](https://docs.microsoft.com/power-pages/templates/default-template)

## 金融機関との会議をスケジュールする

![template002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/c165b2c9-840b-f088-7af2-156cd87f7866.png)

すべての種類の会議に対して、簡単な場所の選択と予定のスケジュールを実現します。カスタマイズできるカレンダーや自動アラームなどを含みます。

![desktop-1.562a59cc.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-1.562a59cc.png)

![desktop-2.af04447e.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-2.af04447e.png)

![desktop-3.19177a7c.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-3.19177a7c.png)

> 金融

このスケジュール ベースのテンプレートが含むカスタマイズ可能なデータ、テーブル、メールは、組織とその顧客に次の機能を提供します:

- スケジュール管理。
- 予定の作成、更新、管理。
- 対面または仮想で会議をスケジュールする。
- 休暇やその他の予定を示すスケジュール済みブロック。
- 予定の変更時にメールで通知を受信する。

### コア要素

- カスタマイズできる位置情報ピッカー。
- カスタマイズできるサンプル日付を含む複数ステップ フォーム。
- カスタム ビルドの日時ピッカー。
- カスタム ビルドしたカレンダー。
- ブランドに合わせて構成できるテーマとフォント。
- Power Automate に対応したメール通知。

[詳細情報](https://go.microsoft.com/fwlink/?linkid=2193983)

[Book a Meeting template | Microsoft Docs](https://docs.microsoft.com/ja-jp/power-pages/templates/book-a-meeting)

## 新入社員オンボード チェックリスト

![template003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/96c9a0e0-71f7-66d3-4c7f-7cf1459795d5.png)

よく必要になる活動と能力の一覧を作成し、カスタマイズ可能な状態で配布して、新入社員の進捗を追跡することで、オンボードを簡単に行うことができます。

![desktop-1.93343b03.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-1.93343b03.png)

![desktop-2.b464ab7c.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-2.b464ab7c.png)

![desktop-3.1cb7020c.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-3.1cb7020c.png)

> 業種間

カスタマイズ可能なコンテンツ、データ、画像、およびセクションが付属するこの進行状況追跡テンプレートを使用して、ユーザーは以下のことができます:

- タスクの割り当て、追跡、割り当てられたタスクのフォローアップができます。
- リスト内のユーザーの追加と削除ができます。
- 割り当てられたタスクの完了時の進行状況を追跡できます。
- タスクの割り当て、フォーローアップ、完了時に電子メール通知を受信できます。

### コア要素

- カスタマイズ可能なサンプル データ、テーブル、リスト。
- カスタム ビルドの複数ドキュメントのアップロード。
- カスタム ビルドのフィルターとビュー。
- カスタム ビルドの進行状況の追跡とインジケーター。
- ブランド化に合わせて構成できるテーマとフォント。
- Power Automate に対応したメール通知。

## 許可の申請ポータルを作成中

![template004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/fbfa241e-1ed8-9e11-e857-35d688eae347.png)

許可のオンライン送信、およびそれらの承認状態の追跡を可能にします。

![desktop-1.3e3a0cca.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-1.3e3a0cca.png)

![desktop-2.7ed5e763.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-2.7ed5e763.png)

![desktop-3.50bc62c0.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-3.50bc62c0.png)

> 政府機関

完全にカスタマイズ可能なサンプル データ、コンテンツ、画像が付属するこのアプリケーション送信テンプレートを使用して、ユーザーは以下のことができます:

- 使用可能な選択肢からアプリケーションを参照、適用、および送信できます。
- アプリケーションの状態を追跡し、必要に応じて詳細情報でフォローアップできます。
- 送信されたアプリケーションを表示、レビュー、更新できます。
- 状態が変化すると電子メール通知を受信できます。

### コア要素

- カスタマイズ可能なサンプル データ、テーブル、フォーム。
- カスタム ビルドの複数ドキュメントのアップロード。
- カスタム ビルドのカード ビュー。
- リストおよびフォーム内のカスタム ビルドのアクション。
- ブランド化に合わせて構成できるテーマとフォント。
- Power Automate に対応したメール通知。

## 放課後プログラムへの登録

![template005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111975/9e225bbb-b637-d118-fee3-61ce7b47e46d.png)

保護者による放課後の活動の確認、利用できるセッションの視覚化、プログラムの定員の確認、オンラインでの登録を実現します。

![desktop-1.b6614fdd.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-1.b6614fdd.png)

![desktop-2.dba1f90d.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-2.dba1f90d.png)

![desktop-3.2bb16187.png (968×608) (powerapps.com)](https://content.powerapps.com/resource/makerx/static/media/desktop-3.2bb16187.png)

> 教育

この登録ベースのテンプレートが含むカスタマイズ可能なデータ、テーブル、メールは、組織とユーザーに次の機能を提供します:

- プログラム登録の作成、追跡、管理。
- 幅広いフィルターを使用した検索。
- 参加者とコースの情報に対する追加と編集。
- 選択肢として 1 回限りのイベントや定期的なイベントを作成する。
- コースや参加者の変更時にメールで通知を送信する。

### コア要素

- カスタマイズできるサンプル データ、テーブル、リスト。
- カスタム ビルドの日時ピッカー。
- カスタム ビルドのコース フィルター。
- ブランドに合わせて構成できるテーマとフォント。
- Power Automate に対応したメール通知。

[After School template | Microsoft Docs](https://docs.microsoft.com/power-pages/templates/after-school)

# まとめ

- Visual Studio Code を使ってソースの加工ができる
  - Microsoft Power Platform CLI を使用して機能を拡張できる。
  - CSS のハックはできない。
  - React などの UI を埋め込むことができる。
- サーバー側のロジックは Dataverse トリガーの Power Automate で行う。
- データ解析は Power BI で行う。

# 参考サイト

- [Microsoft Power Pages][power-pages]
- [Microsoft Power Pages (preview) documentation][power-pages-doc]
- [Sign up for a free trial - Power Pages][power-pages-trial]
- [Announcing Microsoft Power Pages: Build secure, low-code websites][announcing-power-pages]
- [Power Apps ポータル ドキュメント][power-apps-portals-doc]
- [Power Pages と Power Apps ポータルの違い][difference-portals]
- [Microsoft Dataverse とは][dataverse]
- [MS Build 2022 で発表のあったPower Platformに関するアップデート情報のまとめ - Qiita](https://qiita.com/kumukai/items/9526eb3f3dbc40ddcff8)
- [Building a website with Power Pages (microsoft.com)](https://techcommunity.microsoft.com/t5/educator-developer-blog/building-a-website-with-power-pages-part-1/ba-p/3560668)

[power-pages]: <https://powerpages.microsoft.com/>
[power-pages-doc]: <https://docs.microsoft.com/ja-jp/power-pages/>
[power-pages-trial]: <https://docs.microsoft.com/power-pages/getting-started/trial-signup>
[announcing-power-pages]: <https://powerpages.microsoft.com/blog/announcing-microsoft-power-pages-build-secure-low-code-websites/>
[power-apps-portals-doc]: <https://docs.microsoft.com/power-apps/maker/portals/>
[difference-portals]: <https://docs.microsoft.com/power-pages/difference-portals>
[dataverse]: <https://docs.microsoft.com/power-apps/maker/data-platform/data-platform-intro>