Power AppとExcelを使ってアプリ開発　その１：初めてのアプリ編

# この記事について
この記事はPower Appsを使用してExcelのデータから簡単なアプリを一つ作ってみるというものです。
つたない点もあるかとは思いますが、ご容赦ください。

[前回の話](https://qiita.com/yokotate/items/737ca1a18926b10cdb24)
前回はプロトタイプ開発をどのように進めたのか・どういった反応があったかについて書きました。
今回は技術的にどうやって開発をしていくのかについて記事にしようと思います。

# 使用するソフトウェアとデータ
ソフトウェア

* Excel
* Power Apps
* OneDrive

### 注意事項
Power Appsは職場や学校などのアカウントでないと使用することが出来ません。
個人利用はできませんのでご注意ください。

データ
[Excelファイル](https://drive.google.com/file/d/1grgCOLeV0euxzSZnNoEQKUPfW8bXOzKv/view)

# 作成するアプリケーションの内容
施設内にある設備の点検データを検索するアプリケーションです。

施設 → フロア → 設備 → 点検履歴

といった感じで検索をして、最終的に必要なデータに到達するようにします。

# 開発開始！！！！
## データの準備
まずは使用するデータを用意します。
とはいえ、上の「使用するソフトウェア/データ」においてあるので、そこからZIPファイルをダウンロードして解凍するだけですが。
解凍すると**「施設管理.xlsx」**が出てきますので、それを自分の**OneDrive**の中に突っ込みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/2caf15ed-1f92-7aaf-cb4a-9f1580c91667.png)

これで完了です。

### Excelの中身
* シート１：施設マスタ
* シート２：フロアマスタ
* シート３：設備マスタ
* シート４：点検履歴

それぞれテーブル名です。

## 最初のアプリ開発
まずはPower Appsのページにアクセスします。
[Power Apps](https://make.powerapps.com/)
ログインをします。
すると以下のように画面が切り替わると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/183477d7-306d-1e85-6419-1624cb9dd4b1.png)
左のタブの中から作成を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/5c9807fb-93bd-b363-a482-803045296d62.png)
今回はExcelデータがすでに存在していますので**「データから開始」**の中にある**Excel Online**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/1701fd47-2932-379c-f35d-f1a0166ec036.png)

----ちょっと待機----

会社のアカウントのため一部塗りつぶしをしています。
先ほどExcelを保存したOneDriveを選択してその中にある「施設管理.xlsx」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/1fd24122-8535-3ac1-db39-254f0a639fd9.png)

次に使用するテーブルを選択します。
ここで選択したものが最初のページになります。
今回は一番最初に施設の選択をしたいので施設マスタテーブルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/726a56c3-d4a0-7fa4-7fc4-5c17ca8ab187.png)
次に右下に表示される**「接続ボタン」**を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/bbf91a35-5c7d-ffed-2bdd-4cabf2c1fc07.png)

----ちょっと待機----

待っていると無事にアプリケーションの画面が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/04263c5a-d263-5224-76e9-0933bb692db5.png)

## 画面構成
### ツール
画面の一番右側にあるのがツールです。
一番上の三のようなマークをクリックすると広げることが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/d951b025-98a4-2764-621e-de205b2dedc5.png)

* ツリービュー：アプリ画面の構成
* 挿入　　　　：アイコンや表示項目の追加
* データソース：必要なデータの追加・削除（Excelのテーブルなど）

高度なツールは試験段階らしいので無視します。

### ツリービュー
ツールでツリービューを選択した際に表示されるものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/38b0e656-f3e9-1050-b910-ccec99399e2a.png)
白い四角![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/b5eb99ed-922f-8ac5-f679-6a0199269670.png)が画面一つに対応しています。それを選択すると中に含まれている項目が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/9898869d-938f-87fd-b58d-b5d328f5078c.png)



## テストしてみる
この時点ですでにアプリケーションとして機能するので、ちょっと見てみましょう。
画面右上にある再生マークを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/b058fb68-4cd8-f889-d127-f238f35b6be5.png)
すると表示が切り替わりアプリケーションだけが画面上に表示されるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/6a53b7eb-fd6c-e03a-ddc3-2c61fd1e676b.png)
設備をクリックするとその詳細画面に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/7c722f10-319a-fb17-15da-07419ae7637f.png)
簡単にアプリが作成できることがわかりましたね。

# 予定
無事にアプリケーションを作ることが出来ました。
とはいえ、このままではまだ使えるアプリではありません。
テーブルは他に３種類ありますし、データの追加もできるようにしたいです。

次回からは画面の追加や表示項目の変更などについて書いていこうと思います。