コードを書いてアプリを作りたいんだ！画面で操作なんかしたくない！Power AppsもGitHubやAzure DevOpsで管理したい！という方は必見です。2021年1月14日に新しくリリースした新機能ではYAMLでキャンバスアプリのソースコード管理が可能となりました。

機能の目的

この機能により、キャンバスアプリのソースコードをGitHubやAzure DevOpsでより効果的に管理することができ、コードで変更内容も把握することができます。従来のように.msappのバイナリーファイルではなく、関数の修正でプルリクエストを投げることもできます。

以下は、GitHubで保管された画面の例です。

事前準備

  1. .NET Core 3.1.x (x64) をインストールします（v.3.1.11 はこちら：https://dotnet.microsoft.com/download/dotnet-core/thank-you/sdk-3.1.405-windows-x64-installer）
  2. 右記のレポジトリをコピーします：https://github.com/microsoft/PowerApps-Language-Tooling
  3. ルートディレクトリにあるbuild.cmdを実行します。
  4. PASopa.exe と必要なファイルはbin\Debug\PASopa に見つかります

Power Apps アプリのソースコードを Visual Studio Code で開く方法

  1. Power Apps のキャンバスアプリをPower Apps Studio で開き、ファイルをクリックします
  2. 名前を付けて保存から、このコンピュータを選択します
  3. ダウンロードをクリックします。＜ファイル名＞.msappがダウンロードされます
  4. コマンドプロンプトを開き、準備ステップで用意したPASopa.exeを用いてダウンロードした.msappファイルを展開します
    <pasopa.exeのパス>\pasopa.exe – unpack <.msappのパス>
    実行例）

    実行すると 「<アプリ名>_src」というフォルダが、.msappファイルと同じ場所に作成されます
  5. Visual Studio Code を開き、生成されたフォルダを指定します
  6. これでソースコードが閲覧できるようになりました

Visual Studio Codeで編集した内容をアプリ化したい場合

  1. 以下のコマンドを実行します
    <pasopa.exeのパス>\pasopa.exe – pack <アプリ名_srcフォルダへのパス>

制約事項

現在この機能は実験的レベルです。これをすでに公開し始めた理由としては問題を見つけたり、フィードバックを得るためです。.msappファイルからソースコードへ変換し、元の.msappファイルを削除してしまうようなことは現時点では行わないようにしてください。現在開発チームではそのレベルにできるように進めていますが、まだそのレベルには至ってません。この新機能はウェブブラウザのエディター画面を将来的になくすために作っているものではなく、併用して利用されることを想定しています。

すでに既知の課題として以下があります：

  • 既に存在する名前のコントロールを設定しないでください。例えばButton1が存在する場合、同じ名前にならないように避けてください。
  • ブラウザ画面では用意されていないようなオプションがソースコードのほうでは存在するかもしれません。例えばZIndexというプロパティがありますが、これは値のみを受けつけており、関数を用いて動的に利用することはできません。