LoginSignup
1

【Power Apps】QRコードで在庫管理しよう

Last updated at Posted at 2024-02-06

概要

皆さん初めまして、伊礼と申します。
エンドユーザーオフィスに常駐し、エンドユーザーのDX支援を行っています。

今回は、MS365のPower Appsで構築した 「QR物品管理システム」 をご紹介します。

Power Appsでの物品管理アプリ自体はすでに記事もたくさん出ているものですが、
私なりに工夫した点などもあるのでアウトプットの練習とポートフォリオ的なのも兼ねて記事にしたいと思います。

※エンドユーザーからの掲載許可はいただいております。
※画像に移っているデータはChat-GPTに生成してもらったダミーデータで、
 実際に管理しているのはモバイルルーターではなかったり一部フェイクありますが、アプリ自体の機能はそのまま解説しています。

課題

現在私のエンドユーザーは、リモートワークや出張先などでの社内NWへ接続するためにモバイルルーターを都度貸し出しています。
このモバイルルーターの貸し出しにて以下の課題が。

  • 総務社員に頼んで鍵付きの棚から出してもらわないと貸し出せない
    • つまり総務社員が不在のタイミングは持ち出せない
    • いるっちゃいるけど忙しそう、声かけにくいな…
  • 社員が約100名、モバイルルーターが60台ほどあり、すべてを手入力でExcel管理は追いつかない
    • そのため借りっぱなし状態で返却していないなども常態化
  • いざ持ち出したいときに、予備があるかわからない
    • かといって誰が持っているかも不透明なので、社員間で貸し借りもしづらい

などなど挙げればキリがないですが、概ねこういった課題が存在しました。

これらの課題をPower Appsでアプリを構築し解決してしまおう、ってわけですね。

実装した機能

今回は要件とPower Appsの仕様の関係でiPhone版とPC版でアプリ、機能を分けて構築しています。
なので、iPhone-PC間でのレスポンシブデザインは今回あまり考慮していません。

そしてDataverseを自由に使える環境ではなかったので、
DB代わりにSharePoint Listsを使用しています。

ちなみにプレミアムライセンスが必要な機能は使用していません。

iPhone版

持出/返却画面

BarcodeScanner コントロールを使用してQRコードを読み込みます。

真ん中のカメラボタンをタップするとカメラが起動。
でモバイルルーターに張り付けられたQRコードをカーソル内に収めると…

モバイルルーターの情報が出てくるので、返却日を指定し持出ボタンをポチっとすれば持出完了。
(今回は自前の検証用環境のダミー版のためQR画像で失礼いたします)

返却するときも同じく、カメラで読み取るとモバイルルーターの情報が出てくる。
今度は持出ボタンが返却ボタンに代わっているのでこれをポチっとすると返却が完了。

まあシンプルです。

もちろん、他のユーザーが既に持ち出していたり、後述の予約機能で予約されている
モバイルルーターを読みとると、ボタンはグレーアウトされて押せません。

予約画面

この画面ではモバイルルーターの予約/予約の取消が可能。
上のモバイルルーター一覧から持ち出したいモバイルルーターを、
下のカレンダーから持ち出したい期間を指定する。

予約ボタンをポチっとすると予約完了。

カレンダーには自身と他ユーザーの予約や持出状況がアイコンとハイライト表示でざっくり分かる。

また、下のカレンダーで期間を指定すると、
上のモバイルルーター一覧で予約不可のものはグレーアウトされるので、
どのモバイルルーターが予約できるのかもパッとわかる。

この画面だとRouter_21が予約不可というのがぱっと見で分かりますね。
(そのため、画面の空き領域的にもフィルター的な機能は実装しませんでした。不用意にボタン依存の機能を増やすとすぐUIがごちゃつく。)

ちなみにカレンダーについては、公式の画面テンプレートにある「カレンダー」を参考にしました。

マイリスト

この画面では現在自身が持ち出している、もしくは予約しているモバイルルーターが一覧で分かる。
それぞれ返却ボタンを押すと持出/返却画面に遷移、取消ボタンでは予約の取り消しができる。

PC版

予約画面

予約画面についてはiPhone版と同じ機能、レイアウトが多少変わっただけ。

マイリスト

マイリストも同じくiPhoneと同様。

管理者画面

管理者(私+総務部+一部管理職)のみ閲覧できる画面。

画面左側は返却期限順にソートされたモバイルルーターの持出状況。
これにより誰が持ち出していて、いつまでに返却しなければいけないかがわかります。
また、期限を過ぎて返却していない場合は赤文字ハイライト&ソートで晒上げられます。

画面右側はモバイルルーターの一覧。
こちらでは長期出張などで1週間以上持ち出したい場合や、やむを得ずルーターのステータスを手動で変更しなければいけない時にステータス変更から「長期持出」や「持出中」、「返却」などに手動変更できます4。

