こんにちは、あんこ先生です。
アプリ作成は習うより慣れろ！だと思いませんか？
なぜなら、基本を抑えても使ってみないと前に進まないからです。
なにより作ったのものが動くと嬉しいですよね。
そのため、基本操作を学ぶためのサンプルアプリを作成してみましょう。
ほぼ全コードを網羅していますので、そのままコピペで動きます。
とりあえず手を動かす！取説は困ったときに開くものです。
初心者向けのアプリ作成ですが、ある程度理解している前提で進めています。
不安な方はこちらの記事も確認してみてください。
入退室管理アプリについて
機能要件
機能要件は次の３つです。
- 各部屋の使用状況がわかる
- モバイル端末からスキャナーを起動する
- モバイル端末でQRコードを読み込ませ、入退室を制御する
必要な資材
- モバイル端末
- Excel（SharePointリストを直接作成できるならなくても可）
使用する主要な関数、コントロール
関数
- LookUp関数
- Patch関数
コントロール
- ラベルコントロール
- ギャラリーコントロール
- バーコードスキャナーコントロール
- アイコンコントロール
事前準備
SharePointリスト
今回使うのは１つだけです。
下図のとおりExcelで作って、SharePointリストとしてエクスポートしましょう。
QRコードの作成
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=LookUp(T_利用状況,RoomID=First(BarcodeReader1.Barcodes).Value),EnterDate<LeaveDate),
Patch(T_利用状況,LookUp(T_利用状況,RoomID=LookUp(T_利用状況,RoomID=First(BarcodeReader1.Barcodes).Value)),{EnterDate:Now(),EnterPerson:_user.surname,LeavePerson:"空"}),
Patch(T_利用状況,LookUp(T_利用状況,RoomID=LookUp(T_利用状況,RoomID=First(BarcodeReader1.Barcodes).Value)),{EnterPerson:"空",LeaveDate:Now(),LeavePerson:_user.surname})
)Fillプロパティ
RGBA(0, 0, 0, 0) //透明- カメラを押そうとすると、その上のバーコードリーダーコントロールが押され、OnScanプロパティが実行されます。
- バーコードリーダーコントロールはブラウザに対応していません。モバイル端末かＰＣならアプリ経由で動作確認しましょう。
ギャラリーの設置
利用状況を表示するためのギャラリーコントロールを作成します。
ちょっとコントロールの量が増えてきましたね。
まず大枠のギャラリーコントロールから作成します。縦方向（空）で設置してください。
Itemsプロパティ
T_利用状況 //ギャラリーに表示させるテーブル（リスト）名TemplateSizeプロパティ
100 //テンプレートの高さBorderThicknessプロパティ
1 //外枠線、数値を増やすと太くなる
つづいて、レコード間の区切り線をアイコンコントロールで作成します。
下の方にある四角形をテンプレートに追加します。
Yプロパティ
99Heightプロパティ
1
テンプレートはギャラリーコントロールで直接編集できる部分のことです。
その内容が表示する全レコード分に反映されます。
つぎに、入室状況を視覚的に捉えるためのアイコンをアイコンコントロールで作成します。
円とキャンセルの２つをテンプレートに重ねて追加します。
DateDiff関数の増減単位について、以前は単位だけでいけたんですがいつのまにかTimeUnitを追記しないとエラーになるようです。
Visibleプロパティ
//入室と退室の期間がプラス（退室している）なら表示する
0<=DateDiff(ThisItem.EnterDate,ThisItem.LeaveDate,TimeUnit.Minutes)BorderColorプロパティ
RGBA(56, 96, 178, 1) //外枠の色、お好みでVisibleプロパティ
//Circle01の表示状態と逆
!Circle01.Visible //!はnotと同義Colorプロパティ
RGBA(255, 0, 0, 1) //お好みで- 円が空室、キャンセルが入室中を表現しています。
- ２つのアイコンはどちらか一方のみ表示されるため、重ねて配置します。
最後に、文字を表示するためにラベルコントロールを作成します。
部屋の名前と、自分の入室情報の２つをテンプレートに追加します。
Textプロパティ
//部屋の名前
ThisItem.RoomNameTextプロパティ
"入室中"Visibleプロパティ
//入室者が自分なら表示
ThisItem.EnterPerson=_user.surnameFillプロパティ
RGBA(255, 0, 0, 1) //お好みでおつかれさまでした、以上でアプリの作成は終わりです。
リリース準備
アプリの公開
アプリは公開しないと使えません。
保存して公開すれば、モバイル端末のPowerAppsアプリから起動できます。
アプリの共有
別ユーザーにも使用させる場合は、共有しておきましょう。
ユーザー名は日本語ではなく、メールアドレスで入力し、候補を選択します。
今回はSharePointリストを使っています。
アプリを共有したユーザーでも、データソースのアクセス権を持っていないと正常に動作しません。
まとめ
今回は入退室管理アプリを作成する手順をかなり細かく紹介しました。
この通りに作成すれば、それなりのアプリが作れるはずです。
応用すれば、備品や蔵書の貸し出しなどにも流用できます。
少しずつカスタマイズしてどのように動作するか確認してみましょう！
次のステップへ！
今回作成したアプリに、部屋の予約機能を追加します。
ご支援よろしくおねがいします
この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。
下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。
受取人のメールアドレスは amazon@anko7793.com までお願いします。
メッセージもいただけるとたいへん喜びます。
よろしくお願いします。
日付と時間を表示するには、Excelの書式をyyyy/m/d h:mmにします。
とりあえず日付型でエクスポートしたあと、SharePointリストで時間を含めるとしてもできます。
