Microsoft Power Appsで来客情報管理アプリを作成する

Microsoft Power Apps とは

Microsoft Power Apps（以下、Power Apps）とは、Microsoft社が提供しているビジネスアプリケーション開発サービスです。

アプリケーション開発、と聞くとプログラミングスキルが要求されるとお考えの方が多くいらっしゃるのではないでしょうか？しかし、Power Appsにおいてプログラミングスキルは必要ありません。シンプルなキャンバスに様々な装飾を施す要領で直感的、かつ簡単にアプリを作成できます。

当記事では、Power Appsで「来客情報管理アプリ」を作成する手順を記載いたします。

なお、Power Appsは、2016年11月にMicrosoft社からリリースされたローコード開発基盤「Power Platform」のツールの１つです。Power Platformについては、こちらの記事をご覧ください。

＜MISO「ローコード開発基盤OutSystemsとPower Platformを比べてみた」＞
https://www.tdi.co.jp/miso/low-code-platform-outsystems-power-platform

来客情報管理アプリの概要

今回作成する来客情報管理アプリは、会社に来客があった場合に、その情報（会社名、氏名など）をアプリ上で管理するためのものとします。

以下を主な要件として、作成したいと思います。

• 担当者がタブレット端末で操作することを想定
• 来客者の一覧管理、新規登録、受付の管理を行える
• 来客対応状況を色分けする等、モバイル端末の特性を活かす

来客情報管理アプリをPower Appsで作成する

それでは早速、アプリを作成していきましょう。

今回は、無償で提供されている開発環境を利用します。有償のプランとは異なり、無償の開発環境では自身が作成したアプリの運用、他者との共有はできません。

Power Apps にログイン

Microsoft社のPower Appsのページにアクセスし、右上の「無料で試す」をクリックします。

Microsoftアカウントを入力し、「送信」をクリックします。

登録時に無償のプランを選択すると、このような画面が表示されます。ここからアプリケーションの作成が可能です。

データの格納先をCommon Data Serviceで作成

まずは今回作成するアプリで、来客データを格納する入れ物を作成します。

Power Appsで利用できるデータ格納サービスをCommon Data Service（以下、CDS）といいます。CDSとはざっくり言うと、Power Apps上で機能するDBとなります。（厳密には単なるDBとは異なります）

左の「データ」＞「エンティティ」をクリックすると、CDSのエンティティ（テーブル）がずらりと表示されます。FAXやタスクなど、ビジネスで使用できそうなエンティティが最初から作成されているのも特徴です。

上に表示される「新しいエンティティ」をクリックし、名前等を入力し、エンティティを新規作成します。今回は表示名を「来客情報_miso」としました。

新規作成された「来客情報_miso」名のエンティティには、画面から確認できる通り、最初からフィールドが作成されています。今回、それらは使用しないため、新しいフィールドを作成します。

「フィールドの追加」をクリックし、表示名や名前、データ型を入力します。今回は「会社名」「お客様氏名」「担当者」「訪問日時」「連絡先」「対応状況」の5つを追加しました。

Common Data Serviceと連動したアプリの作成

CDSを作成したら、「ホーム」から一旦最初の画面へ戻ります。「データから開始」より、先程作成したCDSと連動させたアプリを作成できます。紫色の「Common Data Service」のアイコンをクリックします。

「テーブルの選択」欄に、先程作成したエンティティ「来客情報_miso」があります。こちらを選択し、接続を行います。

自動で開発画面へ遷移しました。この画面上で、アプリのレイアウト変更や機能追加を行っていきます。ただ、今回はタブレット端末での操作を想定しているので、横画面で表示されるように設定を変更しましょう。

開発画面左上の「ファイル」＞「設定」＞「画面のサイズと向き」から、縦横比と向きを変更できます。向きを横に変更し、適用させます。

ふたたび開発画面に戻ると、画面が横向きになっていることが分かります。

さて、CDSを接続してアプリを作成する場合、デフォルトで「BrouseScreen」「EditScreen」「DetailScreen」という3つの画面がつくられます。ゼロから設計するのではなく、この画面をベースに作成できるところが、PowerAppsの便利な点です。

BrouseScreen

BrouseScreenは、登録したデータが一覧で表示される画面です。
 

EditScreen

EditScreenは、データの編集を行える画面です。デフォルトでは「お客様氏名」しか表示されていません。これでは不便なので、項目を追加しましょう。

右側に表示される編集フォームから、「プロパティ」＞「フィールド」＞「フィールドの編集」をクリックします。

「フィールドの追加」をクリックすると、「来客情報_miso」にあるフィールドの一覧が表示されます。ここのチェックボックスにチェックを入れ、「追加」をクリックすることで、フィールドが追加されます。同様に削除もできます。

会社名や対応状況のフィールドを追加できました。

DetailScreen

DetailScreenは、登録したデータ1つ1つの詳細が表示される画面です。

関数の設定

３画面それぞれの上部にご注目すると、なにやら、式のようなものが見えるかと思います。こちらが関数です。

Power Appsでは関数を使用し、アプリに命令を行います。

たとえば、Navigate関数は表示する画面の変更、NewForm関数は項目作成のためのフォームのリセットを行います。また、関数は複数並べて使用することができます。

つまり、

という関数を記載することで、EditScreen1への画面遷移、EditForm1のリセットを同時に行うよう命令できるのです。

関数を調べつつ、欲しい機能を実装させていきましょう。使用できる関数はMicrosoft公式の「Power Apps向けの数式のリファレンス」をご覧ください。

関数を設定したり、ボタンを配置したり、画面を追加したり…プログラミングなしで、アプリを完成させることができました。

デモ動画

作成画面右上の「▷」をクリックすると、実際に操作してアプリの動作を確認することができます。今回、画面キャプチャだけではアプリの動作が分かりにくいため、デモ動画を作成しました。こちらをご覧いただき、アプリ起動から来客情報登録、編集、削除の動作を確認していただければと思います。

デフォルトの3画面に加え、スタート画面、登録完了画面、そして削除完了画面を追加しました。また、関数を用いて、対応状況のステータスによって表示色が変わるようにしています。

おわりに

ここまで、「来客情報管理アプリ」作成の一連の流れを記載いたしました。プログラミングに関する知識がなくとも、Power Appsを用いればアプリを簡単に作成できることをご理解いただけましたら幸いです。

非エンジニアの方にとっては敷居の高いアプリ開発ですが、Power Appsはその敷居を取り払い、誰しもが開発者になりうる可能性を提供するサービスなのではないでしょうか。ひょっとすると、コードを書かない開発が主流になる未来もそう遠くないかもしれません。

当記事で興味をお持ちいただいた方は、ぜひご自身でもPower Appsを触ってみてください。

また、tdiではローコード開発に力を入れていますので、気になる方はお気軽にお問い合わせください。

tdiのローコード開発に関するソリューションサービスはこちら