PowerAppsでストレージ計算ツールを作成


前回、初めてのPowerAppsのアプリを作成しました（[第１部](http://qiita.com/firehouse-harris/items/bd0df78ac90c9e48336e)、[第２部](http://qiita.com/firehouse-harris/items/2a4fd5d9e3b483f97aa1)、[第３部](http://qiita.com/firehouse-harris/items/4f7ad52e3373182f7d19)）。

PowerAppsのプラットホームの機能をもっと調べるために、もう一つのPowerAppsのアプリを作成してみました。

## 前提条件

- Excel 
- Microsoftの職場または学校のアカウントが必要です。普通の個人的なWindowsやSkypeのアカウントは使えないのでご注意ください。職場または学校のアカウントを持っていない方は[無料でサインアップ](https://powerapps.microsoft.com/ja-jp/)ができます。


## 目的

ここでは、防犯カメラのビデオが必要なストレージを計算するアプリを作成したいと仮定します。

必要なストレージを計算するために、様々な情報が必要です。


- カメラ数
- 録画時間：カメラが一日に何時間録画したか
- FPS：カメラのフレーム毎秒)
-　フレームサイズ：平均のフレームは何KB
- 保存期間：録画したビデオを削除まで何日間保存するのか

必要なストレージを計算する式は以下です。

```
カメラ数 x 記録時間 x 60 x 60 x FPS x フレームサイズ x 保存期間 / 1024 / 1024
```

2回`1024`に割る理由は数をKBからGBに変更するためです。

ユーザーは普通に平均のフレームサイズを知らないはずですから、以下の表のデータを利用して、選択されるエンコーディングと画質によって、フレームサイズを自動的に決めます。

| Encoding |        Resolution       | Frame Size (KB) |
|----------|-------------------------|-----------------|
| MPEG-2   | 1-Megapixel (1280x2014) |              15 |
| MPEG-2   | 2-Megapixel (1600x1200) |              22 |
| MPEG-2   | 3-Megapixel (2048x1536) |            36.4 |
| MPEG-4   | 1-Megapixel (1280x2014) |             8.3 |
| MPEG-4   | 2-Megapixel (1600x1200) |            12.2 |
| MPEG-4   | 3-Megapixel (2048x1536) |            20.2 |



以上のデータは[こちら](https://www.supercircuits.com/resources/tools/security-nvr-storage-calculator)から入手しました。

## 静的なデータを用意

新規Excelスプレッドシートを開いて、以上のテーブルをコピペします。セルを全部選択して、`挿入`のメニューの`テーブル`のボタンを押します。次のダイアログで`先頭行をテーブルの見出しとして使用する`をオンにして、`OK`を押します。

![create-excel-table.png](https://qiita-image-store.s3.amazonaws.com/0/153003/be98cb33-f1ab-c972-ab56-874a68a55dc9.png "create-excel-table.png")

挿入したテーブルが選択したまま、デザインのメニューで`テーブル名`を`FrameSizeData`に変更します。

![name-table.png](https://qiita-image-store.s3.amazonaws.com/0/153003/fe088072-c218-f8fd-5728-ae0ad9098eef.png "name-table.png")


書類を保存して、Excelを終了します。

## 新規アプリを作成

PowerAppsのウェブサイトにサインインして、ホーム画面で`作業の開始`のボタンを押します。

![new-app.png](https://qiita-image-store.s3.amazonaws.com/0/153003/bcf33c5e-3ac3-2233-bc87-1d5b125d6ee8.png "new-app.png")


次のダイアログでWindows用のPowerApps StudioまたはWeb用のPowerApps Studioを選択してください。この記事ではWindows用のPowerApps Studioを利用しますが、どちらでも使っても大丈夫です。

PowerApps Studioで`新規`のセクションに移動して`空のアプリ`の`タブレットレイアウト`のボタンを押します。

![empty-app.png](https://qiita-image-store.s3.amazonaws.com/0/153003/5775d132-d5cb-3885-10aa-5a43108f9922.png "empty-app.png")

アプリのビルドが終わったら、以下のような空の画面が見えます。

![start.png](https://qiita-image-store.s3.amazonaws.com/0/153003/137f0d3a-e791-959d-8ed3-e13da7e40a6e.png "start.png")


## データソースに接続

右側の`オプション`のメニューで`データソース`を押して、`データソースの追加`のボタンを押します。

![add-data-source.png](https://qiita-image-store.s3.amazonaws.com/0/153003/3d3240c7-7f99-cd59-ee67-dc4178aaa481.png "add-data-source.png")

`静的データをアプリに追加します`を選択します。

![select-source.png](https://qiita-image-store.s3.amazonaws.com/0/153003/217d510b-cd6b-f776-c236-54aa59ede9b7.png "select-source.png")

以前保存した書類を選択して、`FrameSizeData`のテーブルを選択して、`接続`のボタンを押します。

![frame-data.png](https://qiita-image-store.s3.amazonaws.com/0/153003/ac4b73f6-0db5-1351-25d5-a64e5ed0ea25.png "frame-data.png")


## 計算するフォームを構築

PowerApps Studioでアプリに追加するテキストボックスやコントロールなどのオブジェクトは全部名前が付いています。名前を変更する場合、オブジェクトを選択して、`ホーム`のメニューでタグのアイコンのボタンを押して、新しい名前を設定することができます。この名前はフォールミュラで参照することができるので、普通に英数字を利用します

今から、様々なオブジェクトの名前を変更するので、以上の変え方を利用してください。

まず、左側のメニューの`Screen1`を選択して、名前を`Main`に変更します。

![rename-screen.png](https://qiita-image-store.s3.amazonaws.com/0/153003/276b8374-e12b-d956-f403-69ab519181c0.png "rename-screen.png")


オブジェクトのプロパティを編集する方法は２つあります。一つのは項目が選択するとき、画面の上に以下のようなプロパティエディターを利用します。左のドロップダウンメニューで編集するプロパティを選択して、右側のフォームでプロパティの値を編集するができます。

![top-editor.png](https://qiita-image-store.s3.amazonaws.com/0/153003/9a211234-35cb-5d45-c433-66afdc552e5f.png "top-editor.png")

もう一つのは項目が選択されるとき、右側の`詳細設定`のメニューでその項目のプロパティが全部表示されて、各プロパティのフォームで編集することができます。

今から様々なオブジェクトのプロパティを編集するので、以上の方法を利用してください。

左側のメニューで`Main`の画面を選択します。右側の`オプション`のメニューでレイアウトのセクションの左上のレイアウトを押します。レイアウトで追加されたタイトルのオブジュエクトの`Text`のプロパティを`"防犯カメラの必要なストレージ計算ツール"`に設定します。

タイトルの下のカードを選択して、`挿入`の`テキストボックス`を押します。追加したテキストボックスの`Text`のプロパティを`エンコーディング`にします。

またカードを選択して、`挿入`の`コントロール`のメニューで`ラジオ`を選択します。追加したラジオを以前追加したテキストボックスの右に移動して、名前を`EncodingRadio`に変更します。そして、`Item`のプロパティに以下の値を与えます。

```
Distinct(FrameSizeData, Encoding)
```

もし`FrameSizeData.Encoding`を与えたら、`Encoding`の行を全部利用するので、３つの`MPEG-2`と３つの`MPEG-2`のラジオになります。`Distinct`はコレクションの一意の値だけ戻します。最初の引数はコレクションで、2番目の引数は項目の手に入れたいフィールドや欄の名前です。

![encoding-field.png](https://qiita-image-store.s3.amazonaws.com/0/153003/1e58a1dc-a6b2-c232-3122-d1847f22b1fa.png "encoding-field.png")

そして、ラジオの`Default`のプロパティを`"MPEG-2"`にします。

それから、以前のように以下の項目を挿入してプロパティと名前を設定します。

- 挿入 -> テキストボックス
	- Text: `"画質"`
- 挿入 -> コントロール -> ラジオ
	- 名前は`ResolutionDropDown `に変更
	- Items: `Distinct(FrameSizeData, Resolution)`

- 挿入 -> テキストボックス
	- Text: `"カメラ数"`
- 挿入 -> テキスト -> テキスト入力
  - 名前は`NumberOfCameras `に変更
  - Default: `1`
  - TextFormat: `TextFormat.Number`


- 挿入 -> テキストボックス
	- Text: `"記録時間"`
- 挿入 -> コントロール -> スライダー
	- 名前は`HoursPerDay`に変更
	- Min: `1`
	- Max: `24`
	- Default: `16`

- 挿入 -> テキストボックス
	- Text: `"フレーム毎秒"` 
- 挿入 -> コントロール -> スライダー
	- 名前は`FPS`に変更
	- Min: `1`
	- Max: `30`
	- Default: `5`

- 挿入 -> テキストボックス
	- Text: `"保存期間（日間）"` 
- 挿入 -> コントロール -> スライダー
	- 名前は`DaysToStore`に変更
	- Min: `1`
	- Max: `90`
	- Default: `7`


以上の項目を追加して、少し見た目を工夫したてから以下のようにならました。

![form.png](https://qiita-image-store.s3.amazonaws.com/0/153003/ebdf9817-739b-6cad-31bb-77ffbc2fa2e4.png "form.png")


## 結果を表示

画面の開いている右半分にテキストボックスを挿入して、`Text`のプロパティを`"必要なストレージ"`にします。目立つように`Size`のプロパティを`36`にします。

そのテキストボックスの下にもう一つのテキストボックスを挿入します。`Text`のプロパティに以下の値を与えます。

```
Text(LookUp(FrameSizeData, Encoding = EncodingRadio.Selected.Value && Resolution = ResolutionDropDown.Selected.Value).'Frame Size (KB)' * NumberOfCameras * HoursPerDay * FPS * DaysToStore * 60 * 60 / 1024 / 1024, "[$-ja]###,###.## GB")
```

以上のコードに２つの関数があります。

- `Text`は数や日付をテキストにする関数です。`Text`を呼び出さないと数字は桁区切り記号がなくて小数を四捨五入されないまま表示されます。`Text`に表示したい数字の形を与えます。参照[はこちら（英語）](https://powerapps.microsoft.com/ja-jp/tutorials/function-text/)。

- `LookUp`は与えるデータソースのテーブルを与える条件と合っている項目を検索して、最初合う項目を戻します。今回はユーザー選択したエンコーディングと画質と合う項目を探します。参照[はこちら（英語）](https://powerapps.microsoft.com/en-us/tutorials/function-filter-lookup/)。

それに、`LookUp`が戻す項目の`Frame Size (KB)`を入手するため、`.`の後で、`'`（シングルクォート）を利用します。フィールドの名前はスペースや英数字以外の文字が入っている場合、`'`が必要です。テキストの場合、`"`のダブルクォーテーションを利用しますが、フィールドやテーブルの名前の時は`'`を利用しなくてはいけません。

好みによって、フレームサイズのテキストボックスの見た目を工夫してから、右上隅のプレビューのボタンを押します。

![preview-button.png](https://qiita-image-store.s3.amazonaws.com/0/153003/c98a2704-cb96-88ec-e230-e21163e265aa.png "preview-button.png")


フォームで様々の設定を試してどのぐらいのストレージが必要を確認して見てください。

![preview.png](https://qiita-image-store.s3.amazonaws.com/0/153003/c47f8f35-e9aa-f01a-9dc4-e309b424659d.png "preview.png")

これで完成です。

## まとめ

今回、PowerAppsのフォームの機能、タブレットのレイアウト、様々便利な関数をアプリ作りながら調べて、勉強になりました。