きっかけ
ローコードでブラウザ上でポチポチするだけでアプリを作れてしまうPower Appsですが (だいぶ雑な説明ですが)、普段コードを書いてアプリを作っている方からすると「わざわざブラウザーでカチカチやらなきゃいかんのが云々」という煩わしさもあったわけです。
この度、Power Appsのソースコードをいじれるようになるというアナウンスがあったので、VS CodeでPower Appsが作れるか！ということにチャレンジしてみました。
↓こちらがアナウンスの内容
どこをいじるか
ファイル構成とかはアナウンスに書いてあるので割愛しますが、実際どこをいじればいいのかは空のアプリとコントロール1つ追加したアプリで差分を取った方が手っ取り早いです。
ボタンを一個おいて、変数に文字列を設定するだけのアプリを作り、ソースコードを除いてみます。
下図は空のアプリとボタンを1つ置いたアプリの差分ファイルです。
...「ボタン一個でこれか」
各ファイルで何をしているのか見てみると
- ControlTemplates.json : アプリで利用しているコントロールに関する基本情報。利用しているコントロール種類のみここに含まれる
- Entropy.json : アプリ上に配置されているすべてのコントロールに対して設定されたUnique IDが書かれている
- Screen1.editorstate.json : Screen1の編集状態。ここが一番謎
- Screen1.pa.yaml : いわゆるPower Appsで画面でいじっている内容。ボタンの設定や数式はここ
- button_2.0.0.xml : ボタンというコントロールの定義xml。これもアプリにあるコントロール種類のぶんだけ必要
ということで、これらのファイルをいじればよさそうです！
テキストラベルを追加してみる
上の例したがって、ラベルを1つ追加してみます。すでにボタンで testという変数にHello Worldをセットしているので、このtestの値を表示させてみましょう。
ラベルコントロールの定義などは一から作るものではないので、適当に手元にあったアプリから持ってきます。
この内容を踏まえて、ControlTemplates.jsonを更新します。（主にIdとバージョンに気を付けつつ）
ユニークIDは数字なので、被らないように設定。EditorStateは謎ですが、これも他のアプリから拾ってきて、Label1 に変更します。
ここまできてやっとPower Apps感が出てきますが、最後にScreen1.pa.yamlを編集します。
当初「なんでyamlなんだ？」と思っていたけど、jsonで書くよりも式が圧倒的に見やすいですね。Power Appsは " ダブルクォーテーションを多用するので、そのたびにエスケープされていたら見にくすぎるし。
ということで、ここまでの内容を保存して、再度msappにpackし直します。
成功！！
無事ボタンだけのアプリにラベルが追加され、しかも変数が設定された状態になりました。
おわり
無事VS CodeだけでPower Appsのアプリを作成 (というか改修) できました。
ただやりたいことに対して労力が見合わない気はしますね。
あくまでもチームでPower Appsのアプリを管理・作成する上でのバージョン管理・差分チェックの方法ととらえた方がよさそうです。