Power Apps には、コンテナをそのままYAMLコードとして書き出し、別のアプリや画面に貼り付けて再現できる機能があります。デザインの属人化を防ぎ、チームで同じUIコンポーネントを使い回す上で非常に強力な方法です。
YAMLコピー機能とは
Power Apps Studio では、コンテナやコントロールを右クリックしてコードのコピーを選ぶと、そのコントロールの構造がYAML形式のテキストとして取得できます。YAMLはインデントで階層を表現するテキスト形式で、コンテナのネスト構造がそのまま文字列として出力されます。
この機能が強力なのは、親コンテナをコピーすると子コントロールもすべて含まれる点です。旧来のグループ機能を使っていたころは、子コントロールを1つずつ選択して再配置する必要がありました。コンテナであれば、親を1つコピーするだけで子が全員ついてくる。この違いは実際に試してみると感動するレベルです。
コンテナの設計思想と合わせて理解することで、このYAML共有の価値がより明確になります。Power Apps コンテナ完全ガイドでコンテナ全体の概念を整理しているので、YAMLを活用する前に読んでおくと理解が深まります。
コードのコピーと貼り付けの手順
コードをコピーする方法
- Power Apps Studio でコピーしたいコンテナをツリービューまたはキャンバス上で選択する
- 右クリックメニューを開き、コードのコピーを選択する
- クリップボードにYAML形式のテキストがコピーされる
コードを貼り付ける方法
- 貼り付け先の画面またはコンテナをツリービューで選択する（子として挿入したい親コンテナを選ぶ）
- 右クリックメニューからコードから貼り付けを選択する
- コピーしたYAMLが解析され、コンテナ構造ごと再現される
貼り付け後は、コントロール名が重複しないよう自動的に番号が付与されます。数式内でのコントロール名参照はそのまま引き継がれるため、変数名やコレクション名が一致していれば数式がそのまま動作します。
コンテナ単位での再利用の実例
私が実際にYAMLコピーを使った場面を紹介します。物流管理アプリを作っていたとき、ホーム画面のBIカード（KPIを表示するカードエリア）を別の管理画面にも配置したくなりました。旧来のグループ方式ならラベル・ボタン・レクタングルをひとつずつ選んで配置し直す作業になりますが、コンテナのYAMLコピーを使えばcntBIを右クリック1回でコピーして貼り付けるだけです。
貼り付け後にデータソースの参照先（コレクション名や変数名）を書き換えれば、まったく別のデータを表示するカードとして動き出します。見た目のコードをゼロから書き直す必要がありません。体感で作業時間が半分以下になりました。
このような再利用に向いているのは、カスタムボタンやカード型レイアウトなどのUIパターンです。コンテナで再利用できるカスタムコントロールを作る方法で紹介しているカスタムボタン・プログレスバーの実装も、YAMLでコピーして使い回すと効率が上がります。
チームでYAMLを共有するワークフロー
個人での再利用だけでなく、チームでのUI共有にも使えます。具体的なワークフローを紹介します。
共有の手順
- 共有したいコンテナを「コードのコピー」でYAMLテキストとして取得する
- そのテキストをSlackのコードブロック・Notionのコードブロックなどにそのままペーストしてチームメンバーに共有する
- 受け取り側は、Power Apps Studio を開いて貼り付け先の画面を準備する
- コードから貼り付けでYAMLを読み込み、コンテナが再現される
- 変数名・コレクション名などのアプリ固有の参照先を修正して完成
このワークフローのよい点は、デザインの再現に画像やスクリーンショットが不要なことです。テキスト1つを共有するだけで、レイアウト・サイズ・色・数式まで全部移植されます。Slackのメッセージ1本でUIコンポーネントのやり取りができるのは、慣れると手放せなくなります。
NotionやSharePointでのテンプレート管理
よく使うUIパターンをNotionのデータベースやSharePointリストにYAMLとして保存しておく方法もあります。「ヘッダーコンポーネント」「KPIカード」「検索フォーム」のように用途別にページを作り、YAMLコードを貼り付けておくだけです。
新しいアプリを作り始めるとき、このテンプレート集から必要なコンポーネントをコピーして貼り付ければ、UIのベースが数分で完成します。私はこれをUIライブラリと呼んでいて、社内推進の勉強会でも紹介しています。エンジニアがコンポーネントライブラリを持つように、非エンジニアがYAMLライブラリを持つという発想です。
貼り付け後に確認すべきこと
YAMLの貼り付けはほぼ自動で完了しますが、いくつかのエラーが出やすい箇所があります。
変数・コレクション名の不一致
貼り付け先のアプリに存在しない変数名やコレクション名を参照している数式があると、エラーが発生します。エラーが出た場合は、Power Apps Studio の「数式バーのエラーマーク」か「App Checker」で一覧確認できます。参照先の名前を修正するか、App.OnStart にその変数・コレクションの定義を追加して対応します。
コントロール名の重複
Power Apps はコントロール名が重複すると自動的に番号を付与しますが（例：cntHeader_1）、数式内の参照先は元の名前のままになっています。そのため、貼り付け後にこのコントロール名は何番になったかを確認してから数式を修正する必要があります。
この問題を防ぐには、命名規則を徹底することが有効です。コンテナの命名規則とツリービュー整理術で紹介しているように、プレフィックスと役割を組み合わせた命名をしておくと、貼り付け後の名前重複が起きにくくなります。
テーマカラー・変数の依存
varRadiusBI や varDropShadowBI のように App.OnStart で定義したテーマ変数を参照している場合、貼り付け先のアプリに同じ変数定義がないとエラーになります。貼り付けるコンポーネントが依存している変数のリストを事前にメモしておき、貼り付け先にも同じ定義を追加する手順を踏むとスムーズです。
コンポーネントとの使い分け
Power Apps にはコンポーネントライブラリという仕組みもあります。YAMLコピーとコンポーネントはどちらも再利用を目的としていますが、得意な場面が異なります。
| 比較項目 | YAMLコピー | コンポーネントライブラリ |
|---|---|---|
| 使い回しの範囲 | 同一アプリ内・別アプリ（コピペ） | 複数アプリ（ライブラリから参照） |
| 変更の反映 | コピー後は独立。変更は各コピーに個別適用が必要 | ライブラリ更新で全アプリに反映できる |
| プロパティの外部注入 | 不可。貼り付け後に直接編集 | 可能。カスタムプロパティで値を渡せる |
| 習得コスト | 低い。右クリック2回で完結 | やや高い。コンポーネントの作成・公開手順が必要 |
| 向いている場面 | 同じアプリ内での使い回し・一時的なUI移植 | 組織全体で統一UIを使い回す・デザインシステム構築 |
個人開発や小規模なチームであればYAMLコピーで十分です。組織全体でUIを統一したい場合や、変更を一括反映したい場面ではコンポーネントライブラリが向いています。最初はYAMLコピーから始めて、必要になったらコンポーネントに移行するというステップが無理のない進め方だと思っています。
まとめ
YAMLコピーはコンテナ構造を活かした再利用の仕組みです。右クリックで取り出せるYAMLは、テキストとして自由に持ち運べるUIコンポーネントと考えると、使い道がぐっと広がります。
チームで使う場合は、よく使うUIパターンをYAMLライブラリとして蓄積しておく習慣をつけるとよいです。市民開発とはこういう地道な資産の積み上げだと思っています。一度作ったUIをゼロから作り直さなくてすむ仕組みを整えておくと、次のアプリ開発が確実に速くなります。
