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

前回は、Microsoft Flow を使用して、データベース処理 + Slack 通知のワークフローを作成した。これでアプリに必要なリソースは全て揃ったので、本稿では 名刺管理アプリの作成に取り掛かる。

**これまでの記事**
[PowerApps で名刺管理アプリを作ってみる(1)](http://qiita.com/IKETA/items/132633f4988477809355) PowerApps の環境とデータベースの作成
[PowerApps で名刺管理アプリを作ってみる(2)](http://qiita.com/IKETA/items/0b1bf07d040cb4bb7a1a) ワークフローの作成

# 画面設計
名刺管理アプリには、名刺を一覧表示する「名刺リスト画面」と、追加、更新、削除を行う「名刺詳細画面」を用意する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/fe8ccb5b-93c3-dc7f-9179-167e20f40cdf.png)

各ボタンクリック時の動作と画面遷移は、以下のようにする。

* 名刺リスト画面
    * [ + ] ボタンをクリックすると、追加モードで名刺詳細画面を表示する。
    * 各名刺の [ > ] ボタンをクリックすると、編集モードで名刺詳細画面を表示する。
* 名刺詳細画面
    * 追加,更新ボタンをクリックすると、名刺が追加、または更新される（追加モードの場合は追加、編集モードの場合は更新となる）。その後、名刺リスト画面へ戻る。
    * 削除ボタンをクリックすると、名刺が削除される。その後、名刺リスト画面へ戻る。
    * [ ← ] ボタンをクリックすると、名刺リスト画面へ戻る。

# 空アプリの作成
まずは PowerApps スタジオを起動し、環境が以前に作成した "My Environment" であることを確認する。その後、[新規] メニューの [空のアプリ] から、[携帯電話レイアウト] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/121ee5eb-0634-e874-5abf-931ed010f6a8.png)

空のアプリが作成され、開発画面が表示される。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/6c0e796b-4990-702b-a834-291fac79d1e2.png)


# 名刺リスト画面の作成
アプリ作成直後は Screen1 が表示されている状態になるので、このまま [レイアウト] から [項目、ヘッダー、説明を参照] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/2673e844-30b7-eb9c-f607-e419c8086b39.png)

これで、Screen1 がリスト表示用のレイアウトになる。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/6f4ced5b-88a9-b3a3-f133-be85926c1f84.png)

## データソースに接続
リストに名刺データを表示させるため、名刺エンティティに接続する必要がある。引き続き、Screen1 のオプションから、[データソース] の [データソースの追加] をクリックし、[Common Data Service] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/eedc58e9-718a-a3f0-e10d-38bd4923cb5e.png)

エンティティの一覧が表示されるので、[名刺] を選択し、[接続] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/b72c68c1-7d60-cafe-0585-4e77692370cc.png)

これで、Screen1 から名刺エンティティを参照できるようになる。
※実際には、アプリ内のすべての画面から参照できるようになる。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/f044947f-fe64-d9c1-3be4-ecc7bbabecf5.png)

## ワークフローの追加
Microsoft Flow で作成したワークフローをアプリに追加して、使用できるようにする。[アクション] タブの [Flows] をクリックすると、ワークフローの追加画面が表示される。ワークフローについては、[前回の記事](http://qiita.com/IKETA/items/0b1bf07d040cb4bb7a1a) を参照されたい。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/770c628b-d323-29f3-ab2b-3c55ffc6ace8.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/153436/0efd986e-b28d-4987-d11f-82821552bb89.png) アイコンをすべてクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/dcbcd4cb-5721-1685-dbfc-9126a970052a.png)

Screen1 の OnVisible イベントに、ワークフローを実行するための関数が自動で追加されるが、ここでは不要なので削除する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/270a3801-e1a4-64c6-0a1e-001cf817d25a.png)

これで、アプリにワークフローが追加された。データソースの一覧を見ると、追加されていることが確認できる。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/1e85dd12-ccbc-9848-ff76-ed75fa967b5c.png)

