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

[前回](http://qiita.com/IKETA/items/efadd0af263a8037b548) までは、テンプレートからアプリを作成し、その仕組みを簡単に確認した。本稿からは、テンプレートを使用せずにゼロからアプリを作成してみようと思う。


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

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

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

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


# 環境
データベースを作成する前に、まずは "環境" を作成する必要がある。環境とは、簡単にまとめると以下のようなものである。詳細については、[こちら](https://powerapps.microsoft.com/ja-jp/tutorials/environments-overview/) のページを参照していただきたい。

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

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

## 環境の作成
まずは、Web ブラウザから https://web.powerapps.com/ を開いて、PowerApps にサインインする。サインイン後、![image](https://qiita-image-store.s3.amazonaws.com/0/153436/8a5c185b-97b1-6b06-5332-b605eec4c2c0.png) をクリックし、[管理センター] をクリックする。
管理センターが表示されるので、[新しい環境] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/e5dc92e8-374a-088e-afb6-28b810e5ab5b.png)

環境名は任意で良いが、ここでは "My Environment" とする。他の設定はデフォルトのままで、[環境を作成する] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/de63bc5d-7f25-ef05-9f1b-4c34f30215a1.png)

My Environment 環境が作成される。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/24d9c3c9-4208-d518-f3b2-4712b944b6e1.png)
※データベースが作成されない場合があるので、その場合は、上記画面から My Environment をクリック → [データベース] をクリックで表示される画面から作成できる。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/8f22960b-d0f5-3e1f-6154-7cc7ae3cca6c.png)

## 作成した環境へ切り替え
作成後、PowerApps スタジオを起動し、[アカウント] をクリックする。その後、[変更] ボタンをクリックし、[My Environment] を選択後、[環境の変更] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/c103da3c-0dde-5b82-79c4-b2b46a11d5b6.png)

これで、My Environment 環境を使用する状態に変更された。
[接続] をクリックすると、PowerApps ポータルが開くので、Web ブラウザでも環境が変更されていることを確認する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/bf20b8ac-8ca8-c7c1-e3dd-593bd2e54cbc.png)


# CDS データベース
データベース作成後、PowerApps ポータルから [Common Data Service] - [エンティティ] を開くと、サンプルのエンティティが幾つか作成されていることがわかる。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/05a6f16a-2548-80e0-02ed-db8b79439073.png)

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

エンティティ名と表示名を以下のように指定し、[次へ] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/d4520f1e-7a41-8122-6388-d9a8c6ddd0e3.png)

フィールドの追加画面が表示される。プライマリ ID の他に、最終更新日などのフィールドが最初から追加されている。これらのフィールドは特に削除する必要はないので残しておき、名刺データに必要な会社名、名前、電話番号、メールアドレス、URL のフィールドを追加する。フィールドを追加するには、[フィールドの追加] をクリックする。すべてのフィールドを追加し、プロパティを設定後、[作成] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/0bcf7fd2-cd55-5fc0-eb05-6069ca11100b.png)

名刺エンティティが作成される。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/37fbe3da-1e7d-01cf-d408-54ea07e91146.png)

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

```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](https://qiita-image-store.s3.amazonaws.com/0/153436/0b011861-1c8a-0e59-17f7-0dab745460fe.png)

Excel ファイルがダウンロードされるので、これを開く。保護ビューで表示された場合は、[編集を有効にする] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/11417075-1f9f-7a57-df2a-4128a8dcee76.png)

画面右側に、PowerApps Office Add-in の画面が表示されるので、サインインする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/f9f90d25-aaab-d39e-1d9c-68a99618cf23.png)

これで、Excel と 名刺エンティティが接続された状態になるので、Excel のセル B2 に CSV データを貼り付ける。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/fafc3df5-235d-50db-fbbb-92edebc50758.png)

このままでは、B 列にすべてのフィールドデータがカンマ区切りのまま収まった状態になってしまうので、適切なセルに配置されるよう、区切り文字を指定して分割する必要がある。
セル B2 から B11 が選択された状態で、[データ] の [区切り位置] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/050c4505-793b-41bd-1c0e-5d1f4696139a.png)

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

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

![image](https://qiita-image-store.s3.amazonaws.com/0/153436/ceb762c9-cf13-53d6-9bc8-f57c92011064.png)

最後に、PowerApps Office Add-in の画面から [公開] をクリックすると、Excel のデータがそのまま名刺エンティティに反映される。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/27c2e15f-4fb6-ded2-90b4-027ea72864a4.png)

PowerApps ポータルで、データを確認してみる。メールアドレスに警告が表示されているが、.local というドメインが実際には存在しないためであり、ここでは無視する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/a965869c-20e7-6687-7682-c2bb197c1e32.png)


# まとめ
今回は、アプリと 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/