<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="2" class="code-line">Power Pages は Power Platform 製品群の 1 つで、外部サイトをローコードで公開できます。ただし、カスタマイズには CSS や JavaScript の知識が必要であり、フレームワークが jQuery と Bootstrap であるため、最新のフロント エンドの技術が使用できません。これは Power Pages を使う上で大きな課題でしたが、最近になってシングルページ アプリケーション (SPA) がサポートされました。開発者は独自に開発した React などのアプリを Power Pages に展開できるため、開発体験の向上が期待できます。</p>
<p data-line="4" class="code-line">手順は次のドキュメントで公開されていますが、そのままでは動作しないため、本記事で補足します。</p>
<p data-line="6" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__67df333257a69" src="https://embed.zenn.studio/card#zenn-embedded__67df333257a69" data-content="https%3A%2F%2Flearn.microsoft.com%2Fja-jp%2Fpower-pages%2Fconfigure%2Fcreate-code-sites%3FWT.mc_id%3DM365-MVP-5002941" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://learn.microsoft.com/ja-jp/power-pages/configure/create-code-sites?WT.mc_id=M365-MVP-5002941" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://learn.microsoft.com/ja-jp/power-pages/configure/create-code-sites?WT.mc_id=M365-MVP-5002941</a></p>
<h1 id="%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" data-line="8" class="code-line">
<a class="header-anchor-link" href="#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" aria-hidden="true"></a> 事前準備</h1>
<p data-line="10" class="code-line">Power Platform CLI をインストールします。</p>
<p data-line="12" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__42925fcc5146" src="https://embed.zenn.studio/card#zenn-embedded__42925fcc5146" data-content="https%3A%2F%2Flearn.microsoft.com%2Fja-jp%2Fpower-platform%2Fdeveloper%2Fhowto%2Finstall-cli-net-tool%3FWT.mc_id%3DM365-MVP-5002941" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://learn.microsoft.com/ja-jp/power-platform/developer/howto/install-cli-net-tool?WT.mc_id=M365-MVP-5002941" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://learn.microsoft.com/ja-jp/power-platform/developer/howto/install-cli-net-tool?WT.mc_id=M365-MVP-5002941</a></p>
<h1 id="%E5%AE%9F%E8%A1%8C%E6%89%8B%E9%A0%86" data-line="14" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A1%8C%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 実行手順</h1>
<h2 id="%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%95%E3%82%8C%E3%81%9F%E6%B7%BB%E4%BB%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E8%A8%B1%E5%8F%AF" data-line="16" class="code-line">
<a class="header-anchor-link" href="#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%95%E3%82%8C%E3%81%9F%E6%B7%BB%E4%BB%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E8%A8%B1%E5%8F%AF" aria-hidden="true"></a> ブロックされた添付ファイルの許可</h2>
<p data-line="18" class="code-line">既定では JavaScript ファイルのアップロードが許可されていないため、除外設定を行います。Power Platform 管理センターで Power Pages をホストする環境の <strong>設定</strong> - <strong>製品</strong> - <strong>プライバシーとセキュリティ</strong> を表示します。<strong>ブロックされた添付ファイル</strong> から <code>js</code> を削除します。</p>
<p data-line="20" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--9RlF4BTG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/42ed8ce1c2d5f757b8bdfc9b.png%3Fsha%3Dc43f9f000f8f102ec654ef9065b09285fa5afd11" alt="" class="md-img" loading="lazy"></p>
<p data-line="22" class="code-line">この設定をしないまま手順を進めると次のエラーが表示されます。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="24">Error: Unable to upload webfile name 'index.js' with record Id be40dfba-... as '.js' type attachments are currently blocked on this environment.
</code></pre></div><h2 id="%E3%82%BD%E3%83%BC%E3%82%B9-%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E3%83%93%E3%83%AB%E3%83%89%E3%81%A8%E9%85%8D%E7%BD%AE" data-line="28" class="code-line">
<a class="header-anchor-link" href="#%E3%82%BD%E3%83%BC%E3%82%B9-%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E3%83%93%E3%83%AB%E3%83%89%E3%81%A8%E9%85%8D%E7%BD%AE" aria-hidden="true"></a> ソース コードのビルドと配置</h2>
<p data-line="30" class="code-line">今回は Microsoft から提供されているサンプル コードから fluent-ui-sample プロジェクトを使用します。このサンプルには powerpages.config.json ファイルが含まれており、デプロイを簡単に実施できます。</p>
<p data-line="32" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__dbd557fd30536" src="https://embed.zenn.studio/card#zenn-embedded__dbd557fd30536" data-content="https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fpower-pages-samples%2Ftree%2F5faaf877689bcd9b4acb8fbb983520bcbaff3437%2Fsamples%2Fbring-your-own-code%2Freact%2Ffluent-ui-sample" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/microsoft/power-pages-samples/tree/5faaf877689bcd9b4acb8fbb983520bcbaff3437/samples/bring-your-own-code/react/fluent-ui-sample" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/microsoft/power-pages-samples/tree/5faaf877689bcd9b4acb8fbb983520bcbaff3437/samples/bring-your-own-code/react/fluent-ui-sample</a></p>
<p data-line="34" class="code-line">プロジェクトのフォルダーでソース コードをビルドします。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="36">npm install
npm run build
</code></pre></div><p data-line="41" class="code-line">ビルドされた各種ファイルをデプロイします。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="43">pac auth create -u {{environment-url}}
pac upload-code-site --rootPath .
</code></pre></div><p data-line="48" class="code-line">コマンドが正常に実行されると Power Pages の <strong>非アクティブなサイト</strong> にデプロイしたサイトが表示されます。<strong>再アクティブ化</strong> をクリックします。</p>
<p data-line="50" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--S7o6DZqK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/7f1138ea5c5baab6be1ae458.png%3Fsha%3D103d651a06b3f87292d53639427bac34be46b7ab" alt="" class="md-img" loading="lazy"></p>
<p data-line="52" class="code-line">サイトを再アクティブ化します。</p>
<p data-line="54" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--22O28i4y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/58ca7539cdfe6d3f100b119a.png%3Fsha%3D5496cb92e9a7f7f2f0ce2214f9beb0150bdeb189" alt="" class="md-img" loading="lazy"></p>
<p data-line="56" class="code-line">再アクティブ化したサイトのプレビューを表示すると、ページが表示されるはずですが、空白のままになる場合があります。開発者ツールで確認すると、/assets/index.js および /assets/index.css が読み込まれていません。</p>
<p data-line="58" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--RBdB_pIC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/0f2e57818c7415cd23f5a1f8.png%3Fsha%3D0f188dc3653d97ae86910d6e8a51127cfb9bf6f2" alt="" class="md-img" loading="lazy"></p>
<h2 id="%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E8%A8%80%E8%AA%9E%E3%81%AE%E5%A4%89%E6%9B%B4" data-line="60" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E8%A8%80%E8%AA%9E%E3%81%AE%E5%A4%89%E6%9B%B4" aria-hidden="true"></a> サイトの言語の変更</h2>
<p data-line="62" class="code-line">原因はサイトの言語が英語になっているためです。.powerpages-site フォルダー内のファイルを変更して言語を英語から日本語に変更します。</p>
<p data-line="64" class="code-line">次のファイル名を変更します。</p>
<table data-line="66" class="code-line">
<thead data-line="66" class="code-line">
<tr data-line="66" class="code-line">
<th>フォルダー</th>
<th>変更前のファイル名</th>
<th>変更後のファイル名</th>
</tr>
</thead>
<tbody data-line="68" class="code-line">
<tr data-line="68" class="code-line">
<td>.powerpages-site/.portalconfig</td>
<td>English.portallanguage.yml</td>
<td>Japanese---Japan.portallanguage.yml</td>
</tr>
<tr data-line="69" class="code-line">
<td>.powerpages-site/sitelanguage</td>
<td>English.websitelanguage.yml</td>
<td>Japanese---Japan.websitelanguage.yml</td>
</tr>
</tbody>
</table>
<p data-line="71" class="code-line">また、それぞれのファイルの言語設定を日本語に変更します。</p>
<h3 id=".powerpages-site%2Fwebsite.yml" data-line="73" class="code-line">
<a class="header-anchor-link" href="#.powerpages-site%2Fwebsite.yml" aria-hidden="true"></a> .powerpages-site/website.yml</h3>
<div class="code-block-container"><pre class="diff-highlight "><code class="diff-highlight  code-line" data-line="75"><span class="token unchanged"><span class="token prefix unchanged"> </span> defaultlanguage: 4e196403-2bb5-4912-ad63-a3499b5eb203
<span class="token prefix unchanged"> </span> footerwebtemplateid: 3236dba5-906d-400a-b7d8-ec6eb0ddd2c0
<span class="token prefix unchanged"> </span> headerwebtemplateid: 57d8d1da-0a90-4c7e-a2da-956e046a6211
<span class="token prefix unchanged"> </span> id: 02cc7b54-0096-4af1-a038-9f472038fdc4
<span class="token prefix unchanged"> </span> name: Bank Loan Application
</span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span> website_language: 1033
</span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span> website_language: 1041
</span></code></pre></div><h3 id=".powerpages-site%2F.portalconfig%2Fjapanese---japan.portallanguage.yml" data-line="85" class="code-line">
<a class="header-anchor-link" href="#.powerpages-site%2F.portalconfig%2Fjapanese---japan.portallanguage.yml" aria-hidden="true"></a> .powerpages-site/.portalconfig/Japanese---Japan.portallanguage.yml</h3>
<div class="code-block-container"><pre class="diff-highlight "><code class="diff-highlight  code-line" data-line="87"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span> displayname: English
</span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span> displayname: 日本語
</span><span class="token unchanged"><span class="token prefix unchanged"> </span> id: 742bce96-b916-4b76-80d2-fb66efb6f205
</span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span> languagecode: en-US
<span class="token prefix deleted">-</span> lcid: 1033
<span class="token prefix deleted">-</span> name: English
<span class="token prefix deleted">-</span> systemlanguage: 1033
</span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span> languagecode: ja-JP
<span class="token prefix inserted">+</span> lcid: 1041
<span class="token prefix inserted">+</span> name: Japanese - Japan
<span class="token prefix inserted">+</span> systemlanguage: 1041
</span></code></pre></div><h3 id=".powerpages-site%2Fsitelanguage%2Fjapanese---japan.websitelanguage.yml" data-line="101" class="code-line">
<a class="header-anchor-link" href="#.powerpages-site%2Fsitelanguage%2Fjapanese---japan.websitelanguage.yml" aria-hidden="true"></a> .powerpages-site/sitelanguage/Japanese---Japan.websitelanguage.yml</h3>
<div class="code-block-container"><pre class="diff-highlight "><code class="diff-highlight  code-line" data-line="103"><span class="token unchanged"><span class="token prefix unchanged"> </span> id: 4e196403-2bb5-4912-ad63-a3499b5eb203
</span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span> name: English
</span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span> name: Japanese - Japan
</span><span class="token unchanged"><span class="token prefix unchanged"> </span> portallanguageid: 742bce96-b916-4b76-80d2-fb66efb6f205
<span class="token prefix unchanged"> </span> publishingstate: 39561597-2a5e-4076-b73d-f46aecdee96a
</span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span> systemlanguage: 1033
</span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span> systemlanguage: 1041
</span></code></pre></div><p data-line="113" class="code-line">変更したら、再度デプロイします。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="115">pac upload-code-site --rootPath .
</code></pre></div><h1 id="%E5%AE%9F%E8%A1%8C%E7%B5%90%E6%9E%9C" data-line="119" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A1%8C%E7%B5%90%E6%9E%9C" aria-hidden="true"></a> 実行結果</h1>
<p data-line="121" class="code-line">サイトが正しく表示されるようになりました。</p>
<p data-line="123" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--Ve-tER_z--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8a2ce820440d0e84bf9753bf.png%3Fsha%3D54bbefd2cd6d43775f90585783cd3868d5cf106c" alt="" class="md-img" loading="lazy"></p>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="125" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<p data-line="127" class="code-line">シングルページ アプリケーションではデザインのカスタマイズが簡単になりますが、リストやフォームなどの標準コンポーネントは使用できなくなる点には注意が必要です。また、Azure Static Web Apps などでホストするのと変わらないように見えますが、マルチプレキシングを回避するには Power Pages にホストする必要があります。シングルページ アプリケーションはローコードではありませんが、GitHub Copilot によるペア プログラミングなど AI の支援を使って作ることが想定されています。特長を理解して使うことが重要です。</p>


Power Pages のシングルページ アプリケーション (SPA) の作成を試してみた

ブロックされた添付ファイルの許可

.powerpages-site/.portalconfig/Japanese---Japan.portallanguage.yml

.powerpages-site/sitelanguage/Japanese---Japan.websitelanguage.yml

Power Pages のシングルページアプリケーション (SPA) の作成を試してみた

Discussion