## 名刺リストを表示
続いて、BrowseGallery1 を選択する（Screen1 下部の白い空白をクリックすれば、選択状態になる）。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/8f9e27b8-6685-bbbe-b254-f5db2d6d0764.png)

詳細設定の [Items] を以下の値にする。

```BrowseGallery1.Items
SortByColumns(Search(名刺, TextSearchBox1.Text, "CompanyName", "Name", "Tel", "email"), "CompanyName", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))
```

* Search 関数は、名刺エンティティから、TextSearchBox1.Text で指定した検索条件を反映したデータテーブルを返す。CompanyName, Name, Tel, email は検索の対象となる列である。
* SortByColumns 関数は、データテーブルを CompanyName 列でソートする。
* If 関数は、第 1 引数が true か false かを判定し、true ならば第 2 引数を、false ならば第 3 引数を実行する。SortDescending1 という変数が true の場合は、ソートオーダーを Descending (降順) にし、false の場合は Ascending (昇順) にする。

次に、BrowseGallery1 のオプションを開き、コンテンツを以下のようにする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/269d5e84-d6b3-57c0-126e-706206c3f5a7.png)

これで、名刺リストが表示されるようになった。各データの上が名前で、下が会社名となる。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/49520b8b-f541-d17c-4a83-c461016a79cd.png)

# 名刺詳細画面の作成
続いて、名刺詳細画面を作成する。メニューバーから [新しい画面] をクリックすると、Screen2 が作成される。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/b33ad7a7-2d65-7dcd-3c9f-2841ff7383ae.png)

レイアウトから、[無限スクロールのキャンバス] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/877bb6b2-8770-903e-6614-7f2ad6889284.png)


## 詳細表示と編集用フォームの追加
[挿入] タブの [フォーム] - [編集] をクリックし、Screen2 に編集フォームを追加する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/cd92a7d3-7f03-38fc-f888-c98bd54d4c7c.png)

追加された Form1 を、青い帯の [タイトル] の真下に移動し、サイズを適当に調整する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/5f081f6b-aaf7-e815-992e-cabd24b85347.png)

Form1 のオプションから、フォームのカスタマイズの ![image](https://qiita-image-store.s3.amazonaws.com/0/153436/011b75b3-4790-9897-b343-efd516a775d3.png) をクリックして、データソースとして名刺エンティティを選択する。

名刺エンティティのフィールドが表示されるので、[CampanyName], [Name], [Tel], [email], [URL] の各 ![image](https://qiita-image-store.s3.amazonaws.com/0/153436/6adce8ac-9023-dbc5-bf84-5bd3e3edffac.png) を、順にクリックする。Form1 に入力フィールドが追加される。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/58764639-cb76-f786-cce5-dc6f4bca4d7b.png)

## 操作用アイコン（ボタン）の追加
この画面では、追加,更新、削除、前のページへ戻る用の 3 つのアイコンを追加する。
まずは、戻る用アイコンを追加してみる。[挿入] タブの [アイコン] - [左矢印] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/8080f56f-7989-0a5c-4e78-04f624e08ae9.png)

icon1 が追加されるので、詳細設定から以下のようにプロパティの値を変更する。

```icon1.property
Color: RGBA(255,255,255,1) 
Width: 48, Height: 48
X: 12, Y: 20
```

同様に、追加,更新用の編集アイコン (icon2) と、削除用ごみ箱アイコン (icon3) を追加し、以下のプロパティ値とする。

```icon2.property 
Color: RGBA(255,255,255,1) 
Width: 48, Height: 48
X: 580, Y: 20
```

```icon3.property 
Color: RGBA(255,255,255,1) 
Width: 48, Height: 48
X: 516, Y: 20
```

アイコンの配置後は、以下のようになる。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/fb8f91b4-6af6-f357-769c-8c20330e01ed.png)

