【Power Apps】コードビューとは、使い方や活用方法の紹介

ちょっと前からPower Apps Studio上でコントロールのコードをYAML形式でコピーできるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/e2b012ac-5fe0-87ec-5c79-e004855998eb.png)

この機能で**どんなことができるようになったのか、コピペの方法や活用方法**について紹介します。

## 概要

### どんなことができるようになった？

これまでコントロールのコピーをする場合はCtrl+C→Ctrl＋Vなどでコピペをしていましたが、今回YAMLという文字列形式で表示やコピーができるようになりました。

文字列形式でコピーができるようになったことで、**チャットやブログ記事のテキストをコピーしてアプリにペーストしたり、テキストを編集して貼り付けることができる**ようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/656c802e-a58e-3126-caa1-af18524cddb6.png)

コピーしたコードは[difff](https://difff.jp/)などで差分比較ができるので、コードの管理も格段にしやすくなりました。

貼り付ける際は、Ctrl＋Vではなく右クリック→コードを貼り付けるを選択する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/0d1d7660-ad9e-9183-5b6a-699a9542e285.png)

### プレビュー機能なので注意

以下の通り画面のコードをペーストすることはできないようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/280d4bcd-7ce2-e30b-0796-85a9c09d97af.png)

ただし、コードを見たりコピーしたりすることはできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/1662f3d9-13c6-8d54-ba78-c955ba6d08c6.png)

また一部座標系に不具合があるため、細かい部分は正しくコピペできているか確認する必要があります。

### コンテナー単位でのコードコピーも可

コンテナー単位でのコードコピペもできるので、複数コントロールをコピペする際はコンテナーにまとめたうえでコピーしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/54b3cd78-6aa7-5fce-643b-829220e7dd65.png)

## 活用方法

コピーボタンでYAML形式のテキストをコピーできるようにしています。ご活用ください。

### ユーザー検索

頻繁に使うけど作り方を思い出すのに時間がかかるユーザー検索コンボボックスです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/31193a31-a0bb-162e-62da-359a19464689.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/1330f22a-bbf7-672e-f669-9bac686dd948.png)

使用する際はO365ユーザーコネクタを追加してください。

https://powerplatformnikki.com/office365search

### ラベル付きアイコン

最近モダンコントロールでもボタンにアイコンを付けられるようになりました(画像右)が、これまで私はラベルとアイコンを組み合わせたもの(画像左)をよく利用していました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/d45985ca-89eb-dda0-9d76-227625a15b8e.png)

画像左は正方形であるのに対し画像右は横長なので、ヘッダーには前者、それ以外には後者のように表示領域による使い分けをするといいかもしれません。

### アプリのコード量測定

画面で右クリック、ビューを表示→コードをコピーして文字数を計測すれば、画面ごとのコード量を測定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/8142d7ec-6abf-8e35-6561-77f1f2ca40a0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/fea4478c-0e01-bba7-7a69-4e77a9799c3c.png)

アプリの複雑度やパフォーマンスのひとつの指標になるかもしれません。

### 細かいガイドに合わせたコントロール集

個人的に最近のPower Apps Studioのコントロール挿入画面は微妙だと感じています。

https://x.com/PowerPlatform4/status/1812716246795980908?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1812716246795980908%7Ctwgr%5Eec76933d1f75186a72a714bd960e8b2ee801ab3b%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpowerplatformnikki.com%2Fcodeview%2F

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/57e3de61-dcf4-488f-020d-6506c7a9674f.png)

安定して使えるクラシックコントロールが下の方になっているので、新しくコントロールを設置するときにかなり不便です。  
またPJによってはフォントサイズや色などが細かく決められている場合もあると思います。

こういった背景で、**コードのコピー機能を活用してコントロール集アプリを作るのもアリでは？**と思いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/24f5f8ed-abb1-73d1-1c4c-eafbd55b2386.png)

テキストボックスなどの出力を参照して動的にYAMLをコピーできるようになっていればより汎用的に使えますね。

### 共通部品集をもっと使いやすく

これまで組織で共通的に利用される部品はコンポーネントやZipファイルなどにエクスポートされたアプリを共有していましたが、どちらもユーザーが使い始めるにはいくつか手順を踏む必要があり面倒です。

前項の例のようにコードのコピー機能を使えばコピペだけで部品を共有できるのでかなり共通部品が使われやすくなるのではないでしょうか。

## さいごに

将来的にYAMLでプリセットを保存・共有できるようになればいいなぁ…と妄想しています。

こんな使い方してます！やこのページにこのコントロール集追加してほしい！などあれば教えてください。

## 元記事

https://powerplatformnikki.com/codeview/