2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Power Appsで予算管理アプリを作りたい~実践編: Shiba-Buリリース~

2
Posted at

Power Appsでチャチャっとアプリを作れるようになりたい..

そう思ってから約3週間、土日の隙間時間を利用して遂にWebアプリをリリース(?)しました。

その名も「Shiba-Bu」

公開しているので多分上記リンクでアプリ見れるはず。
まじで程度の低すぎるアプリだけど、ぜひ皆さん遊んでほしい。

架空のしばいぬ達が、自分たちの悪行を達成するために予算申請するというわけのわからない設定の経費申請管理アプリです。

そもそもの経緯はPower Appsで予算管理アプリを作りたい~入門編~をご覧ください。

作者のPower Apps歴

  1. Apps研修受講×正味2日
  2. このたびの柴犬アプリ自作×正味2日
  3. アプリ開発経験:そこそこある。が設計メイン。コードを書いていたのは結構昔。
  4. BIツールの専門家
  5. Outsystemsを触ったことあるけど使い悪すぎて嫌いになる。Outsystemsに比べたらPower Appsはとても使いやすいと感じます。

どんなアプリか

極めて単純です
画面遷移図はたったのこれだけ

画面遷移

image.png

機能一覧

  1. 使った経費を入力する
  2. 経費を一覧で見る
  3. 経費の詳細を見る
  4. 経費を編集する

とりあえずCRUDを一通りやりたかったのです。
が、めんどくさくてDeleteは諦めました。
間違って投入したものも消さない方がいいでしょう..

工夫ポイント

  • 「計上年月」は日付ではなく年月にしたい。日付ピッカーから1日で丸めて見た目だけyyyy/mmにしようとしたが、色々めんどくさくて諦め、結果ドロップダウンで年月選択に
  • 入力と編集を行っても一覧画面で出てくるのにタイムラグがある。そのためリロードボタンを作ったが、ある程度連打しないとやっぱ出てこない
  • ちょっとした設定だけで入力画面と編集画面を一緒くたにできるのはとても便利だと感じた。昔スクラッチ開発の時は画面分けていた気がするので。

いよいよ画面の紹介

一覧画面

image.png

いきなりうちの犬(シンジ)の阿鼻叫喚シャワー映像で埋め尽くされる。
写真を投入するフォームを作れたら、それぞれ画像が出てきていいのでしょうが、経費申請に別に写真は要らないだろうと思い却下。
かといって文字だけだと画面の見た目が寂しいので、うちの犬を差し込みました。
定期的に新しい写真に入れ替えたいと思います。

入力/編集画面

image.png

なんの変哲もなくて申し訳ない

詳細画面

image.png

ただ表示するだけです。

DB

トランザクションテーブル

image.png

普通です。

マスタテーブル

image.png

少しの値でも、マスタ作っておくほうが楽ですね。

学び

とにかく生成AI(chatGTP)さまさまである。
わからないことは全部聞く。
その際具体的なエラー名、スクショもよいけどなるべくテキストで表現しトークンを節約、かつエラーなど上手くいかない時は「自分はこれが怪しいと思うんやけど」という仮説を投入する。これめっちゃ大事。
そうするとそれの何が違っていて、実際はどう、ということを丁寧に教えてくれる。

image.png
(↑こういう、「私はPower BIの前提知識でAppsに取り組んでるんやで」という背景を匂わせてあげるとよき。この後もたまにPower BIとの違いを差し込んでくれるようになる。ちなみにPower BIについて生成AIに聞くときは、Tableau専門家の私からして「Tableauに例えると何か」というのを入れてMS独特の概念理解に役立てています)

あと恥ずかしがらずに「本当にやりたいこと・ゴール」をちゃんと教えてあげるのも大事。
Google先生に慣れ切った私たちは、ついついAIにも「やり方だけ教えろ」ってなりがちなので。
image.png

フルコード化はできないのか?

Power AppsはScreenごとにYAMLコードを見れる。
だからコードをAIに作ってもらえれば爆速にできるのでは?
と考えたけど、編集できないっぽい

【Power Apps】コードビューとは、使い方や活用方法の紹介

ただ、コードというのは生成AI君に分かりやすいので、自分のやりたいことと比べて現状こうなっていて、それに向けてどうしたらいいのか、というのを、YAMLコード読ませたうえで対話するとかなり効率が良いと感じました。

おまけ:スマホで見た場合

スマホ版を全く考えてなかったのですが一応レスポンシブを使ってるので、
Sumsung Galaxy A33 5Gだとこんな感じだそうです。
私はGoogle PixelユーザーなのでGoogle系を探したのですがなかった。
やっぱMicrosoftだからGoogle排除してるのかな。
iPhoneならいい、ってのもなんかアレですが。
image.png

今後の課題

とにかく見た目をよくしたい、アプリというのはかっこよくてなんぼだと思う。
2018-2020年頃は私CSSやらBootstrapをいじりまくってとにかくかっこいい見た目を追求していたので、テーマやらなんやらを活用すればきっとかっこいいアプリが作れると自分を信じている。
(高度な機能を作る、といったことは、そもそも自学自習ではしばいぬ以外思いつかないのでちょっとアレですが)

そもそもPower Appsで作ったものはどうしても「Power Apps感」が出る。
でもこの世の中のどこかにきっと「ほんまにこれ、Power Appsなの!?」と思えるカッコいいアプリがあるはずだ。その域を目指していきたい。

自分を信じて、前へ進むのだ。
とにかく今回一応、土日だけ使って(遊びながら)完成までできた。
俺たちの戦いは、これからだ!

ぜひ皆さんも、Power Appsを学び試して、どんなにしょぼくてもご自身なりのアプリを完成させてみてください!
読んでいただき、ありがとうございました(´▽`)

2026.2某日

Rieko

2
0
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
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?