# プロパティとアクションの設定
これで 2 つの画面が作成できたので、続いて各画面のコントロールのプロパティの設定と、アイコンにアクションを設定し、アプリに "動き" を付けていく。

## 名刺リスト画面のプロパティとアクション

### アイコン (IconNewItem1)
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/7c7b1f82-7cec-b9df-36fb-718b08ea620b.png) をクリックすると、名刺詳細画面に "追加モード" で遷移するようにする。![image](https://qiita-image-store.s3.amazonaws.com/0/153436/7c7b1f82-7cec-b9df-36fb-718b08ea620b.png) アイコンを選択し、アクションの OnSelect イベントを以下のよう設定にする。

```IconNewItem1.OnSelect
NewForm(Form1); Navigate(Screen2, ScreenTransition.Fade)
```

* NewForm 関数は、指定したフォーム（ここでは名刺詳細画面の Form1）を "追加モード" にする。
* Navigate 関数は、第 1 引数で指定した画面（ここでは Screen2）に遷移する。第 2 引数の ScreenTransition は画面遷移するときの視覚効果である。Navigate 関数の説明と合わせて、[こちら](https://powerapps.microsoft.com/ja-jp/tutorials/function-navigate/) を参照されたい。
* アクション内で複数の関数を順番に実行したい場合は、関数と関数の間を ; で区切る。

### アイコン (IconRefresh1)
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/a391b90d-8116-f6d5-de3c-eb02a1524658.png) をクリックすると、名刺リストを最新の情報に更新するようにする。![image](https://qiita-image-store.s3.amazonaws.com/0/153436/a391b90d-8116-f6d5-de3c-eb02a1524658.png) アイコンを選択し、アクションの OnSelect イベントを以下のように設定する。

```IconRefresh1.OnSelect
Refresh(名刺)
```

* Refresh 関数は、データソースを最新の情報に更新する。アプリのデータソースは、接続されているデータベース（ここでは Common Data Service の 名刺テーブル）とリアルタイムで同期を取っているわけではないので、何かのタイミングで同期を取る必要がある。

### アイコン (NextArrow1)
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/6fe1fb12-9dde-77b2-d227-556216a29f7c.png) をクリックすると、名刺詳細画面に "編集モード" で遷移するようにする。![image](https://qiita-image-store.s3.amazonaws.com/0/153436/6fe1fb12-9dde-77b2-d227-556216a29f7c.png) アイコンを選択し、アクションの OnSelect イベントを以下のように設定する。

```NextArrow1.OnSelect
EditForm(Form1); Navigate(Screen2, ScreenTransition.Fade)
```

* EditForm 関数は、指定したフォーム（ここでは名刺詳細画面の Form1）を "編集モード" にする。

### 画面のタイトル (LblAppName1)
LblAppName1 の Text プロパティの値を以下のように設定する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/49331080-49cf-d3b9-2c8f-3cf2c8ca6fa9.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/153436/a28e063f-d9eb-0638-8ee0-e138f124eafd.png)

### 名刺リスト画面 (Screen1) の OnVisible イベント
OnVisible イベントは、この画面が表示されたときに実行されるイベントである。名刺リスト画面が表示されたときに、最新の名刺リストを表示させたいので、IconRefresh1 の OnSelect イベントと同じようにここでも Refresh 関数を実行する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/4cd4769c-1f1d-5404-d0ac-5f1b159712d6.png)

## 名刺詳細画面のプロパティとアクション

