PowerApps│入退室管理アプリを作成して基本操作を学ぶ

アイキャッチ




こんにちは、あんこ先生です。

アプリ作成は習うより慣れろ!だと思いませんか?

なぜなら、基本を抑えても使ってみないと前に進まないからです。

なにより作ったのものが動くと嬉しいですよね。

そのため、基本操作を学ぶためのサンプルアプリを作成してみましょう。

ほぼ全コードを網羅していますので、そのままコピペで動きます。

とりあえず手を動かす!取説は困ったときに開くものです。

初心者向けのアプリ作成ですが、ある程度理解している前提で進めています。

不安な方はこちらの記事も確認してみてください。


入退室管理アプリについて


機能要件

機能要件は次の3つです。

  • 各部屋の使用状況がわかる
  • モバイル端末からスキャナーを起動する
  • モバイル端末でQRコードを読み込ませ、入退室を制御する


必要な資材

  • モバイル端末
  • Excel(SharePointリストを直接作成できるならなくても可)


使用する主要な関数、コントロール

関数

  • LookUp関数
  • Patch関数

コントロール

  • ラベルコントロール
  • ギャラリーコントロール
  • バーコードスキャナーコントロール
  • アイコンコントロール

事前準備

今回使うのは1つだけです。

下図のとおりExcelで作って、SharePointリストとしてエクスポートしましょう。

日付と時間を表示するには、Excelの書式をyyyy/m/d h:mmにします。

とりあえず日付型でエクスポートしたあと、SharePointリストで時間を含めるとしてもできます。


RoomIDとして読み込めるよう101から501まで100ずつ増やして埋め込んだQRコードを作成します。

テストするだけなら、上の図をそのまま読み込ませても大丈夫です。

QRコードの作成は次の記事を参考にしてください。

読み取った情報をもとにT_利用状況RoomIDと照合して、レコードを持ってくるよ。

アプリの作成

準備が整ったので、アプリ作成を始めます。

具体的な手順は次の5ステップです。

コネクタの接続

初めに、Office365ユーザーコネクタSharePointコネクタ(T_利用状況)を接続します。


起動時の変数宣言

アプリ起動時に自動実行されるOnStartプロパティを設定します。

先ほどのOffice365ユーザーコネクタをそのまま使っても構いませんが、記述が長くなるので変数_userに格納します。

OnStartプロパティ
Set(_user,Office365ユーザー.MyProfileV2()) //自分の情報を変数に落とし込む

この作業を行うことで、たとえばユーザーのフルネーム取得の記述が半分以下になります。

とても便利なので、ユーザー情報を扱うすべてのアプリに埋め込むことをおススメします。

//前
Office365ユーザー.MyProfileV2().surname&Office365ユーザー.MyProfileV2().givenName

//後
_user.surname&_user.givenName


タイトルの設置

ラベルコントロールを設置してテキストを表示させます。

いま気づきましたが、入退室記録アプリになってますね。


バーコードスキャナーの設置

下図のように、カメラ型アイコンコントロールの上に透明なバーコードスキャナーコントロールを被せています。

なぜならバーコードスキャナーコントロールをそのまま使うと見た目がイマイチだからです。

コードを埋め込むのは上側のバーコードスキャナーコントロールのみです。

OnScanプロパティ

If(LookUp(T_利用状況,RoomID=Value(BarcodeScanner01.Value),EnterDate<LeaveDate),
    Patch(T_利用状況,LookUp(T_利用状況,RoomID=Value(BarcodeScanner01.Value)),{EnterDate:Now(),EnterPerson:_user.surname,LeavePerson:"空"}),
    Patch(T_利用状況,LookUp(T_利用状況,RoomID=Value(BarcodeScanner01.Value)),{EnterPerson:"空",LeaveDate:Now(),LeavePerson:_user.surname})
)

Fillプロパティ

RGBA(0, 0, 0, 0) //透明
  • カメラを押そうとすると、その上のバーコードスキャナーコントロールが押され、OnScanプロパティが実行されます。
  • バーコードスキャナーコントロールはブラウザには対応していないため、モバイル端末で動作確認してください。


ギャラリーの設置

利用状況を表示するためのギャラリーコントロールを作成します。

ちょっとコントロールの量が増えてきましたね。

まず大枠のギャラリーコントロールから作成します。縦方向(空)で設置してください。

Itemsプロパティ

T_利用状況 //ギャラリーに表示させるテーブル(リスト)名

TemplateSizeプロパティ

100 //テンプレートの高さ

BorderThicknessプロパティ

1 //外枠線、数値を増やすと太くなる


つづいて、レコード間の区切り線をアイコンコントロールで作成します。

下の方にある四角形をテンプレートに追加します。

Yプロパティ

99

Heightプロパティ

1

テンプレートはギャラリーコントロールで直接編集できる部分のことです。

その内容が表示する全レコード分に反映されます。


つぎに、入室状況を視覚的に捉えるためのアイコンをアイコンコントロールで作成します。

円とキャンセルの2つをテンプレートに重ねて追加します。

Visibleプロパティ

//入室と退室の期間がプラス(退室している)なら表示する
0<=DateDiff(ThisItem.EnterDate,ThisItem.LeaveDate,Minutes)

BorderColorプロパティ

RGBA(56, 96, 178, 1) //外枠の色、お好みで

Visibleプロパティ

//Circle01の表示状態と逆
!Circle01.Visible //!はnotと同義

Colorプロパティ

RGBA(255, 0, 0, 1) //お好みで
  • 円が空室、キャンセルが入室中を表現しています。
  • 2つのアイコンはどちらか一方のみ表示されるため、重ねて配置します。


最後に、文字を表示するためにラベルコントロールを作成します。

部屋の名前と、自分の入室情報の2つをテンプレートに追加します。

Textプロパティ

//部屋の名前
ThisItem.RoomName

Textプロパティ

"入室中"

Visibleプロパティ

//入室者が自分なら表示
ThisItem.EnterPerson=_user.surname

Fillプロパティ

RGBA(255, 0, 0, 1) //お好みで

おつかれさまでした、以上でアプリの作成は終わりです。

リリース準備


アプリの公開

アプリは公開しないと使えません。

保存して公開すれば、モバイル端末のPowerAppsアプリから起動できます。


アプリの共有


別ユーザーにも使用させる場合は、共有しておきましょう。

ユーザー名は日本語ではなく、メールアドレスで入力し、候補を選択します。

今回はSharePointリストを使っています。

アプリを共有したユーザーでも、データソースのアクセス権を持っていないと正常に動作しません。

まとめ

今回は入退室管理アプリを作成する手順をかなり細かく紹介しました。

この通りに作成すれば、それなりのアプリが作れるはずです。

応用すれば、備品や蔵書の貸し出しなどにも流用できます。

少しずつカスタマイズしてどのように動作するか確認してみましょう!


次のステップへ!

今回作成したアプリに、部屋の予約機能を追加します。

アイキャッチ


アイキャッチ-コントロール
アイキャッチ-基礎知識
アイキャッチ-コントロール

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ) 



コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。