食品の管理アプリを作ってみた

#きっかけ

元はこのtweet
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「無くなったアレ、何だっけ？」<br><br>何が無くなったのかをいつも忘れ、色々買いそびれる日用品の購入目安を可視化する <a href="https://twitter.com/hashtag/powerapps?src=hash&amp;ref_src=twsrc%5Etfw">#powerapps</a> アプリを作ってみました。<br>Automate で毎日残日数が減っていき、残日数が少なくなってきたら買い時。買ったら「買った」ボタンを押せば既定日数だけ加算される仕組み。 <a href="https://t.co/8pKeR2RdPv">pic.twitter.com/8pKeR2RdPv</a></p>&mdash; Jun’ichi Kodama (@KodamaJn) <a href="https://twitter.com/KodamaJn/status/1216269343509512192?ref_src=twsrc%5Etfw">January 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

Qiita記事:https://qiita.com/KodamaJn/items/2817ace2791041f4cc48


↑これを見て食品の管理できたらいいなーって単純に思った。買い物した後にこれ買い忘れた！とか時たまにいや…たくさんあるから、じゃー作ればいーじゃんってなったのがきっかけ

#イメージ

今回イメージは適当にちゃんと作ったんだ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/a2e3435c-7c49-28c7-014c-46fb76429a1a.png)

* **＋**を押すと一つ増える
* **－**を押すと一つ減る※でも－1にしたくない
* **空**に個数を入れる
* 新規で追加したものも画像と同じ形で登録したい
* **冷蔵庫**、**冷凍庫**、**保存食**は色を変えたい


#作ってみよー

###1.新しく**エンティティ**を作成する
必要なフィールドを追加する
　　表示名（データ型）
　・個数（整数）
　・冷蔵or冷凍or保存（テキスト）
 ※今回は「れいさん」で作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/229713eb-4238-0059-6e36-a94c44253083.png)

###2.Power Appsの画面を作成する
**1.** **挿入**→**ギャラリー**→**縦方向(空)**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/893ab25b-e77d-2965-9fbb-a2da3792d4ce.png)
**2.** 検索欄で**れいさん**と検索→commondataServiceの**れいさん**をクリック
※普通はデータが入ってくるが今回は入ってこないで大丈夫
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/9706266e-ce04-f604-f357-a3898d1233eb.png)
**3.** 挿入タブから**ラベル2個**・**ボタン2個**を追加し、**編集**をクリック
・Labe9→**個数**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/7d2f28ac-aaf7-a560-aa18-146e13e3235f.png)
**4.**ボタンを**＋**,**－**に書き換え好きな配置に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/2fcd06d2-8e4f-20c6-4a4e-6686df799e03.png)

<font color="red">ここで出てくる＋の時に1つ増加、－の時に1つ減少!!</font>
 **＋の時に1つ増加**
 　1. **＋**ボタンを選択
　2. **OnSelect**になっているか確認
　3. 関数に`Patch([@れいさん],ThisItem,{個数:ThisItem.個数+1})`を入れる
　　　　　※[@れいさん]は自分で入れたエンティティを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/a5ce3ee6-ecad-3090-e9ee-e79938245abb.png)

 **－の時に1つ減少**
　1と2までは同じ
　3. 関数に`If(Value(ThisItem.個数)>0,Patch([@れいさん],ThisItem,{個数:ThisItem.個数-1}))`を入れる
   　※[@れいさん]は自分で入れたエンティティを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/52e02e61-58ec-7fd4-98cc-4dfa04d2d6dc.png)
**5.****冷蔵庫**、**冷凍庫**、**保存食**の色の変更
FillとHoverFillに`Switch(ThisItem.冷蔵or冷凍or保存,"冷蔵庫",Blue,"冷凍庫",Purple,"保存食",DarkGreen)`を入れる
![Fill.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/8d6c329f-7e1f-8a06-2042-8404ea442a21.png)
![HoverFill.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/efe4a5ec-56c4-86e0-79ea-ccfa442f6f79.png)
**6.**新規追加画面作成
　・商品名（テキスト入力）
　・購入日（日付）
　・分類　（ラジオ）
　・追加　（ボタン）
追加ボタンのOnSelectに`Patch(れいさん,Defaults(れいさん),{crf74_name:'Product nameTextInput_1'.Text,crf74_kounyuubi:'Date of purchaseDatePicker_1'.SelectedDate,crf74_kosuu:Value(Dropdown1_1.SelectedText.Value),crf74_reizouorreitouorhozon:DistinguishDropdownRadio_2.SelectedText.Value})`を入れる
![追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404009/c182f85d-e52f-65c7-6e8f-54dcfaf7aa65.png)


#出来上がりがこちら
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これの集大成？出来たー<a href="https://twitter.com/KodamaJn?ref_src=twsrc%5Etfw">@KodamaJn</a> さんの日用品購入アプリ見てわれもつくりたーいって言ってつくた。<br>保存先はもちのろんCDS(´∀｀*)<br>automateは使ってないよー<a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> <a href="https://twitter.com/hashtag/JPAUG?src=hash&amp;ref_src=twsrc%5Etfw">#JPAUG</a> <a href="https://t.co/di6qe68ab3">https://t.co/di6qe68ab3</a> <a href="https://t.co/BprAujQs8U">pic.twitter.com/BprAujQs8U</a></p>&mdash; さやか (@sayaka121413) <a href="https://twitter.com/sayaka121413/status/1218055737508683777?ref_src=twsrc%5Etfw">January 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

#まとめ
プログラミングとか書けなくても、こんなアプリが作れる！
自分が作りたいと思うものが作れるようになってるし、TwitterとかFacebookで困っていることをつぶやけばみんなが解決に導いてくれる！
Japan Power Apps User Groupって最高よね