### アイコン (Icon1)
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/9d053f0f-fa2f-9e97-5b9b-dfe48fa2efed.png) をクリックすると、名刺リスト画面に戻るようにする。![image](https://qiita-image-store.s3.amazonaws.com/0/153436/c4bc8752-930f-c1bc-a03d-a3f3fb3adf55.png) アイコンを選択し、アクションの OnSelect イベントを以下のように設定する。

```Icon1.OnSelect
Back(ScreenTransition.Fade)
```

* Back 関数は、遷移元の画面に戻る。

### アイコン (Icon2)
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/4eef61fb-ae1a-316d-a9cf-ca542ab7c514.png) をクリックすると、追加モードの場合は新しい名刺の追加、更新モードの場合は編集中の名刺が更新されるようにする。![image](https://qiita-image-store.s3.amazonaws.com/0/153436/4eef61fb-ae1a-316d-a9cf-ca542ab7c514.png) アイコンを選択し、アクションの OnSelect イベントを以下のように設定する。

```Icon2.OnSelect
If(Form1.Mode=FormMode.New, 
	'BusinessCard-Insert'.Run(DataCardValue1.Text, DataCardValue2.Text,
		DataCardValue3.Text, DataCardValue4.Text, DataCardValue5.Text));
If(Form1.Mode=FormMode.Edit,
	'BusinessCard-Update'.Run(BrowseGallery1.Selected.PrimaryId, DataCardValue1.Text,
		DataCardValue2.Text, DataCardValue3.Text, DataCardValue4.Text, DataCardValue5.Text));
Back(ScreenTransition.Fade)
```

* このアクションは、本アプリで一番難しい処理になるが、追加モード (FormMode.New) と更新モード (FormMode.Edit) で処理を分け、それぞれで 追加用 (BusinessCard-Insert) と更新用 (BusinessCard-Update) のワークフローを呼び出している。ワークフローは、'ワークフロー名'.Run で実行できる。
* DataCardValue1.Text から DataCardValue5.Text は順に、会社名, 名前, 電話番号, メールアドレス, URL であり、それぞれ ユーザーがテキストボックスに入力した値である。
* 'BusinessCard-Update'.Run 関数の引数に指定されている BrowseGallery1 とは、名刺リスト画面のリストコントロールであり、Selected は、リストから現在選択されているアイテム（名刺テーブルのレコード）を表す。つまり BrowseGallery1.Selected.PrimaryId とは、「編集中の名刺の PrimaryId の値」ということになる。
* ワークフローの処理が終わったら、Back 関数で名刺リスト画面に戻るようにする。

### アイコン (Icon3)
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/b5a7074a-eff9-9025-f9c0-0b24e5b5e318.png) をクリックすると、編集中の名刺が削除されるようにする。![image](https://qiita-image-store.s3.amazonaws.com/0/153436/b5a7074a-eff9-9025-f9c0-0b24e5b5e318.png) アイコンを選択し、アクションの OnSelect イベントを以下のように設定する。

```Icon3.OnSelect
'BusinessCard-Delete'.Run(BrowseGallery1.Selected.PrimaryId);
Back(ScreenTransition.Fade)
```

* 'BusinessCard-Delete' は、同じく前回の記事で作成した名刺削除用のワークフローである。
* ワークフローの処理が終わったら、Back 関数で名刺リスト画面に戻るようにする。

また、削除アイコンは 追加モードの場合は表示させたくない。そこで、Visible プロパティを以下のように設定する。

```Icon3.Visible
If(Form1.Mode=FormMode.New, false, true)
```

* Visible プロパティが false の場合は、削除アイコンが表示されなくなるので、If 関数を使用して、追加モードのときだけ false、それ以外は true となるようにする。

### 画面のタイトル (LblAppName2)
名刺詳細画面のタイトルは、追加モードと編集モード表示を分ける必要がある。そこで、LblAppName2 の Text プロパティを以下のように設定する。

```LblAppName2.Text
If(Form1.Mode=FormMode.New, "追加", Concatenate("更新 (", BrowseGallery1.Selected.PrimaryId, ")"))
```

* If 関数を使用して、追加モードのときは "追加" と表示されるようにし、編集モードのときは "更新 (編集対象名刺の PrimaryId)" と表示されるようにする。
* Concatenate 関数は、複数の文字列を結合して、ひとつの文字列とする。

### 編集フォーム (Form1) の Item プロパティ
編集フォームには、名刺リスト画面で選択した名刺のデータが表示されるようにしたいので、BrowseGallery1.Selected と指定する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/56f0cc6f-39c3-af88-bfa9-4695c4d90334.png)

