今回は、先日のMicrosoft Build 2022でプレビュー版が発表された、Power PagesをVisual Studio Codeから編集するのを、早速試してみました。
まずは、Microsoft Power Platform CLIをインストール
Microsoft Power Platform CLIとは、環境へコマンドラインでアクセスして、様々なコントロールをすることができるツールです。
今回はVisual Studio CodeなどPower Pagesのソースをダウンロードしたりできるようにする為にインストールします。
色々インストール方法はありますが、僕は単体インストーラーで試しました。
※ダウンロード先
https://aka.ms/PowerAppsCLI
特に変更する部分はなくそのままインストールしました。
最新版かどうか、確認するためにWindows Power Shellから下記コマンドを発行してください。
pac install latest
Windows Power Shellで環境へアクセス
Dataverse環境へアクセスするために、Power Shellから下記コマンドで認証を作成します。
コマンドライン入力後に、認証画面が表示されますので、管理者権限を持つアカウントでログインしてください。
pac auth create -u [環境のURL]
自社の有料で作成した環境にPower Pagesを作成したので、この形でアクセスができました。
接続できたら試しに環境に展開されたサイトのリストをコマンドで確認してください。
pac paportal list
私の環境では、Power Pagesで展開されたサイトと、Power Apps Portalで展開された環境が確認することができました。
環境のURLはPower Platform管理センターからPower Pagesを展開した環境を開くと、表示されています。
コマンドでソースコードをダウンロード
ローカルにPower Pagesのデータをダウンロードします。
Windwos Power Shellで下記コマンドを発行しますすが、保存場所と先ほどのサイト一覧結果に表示された「WebSiteId」をデータダウンロードするのに指定します。
pac paportal download --path [保存場所までのパス] -id [WebSiteId]
ダウンロードが完了したら、指定したディレクトリを確認すると、
こんな感じでファイルがダウンロードされています。
Visual Studio Codeでファイルを編集
通常のソースコード編集は、そのままファイルを開くことで行えます。
Vusual Studio CodeのCLIから前述の操作したい方は、機能拡張から「Power Platform Tools」をインストールしてみてください。
早速HTMLを編集してみます。
今回は超簡単にH1タグの文字を「お問い合わせ２」に変更しました。
内容を保存したら、Windows Power Shellから下記コマンドを発行しすると変更内容が環境へアップロードされます。
pac paportal upload --path [保存場所までのパス]
最後に変更内容を実際のPower Pagesのサイトで確認してみます。
ちゃんと変更がサイトに反映できました。
これでローカルPCで編集する環境が構築できました。
次回は、実際にソースコードを色々変更してみたいと思います。
Power Pagesについて詳しく知りたい方はこちらをご覧ください
https://docs.microsoft.com/en-us/power-pages/