Microsoft社が提供するローコード開発ツール「Power Platform」のアプリ機能(Power Apps)と、書籍検索APIの一つであるGoogle Books APIsを使用した、バーコードリーダーによる読込登録機能付き書籍管理アプリの作成例を紹介します。
- 操作環境：
- OS：Windows 11
- Webブラウザー：Edge
- 使用プラン：Microsoft 365 Business Premium(試用版)
- アプリ使用環境：
- OS：Android 14
- アプリ：PowerApps
- アプリ実装:編集画面:フロー呼出し・コンテナー表示制御
- アプリ実装:詳細画面:項目整備
- アプリ実装:詳細画面:借用・返却機能
- アプリ実装:一覧画面:検索項目整備
- アプリ実装:一覧画面:検索結果項目整備
- おわりに
アプリ実装:編集画面:フロー呼出し・コンテナー表示制御
情報取得ボタンにフロー呼出しの追加
コンテナー上の情報ボタンを選択し、 [詳細設定>OnSelect]を以下の通り設定します。
UpdateContext({
locIsbnCode:"", locBookName:"", locAuthor:"", locPublishedDate:Today(),
locPublisher:"", locMemo:"", locThumbnail:""
});
UpdateContext({localResponse:'PowerAppV2->書籍管理フロー'.Run(
DataCardValue13.Text
)});
UpdateContext({
locBookName:localResponse.'res-book-name',
locAuthor:localResponse.'res-author',
locPublishedDate:DateValue(localResponse.'res-published-date'),
locPublisher:localResponse.'res-publisher',
locMemo:localResponse.'res-memo',
locThumbnail:localResponse.'res-thumbnail'
});
コンテナーの表示/非表示制御の追加
コンテナーを選択し、 [詳細設定>Visible]を以下の通り変更します。
If(EditForm1.Mode=FormMode.New, true, false)
また、同じ[詳細設定]の[Height]と[Y]の値も確認しておきます。
コンテナーと編集フォームの表示が重複しているため、コンテナーの表示/非表示に応じて編集フォームの表示位置を可変にします。
左の[ツリービュー]の[EditScreen1>EditForm1]を選択し、 [詳細設定>Y]を以下の通り変更します。
If(EditForm1.Mode=FormMode.New, 276, 88)
画面タイトルの変更
編集画面のタイトルが[書籍管理]になっていますが、非表示で保持しているIDを表示するようにします。
編集画面上のタイトルを選択し、[詳細設定>Text]上を以下のように変更します。
"書籍管理 (ID:" & DataCardValue17.Text & ")"
アプリ実装:詳細画面:項目整備
必要項目の追加
左の[ツリービュー](下のツリーオブジェクトでもOK)より、[DetailScreen1>DetailForm1]を選択し、右の[プロパティ]の[ディスプレイ>フィールド]の[8件選択済み]を選択し、[フィールドの追加]を選択します。
[フィールドの選択]にて必要項目にチェックをつけ(この例では上の4項目)、[追加]を選択します。
項目の非表示設定
詳細フォーム上の項目[ID]の全体領域で右クリックし、[ロック解除]を選択します。[ディスプレイ>表示]をオフに変更します。
このアプリで使用しない項目[タイトル]が表示されている場合も同じように設定します。
ユーザーの表示形式変更
詳細フォーム上の項目[borrower]のデータ領域で右クリックし、[ロック解除]を選択します。
[詳細設定>Text]を選択し、値を以下に変更します。
If(IsBlank(Parent.Default), "", Office365ユーザー.UserProfileV2(Parent.Default).displayName)
サムネイルの表示形式変更
サムネイルをリンクではなくリンク先の画像表示に変更します。
詳細フォーム上の項目[thumbnail]のデータ領域で右クリックし、[ロック解除]を選択します。
[詳細設定>HintText]を選択し、値を以下に変更します。
<IMG SRC='" & Parent.Default & "' ALT='Book Image'/>"
項目のレイアウト調整
詳細設定の下の方にある[Height]、[Width]、[X]、[Y]に値設定すると意図したレイアウトになります。
- 0行目：category(幅370),status(幅270)
- 1行目：borrower(幅320),borrowd_date(幅320)
- 2行目：isbn_code(幅320),published_date(幅320)
- 3行目：book_name(幅640)
- 4行目：author(幅640)
- 5行目：publisher(幅640)
- 6行目：memo(幅640)
- 7行目：thumbnail(幅640)
画面タイトルの変更
詳細画面のタイトルが[書籍管理]になっていますが、非表示で保持しているIDを表示するようにします。
詳細画面上のタイトルを選択し、[詳細設定>Text]上を以下のように変更します。
"書籍管理 (ID:" & DataCardValue18.Text & ")"
アプリ実装:詳細画面:借用・返却機能
借用アイコンの追加
左上の削除アイコンを選択し、コピー&ペーストします([Ctrl]+[C]⇒[Ctrl]+[V])。
コピーしたアイコンを選択し、[ディスプレイ>アイコン]より、別のアイコンに変更します。
さらに、表示位置を削除アイコンの左隣に移動します。
借用アイコンを選択し、[詳細設定>OnSelect]を以下のように変更します。
Patch(書籍管理, LookUp(書籍管理, ID=Value(DataCardValue18.Text)),
{status:{Value:"貸出中"}, borrower:User().Email, borrowed_date:Today()}
)
続けて、[詳細設定]の以下設定も変更します。
- Tooltip："借用"
- Visible：If(DataCardValue2.Selected.Value="貸出可", true, false)
*statusが"貸出可"なら表示、それ以外は非表示とします
左のツリービューから借用アイコンの[…>名前の変更]を選択し、アイコンの部品名を[IconBorrow]に変更します。
返却アイコンの追加
左上の借用アイコンを選択し、コピー&ペーストします([Ctrl]+[C]⇒[Ctrl]+[V])。
コピーしたアイコンを選択し、[ディスプレイ>アイコン]より、別のアイコンに変更します。
さらに、表示位置を借用アイコンと同じ位置に移動します。
返却アイコンを選択し、[詳細設定>OnSelect]を以下のように変更します。
Patch(書籍管理, LookUp(書籍管理, ID=Value(DataCardValue18.Text)),
{status:{Value:"貸出可"}, borrower:"", borrowed_date:Blank()}
)
続けて、[詳細設定]の以下設定も変更します。
- Tooltip："返却"
- Visible： If(DataCardValue2.Selected.Value="貸出中", true, false)
*statusが"貸出可"なら表示、それ以外は非表示とします
左のツリービューから借用アイコンの[…>名前の変更]を選択し、アイコンの部品名を[IconReturn]に変更します。
アプリ実装:一覧画面:検索項目整備
検索項目にcategoryとstatusを追加します。
左の[ツリービュー] の[BrowserScreen1]を選択し、上メニューの[挿入]より以下部品を追加します。
- テキストラベル(2個)
- アイコン>消去
- 入力>ドロップダウン
- 入力>切り替え
また、前の工程の借用・返却アイコンのように、部品名を変更しておきます。
検索結果領域[BrowserGallery1]の位置を少し下にずらします。マウス操作がしにくい場合は、[詳細設定>Y]で値入力でも対応できます(この例ではY=308)。
さらに、検索項目の配置やラベル名を調整します。
さらに、検索項目の配置やラベル名を調整します。
一通り調整すると、このようになります。
[drpCategory]の[詳細設定>Items]を以下の通り変更します。
Distinct(Sort([@書籍管理], category.Value, SortOrder.Ascending), category.Value)
アプリ実装:一覧画面:検索結果項目整備
検索ロジックの変更
工程12で追加した検索項目を踏まえた検索ロジックに変更します。ソースが長くなるので、右側のプロパティではなく上のプロパティ領域を広げて設定します。
左側の[ツリービュー]の[BrowseGallery1]を選択し、左上のリストから[Items]を選択し、以下の通り変更します。
Sort(
If(tglStatus.Value=true,
Filter([@書籍管理],
IsBlank(drpCategory.SelectedText.Value) ||
category.Value = drpCategory.SelectedText.Value,
TextSearchBox1.Text in book_name
),
Filter([@書籍管理],
IsBlank(drpCategory.SelectedText.Value) ||
category.Value = drpCategory.SelectedText.Value,
TextSearchBox1.Text in book_name,
status.Value in ["貸出可"]
)
),
book_name,
If(SortDescending1, SortOrder.Descending, SortOrder.Ascending)
)
検索結果のレイアウト変更
左側の[ツリービュー]の[BrowseGallery1]を選択し、[ディスプレイ>レイアウト]を選択し、[画像、タイトル、サブタイトル]を選択します。
検索結果の項目変更
左側の[ツリービュー]の[BrowseGallery1>Title1]を選択し、[詳細設定>Text]を以下の通り変更します。
ThisItem.book_name
さらに、書籍名が長い場合を考慮し、2行表示可能な位置や高さに調整します。
左側の[ツリービュー]の[BrowseGallery1>Subtitle1]を選択し、[詳細設定>Text]を以下の通り変更します。
ThisItem.author & " / " & ThisItem.publisher & " / " & ThisItem.published_date & " / " & ThisItem.category.Value & " / " & ThisItem.status.Value
さらに、2行表示可能な位置や高さに調整します。
検索結果の背景色変更
検索結果のstatusの値に応じて背景色が変わるようにします。
左側の[ツリービュー]の[BrowseGallery1]を選択し、[詳細設定>TemplateFill]を以下の通り変更します。
If(ThisItem.status.Value="貸出不可", RGBA(200, 200, 200, 1), ThisItem.status.Value="貸出中", RGBA(196.8, 243.6, 196.8, 1), ThisItem.status.Value="貸出可", RGBA(255, 255, 255, 1))
アプリが完成しました。右上の公開アイコンを選択すると、このバージョンを公開できます。
おわりに
ギャラリーアプリを流用したので、少し機能追加して見た目を整える程度のアプリのつもりでしたが、記事化したら意外と長くなってしまいました。
今回のような簡単なアプリを元に機能改良・機能追加を行えば(例えば以下)、色々な業務で発展的に使用できそうです。
- 保管場所・保有部署・返却予定日等の項目を追加する
- 借用・返却の代行入力をできるようにする
- データ削除等の操作やデータの閲覧範囲を制御できるようにする
- 書籍情報の取得でヒットしなかった場合にメッセージを返す
ただし、便利な機能に限ってMicrosoft 365の標準ライセンスでは使用できないため(今回の例ではHTTPコネクタがこれに該当)、お金をかけずに実装しようとすると苦労しますね。
当ブログ内の連載記事
