Power Appsを触ってみた

今回、Power Appsで簡単なアプリを作成する機会に恵まれ、そのなかで知ったことなどを備忘録として残します。
何分、Power Apps初心者ですので調査不足は否めないので、誤りがありましたら後学のためにご指摘いただけると幸いです。

## アプリの作成
ここでは社員の登録と、日々の入退社状況を更新するアプリをイメージして作成します。

1. テーブルの作成
    * [新しいテーブル]をクリック。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/3e47358c-ac1a-ff43-174d-4401a19adfce.png)
    * テーブルの表示名を入力して保存。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/71b84f90-fd08-9731-c867-899fe2e8be40.png)
        * [複数形の名前]は[表示名]と同じままでも問題なさそう。
        * プライマリ列はデフォルトで Name という表示列になる。
    * 作成したテーブルの画面が表示される。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/b730c265-4c00-d7e3-3996-6e4d970ffcf9.png)
    * [新規]-[列]をクリック。表示名とデータの種類を入力して保存。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/2f4c1421-d59e-a2a2-9076-8065a947954e.png)

1. アプリの作成
    * [新しいアプリ]の[キャンバス]をクリック。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/2af1cd4c-e55a-a37e-06fe-e6daa2bc8128.png)

    * アプリ名を入力して作成。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/6c7d2068-6a00-a9bf-5349-0bd2a71421eb.png)
    * アプリの開発画面が表示される。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/cf0bd23e-d5ef-41a8-5714-17e4a85495d8.png)
    * アプリで使用するデータソースを追加する。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/dd5822e3-f557-8bdf-c718-656ecc4a5e31.png)
    * データテーブルを追加する。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/874b2940-346f-cc6c-a135-e8342ee21d97.png)
        * 追加した直後にデータソースを選択するポップアップが表示される。
          データテーブルを選択した状態で、画面右側にあるデータソース・プロパティでも選択できる。
        * データソースを選択すると、プライマリ列と作成日が表示される。
    * 表示するフィールドを選択する。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/6d21c009-c99e-ba11-26d4-16014d3bb37a.png)
        * ヘッダーの文字列は、各列のヘッダーテキスト・プロパティで変更できる。

    * 新しい画面を追加する。
    * その画面に編集フォームを追加する。
        * フォームには編集とディスプレイの2種類がある。
        * フォームのデータソース・プロパティでデータソースを選択する。
    * 編集するフィールドを選択する。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/5d9b8669-b624-e9ed-2e02-78bc2e9c02ae.png)
    * 更新処理用のボタンを配置する。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/7cdf2382-1ba3-1026-04f3-23b2e6189d2a.png)
        * OnSelectプロパティにボタンがクリックされた時の処理を記述する。
        * SubmitForm関数の引数にフォームを指定することで、データが保存される。
        * Navigate関数に画面を指定することで、画面が遷移する。

    * 最初の画面のデータテーブルの列を、編集画面へのリンクにする。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/956b9a40-ee72-d007-b169-c34f140d0e4e.png)
        * Navigate関数の第3引数は、遷移先で参照できる変数になります。
            * ここではModeが変数名で、フォームの編集モードを値に指定しています。
        * アプリにどのような変数があるかは、[ファイル]-[変数]メニューで参照することができきます。
            ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/f2ddf01e-744a-66f2-6ee0-84d052e0eae2.png)
    * 最初の画面に追加ボタンも配置して、こちらも編集画面に遷移させるようにします。
        * Mode変数にはフォームの新規モードを指定します。
    * 編集画面のフォームのDefaultModeプロパティにMode変数を指定します。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/2201870d-f67e-2d82-a43a-a48e7d95c249.png)
    * またフォームのItemプロパティに、データテーブルで選択されたレコードを指定します。
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/8be41359-736c-189f-6f6b-035112aa5692.png)

かなり大雑把な作りですが、サンプルとしては完成です。
アプリを保存して実行すると、動作を確認することができます。

* 最初の一覧画面
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/7bc4ca7c-07ac-97e8-2b61-3d5e0c19386c.png)

* 追加ボタンをクリックして表示された編集画面
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/2a9a756e-e0ad-0b87-e618-cf4ee1889616.png)

* データが追加された一覧画面
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387890/9086c188-e5ec-b422-ab3d-bf56eacf109e.png)


## 気になったこと

* フォームで、[はい/いいえ]フィールドの自動生成が[切り替え]になってくれない。
    * 上記のアプリでInTheOfficeは[データの種類]として[はい/いいえ]ですが、フォームで自動生成されるのはドロップダウンでした。選択肢が2つしかないので、１クリックで選択できるようにしたいです。
      [こちら](https://thepoweraddict.com/y-yes-no-data-card-in-power-apps-for-better-ux/) のような記事が存在するぐらいなので、手動で置き換える必要があります。

* フォームで、[日付のみ]フィールドの自動生成が日時になってしまう。
    * テーブルで[データの種類]として[日付のみ]を指定したフィールドが自動生成されると、日付だけでなく時間の入力欄もつくられてしまいます。
      [こちら](https://exceltown.com/en/tutorials/powerapps/power-apps-working-with-calendar-dates-without-hours/) のように、手動で時間の入力を削除する必要があります。

* 確認画面を表示する関数(JavaScriptのconfirmに相当する関数)がない。
    * これもいろいろと探したのですが、見つかるのは [こういった](https://www.c-sharpcorner.com/article/how-to-create-a-popup-message-or-alert-box-in-powerapps/) 自作する記事ばかりでした。
      削除を確認するなどは、定番のUIパターンなので、これをいちいち自作するのは、とても面倒だと思いました。

* テーブル名や列名に日本語を使うときは、[高度なオプション]に隠れている[スキーマ名]を入力する必要がある。
    * 最初にプライマリ列を日本語だけにしたら[保存]ボタンが押せず、日本語は使えないかと勘違いしました。
      要は、[表示名]がそのまま必須入力項目の[スキーマ名]に使われるけど、[スキーマ名]に日本語は使えないようで、空欄のままという訳でした。

* 新規作成したアプリを保存したのに、アプリの一覧に表示されないことがある。
    * すごく焦りました。
      メニューにある[検索]で検索しても見つかりません。
      が、数分待つと表示されました。
  
## 所感
簡単なアプリを簡単に作成するという意味で、素直にとても良いローコード開発ツールだと思いました。
* コード補間が優秀ですし、どこでコード上のエラーが発生しているかの把握も容易です。
* DataverseのテーブルのデータをExcelで編集して反映できるのは、とてつもなく便利です。

一方で、日ごろはKotlinやTypeScriptでコーディングをしている身としては、GUIでアプリを組み立てるのが大変苦痛だったのも事実です。

* 所々で操作が反映されるまで数十秒から数分かかることがありました。特にDataverseのテーブルやカラムの追加や削除が遅いです。もちろんローカル環境のIDEやエディタに対する操作と比べるのは酷なのですが、だからといってストレスにならない訳でもありません。
* この手の開発ツールの宿命なのでしょうが、似たようなコントロールを並べたり、テーブルに列を作ったりするのを、GUIで行うのは手間で、設定ミスを犯しがちということです。

ただ、ローコード開発ツールなのにソースコードをダウンロードできるのには驚きました(参考: https://powerapps.microsoft.com/en-us/blog/source-code-files-for-canvas-apps/ )。このおかげでコード全体を俯瞰できるのは助かりますし、熟達すればテキストエディタで開発できるようになるかもしれません。