![見出し画像](https://assets.st-note.com/production/uploads/images/92765065/rectangle_large_type_2_1eb605cb4b5f3d38bdc2f4683aac3396.png?width=800)
【Power Apps】ほめほめアプリで自分をほめほめしてみた(アプリ作成編)
この記事はMicrosoft Power Apps Advent Calendar 2022 7日目の記事です🎉
こんにちは。aliceです。
アドベントカレンダーの時期ですね🎄
今年はPower Appsのアドベントカレンダーに参加させていただきます🔔
Power Appsの講習を受講したのでアプリを作ってみました。
今年もあと2か月、ゆるーく過ごそうと思ってアプリを作りました。
— alice (@alice37308108) October 23, 2022
1日100ホメが目標です🤗
ゆるゆるになります🍵#PowerApps pic.twitter.com/2ne0ch2STk
作ったときはスクリーンショットを全くとっていなかったので、新しく作成しました。
結果、こんな感じのほめほめアプリになりました。
さつまいも!クリスマス!!
![](https://assets.st-note.com/img/1670164325227-nih6Z1XMs7.png?width=800)
それでは作ってほめほめしていきましょう!
Excel編
こんな感じのExcelを用意します。
ファイル名は「ほめほめアプリ☆.xlsx」です。
A列に日付、B列にできごと、C列にほめほめ内容を書いたテーブルを作りました。
テーブル名は「ほめほめ」テーブルにしました。
![](https://assets.st-note.com/img/1670135257602-zw0fYb7FGC.png?width=800)
Excelの設定はこれで終わりです。
次はPower Appsでアプリをつくっていきます。
アプリの作成
では、さっそくアプリをつくっていきましょう。
PowerAppsを開いて作成をクリックします。
![](https://assets.st-note.com/img/1670135488345-ZdmrFamQJJ.png?width=800)
OneDriveforBusinessから先ほど作ったほめほめアプリ☆.xlsxをクリックします。
![](https://assets.st-note.com/img/1670135598186-R1JXmj6xKe.png?width=800)
ほめほめテーブルを選択してから接続をクリックします。
![](https://assets.st-note.com/img/1670135687307-HgwIeCvw0J.png?width=800)
アプリができました。
早い!簡単!!
![](https://assets.st-note.com/img/1670135762139-IBR3KWiVnW.png?width=800)
と言いたいところですが、最初はExcelを開いたままなのでうまく表示されませんでした💦
そんなときは一度Excelを閉じましょう。
![](https://assets.st-note.com/img/1670135840360-BOPkkYdXRn.png?width=800)
名前を「ほめほめアプリ☆」にして保存します。
![](https://assets.st-note.com/img/1670362437819-Fkvyuo1dcv.png?width=800)
BrowserScreen編
それではさっそくBrowserScreenを編集します。
まずは行の幅を広くしてみます。
![](https://assets.st-note.com/img/1670161614658-DUgyJDSAxp.png?width=800)
日付を入れたいのでラベルを挿入して日付を入れます。
![](https://assets.st-note.com/img/1670161668013-kkU27v0UOZ.png?width=800)
時間は不要なので表示形式を「2022年12月7日」というように変更します。
Text(ThisItem.日付,"yyyy年mm月dd日")
![](https://assets.st-note.com/img/1670161721474-mw6LsyeMFO.png?width=800)
あとは並び替えて日付が一番上にくるようにします。
![](https://assets.st-note.com/img/1670161762542-c2It4maePV.png?width=800)
フィールド内での順番は並び替えたので、次は全体をソートします。
日付順に表示したいですよね。
![](https://assets.st-note.com/img/1670163387825-jzP7qnWXHR.png?width=800)
今は「できごと」順に表示させているようです。
その順番に並べられてもって思いますよね。
![](https://assets.st-note.com/img/1670163464620-xb2jWzhbZY.png?width=800)
itemsプロパティの数式を変更して日付順に並び替えましょう。
SortByColumns(Search([@ほめほめテーブル], TextSearchBox1.Text, "できごと","ほめほめ内容"), "日付", If(SortDescending1, Descending, Ascending))
![](https://assets.st-note.com/img/1670163507948-sYh6xVPNuN.png?width=800)
ちょこっと色を変更しました。
![](https://assets.st-note.com/img/1670165388501-08PigywTcD.png?width=800)
DetailScreen編
次にDetailScreenを編集します。
今はこのように表示されています。
![](https://assets.st-note.com/img/1670161872593-jSipQvHS6X.png?width=800)
プロパティのフィールドからフィールドの編集をクリックします。
![](https://assets.st-note.com/img/1670161917975-s8K1kX7C3n.png?width=800)
フィールドが表示されるので上から順番に「日付」、「できごと」、「ほめほめ内容」の順番に並び替えます。
![](https://assets.st-note.com/img/1670161994041-QhiCrnAPGY.png?width=800)
こちらの日付表示も日付のみに変更しましょう。
Text(ThisItem.日付,"yyyy年mm月dd日")
![](https://assets.st-note.com/img/1670164757686-qmRGu5Vplt.png?width=800)
さりげなく、イラストを入れてみました🍠
ここらへんをサクッと作れるのが楽しいところですね🤗
![](https://assets.st-note.com/img/1670164795888-kKSzvay2Tl.png?width=800)
EditScreen編
EditScreenも編集していきましょう。
今はこのようになっています。
日付だけあればよいので時間はいらないですね💦
![](https://assets.st-note.com/img/1670162321067-7RiLT7hU2W.png?width=800)
こちらもプロパティのフィールドからフィールドの編集をクリックします。
![](https://assets.st-note.com/img/1670162429873-pbTOmjEYA3.png?width=800)
DetailScreenと同様に上から順番に「日付」、「できごと」、「ほめほめ内容」の順番に並び替えます。
![](https://assets.st-note.com/img/1670162562805-AngW3UIVdf.png?width=800)
並び替えはできたのですが、時間は不要なので修正していきます。
![](https://assets.st-note.com/img/1670162662150-XQS7TaP8Jv.png?width=800)
日付のDateCardを選択して、詳細設定からプロパティのロックを解除します。
![](https://assets.st-note.com/img/1670162705149-D4zDVm03nb.png?width=800)
時間の「分」の部分が選択できるようになりました。
(たくさん配列に入っているなぁ…。)
![](https://assets.st-note.com/img/1670162780236-BZjSrGUxrH.png?width=800)
今は詳細設定のVisibleがTrueになっているので表示されています。
![](https://assets.st-note.com/img/1670162859267-GLGIQxzf7t.png?width=800)
VisibleをFalseにします。
すると時間の「分」の部分が表示されなくなりました。
![](https://assets.st-note.com/img/1670162906945-n2CP9pgLm7.png?width=800)
同様に「時間」の部分も非表示にして、日付の部分を広げます。
だいぶ見栄えがよくなりました🙂
![](https://assets.st-note.com/img/1670163016855-V8n4BzLzMr.png?width=800)
せっかくなので「できごと」と「ほめほめ内容」の幅を広げましょう。
たくさんほめたいですよね✨
![](https://assets.st-note.com/img/1670163100452-IhiohtHEeN.png?width=800)
EditFormのOnSuccessプロパティを次のように変更します。
これで登録が成功したらDetailScreen1に移動します。
Navigate(DetailScreen1)
![](https://assets.st-note.com/img/1670165450579-IuT8E2FtVd.png?width=800)
こっちにもさつまいも🍠
![](https://assets.st-note.com/img/1670165451120-hVyOyZTjTW.png?width=800)
TopScreen編
デフォルトで作られたscreenを編集したので、TopScreenを作成していきます。
新しい画面から空のレイアウトを選択します。
![](https://assets.st-note.com/img/1670163736766-k7TsPj3YhI.png?width=800)
Screenが追加されました。
![](https://assets.st-note.com/img/1670163780777-MAywcHh52u.png?width=800)
TopScreenにしたいので一番上に持っていきます。
名前も変更します。
![](https://assets.st-note.com/img/1670163853751-0lVUkMqXGK.png?width=800)
Top画面っぽく画像やボタンを挿入します。
色も変えてみました。
ここはお好みですね🍠
![](https://assets.st-note.com/img/1670163945899-tz7oA4NN3g.png?width=800)
登録ボタンを押したら登録できるように数式を設定します。
登録ボタンのOnSelectプロパティを次のように設定します。
NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
![](https://assets.st-note.com/img/1670164046265-28xQoeBgy9.png?width=800)
一覧ボタンもクリックしたら一覧が表示されるようにOnSelectプロパティを変更しましょう。
Navigate(BrowseScreen1, None)
![](https://assets.st-note.com/img/1670164145678-QUr30XrC8S.png?width=800)
ということでアプリができました。
アプリを公開する
最後にアプリを公開しましょう。
右上の公開ボタンをクリックします。
![](https://assets.st-note.com/img/1670166352467-KENqdZ35ry.png?width=800)
「このバージョンの公開」ボタンをクリックして公開します。
![](https://assets.st-note.com/img/1670166292693-wv4LSNyI8A.png?width=800)
最新バージョンが公開されています。
![](https://assets.st-note.com/img/1670166444206-WE9xteUMUD.png?width=800)
これでアプリを使えるようになりました。
わーい!いっぱい自分をほめましょう💛
![](https://assets.st-note.com/img/1670330675578-AMp7kzLcl7.png)
アプリを使ってみたはなしです。
この記事が気に入ったらサポートをしてみませんか?