8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

#PowerAppsについて
Microsoft Powerappsは、
ざっくり言うと、アプリを簡単に作れるアプリ
オフィシャルサイトはこちら
主な特徴は、

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

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

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

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

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

#各画面の設計
計6画面を作成。
##1:レシピ一覧画面
レシピの一覧を表示する画面で、このアプリのトップ画面。
検索窓に文字列を入力すると、それに引っかかるレシピのみが表示される。
レシピをタップすると2:レシピ詳細画面に遷移する。
「+」ボタンで、3:レシピ追加画面に遷移する。
レシピ一覧画面.png

##2:レシピ詳細画面
材料や作り方を表示する画面。
料理名や材料はRECIPEテーブルを参照している。
作り方はギャラリーUIで見せたかったので、
別テーブル持ち(FLOWテーブル)にしている。
「鉛筆」ボタンで、4:レシピ編集画面に遷移する。
「+」ボタンで、5:作り方追加画面に遷移する。
各作り方をタップすると6:作り方編集画面に遷移する。
レシピ詳細画面.png

##3:レシピ追加画面
新規レシピを追加する画面。
「✔️」ボタンで追加され、2:レシピ詳細画面に遷移する。
レシピ追加画面.png

##4:レシピ編集画面
レシピを編集する画面。
「✔️」ボタンで更新され、2:レシピ詳細画面に遷移する。
レシピ編集画面.png

##5:作り方追加画面
作り方を追加する画面。
RECIPE_NOとFLOW_NOは数式使ってデフォルト数字が入っている。
「✔️」ボタンで追加される。
5:作り方追加画面.png

##6:作り方編集画面
作り方を編集する画面。
「✔️」ボタンで更新され、2:レシピ詳細画面に遷移する。
6:作り方編集画面.png

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

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

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

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

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

#このアプリを作ってみての感想

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

#使ってみての感想

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

#微妙な点

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

#今後のアップデート予定

  • ジャンル(和食・洋食・中華)とか種類(主菜・副菜)とかのカラムを追加して、検索性をあげたい。
  • 調理履歴テーブルを作って、どのレシピがどれくらい作られたかのダッシュボード画面も作りたい。
8
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?