PowerApps で名刺管理アプリを作ってみる(1) #azure #powerapps

AzurePowerApps

この記事は1年以上前に投稿されました。情報が古い可能性がありますので、ご注意ください。

前回 までは、テンプレートからアプリを作成し、その仕組みを簡単に確認した。本稿からは、テンプレートを使用せずにゼロからアプリを作成してみようと思う。

作成するアプリの概要

ここでは、名刺のデータ（会社名、名前など）を登録、閲覧できる シンプルな CRUD アプリを作成する。具体的には、以下の機能を実装する。

  • 名刺データを登録、更新、削除できる。
  • 名刺データをリスト表示し、特定の名刺を選択すれば、その詳細が表示される。
  • 名刺データの編集後は、Slack へ通知されるようにする。

名刺データを管理するデータソースには、PowerApps の Common Data Service (CDS) を使用する。Common Data Service は、PowerApps 内で作成できるデータベースである。有償ではあるものの、PowerApps アプリのデータ管理場所として手軽に利用できる。
作成するエンティティ（テーブル）は、以下のフィールド構成とする。

表示名 名前 種類 プロパティ
プライマリ ID PrimaryId オートナンバー 一意（主キー）
会社名 CompanyName テキスト 必須, 検索可能, 最大長128
名前 Name テキスト 必須, 検索可能, 最大長128
電話番号 Tel 電話 検索可能
メールアドレス email メール 検索可能
URL URL Web サイト URL

環境

データベースを作成する前に、まずは "環境" を作成する必要がある。環境とは、簡単にまとめると以下のようなものである。詳細については、こちら のページを参照していただきたい。

  • アプリ、フロー、データベースを管理するグループであり、有償プラン 2 でのみ作成できる。（フリートライアル中は、プラン 2 相当になるので作成可能）
  • CDS のデータベースは、環境ごとに 1 つだけ作成できる。
  • 同じ組織に属するユーザーに対して、環境ごとにアプリやデータベース接続などのアクセス権を設定できる。
  • 環境はユーザーごとに 5 つまで作成可能で、作成した環境は現状では削除できない。

PowerApps にサインインした直後は、デフォルトで用意されている環境を使用する状態になっている。この環境ではデータベースを作成できないので、まずは新しい環境を作成する。

環境の作成

まずは、Web ブラウザから https://web.powerapps.com/ を開いて、PowerApps にサインインする。サインイン後、image をクリックし、[管理センター] をクリックする。
管理センターが表示されるので、[新しい環境] をクリックする。
image

環境名は任意で良いが、ここでは "My Environment" とする。他の設定はデフォルトのままで、[環境を作成する] をクリックする。
image

My Environment 環境が作成される。
image
※データベースが作成されない場合があるので、その場合は、上記画面から My Environment をクリック → [データベース] をクリックで表示される画面から作成できる。
image

作成した環境へ切り替え

作成後、PowerApps スタジオを起動し、[アカウント] をクリックする。その後、[変更] ボタンをクリックし、[My Environment] を選択後、[環境の変更] をクリックする。
image

これで、My Environment 環境を使用する状態に変更された。
[接続] をクリックすると、PowerApps ポータルが開くので、Web ブラウザでも環境が変更されていることを確認する。
image

CDS データベース

データベース作成後、PowerApps ポータルから [Common Data Service] - [エンティティ] を開くと、サンプルのエンティティが幾つか作成されていることがわかる。
image

エンティティの作成

今回は、このサンプルエンティティは使用せず、新しいエンティティを作成して使用する。まずは、[新しいエンティティ] をクリックする。

エンティティ名と表示名を以下のように指定し、[次へ] をクリックする。
image

フィールドの追加画面が表示される。プライマリ ID の他に、最終更新日などのフィールドが最初から追加されている。これらのフィールドは特に削除する必要はないので残しておき、名刺データに必要な会社名、名前、電話番号、メールアドレス、URL のフィールドを追加する。フィールドを追加するには、[フィールドの追加] をクリックする。すべてのフィールドを追加し、プロパティを設定後、[作成] をクリックする。
image

