Power Pages のシングルページ アプリケーション (SPA) の作成を試してみた
はじめに
Power Pages は Power Platform 製品群の 1 つで、外部サイトをローコードで公開できます。ただし、カスタマイズには CSS や JavaScript の知識が必要であり、フレームワークが jQuery と Bootstrap であるため、最新のフロントエンドの技術が使用できません。これは Power Pages を使う上で大きな課題でしたが、最近になってシングルページ アプリケーション (SPA) がサポートされました。開発者は独自に開発した React などのアプリを Power Pages にデプロイできるため、開発体験の向上が期待できます。
手順は次のドキュメントで公開されていますが、そのままでは動作しないため、本記事で補足します。
事前準備
Power Platform CLI をインストールします。
実行手順
ブロックされた添付ファイルの許可
既定では JavaScript ファイルのアップロードが許可されていないため、除外設定を行います。Power Platform 管理センターで Power Pages をホストする環境の 設定 - 製品 - プライバシーとセキュリティ を表示します。ブロックされた添付ファイル から js を削除します。
この設定をしないまま手順を進めると次のエラーが表示されます。
Error: Unable to upload webfile name 'index.js' with record Id be40dfba-... as '.js' type attachments are currently blocked on this environment.
ソース コードのビルドとデプロイ
今回は Microsoft から提供されているサンプル コードから fluent-ui-sample プロジェクトを使用します。このサンプルには powerpages.config.json ファイルが含まれており、デプロイを簡単に実施できます。
プロジェクトのフォルダーでソース コードをビルドします。
npm install
npm run build
ビルドされた各種ファイルをデプロイします。
pac auth create -u {{environment-url}}
pac upload-code-site --rootPath .
コマンドが正常に実行されると Power Pages の 非アクティブなサイト にデプロイしたサイトが表示されます。再アクティブ化 をクリックします。
サイトを再アクティブ化します。
再アクティブ化したサイトのプレビューを表示すると、ページが表示されるはずですが、空白のままになる場合があります。開発者ツールで確認すると、/assets/index.js および /assets/index.css が読み込まれていません。
サイトの言語の変更
原因はサイトの言語が英語になっているためです。.powerpages-site フォルダー内のファイルを変更して言語を英語から日本語に変更します。
次のファイル名を変更します。
| フォルダー | 変更前のファイル名 | 変更後のファイル名 |
|---|---|---|
| .powerpages-site/.portalconfig | English.portallanguage.yml | Japanese---Japan.portallanguage.yml |
| .powerpages-site/sitelanguage | English.websitelanguage.yml | Japanese---Japan.websitelanguage.yml |
また、それぞれのファイルの言語設定を日本語に変更します。
.powerpages-site/website.yml
defaultlanguage: 4e196403-2bb5-4912-ad63-a3499b5eb203
footerwebtemplateid: 3236dba5-906d-400a-b7d8-ec6eb0ddd2c0
headerwebtemplateid: 57d8d1da-0a90-4c7e-a2da-956e046a6211
id: 02cc7b54-0096-4af1-a038-9f472038fdc4
name: Bank Loan Application
- website_language: 1033
+ website_language: 1041
.powerpages-site/.portalconfig/Japanese---Japan.portallanguage.yml
- displayname: English
+ displayname: 日本語
id: 742bce96-b916-4b76-80d2-fb66efb6f205
- languagecode: en-US
- lcid: 1033
- name: English
- systemlanguage: 1033
+ languagecode: ja-JP
+ lcid: 1041
+ name: Japanese - Japan
+ systemlanguage: 1041
.powerpages-site/sitelanguage/Japanese---Japan.websitelanguage.yml
id: 4e196403-2bb5-4912-ad63-a3499b5eb203
- name: English
+ name: Japanese - Japan
portallanguageid: 742bce96-b916-4b76-80d2-fb66efb6f205
publishingstate: 39561597-2a5e-4076-b73d-f46aecdee96a
- systemlanguage: 1033
+ systemlanguage: 1041
変更したら、再度デプロイします。
pac upload-code-site --rootPath .
実行結果
サイトが正しく表示されるようになりました。
おわりに
シングルページ アプリケーションではデザインのカスタマイズが簡単になりますが、リストやフォームなどの標準コンポーネントは使用できなくなる点には注意が必要です。また、Azure Static Web Apps などでホストするのと変わらないように見えますが、マルチプレキシングを回避するには Power Pages にホストする必要があります。シングルページ アプリケーションはローコードではありませんが、GitHub Copilot によるペア プログラミングなど AI の支援を使って作ることが想定されています。特長を理解して使うことが重要です。
Discussion