【Microsoft PowerApps】コーディングなしで出欠管理アプリを作ろう！

# はじめに
Office365の機能に、PowerAppsというコーディングなしでアプリが作れるという優れものがあるということで、
試しにイベントの出欠管理アプリを作ってみました。

PowerAppsとは？
https://docs.microsoft.com/ja-jp/powerapps/
<img width="1435" alt="スクリーンショット 2018-08-20 8.10.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/69416ec1-ff14-9044-b1a0-ef1d71d7b5a1.png">

今回、OneDrive上のExcelをデータソースとして作成する形をとりました。

# 手順

## データソースを用意する

画像のようなExcelを用意しました。
<img width="1437" alt="excel.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/be6da007-22ec-e3d0-d9de-f61ed1080fef.png">

これをOneDriveに保存します。

## PowerAppsでアプリを新規作成する

1. PowerAppsを開きます。
https://web.powerapps.com/home

2. 「アプリの作成」を選択します。
<img width="1434" alt="pa-top.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/0242d117-f591-4f52-16d8-42a8e88ef469.png">

3. 「OneDrive for Bussiness」の「携帯電話レイアウト」を選択します。
<img width="1440" alt="DataSource-1.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/6e674c6c-c712-f806-35f8-e115216914d2.png">

4. 先に作っておいたExcelの出欠表を選択します。
<img width="1440" alt="Datasource-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/5b03a241-03c3-535b-2299-705b99456c06.png">

5. テーブル１を選択します。
![Datasource-3-2.png](https://qiita-image-store.s3.amazonaws.com/0/147118/63a5115c-660d-5b37-932a-2ee8db916109.png)

6. エディター画面が開きます。
なんと勝手にリストになり、詳細画面と編集画面が備わっています。
<img width="1438" alt="appdefault.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/ff6991b9-3c36-b561-fa66-07c85cd51e81.png">

7. 項目をいじってみる
まずはリスト上でNo.がでていますが、これを氏名に変えていきます。
左側のツリーから「Title1」を選択します。
右のプロパティウィンドウ的なところから「詳細設定」＞「データ」＞「text」が`ThisItem.No`となっているところを
`ThisItem.氏名`に変えます。すると画像のように名前が表示されるかと思います。
<img width="1438" alt="changename.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/1c236bde-05e8-5f91-ed56-144bfd5a1d93.png">

次に、出欠の有無と既に集金しているかどうかといった項目を作っていきます。
ツリーから「BrowseGallery1」を選択すると、プレビューのリストの左上に鉛筆のマークが出ていますので、そこをクリックしても編集していけます。
<img width="1437" alt="editcanvas.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/b19ae739-7a73-eb79-a12f-0a10a19dd5fa.png">

「挿入」タブから「ラベル」を選択して「出欠」、「集金」というラベルを作ります。（「ホーム」タブの中にフォントサイズ等あります）
ツリーの「Body1」を選択し、コピー＆ペーストすると「Body1_1」ができて、それの「詳細設定」＞「データ」＞「Text」を`ThisItem.集金`に変更していきます。
あとは位置をちょちょっと合わせて、完成！！
<img width="1440" alt="editcanvas-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/a15e00a7-411b-f890-17f5-b1ad2b137f0a.png">

いっちばん右上の再生ボタン（▷）でプレビューを見ることができます。
<img width="1439" alt="list-preview.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/f4b2060d-8801-0eb5-b97f-6b3b18f756e4.png">

オォ～～

## 詳細画面を開いてみる
リストひとつずつに「>」というリンクがついていると思います。
これを押下すると、そのリストのデータ詳細画面に遷移します。
<img width="1438" alt="detail-preview.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/1083cda3-a5e2-407a-2df9-7a17be44a458.png">

## 編集画面を開いてみる
さらに右上のえんぴつマークをクリックすると編集画面に遷移します。
<img width="1438" alt="edit-preview.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/5e6de015-3ae2-9043-664e-e18ba0ec44d4.png">

## データを更新してみる
鈴野さんの出欠に"〇"を入力し、画面右上のチェックをクリックするとデータが更新されます。

リストに戻って確認してみると･･･
<img width="1440" alt="result-preview.png" src="https://qiita-image-store.s3.amazonaws.com/0/147118/1ab10df4-aca8-68fd-22ee-868288669555.png">

〇がついてますね！！
OneDriveのExcelを確認してみると、しっかりと更新されています。

# 感想
Ofiiceのリソースに簡単にアクセスできるのは便利ですし、Excelでのデータ管理を補助するようなアプリが作れそうです！

意外と情報が見つからなかったので、作り込むのは結構難しそう･･･？
いい情報があれば是非教えてくださいm(__)m