PowerAppsでQRコードを使った備品管理アプリが簡単に作成できてしまった件

弊社でインターンシップを始めてから、約2年半が経とうとしています。そんな中、「社内の備品を集計してほしい」という業務を任されました。この業務自体はシンプルで、社内の備品を確認し、何がどこにいくつあるのかを把握し、SpreadSheetにまとめるというものです。

しかし、一度集計しても、その後の貸出や移動によって状況は変わってしまい、せっかくの集計がすぐに無駄になってしまう可能性があります。そこで、ちょうどキャッチアップしていたPowerAppsを活用し、QRコードを使った備品管理アプリを作れないかと考えました。試しに制作の提案をしたところ、快諾していただき、約4日間でアプリを完成させることができました。

アプリ制作で躓いた点を紹介しているので、ぜひ役立ててみてください。

QRコード機能を備えたアプリの概要【PowerApps】

PowerAppsを使ってQRコードを読み取り、備品の貸出、返却を行い、それらのデータはSpreadSheetに保存するというもの。

データは主に2つのシートに保存しています。

1. 備品情報
   備品ID, 備品名, 種類（PCやモニターなど）, 購入日, 状態（貸出可or貸出中）,貸出先を記録。アプリの操作では状態と貸出先を変更することになる。

2. 貸出履歴
   備品ID, ユーザー名, 貸出申請日時,返却申請日時,承認者を記録。ただし、今回の実装では承認フローの作成を行っていないため承認者の列は使用しない。

完成型

一覧画面の下部にある「貸し借り」ボタンをクリックすると、次のページで「貸出」または「返却」を選択でき、それぞれの専用ページに遷移します。

その後、「バーコードリーダー」ボタンをクリックするとQRコードの読み取りが可能になり、スキャンした内容を追加することで、貸出予定の備品を一覧に一時的に保存できます。

最後に「貸出」ボタンをクリックすると、データベースに情報が反映されます。

QR備品管理アプリの作成ポイント

全ての制作過程を載せるのは膨大になってしまうので、今回私が作成するにあたってこだわった点や躓いた点、注意ポイントに絞って説明します。

SpreadSheetとPowerAppsの連携

PowerAppsは、GoogleSpreadSheetをデータベースとして使用可能。まず、以下の手順でSpreadSheetを準備します。

1. SpreadSheetを作成し、カラムを定義
   1. 1行目にデータベースで必要な列名（カラム）を記載します。
   2. 例：備品ID, 備品名, 種類（PC・モニターなど）, 購入日 など。
   3. PowerAppsと連携すると、一番右の列に __PowerAppsID__ が自動追加されます。これはPowerApps側でデータを管理するための識別IDです。
2. PowerAppsでSpreadSheetをデータソースとして設定
   1. PowerAppsのサイドバーで「データ」→「コネクタ」→「Googleスプレッドシート」を選択。
   2. 画面右側のポップアップで「接続」をクリック。
   3. Googleアカウントを選択し、「次へ」→「続行」でアクセスを許可。
   4. 表示されたSpreadSheetの候補から、使用するものを選択。

これで、SpreadSheetをデータベースとして利用できるようになります。PowerAppsは 1行目のカラム名をデータベースのフィールドとして自動認識 します。

例として、以下のコードでは「備品情報」のデータを検索・ソートしています。

SortByColumns(Search([@備品情報], TextSearchBox1.Text, 備品ID,備品名,状態,種類,貸出先), "備品ID", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

PowerAppsのバーコードリーダーを利用し、QRコードの読み取り結果をテキストボックスに表示できます。

QRコードの読み取り

First(BarcodeReader1.Barcodes).Value

注意点：First と .Value を忘れないようにすること。

変数にQRコード情報を保存する

バーコードリーダーの OnScan プロパティで、変数 scanvalue にQRコードの値を格納します。

Set(scanvalue, First(BarcodeReader1.Barcodes).Value)

テキストボックスの Default 値には、この変数を設定します。

scanvalue

この方法を採用した理由：テキストボックスのクリアボタンを利用可能にするため。

テキストボックスをクリアする方法

「クリア」ボタンを作成し、OnSelect に以下のコードを設定します。

Set(scanvalue, "");
Reset(TextSearchBox1)

変数を使わない場合の問題点：
バーコードリーダーが読み取った値がPowerApps内で保持され、手動で消すのが面倒に。

一時的に対象の備品をcollectionに保存し、まとめてデータベースに保存する方法

一時的なデータ保存には Collection を使用します。

PowerAppsでは Collect を使うと、事前に定義していないCollectionも自動作成されます。

Collect(temp_rent, {_備品ID: TextInput1.Text, _備品名: Label3_1.Text});

ポイント：

• temp_rent は一時保存用のCollectionの名前。
• SpreadSheetのカラム名と区別するため、カラム名の前に _ を付ける。

データが溜まる仕組み：
このコードが実行されるたびに、新しいデータが temp_rent に追加されていく。

Collectionのデータをデータベースに登録する

「貸出」ボタンの OnSelect で、temp_rent 内のデータを ForAll で処理し、データベースに登録。

ForAll(temp_rent,

   Patch(貸出履歴, Defaults(貸出履歴), 

      {ユーザー名: user_now, 備品ID: ThisRecord._備品ID, 貸出申請日時: Today()})

);

ForAll(temp_rent,

   Patch(備品情報, LookUp(備品情報, _備品ID = ThisRecord.備品ID), 

      {状態: "貸出中", 貸出先: user_now})

);

Clear(temp_rent);

• ForAll： temp_rent のデータを1つずつ取り出して処理。
• Patch：データベース（貸出履歴 や 備品情報）を更新。
• Clear(temp_rent);：処理が終わったら一時保存データをクリア。

SpreadSheet側で直接編集しても、アプリ側で問題が起きないような対策

PowerAppsは Microsoftアカウントを持つ同一組織のメンバーしか利用できない ため、SpreadSheetでの編集が必要になる場合があります。しかし、SpreadSheetを直接編集しても、アプリ側には即時反映されません。

データ更新を反映させる方法

特定の画面が表示されたときに Refresh 関数を実行する。

Refresh(備品情報);
Refresh(貸出履歴);

今回は 以下の2つの画面を表示した際に Refresh を実行 するように設定しました。

1. 最初の一覧画面
2. 貸出・返却を選択する画面

QRコードシールの作成

まず、備品を判別するユニークIDを割り振る必要がありますが、今回は分類コード＋番号にしました。分類コードはモニターならMN-001、キーボードならKB-004などです。

QRコードシールは市販のラベルシールを購入し、作成したQRコードを印刷しました。

使用した商品はこちらです。エーワン ラベルシール QRコード・表示・宛名ラベル プリンタ兼用 マット紙 白 A4 70面 正方形 1袋（20シート入） 31555

Amazonでも購入可能。

こちらはラベル屋さんというサービスを使うことでエーワンのラベルシールに対応したテンプレートでQRコードを作成できます。

注意点として、テンプレートを使用してもそのままだとずれます。（なんで…）なので、必ずA4用紙で試しに印刷し、ずれていないか確認し、ずれていたら印刷の位置で位置調整を行ってください。これで、対処できます。

終わり

いかがだったでしょうか。PowerAppsは少し癖があるので、慣れるまで練習が必要ですが、ある程度慣れてくれば短期間でアプリ作成ができてしまいます。ぜひ、試してみてください。

弊社ではPowerAppsを活用したローコード開発に力を入れており、開発後の内製化までも幅広くご支援可能です。弊社がこれまで支援した実績などは以下からご覧いただけます。お困りごとがあればお気軽にお問い合わせください。