Power Appsを使用してプロトタイプ開発をした話

# この記事について
お客様に対して**Power Apps**を使用してヒアリングからプロトタイプの作成と提案までを一人で行うことになり、**こんな風に話を聞いて、こんなヒアリング結果を得て、データを整理して、Power Appsに取り込んだらこんなアプリができてこんな反応が返ってきたよ**という内容です。
初めての取り組みで稚拙な部分があると思いますがご容赦ください。

弊社の**Advent Calendar2019**に参加しております。

### 注意事項
　ここで使用しているデータは実際のプロトタイプ開発で使用したものとは異なります。
　ご注意ください。（さすがにそのまま出したらダメだと思ったので１から作りました）

# 使用するアプリ・サービス
* Excel
* Power Apps
* OneDrive

# Power Appsを使用することにした経緯
私の持っているスキルがPythonを使った計算作業に寄ってしまっていたため、人に使ってもらうものを作る技術が不足していました（業務ではRPAを担当）。
そんな中、顧客へのヒアリングを行う活動を始めることになり、**すぐに人に使ってもらうものを作る技術**が要求されるようになりました。
DJangoの勉強でもしようかと考えているところに先輩から**「良いモノが有るよ」**とおススメされたのが**Power Apps**です。

# Power Appsについて
Power AppsはMicrosoftの出しているローコーディング開発ツールです。
既存のデータベースだけでなく、Excel内のテーブルのデータに対しても参照・追加・更新をすることが出来ます。
詳しい対象に関しては[ここ](https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/connections-list)に書いてある通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/1d9bbde4-f4f3-4e62-a533-f114196f5427.png)


Power Appsというアプリをインストールすれば、スマホやタブレットからでもアプリケーションを使用することが出来ます。

[公式サイト](https://powerapps.microsoft.com/ja-jp/)

### 注意事項
残念ながら個人での利用はできないようです。
> 職場または学校のアカウントを持っていれば誰でも、Power Apps コミュニティ プランにサインアップできます。

職場でなく自分のアカウントで登録しようとしたらはじかれました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/38fe8b86-fe0b-7247-4779-c37dee9bdea7.png)

# ヒアリング開始！！！
初めて一人でヒアリングをすることになった私はまず現在の状態を聞きました。
聞き出した内容としては以下の通り。

* データは現在AccessとExcelを使って管理している
* このデータを外でも確認できるようにしたい
    * 外にデータを移しても大丈夫（クラウドの使用許可）

なるほどなるほど。Power Appsの出番だな。
というわけで紙の資料を貰ってそれを元に開発をしてみることに。

# プロトタイプ開発
## まずはどう実装するかを考える
Power Appsを初めて触るのでノロノロと開発を開始します。
相手にはパソコンとアプリに関する知識があまりないと想定します。
（私への対応をしてくださった方は詳しそうでしたが例外みたいです）

そこで画面の項目を一つずつ選択していって最終的にデータを一つに絞るような画面構造にします。
イメージ的には最初から全ての情報に対する検索をするのではなくて、ショッピングサイトなどでジャンルを一つずつ選択していって商品を見つけるようなイメージです。

## 使用するツールを考える
さすがにAccessのデータは貰えなかったので、プロトタイプはExcelを使ってデータを仮で作成することにしました。
みんな大好きExcel。

開発ツールは題名の通りPower Appsです。Excelから簡単に画面を作成することができる点と、スマホなどに対応していることから今回の開発にマッチしていると考えました。教えてくださった先輩に感謝します。

## データを見てみる
段々と絞り込んでいく構造にするので、マスタを一覧にまとめていきます。
調べてみると大体４階層くらいになることがわかりました。
まずは**施設マスタ**（ほぼ追加はない）

|    施設_No|      施設名|
|:---------:|-----------:|
|          1|    ✖✖施設|
|          2|    〇〇施設|

次に施設内に存在するフロアをまとめた**フロアマスタ**（ほぼ追加はない）

|    施設_No|   フロア_No|     フロア名|
|:---------:|:---------:|-----------:|
|          1|          1|      フロアA|
|          1|          2|      フロアB|
|          1|          3|      フロアC|
|          2|          1|      フロアD|
|          2|          2|      フロアE|
|          2|          3|      フロアF|

次はマスタはフロア内に存在する設備をまとめた**設備マスタ**（たまに変更・追加・削除有）

|    施設_No|   フロア_No|     設備_No|     設備名|
|:---------:|:---------:|-----------:|----------:|
|          1|          1|           1|      設備A|
|          1|          1|           2|      設備B|
|          1|          2|           1|      設備C|
|          1|          2|           2|      設備D|
|          1|          3|           1|      設備E|
|          1|          3|           2|      設備F|
|          2|          1|           1|      設備G|
|          2|          1|           2|      設備H|
|          2|          2|           1|      設備I|
|          2|          2|           2|      設備J|
|          2|          3|           1|      設備K|
|          2|          3|           2|      設備L|

最後に設備に対応する**点検データ**です。

