1
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?

More than 1 year has passed since last update.

Power Appsによるアプリ開発(Part1-1)

Last updated at Posted at 2023-05-11

目次

  • 初めに
  • 今回作成するアプリについて
  • 作成した内容
  • 完成形
  • 最後に

初めに

前回初めてPower Appsを学習し、ある程度知識を得たので実際に業務用アプリケーションを作成したいと思います。
前回の記事はこちらから見れます。

今回作成するアプリについて

今回作成するアプリケーションは、来店客の人数等を記録する来店記録アプリを作ってみようと思います。
記録するデータは、その日の一時間ごとにおけるスタッフ数、来店数、接客数、購入者等です。
登録したデータを一覧で見ることができて、更に修正したい場合は変更できるようにしたいと思います。
この記事では登録する機能まで作成したいと思います。

作成した内容

  • データベース作成
    まずは記録を保存するためにデータベースを作成していきます。
    今回は前回Power Appsと同時に学習したSharePointを利用して作成したいと思います。
    テーブルは一つだけで、来店記録を取る際に必要と思った要素をあらかた出してみました。

image.png
今回はすべての列を必須項目にしました。
また、カウントするものと金額のデフォルト値を「0」にします。
天気、気温の備考に書いてあるMSN天気とは、マイクロソフトが提供しているある地点における現在の気温、湿度、降水量などといった最新の天気予報を取得することができます詳しい情報はこちらをご覧ください。
これを作成し、実際にアプリ画面を作成していきます。

  • アプリ画面作成
    これからアプリ画面を作成していきたいと思います。
    今回は登録をするだけなので編集フォームを先ほど作成したテーブルをもとに作成し、登録ボタンを置きたいと思います。
    image.png
    これでもいいのですが、見た目のバランスや天気、気温の自動取得などのように便利にしたいので加工していきます。
    行った内容は以下の通りです。

  • 日付の入力を省くため、今日になるようする

  • 天気、気温をMSN天気から自動で取得するようにする(手入力できないようにする)

  • カウント方式と決めたテキスト入力をボタンを押すだけで1ずつ上げ下げして入力できるようにする(直接入力できないようにもする)

  • カウント方式で入力するときにマイナスにならないようにする(テキスト入力が0以下の場合、下げるボタンを非表示にする)

  • アイテムボックスの検索の文字を変更

  • 入力しやすいようにテキスト入力やコンボボックスの間隔を空ける

  • 文字サイズを大きくする

これらをやってみたらこのようになりました。
image.png
先ほどと違って見やすくなり、使いやすくなりました。
しかし、天気と気温の表記がおかしいので修正したいと思います。

大前提として、天気、気温の取得場所は東京にしています。
天気については日本語に翻訳すればいけそうなので、MSN天気と同じ方法でMicrosoftTranslatorを引っ張ってきて天気の文字を翻訳させるようにコードを書きます。

Default(天気)
MicrosoftTranslator.Translate(
    MSN天気.CurrentWeather(
        "Tokyo",
        "Metric"
    ).responses.weather.current.cap,
    "Ja"
)

次に気温についてなのですが、59℃と表示されている原因が摂氏ではなく華氏を受け取っているのが原因でした。
そのため、摂氏に変更にする方法を模索していたのですが、方法が見つからなかったので、無理やり解決します。
摂氏を求める時の計算式は以下の通りなのでこの式を直接入力して計算させます。

華氏から摂氏への式
℃= (°F-32)÷1.8
Default(気温)
With(
    {
        temp: MSN天気.CurrentWeather(
            "Tokyo",
            "Metric"
        ).responses.weather.current.temp
    },
    (temp - 32) / 1.8 & "℃"
)

かなり強引ですが、一応解決出来ました。
もしほかの方法を知っている方がいたら教えていただけるとありがたいです。

完成形

そして、実際に出来たアプリの画面はこのようになりました。
image.png
一番初めよりもアプリらしくなっていい感じになりました。

実際にフォームに入力したらデータベースに登録されるのを確認できました。
image.pngimage.png

最後に

今回は来店記録のアプリのデータベース作成と登録画面の作成を行いました。
所々躓いた点がありましたが、何とか完成することが出来ました。
次回は登録した来店記録を参照、編集する画面を作成したいと思います。

1
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
1
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?