この Item プロパティの値は、追加モードのときは無視される。よって、If 関数でモード別の処理を書く必要はない。

## 設定値まとめ
これまで説明したプロパティ、アクションの設定値を、画面とコントロールごとにまとめておく。

<table>
<tr>
<th style="text-align:center">画面</th>
<th style="text-align:center">コントロール</th>
<th style="text-align:center">プロパティ（アクション）</th>
<th style="text-align:center">設定値</th>
</tr>
<tr>
<td rowspan="6">名刺リスト</td>
<td>BrowseGallery1</td>
<td>Items</td>
<td>SortByColumns(Search(名刺, TextSearchBox1.Text, "CompanyName", "Name", "Tel", "email"), "CompanyName", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))</td>
</tr>
<tr>
<td>IconNewItem1</td>
<td>OnSelect</td>
<td>NewForm(Form1); Navigate(Screen2, ScreenTransition.Fade)</td>
</tr>
<tr>
<td>IconRefresh1</td>
<td>OnSelect</td>
<td>Refresh(名刺)</td>
</tr>
<tr>
<td>NextArrow1</td>
<td>OnSelect</td>
<td>EditForm(Form1); Navigate(Screen2, ScreenTransition.Fade)</td>
</tr>
<tr>
<td>LblAppName1</td>
<td>Text</td>
<td>"名刺リスト"</td>
</tr>
<tr>
<td>Screen1</td>
<td>OnVisible</td>
<td>Refresh(名刺)</td>
</tr>
<tr>
<td rowspan="21">名刺詳細</td>
<td rowspan="6">Icon1</td>
<td>Color</td>
<td>RGBA(255,255,255,1)</td>
</tr>
<tr>
<td>Witdh</td>
<td>48</td>
</tr>
<tr>
<td>Height</td>
<td>48</td>
</tr>
<tr>
<td>X</td>
<td>12</td>
</tr>
<tr>
<td>Y</td>
<td>20</td>
</tr>
<tr>
<td>OnSelect</td>
<td>Back(ScreenTransition.Fade)</td>
</tr>
<tr>
<td rowspan="6">Icon2</td>
<td>Color</td>
<td>RGBA(255,255,255,1)</td>
</tr>
<tr>
<td>Witdh</td>
<td>48</td>
</tr>
<tr>
<td>Height</td>
<td>48</td>
</tr>
<tr>
<td>X</td>
<td>580</td>
</tr>
<tr>
<td>Y</td>
<td>20</td>
</tr>
<tr>
<td>OnSelect</td>
<td>If(Form1.Mode=FormMode.New, 
    'BusinessCard-Insert'.Run(DataCardValue1.Text, DataCardValue2.Text,
        DataCardValue3.Text, DataCardValue4.Text, DataCardValue5.Text));
If(Form1.Mode=FormMode.Edit,
    'BusinessCard-Update'.Run(BrowseGallery1.Selected.PrimaryId, DataCardValue1.Text,
        DataCardValue2.Text, DataCardValue3.Text, DataCardValue4.Text, DataCardValue5.Text));
Back(ScreenTransition.Fade)</td>
</tr>
<tr>
<td rowspan="7">Icon3</td>
<td>Color</td>
<td>RGBA(255,255,255,1)</td>
</tr>
<tr>
<td>Witdh</td>
<td>48</td>
</tr>
<tr>
<td>Height</td>
<td>48</td>
</tr>
<tr>
<td>X</td>
<td>516</td>
</tr>
<tr>
<td>Y</td>
<td>20</td>
</tr>
<tr>
<td>OnSelect</td>
<td>'BusinessCard-Delete'.Run(BrowseGallery1.Selected.PrimaryId);
Back(ScreenTransition.Fade)</td>
</tr>
<tr>
<td>Visible</td>
<td>If(Form1.Mode=FormMode.New, false, true)</td>
</tr>
<tr>
<td>LblAppName2</td>
<td>Text</td>
<td>If(Form1.Mode=FormMode.New, "追加", Concatenate("更新 (", BrowseGallery1.Selected.PrimaryId, ")"))</td>
</tr>
<tr>
<td>Form1</td>
<td>Item</td>
<td>BrowseGallery1.Selected</td>
</tr>
</table>

