今回は、先日の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から下記コマンドを発行してください。

Windows Power Shellで環境へアクセス

Dataverse環境へアクセスするために、Power Shellから下記コマンドで認証を作成します。
コマンドライン入力後に、認証画面が表示されますので、管理者権限を持つアカウントでログインしてください。

自社の有料で作成した環境にPower Pagesを作成したので、この形でアクセスができました。

接続できたら試しに環境に展開されたサイトのリストをコマンドで確認してください。

私の環境では、Power Pagesで展開されたサイトと、Power Apps Portalで展開された環境が確認することができました。

コマンドでソースコードをダウンロード

ローカルにPower Pagesのデータをダウンロードします。
Windwos Power Shellで下記コマンドを発行しますすが、保存場所と先ほどのサイト一覧結果に表示された「WebSiteId」をデータダウンロードするのに指定します。

ダウンロードが完了したら、指定したディレクトリを確認すると、 こんな感じでファイルがダウンロードされています。

Visual Studio Codeでファイルを編集

通常のソースコード編集は、そのままファイルを開くことで行えます。
Vusual Studio CodeのCLIから前述の操作したい方は、機能拡張から「Power Platform Tools」をインストールしてみてください。 早速HTMLを編集してみます。 今回は超簡単にH1タグの文字を「お問い合わせ２」に変更しました。

内容を保存したら、Windows Power Shellから下記コマンドを発行しすると変更内容が環境へアップロードされます。

最後に変更内容を実際のPower Pagesのサイトで確認してみます。

ちゃんと変更がサイトに反映できました。

これでローカルPCで編集する環境が構築できました。
次回は、実際にソースコードを色々変更してみたいと思います。