これらの機能を一般ユーザーも自由に使えてしまうと健全ではないので、
システムの管理者のみ閲覧できるようにしております。

その他おまけや共通の機能

テーマ変更機能

画面左上の〇をタップするとテーマカラーを変更できます。
現状はノーマルのオレンジ、グレー、ネイビーの3色。
同一端末であれば次回起動時もテーマカラーの変更は引き継がれます。

実装としてはRGBA関数でテーマごとの色を定義し、
それらの選択状態をSaveData、LoadDataで保存、読み込みする形です。

あまりこの辺の実装の記事を見なかったので、せっかくなので紹介しようと思います。

App.OnStart
//ユーザーのローカルデータ読み込み
Concurrent(
    LoadData(Local_main_theme,"Local_main_theme",false);,
    LoadData(Local_sub_theme,"Local_sub_theme",false);
);

//ローカルデータの存在チェック
If(Not(IsEmpty(Local_main_theme)),

    //存在する場合はメインとサブテーマをローカルから適用。(前回起動時のデータが引き継がれる。)
    Concurrent(
        ClearCollect(Main_theme,First(Local_main_theme));,
        ClearCollect(Sub_theme,Local_sub_theme);
    ),

    //存在しない場合は各テーマを定義し適用
    Concurrent(
        ClearCollect(nomal_theme,{base:RGBA(255,190,90,1),hover:RGBA(255,214,112,1),select:RGBA(255,214,152, 50%),press:RGBA(242,174,73,1)});,
        ClearCollect(dark_theme,{base:RGBA(80,80,80,1),hover:RGBA(180,180,180,1),select:RGBA(255,214,152, 50%),press:RGBA(55,55,55,1)});,
        ClearCollect(blue_theme,{base:RGBA(28,46,92,1),hover:RGBA(109,133,178,1),select:RGBA(109,133,178, 30%),press:RGBA(20,35,80,1)});
    );

    Concurrent(
        ClearCollect(Main_theme,nomal_theme);,
        ClearCollect(Sub_theme,dark_theme,blue_theme);
    )

);

そしてテーマ変更用にギャラリーと配下にボタンや図形など任意のコントロールを配置

ギャラリーアイテムと配下コントロールのFill、OnSelectは以下の感じ。

Color_Select_Gallery.item
Sub_theme
Color_Select_Circle.Fill
ThisItem.base
Color_Select_Circle.OnSelect
//選択したテーマをMain_themeに定義し、サブテーマからは削除
Collect(Sub_theme,First(Main_theme));
ClearCollect(Main_theme,ThisItem);
Remove(Sub_theme,ThisItem);

ClearData();

//現在のテーマの選択状況をローカルデータに保存
ClearCollect(Local_main_theme,First(Main_theme));
ClearCollect(Local_sub_theme,Sub_theme);
SaveData(Local_main_theme,"Local_main_theme");
SaveData(Local_sub_theme,"Local_sub_theme");

これでギャラリー内のコントロールをクリックすると、Main_themeとSub_themeが入れ替わっていきますので、あとは

Button.FillColor
First(Main_theme).base
Button.PressedFillColor
First(Main_theme).press

といった感じで各コントロールのカラープロパティに設定すれば、選択中のテーマのカラーが適用されるわけですね。

ログダウンロード機能

もちろん持出/返却/予約など各操作にあたってログを取っていますが、毎回SharePoint Listsを開いてしか見られないのも面倒だし気軽にcsv形式とかでローカルに落としたいよね~、ということで実装。

PC版管理者画面のダウンロードボタンをクリックするとPower Automateが呼び出されてcsvを作成、
その後Power Appsに戻りDownload関数でcsvがダウンロードされます。

返却忘れ防止通知機能

こちらはPower AppsというよりはPower Automateをスケジューリングして、
SharePoint Listsの取得、フィルター、未返却の 不届き者 持ち主へリマインドチャットを送っているだけです。
エンドユーザーからの要望で、返却予定日の前日、当日、延滞中のどれかに該当する場合、メッセージが嫌がらせのように毎朝きます。

まとめ

ざっくりこんな感じのアプリを構築し、現在も運用中になります。

これは余談ですが、今回記事に登場しているアプリのデータはダミーデータとしてChat-GPT4君に生成してもらいました。

結構ガバガバな要件で注文しても、それとなく察してよしなにいい感じのデータをドカッと吐き出してくれて非常に満足感が高かった、さすがですね。

今回のアプリで使用しているのは割と基本的な関数やロジック、サービスで大して難しいことはしていませんが、それでも結構実用的なアプリを作ることができたと思います。

データを細かい条件でフィルターするときにどうしてもSQLを使いたくなったり、
データ操作の委任周りで気を使ったりと面倒な部分もありますが、
それでも手軽に画面作ってその場で動作確認しながら構築していけるのはローコードの強みを感じますね。

MS365周りのとの連携も便利でいいです。

それでは。

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