PowerApps│YAMLとコード編集で爆速開発する方法

こんにちは、あんこ先生です。

PowerAppsでアプリを作っていると、おなじような設定を繰り返し行う作業が発生しますよね。

たとえばフォントサイズや背景色、コントロール名などです。

プロパティペインでひとつひとつ設定していくのは正直めんどくさい。

もっと効率よく、サクサクとコントロールを設定したい。

そんなときに便利なのがYAMLを使ったコード編集法です。

これを使えばコントロールのプロパティをテキストとして一括編集できるので、コピペや置換が可能になります。

でもYAMLって何?どうやって使うの?

そんな疑問を解消するため、今回はYAMLとコード編集法を紹介しますね。

Contents

1 YAMLとは
2 コードビュー機能
3 コードをメモ帳で編集してアプリに返す
4 おおまかな流れ
5 コントロールをメモ帳にコピペする
6 メモ帳でコードを編集する
7 編集したコードをアプリに戻す
8 コード編集の実践テクニック
9 明日のための予備知識
10 YAMLとコード編集のまとめ

YAMLとは

YAML（ヤムル / ヤメル）は「YAML Ain’t Markup Language」の略で、構造化データを人間が読みやすい形で書くためのルールです。

特徴として、インデント（スペース）で階層を表し、記号が少なく直感的に読めます。

Docker、Kubernetes、CI/CD などの設定ファイルとしてよく使われています。

見たようなものにJSONやXMLがありますが、人視点だと断然読みやすいです。

このYAMLがPowerAppsの開発となんの関係があるの？

実はPowerAppsのコントロールたちはすべてYAMLで表現されているのです。

その証拠にボタンコントロールをコピーしてメモ帳に貼り付けてみましょう。

謎のテキスト群が現れますよね。これがYAMLです。

コードビュー機能

いつのまにかPowerAppsにコードビューが搭載されていました。

このコードビューは、アプリ全体の構造をYAML形式のテキストで表示する機能です。

ひらたく言うと、アプリの設計図を文字で見られる機能ですね。

画面やコントロールの階層構造が把握しやすく、アプリ全体を俯瞰するのに便利です。

画面左側の [ツリービュー] の横にある […] をクリックすると、メニューが表示されます。

その一番下にある [コードを表示] を選択するだけです。

すると画面全体がテキストエディタのような表示に切り替わります。

アプリの構造が階層的に表示されているのがわかりますね。

とはいえ、ここでは直接の編集は行えないため、確認程度にしか利用できません。

左下の [コードをコピーする] を選択すればテキスト部分をすべてコピーできますよ。

これをメモ帳などに取りためておけばコントロールのテンプレとして活用できます。

わざわざ別アプリを編集モードで開いてコピペしなくてもよくなります。

コードをメモ帳で編集してアプリに返す

おおまかな流れ

STEP

コントロールをメモ帳にコピペする

STEP

メモ帳でコードを編集する

STEP

編集したコードをアプリに戻す

使用するデータソース

今回は特定のデータソースは使用しません。

コントロールのプロパティ設定に焦点を当てますので、どんなアプリでも応用できますよ。

コントロールをメモ帳にコピペする

適当にボタンコントロールを設置しCTRL+Cでコピーして、メモ帳に貼り付けてみましょう。

サンプルはちょっと加工しているモダンのボタンコントロールです。

Control: Button@0.0.45となっており、バージョンが1未満なので正式版じゃないのかな？

たくさんプロパティを持ってるはずですが、行数が少ないですよね。

これはPowerAppsStudioがコントロールごとの初期値を持っているようで、省略したプロパティはその値をあてがってくれるので安心してください。

メモ帳でコードを編集する

ここからはコードの編集です。

YAMLの構成は次のようになっています。

- コントロール名:
    Control: コントロールの種類@バージョン？
    Properties:
      プロパティ名: コード
      X: =復元時のX座標
      Y: =復元時のY座標

試しにコントロール名、背景色、テキストを変更してみました。

インデント(字下げ)で構成を認識しているため、この形は崩さないでくださいね。

先述した通り省略したプロパティは初期値が入るため変更したい場合を除き記載する必要はありません。

ただ、記述内容が完全に誤っていたり必須項目が漏れていた場合は復元時にエラーとなりますので注意しましょう。

編集したコードをアプリに戻す

アプリに戻す際は、テキストをすべてコピーして貼り付けるだけです。

座標は変えていないので元コントロールと同じ場所にできたはずです。

横幅を広げてないのでテキストが改行されちゃいました。

変更箇所もちゃんと反映してますね。

なお、同名のコントロールは存在できないため、コントロール名を変えるか元コントロールを削除してから貼り付けましょう。

説明のためひとつのコントロールで行いましたが、複数でもスクリーン単位でも同様に行えますよ。

コード編集の実践テクニック

コード編集の真価は、テキスト編集ならではのテクニックが使えることです。

テクニック1: プロパティの一括コピペ

複数のボタンに同じスタイルを適用したい場合、一つのボタンのFillやColorプロパティをコピーして、他のボタンのコードにペーストするだけです。

マウスで何度も設定する手間が省けますが、コントロールによっては存在しないプロパティもあるので注意してくださいね。

テクニック2: 検索置換で一括変更

メモ帳でCtrl+Hを押すと、検索置換ダイアログが開きます。

たとえば、すべてのボタンコントロール名のButtonをbtnに変更したい場合、ここで一括置換できちゃいます。

ButtonCanvas1やButtonCanvas2がbtnCanvas1やbtnCanvas2になります。

通常ならひとつひとつ修正するところが、数秒で完了です。

テクニック3: 複数行の式を読みやすく整形

OnSelectやItemsプロパティに長い式を書いている場合、コード編集では複数行に分けて記述できます。

通常の数式バーは複数行にまたがると妙に読みづらいですが、メモ帳なら確認しやすいですね。

こんな感じで見やすく表示されます。

- Gallery1:
    Control: Gallery@2.15.0
    Variant: BrowseLayout_Vertical_TwoTextOneImageVariant_ver5.0
    Properties:
      BorderColor: =RGBA(0, 18, 107, 1)
      Items: |-
        =Filter(
            備品リスト,取得日>Today()
        )
      X: =500
      Y: =100

テクニック4: コメントの活用

YAMLは # を使って数式以外の箇所でもコメントを残せます。

なんのコントロールなのかメモしておくとわかりやすいですね。

- Gallery1:
    Control: Gallery@2.15.0
    Variant: BrowseLayout_Vertical_TwoTextOneImageVariant_ver5.0
    Properties:
      BorderColor: =RGBA(0, 18, 107, 1)
      # コメント
      Items: |-
        =Filter(
            備品リスト,取得日>Today()
        )
      X: =500
      Y: =100

ただし、# のコメントはPowerAppsStudioに貼り付けた時点で削除されます。

あくまで備忘録としての使い方になります。