手書きで書いたメモをPowerAppsが、良い感じのフォームにしてくれるらしいのでやってみた。

はじめに

この記事は、先日マイクロソフトがPowerAppsの新機能としてリリースしたExpress Designが気になったので試してみた検証記事です。

そもそも、PowerAppsとは？

PowerAppsとはざっくりとまとめると、「企業向けのローコードツール」です。 個人でも利用は可能ですが、ユースケースとしては企業が自社課題を解決する際に利用するシステムやアプリなどのITツールをローコードで作成することができます。

Express Designとは？

そんなPowerAppsの新機能としてリリースされたExpress Designは画像や手書きのフォーム、FigmaのファイルからUIを作成する機能です。

詳しい情報は、コチラのデモ動画を見るとイメージがつきやすいと思います。

なんかすごそうですよね。ということで試してみたいと思います。

事前準備

まずは、以下のページからアカウント情報を登録しサインインします。

https://powerapps.microsoft.com/ja-jp/developerplan/

アカウントのセットアップが完了したら、作業の開始→確認の詳細を完了し、以下の画面に遷移すると事前準備は完了です。 画像に記載があるように、現状はあくまでPreview提供のようです。では、早速試してみましょう。

 

画像（プレビュー）をクリックするといくつか注意事項があることが分かりますが、白背景で簡単なフォームであれば良いようなので、今回は①白背景と黒文字のパワポで作った画像ファイル、②手書き作成のフォームの写真を利用してやってみます。

①白背景と黒文字のパワポで作った画像編

英語でやってみた

 

認識されている！！！！　 オレンジはラベル、緑はテキスト入力を意味しているので、完璧です。 これ以降の画面では、各インプットに対しての型定義やプレスホルダーの設定、背景設定などを行いアプリの作成を行いますが、今回の検証範囲外のため本記事からは割愛します。

 

次は、日本語でやってみた

全く問題なく認識されていますね、すごい。英語と比較すると日本語は読み取りが難しい印象がありましたが、問題ないようです。 出力結果も文句なしの結果でした。

②手書き作成のフォーム写真

①の検証結果から、日本語にも問題なく対応できていることを確認できました。 そのため、今回は日本語から先に試してみたいと思います。

利用した手書き画像はコチラです。あえて、少し分かりにくく書きました。あえてです、あえて。

日本語で書いてみた

いくつかのインプットボックスがうまく読み取れていないようだったので、修正を行いました。 修正後の読み取り結果はこちらです。

 

文字は問題なく認識されていますね。インプットボックスはいくつかうまく認識されていませんでしたが、修正を行うと上記のようになりました。サイズや位置の修正は必要になりそうですが、文字認識は問題ないですね。

 

次は、英語で書いてみた

利用した手書き画像は以下です。 かなりクセのある字で書いてみましたが、さぁ結果はどうでしょう。

読み取り結果は以下のようになりました。

完璧に認識されていますね。自分の手書きに自信が持てます。素晴らしい。

まとめ

今回は、PowerAppsのExpress Designを試してみました。手書き文字の認識精度が素晴らしいですね。OpenAIは対話型でコードがかけるCodeXの限定公開などを行っていますが、これに追加してHTML/CSSは手書きでサクッと作れる時代がくるかもしれません。

よりスピーディーな開発や実験ができるようになりそうですね。

おまけ

家に筆ペンがあったので、筆ペン手書きでも試してみました。お祝儀袋以外に筆ペンで文字を書くのは初めてですが、どうなるのでしょうか。 読み取りに利用した手書きファイルは以下です。

 

読み取った結果、インプットのタグは少し誤認識があるようですが、修正を行います。

修正した結果はこちらです。

 

筆ペンでも問題なく認識されていますね。家に筆ペンしかないときでも安心して利用ができそうです。 Express Designを利用される機会がある方は、是非筆ペンでも試してみてください。