# 動作確認
以上で、アプリの作成は完了であるが、アプリが正常に動作するか確認してみよう。PowerApps スタジオのウィンドウ上で動作確認するには、PowerApps スタジオの画面右上にある ![image](https://qiita-image-store.s3.amazonaws.com/0/153436/de55da5e-a88a-b4d7-9810-26977186b87a.png) をクリックすることでアプリが起動する。
動作確認はどの画面からでもスタートできるので、名刺リスト画面 (Screen1) が表示されている状態で  ![image](https://qiita-image-store.s3.amazonaws.com/0/153436/de55da5e-a88a-b4d7-9810-26977186b87a.png) をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/bd06a392-3a25-9c48-bac4-3906cf7ffd51.png)

動作確認のアプリが起動する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/36efed93-179f-956b-9d6e-14c63e0111e0.png)

追加 → 更新 → 削除 の流れを試してみよう。まずは ![image](https://qiita-image-store.s3.amazonaws.com/0/153436/7c7b1f82-7cec-b9df-36fb-718b08ea620b.png) アイコンをクリックして、追加モードで名刺詳細画面に遷移する。各フィールドに適当な値を入力して ![image](https://qiita-image-store.s3.amazonaws.com/0/153436/4eef61fb-ae1a-316d-a9cf-ca542ab7c514.png) アイコンをクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/7729ecc7-749b-0017-9931-6da8de2bceca.png)

名刺リスト画面に戻り、追加した名刺が表示されていることが確認できる。
※名刺リスト画面に戻ってもリストが更新されない場合は、![image](https://qiita-image-store.s3.amazonaws.com/0/153436/a391b90d-8116-f6d5-de3c-eb02a1524658.png) アイコンをクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/a604a112-87fa-b20c-7589-1ebe96e23c40.png)

Slack に、名刺を追加したことが通知されていることを確認する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/6fecea07-13e6-adaa-d963-a96e7a358f03.png)


続いて、作成した名刺の ![image](https://qiita-image-store.s3.amazonaws.com/0/153436/6fe1fb12-9dde-77b2-d227-556216a29f7c.png) アイコンをクリックして、編集モードで名刺詳細画面を表示する。各フィールドには、この名刺のデータが表示されているので、適当に値を変更して ![image](https://qiita-image-store.s3.amazonaws.com/0/153436/4eef61fb-ae1a-316d-a9cf-ca542ab7c514.png) アイコンをクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/fd338761-70e0-6bd0-382b-300d7aaebe62.png)

名刺リスト画面に戻り、更新した名刺が表示されていることを確認する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/2cf22bbc-fcae-1f62-5f8c-f8da246e545e.png)

Slack に、名刺が更新されたことが通知されていることを確認する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/23a18b48-3e52-9858-8d42-207aa22d93a4.png)

検索テキストボックスに、更新した名刺のメールアドレスを指定する。名刺が条件により絞られることを確認する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/9ffd64bd-870b-9f16-5d74-60b77691b45f.png)

最後に、この名刺の ![image](https://qiita-image-store.s3.amazonaws.com/0/153436/6fe1fb12-9dde-77b2-d227-556216a29f7c.png) アイコンをクリックして、編集モードで名刺詳細画面を表示し、![image](https://qiita-image-store.s3.amazonaws.com/0/153436/b5a7074a-eff9-9025-f9c0-0b24e5b5e318.png) アイコンをクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/75de2994-5f92-1c13-3730-db954156c615.png)

名刺リスト画面に戻り、この名刺が表示されなくなる（削除されている）ことを確認する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/3832488b-b2d0-70aa-c720-26f814ab338d.png)