|    施設_No|   フロア_No|     設備_No|点検_No|     点検日|点検内容1評価|点検内容2評価|
|:---------:|:---------:|-----------:|----------:|----------:|:---------:|:---------:|
|          1|          1|           1|1| 2018/10/10|A|A|
|          1|          1|           1|2| 2019/10/10|A|A|
|          1|          1|           2|1| 2018/10/10|A|A|
|          1|          1|           2|2| 2019/10/10|A|A|
|          1|          2|           1|1| 2018/10/10|A|A|
|          1|          2|           1|2| 2019/10/10|A|A|
|          1|          2|           2|1| 2018/10/10|A|A|
|          1|          2|           2|2| 2019/10/10|A|A|
|          1|          3|           1|1| 2018/10/10|A|A|
|          1|          3|           1|2| 2019/10/10|A|A|
|          1|          3|           2|1| 2018/10/10|A|A|
|          1|          3|           2|2| 2019/10/10|A|A|
|          2|          1|           1|1| 2018/10/10|A|A|
|          2|          1|           1|2| 2019/10/10|A|A|
|          2|          1|           2|1| 2018/10/10|A|A|
|          2|          1|           2|2| 2019/10/10|A|A|
|          2|          2|           1|1| 2018/10/10|A|A|
|          2|          2|           1|2| 2019/10/10|A|A|
|          2|          2|           2|1| 2018/10/10|A|A|
|          2|          2|           2|2| 2019/10/10|A|A|
|          2|          3|           1|1| 2018/10/10|A|A|
|          2|          3|           1|2| 2019/10/10|A|A|
|          2|          3|           2|1| 2018/10/10|A|A|
|          2|          3|           2|2| 2019/10/10|A|A|

今回はこの点検データの過去の履歴をスマホなどから見えるようにしたいとのことです。
実際にはこのデータに画像データも紐づいていて、画像と見比べながら点検・評価を行っていきます。

また、データの内容等に関しては説明用に作成したものです。

## Excelを元にPower Appsでアプリを作成する
上のデータをまとめたExcel（zip圧縮）を[ここ](https://drive.google.com/file/d/1grgCOLeV0euxzSZnNoEQKUPfW8bXOzKv/view?usp=sharing)に置いておきます。
このExcelデータをもとに加工をせず取り込んで画面を作っていきます。

作成期間は5日間でしたが、実際にデータを見てExcelの内容を固めてアプリを作成をしたのは１日です。
作成したアプリケーションは以下の画像のようになりました。
（画像はスマホから起動した場合のモノです）


**施設マスタの選択画面**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/d74e59ec-8e9d-2677-c10d-b04a5a4288ab.png)
**フロア選択画面**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/e6f19182-02a2-4dcd-96b7-1387e1086f85.png)
**設備選択画面**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/f364c1b6-9fcd-c42c-4251-34172c3d5eae.png)
**点検履歴**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/b36fddba-d39f-8292-2232-ec51f7144b0b.png)
**履歴詳細**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/9b625b3c-33dc-974b-12a3-365033cb1ab7.png)

一応データ参照までは作ることができました。
ページの遷移については少しプログラムチックなものを書かなければなりませんが、あとは感覚的にサイズ変更やアイコンの追加などを行うことが出来て非常に便利です。

プロトタイプの作成には１日かかりましたが、今回は**1時間程度**で作成することが出来ました。

## 画像データの追加ができるのか？
あとはデータの追加なのですが、これはテキストデータならできることは分かっていたので画像の追加についてどのようになるのかも確認しました。

**画像追加画面**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/2373828b-8a84-39ff-6506-5682fd94fd1c.png)
**写真撮影**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296240/18fc3896-0b0e-e171-c278-a888a28fcd90.png)

カメラを起動して撮影・登録までできることが出来ました。
ただ問題点としては保存先を指定することができないので、設備ごとにフォルダ分けをすることができないことです。

# プロトタイプを見せてみる
今回はデータを外から簡単に確認できるようにしたいということだったのでスマホで動かしながらイメージを伝えました。
実際の画面があるとお客様も使用しているイメージが具体化されて、

* この画面にはこの情報が欲しい
* 登録情報にはコレとコレが入力できるようにしてほしい
* 表示する画像は一覧形式にしてずらっと並べられると良い
* 点検内容詳しい内容についても表示できると嬉しい
* その他多数

といった明確な案を私に伝えてこられるようになりました。

# まとめ
非常につたないアプリ作成をお見せしてしまい申し訳ございません。
今回の開発は素早い開発がお客様や開発側（私）に対してどのようなメリットがあるのかといった事がよくわかりました。

* 早期にお互いの認識の違いの確認ができる
* 具体的なアイデア出しが促進できる
* 現場で使用ことを想像しやすい

今回はPower Appsを使用してプロトタイプを作成しましたが、本番をPower Appsで作成するかは分かりません。
ですが、上記のメリットを考えると、PoweAppsのような素早くモノを作れる技術というのは習得しておいて絶対に損はないものだと考えます。

# 予定
Power Appsを使用したアプリ開発については今後投稿していきます。
また、使っていて面白いツールでしたので、自分なりに工夫して使えるようになりたいと思います。