PowerAppsで料理レシピアプリを作ってみた

#PowerAppsについて
Microsoft Powerappsは、
ざっくり言うと、**アプリを簡単に作れるアプリ**。
[オフィシャルサイトはこちら](https://docs.microsoft.com/ja-jp/powerapps/)
主な特徴は、

- ノンコーディングで作成できる（excelみたいな数式を使う）
- ExcelやSharePointといったデータソースと接続できる（参照や更新）
- 作成したアプリは、第三者と共有できて、PC/スマホ/タブレットから使える

といったところ。
職場では日報アプリを作ったり、プログラミング言語の逆引きアプリを作ったりしていた。
今回は、プライベートで料理レシピアプリを作ってみた。

#作成したアプリの概要
自分が作ったことのある料理のレシピを一元化したもの。
CookPadやクラシルを使っていたが、
「この料理はどっちにあったっけ？」とかがめんどくさかったので、
一元管理したかった。

- 料理一覧を閲覧でき、検索できる
- 詳細画面で材料や調理手順を閲覧できる
- レシピを登録、更新できる

CookPadにもマイレシピ機能があるが、
あれの個人版みたいなもの。
（UIを自分用に使いやすくした感じ）

#各画面の設計
計6画面を作成。
##1：レシピ一覧画面
レシピの一覧を表示する画面で、このアプリのトップ画面。
検索窓に文字列を入力すると、それに引っかかるレシピのみが表示される。
レシピをタップすると**2：レシピ詳細画面**に遷移する。
「+」ボタンで、**3：レシピ追加画面**に遷移する。
<img width="200" alt="レシピ一覧画面.png" src="https://qiita-image-store.s3.amazonaws.com/0/281922/a7208bdf-1d06-0eb2-16b1-069dae9b8a39.png">

##2：レシピ詳細画面
材料や作り方を表示する画面。
料理名や材料はRECIPEテーブルを参照している。
作り方はギャラリーUIで見せたかったので、
別テーブル持ち（FLOWテーブル）にしている。
「鉛筆」ボタンで、**4：レシピ編集画面**に遷移する。
「＋」ボタンで、**5：作り方追加画面**に遷移する。
各作り方をタップすると**6：作り方編集画面**に遷移する。
<img width="200" alt="レシピ詳細画面.png" src="https://qiita-image-store.s3.amazonaws.com/0/281922/c686f659-9354-d834-afba-ffd845faf6f2.png">

##3：レシピ追加画面
新規レシピを追加する画面。
「✔️」ボタンで追加され、**2：レシピ詳細画面**に遷移する。
<img width="200" alt="レシピ追加画面.png" src="https://qiita-image-store.s3.amazonaws.com/0/281922/55e0a7a9-a03c-2d58-d5c3-4bb720bbaf78.png">

##4：レシピ編集画面
レシピを編集する画面。
「✔️」ボタンで更新され、**2：レシピ詳細画面**に遷移する。
<img width="200" alt="レシピ編集画面.png" src="https://qiita-image-store.s3.amazonaws.com/0/281922/71628019-5854-afb7-2a9d-1b4f65b94311.png">

##5：作り方追加画面
作り方を追加する画面。
RECIPE_NOとFLOW_NOは数式使ってデフォルト数字が入っている。
「✔️」ボタンで追加される。
<img width="200" alt="5：作り方追加画面.png" src="https://qiita-image-store.s3.amazonaws.com/0/281922/555242f9-e733-4e45-711d-feac038f5971.png">

##6：作り方編集画面
作り方を編集する画面。
「✔️」ボタンで更新され、**2：レシピ詳細画面**に遷移する。
<img width="200" alt="6：作り方編集画面.png" src="https://qiita-image-store.s3.amazonaws.com/0/281922/7e1b938f-8bd5-2c41-6f6d-671c184da708.png">

#データベース
##RECIPEテーブル
レシピの主要情報を保持するテーブル。
1レシピにつき1レコードの構造。
RECIPE_NOカラムがユニークkey。
SharePointのリストで管理。

|カラム名           |データ型            |例|
|:----------------|:-------------------|:--|
|RECIPE_NO        |数値                |1|
|RECIPE_TITLE     |１行テキスト          |肉豆腐|
|RECIPE_TITLE_KANA|１行テキスト          |ニクドウフ|
|IMAGE            |ハイパーリンクまたは画像|https://hoge.sharepoint.com/sites/PowerApps/COOK/%E3%83%8|
|INGREDIENTS      |複数行テキスト        |木綿豆腐：1丁<br>牛肉バラ：200g<br>玉ねぎ：1/2個|
※IMAGEには、そのレシピの画像をアップしているURLを入れている。

##FLOWテーブル
レシピの作り方手順情報を保持するテーブル。
レシピの1工程につき1レコードの構造。
RECIPE_NO×FLOW_NOでユニーク。
SharePointのリストで管理。

|カラム名           |データ型            |例|
|:----------------|:-------------------|:--|
|RECIPE_NO        |数値                |1|
|FLOW_NO          |数値                |6|
|FLOW_CONTENT     |複数行テキスト        |弱火で7-8分煮込む。|

##画像ファイル
SharePointにフォルダ作ってそこにアップしている

#このアプリを作ってみての感想
- だらだらと作っていたが、だいたい１週間くらいで作れた。
- 詳細画面で、FLOWテーブルを参照するのに結構難儀した。GalleryでItemsプロパティに**Filter(FLOW,RECIPE_NO=DataCardValue1.Text)**で抽出。（DataCardValue1にはレシピのRECIPE_NOが格納されている）

#使ってみての感想
- 自分の引き出しにあるレシピを一覧で見れるのはとても楽。
- 細かいUIが完全自分好みに作っているので、その点のストレスが少ない。

#微妙な点
- 画像の読み込みが遅い。画面描画から数秒かかる。（まぁしょせん料理イメージだから良いが）
- FLOWテーブルの読み込みが遅い。（filterとかでややこしいことしているからか？）
- たまにタップしても動かなかったりする。

#今後のアップデート予定
- ジャンル（和食・洋食・中華）とか種類（主菜・副菜）とかのカラムを追加して、検索性をあげたい。
- 調理履歴テーブルを作って、どのレシピがどれくらい作られたかのダッシュボード画面も作りたい。