Slack に、名刺が削除されたことが通知されていることを確認する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/7408cf69-700b-f612-530d-7e5c5083c36f.png)

動作確認が終了したら、![image](https://qiita-image-store.s3.amazonaws.com/0/153436/6bf80eef-0eb4-f57e-9720-7d76ac115afa.png) をクリックして、アプリを閉じる。

# アプリの保存
アプリを保存するには、[ファイル] をクリックし、[アプリ名] に適当な名前を付けて、[保存] をクリックする。ここではアプリ名を "BusinessCardList" とする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/8064df19-5eda-682f-4c46-4773506a9d30.png)

# アプリの共有と実行
作成したアプリを組織内で共有する場合は、PowerApps スタジオの [ファイル] タブをクリックし、メニューから [共有] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/165526b3-51bb-5579-1f94-b401f9afeafb.png)

Web ブラウザで PowerApps ポータルが表示されるので、組織内のユーザーを指定する。組織全体に共有したい場合は、[組織と共有] をクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/9b721223-cb42-5e83-12fe-2f855ed9cb48.png)

アプリを実行するには、再生ボタンをクリックする。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/24df7891-f46d-819d-b9e8-cef6ba70c3c3.png)

Web ブラウザ上で、アプリを動かすことができる。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/f9cc93f0-b0bb-d39b-7dd9-03cb2c132dc4.png)

また、PowerApps スタジオの [開く] メニューからも、アプリを実行できる。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/54ea13ca-8ab3-3a8b-a9fd-8a9acae50fcb.png)

PowerApps スタジオでアプリが動作する。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/95ecca52-cc64-9739-5f85-8c04c3bde206.png)

スマホで PowerApps アプリを実行する場合は、スマホ用の PowerApps をダウンロードする。

* iPhone: https://itunes.apple.com/jp/app/powerapps/id1047318566?mt=8
* Android 端末: https://play.google.com/store/apps/details?id=com.microsoft.msapps&hl=ja

以下は iPhone で実行したときの画面である。このアプリは携帯電話レイアウトで作成しているので、ちょうど綺麗にディスプレイに収まるようになっている。
![image](https://qiita-image-store.s3.amazonaws.com/0/153436/28845f65-e9e3-d00e-dede-71d9283c748d.png)

# まとめ
PowerApps で名刺管理アプリを作成して思ったことは、とてもスピーディーに作成できることだ。もちろん、PowerApps のルールについてある程度勉強する必要はあるが、スクラッチ開発でプログラムを組みよりは、早くアプリを展開できるのではないかと感じた。
また、Microsoft Flow や様々なデータソースと簡単に接続できる点も魅力的である。既存のサービスと連携するアプリを開発することは容易ではないが、PowerApps ならば、あらかじめ用意されたデータソースの接続を利用するだけである。
作成したアプリをチーム内で共有することも、とても簡単でうれしいポイントである。アプリはもともとクラウド上に作成されるので、利用者への配布などは考える必要なく、アプリの実行も PowerApps を通して行うので、アプリをストアへ登録する必要もない。
ビジネスアプリの開発が必要になった場合は、PowerApps を検討するのも良い選択だろう。

# 参考文献
Customize a layout in PowerApps
https://powerapps.microsoft.com/ja-jp/tutorials/customize-layout-sharepoint/

EditForm, NewForm, SubmitForm, and ResetForm functions in PowerApps
https://powerapps.microsoft.com/ja-jp/tutorials/function-form/

Formula reference for PowerApps
https://powerapps.microsoft.com/ja-jp/tutorials/formula-reference/

Start a flow in an app
https://powerapps.microsoft.com/ja-jp/tutorials/using-logic-flows/

Share an app
https://powerapps.microsoft.com/ja-jp/tutorials/share-app/