Power Apps エクスプレスデザインを試してみた

日本時間 5/25(水)、26(木)で開催された Microsoft Build 2022 にてプレビューが公開された Power Apps のエクスプレスデザインを試してみました。

# エクスプレスデザインとは？
手書きやパワポ等で作成した画像や Figma からキャンバスアプリの画面を作成でき、あわせて Dataverse のテーブル作成もできる、という画期的かつエクセレントな機能です。詳細な手順等は下記参考URLよりご確認されたし。

[New: turn images and designs into apps using AI-powered express design](https://powerapps.microsoft.com/en-us/blog/new-express-design-in-power-apps-converts-images-and-designs-to-apps-in-seconds/) 
［Power Apps 公式］

[エクスプレスデザイン機能で画像やデザインから数秒でPower Apps アプリを構築](https://memo.tyoshida.me/power-platform/powerapps/make-apps-from-image-express-design/) 
［吉田の備忘録］

[Turn a sketch into an app with express design in Power Apps](https://www.youtube.com/watch?v=LCCZ_kW14T4) 
［Microsoft Power Platform YouTube］

:::note
エクスプレスデザインは記事投稿時点（2022/05/27）でプレビュー段階の機能です。
期待した結果にならなかったり、動作が不安定な部分があります。気づいた箇所は積極的にフィードバックすると良いでしょう。また、今後のアップデートで変更がある可能性があります。
:::

# 実際に紙とペンで試してみた
操作方法は前述の参考URLリンク先でご確認いただくとして。
当方が実際に試してみたコトのメモです。

## Dataverse が無い環境では上手く動かない？
for 365 オンリーの環境で試してみた結果、［データを設定する］の画面から全く先に進めない状態でした。30分以上放置してもダメ。何回やり直してもダメ。画面左下にある［作成］ボタンを連打しても何もおきません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/7778cdfe-cc81-7235-0eab-dcb58add9baf.png)

(´・ω・`) ｼｮﾝﾎﾞﾘ

［戻る］ボタンや［閉じる］ボタンは動作するので、この画面から退避は可能です。期待する動作としては下記のように Dataverse へテーブルを新規作成するか、テーブル作成をスキップするか、の二択の画面になります。上記のグルグル画面で「環境のアクセス許可うんぬん」とメッセージがあるので、おそらく Dataverse を延々と探しているんじゃなかろうか？と個人的に推測している次第です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/6f2133a6-4c52-32d4-7e96-be0df4bea061.png)
何はともあれ、エクスプレスデザインを試したい方で、上記のように Dataverse が無い状態でつまづいてしまった方は Dev環境等をご検討ください。

## 手書き画像は背景の白さが決め手？
手書きでもイケる！って言われたら、そりゃあ試すでしょ？試しますよね？

### その1)コピー用紙の裏に手書きしてみた
日本語と英語、ラジオボタンの選択や図形等々を考えて、てきとーにえいっ！
![20220527_222328.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/a0f2486d-bf87-0f94-e0bb-93a786d77d60.jpeg)
エクスプレスデザインで画像を取り込んだ結果はこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/4e80bc6f-7f85-04af-b765-5e4b0afb0c9f.png)
ガタガタですね（汗
ちなみに、タグ付けされた対象の枠内をクリックすると編集ができます。四辺の丸（〇）をつまんでドラッグすれば範囲を変更可能ですし、期待するコントロールも変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/3fc84e2e-31f0-5c31-6165-4987e92450b0.png)
とは言え、期待したほどの認識率ではありません。

### その2)もっと白く！
上記 その1）で利用した画像を加工ツールで白くしてみます。ガンマなどを調整して背景がなるべく白くなるように・・・
![20220527_222328 - コピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/d9cb4fd2-8d42-2afd-8a3b-b9c07196bd2e.jpeg)
さて、これを取り込んでみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/de2f2459-1bda-daef-d003-2826a91368bc.png)
おぉ！前回よりも断然マシです。これなら、まだ頑張れる！

### 実はチャンと書いてある
Power Apps ポータル画面のホームからエクスプレスデザインを起動した際に、ちゃんと「こんな画像が望ましいですよ」というヒントが明記されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/b9ea4769-e46b-dce8-704f-5792e90b7151.png)
「背景が明るい色のフォームを使用」してよね！って、しっかり書いてありますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/fe5bcd88-3e50-0283-bde9-f433a9b4915d.png)
簡単な検証ですが、手書きか否かに関わらず”背景を限りなく白くすべき”かな、と状況から推測されます。

# まとめ
- Power Apps エクスプレスデザインは現時点ではプレビューです！
- 環境によって上手く動作しないぽい？
    - Dataverse がある環境であれば安定して動作する
- 取り込む画像の背景は限りなく美しい”白”が良さそう

スマホのアプリなどで、手書きの場合は可能な限り背景を白く加工しちゃうのがラクチンかな？というのが本日の検証結果です。

手書きでアプリ画面のデザイン→ 画面項目からサクッと Dataverse テーブル定義＆作成 → キャンバスアプリが画面レイアウト（そこそこ）実施済み＋テーブル作成済みであればデータソースへの接続も完了済み、という驚きの手軽さです。日本語の認識率も悪く無い。これは非常にエクセレントで面白い機能ですよ。何より楽しい。「だれの手書きレイアウトがイチバン認識率高いか？選手権」などでも遊べそうですね。今後の進化にも期待です。

さてさて本日の検証はココまで。
それでは、皆さま、素晴らしい Power Platform Life を！