名刺エンティティが作成される。
image

サンプルデータのインポート

名刺エンティティができたが、まだデータが何もない状態なので、サンプルデータをインポートしておく。

csv:sampledata.csv

(株)AAA,ああ あああ,0a0-000-xxxx,a1@aaa.local,http://aaa.local/
(株)BBB,いい いいい,0b0-000-xxxx,b1@bbb.local,http://bbb.local/
(株)CCC,うう ううう,0c0-000-xxxx,c1@ccc.local,
(株)DDD,ええ えええ,0d0-000-xxxx,d1@ddd.local,http://ddd.local/
(株)EEE,おお おおお,0e0-000-xxxx,e1@eee.local,http://eee.local/
(株)FFF,かか かかか,0f0-000-xxxx,f1@fff.local,http://fff.local/
(株)FFF,ああ あああ,0f0-000-xxxx,f2@fff.local,http://fff.local/
(株)GGG,きき ききき,0g0-000-xxxx,g1@ggg.local,http://ggg.local/
(株)GGG,くく くくく,0g0-000-xxxx,g2@ggg.local,http://ggg.local/
(株)GGG,くく くくく,0g0-000-xxxx,g3@ggg.local,http://ggg.local/

CDS にはデータをインポートする機能が備わっているが、なぜかファイルアップロード時にエラーとなり、筆者が確認した限りではインポートできなかった。
そこで、Excel（筆者の環境では Windows 10 Pro, Excel 2016 を使用）からデータ編集できる機能を使用して、データを追加する。

まず、エンティティ一覧から [名刺] をクリックし、[Excel で開く] をクリックする。
image

Excel ファイルがダウンロードされるので、これを開く。保護ビューで表示された場合は、[編集を有効にする] をクリックする。
image

画面右側に、PowerApps Office Add-in の画面が表示されるので、サインインする。
image

これで、Excel と 名刺エンティティが接続された状態になるので、Excel のセル B2 に CSV データを貼り付ける。
image

このままでは、B 列にすべてのフィールドデータがカンマ区切りのまま収まった状態になってしまうので、適切なセルに配置されるよう、区切り文字を指定して分割する必要がある。
セル B2 から B11 が選択された状態で、[データ] の [区切り位置] をクリックする。
image

区切り位置指定ウィザードが表示されるので、以下の操作を行う。これで、各セルにデータが収まった状態になる。

  1. [カンマやタブなどの区切り文字によってフィールドごとに区切られたデータ] を指定
  2. [次へ] をクリック
  3. 区切り文字として [カンマ] を選択
  4. [完了] をクリック

image

最後に、PowerApps Office Add-in の画面から [公開] をクリックすると、Excel のデータがそのまま名刺エンティティに反映される。
image

PowerApps ポータルで、データを確認してみる。メールアドレスに警告が表示されているが、.local というドメインが実際には存在しないためであり、ここでは無視する。
image

まとめ

今回は、アプリと CDS を作成するための新しい環境と、アプリで使用する CDS の新しいエンティティを作成した。環境は作成数が限られており、また現状では削除できないため、作成する際は注意する必要があるが、ここまでの作業では特に難しいポイントはなく 行き詰まることはあまりないと思われる。（ただし、データのインポートでは少々躓いてしまったが。。。）
次回は、データの更新と同時に Slack に通知するフローを作成した後、アプリの作成にとりかかってみる。

参考文献

Environments overview
https://powerapps.microsoft.com/ja-jp/tutorials/environments-overview/

Environments administration
https://powerapps.microsoft.com/ja-jp/tutorials/environments-administration/

Open entity data in Excel
https://powerapps.microsoft.com/ja-jp/tutorials/data-platform-interactive-excel/

新規CTA