Microsoft社が提供するローコード開発ツール「Power Platform」のアプリ機能(Power Apps)と、書籍検索APIの一つであるGoogle Books APIsを使用した、バーコードリーダーによる読込登録機能付き書籍管理アプリの作成例を紹介します。
- 操作環境：
- OS：Windows 11
- Webブラウザー：Edge
- 使用プラン：Microsoft 365 Business Premium(試用版)
- アプリ使用環境：
- OS：Android 14
- アプリ：PowerApps
アプリ実装:編集画面:項目整備
必須項目の追加
左の[ツリービュー](下のツリーオブジェクトでもOK)より、[EditScreen1>EditForm1]を選択し、右の[プロパティ]の[ディスプレイ>フィールド]の[8件選択済み]を選択し、[フィールドの追加]を選択します。
[フィールドの選択]にて必要項目にチェックをつけ(この例では上の4項目)、[追加]を選択します。
項目が追加されたら、項目[memo]を展開し、[コントロールの種類]を[複数行テキストの編集]に変更します。
項目の非表示設定
アプリ内の処理で必要でも表示させたくない項目について、非表示にすることができます。
編集フォーム上の項目[ID]の全体領域を選択し、[ディスプレイ>表示]をオフに変更します。
このアプリで使用しない項目[タイトル]が表示されている場合も同じように設定します。
なお、不要項目は削除もできますが、エラーが出て扱いが面倒なので、非表示にした方が楽です。
項目の編集不可設定
編集画面で表示は必要でも編集させたくない項目について、編集不可にすることができます。
編集フォーム上の項目[borrower]のデータ領域で右クリックし、[ロック解除]を選択します。
[詳細設定>DisplayMode]を選択し、値に[.View]を追記します。
[ディスプレイ>色]の背景色のアイコンを選択し、パレットから薄い灰色を選択します。
同様に、項目[borrowed_date]も設定します。
ユーザーの表示形式変更
項目[borrower]はデータ上ユーザープリンシパルネーム(UPN)を格納しますが、アプリ上はdisplayNameを表示させます。
左メニューのデータアイコンを選択し、[データの追加]を選択し、[Office]でキーワード検索し、[Office 365 ユーザー]を選択します。
さらに、[接続の追加]と[接続]を選択し、Office365ユーザーが追加されることを確認します。
編集フォーム上の項目[borrower]のデータ領域を選択し、 [詳細設定>Default]を選択し、値を以下に変更します。
If(IsBlank(Parent.Default), "", Office365ユーザー.UserProfileV2(Parent.Default).displayName)
項目の新規登録時の初期値設定
新規登録時に項目の初期値を設定することができます。
編集フォーム上の項目[status]のデータ領域で右クリックし、[ロック解除]を選択します。 [詳細設定>DefaultSelectedItems]を選択し、値を以下に変更します。
If(EditForm1.Mode = FormMode.New, Choices([@書籍管理].status, "貸出可"), ThisItem.status)
同じ初期値の設定でも、項目の種類によって設定するプロパティ名が変わります。
編集フォーム上の項目[borrowed_date]のデータ領域を選択し、 [詳細設定>DefaultDate]を選択し、値を以下に変更します。
If(EditForm1.Mode=FormMode.New, Blank(), Parent.Default)
プロパティの少し下にある[InputTextPlaceholder]の値も以下の通り変更します。
If(IsBlank(Self.SelectedDate), Text(Blank(), Self.Format, Self.Language))
項目値の変数渡し
以下項目はバーコード読込や書籍情報取得でデータ授受を行うため、変数を定義して値を渡す形にします。
- バーコード読込：isbn_code
- 書籍情報取得：published_date、book_name、author、publisher、memo、thumbnail
まずはこれらの変数を定義します。
左のツリービューで[EditScreen1]を選択し、[OnVisible]プロパティを選択し、以下の通り設定します。
UpdateContext({
locIsbnCode:"", locBookName:"", locAuthor:"",
locPublishedDate:Today(),
locPublisher:"", locMemo:"", locThumbnail:""
});
- グローバル変数：画面間で使用
- コンテキスト変数：画面内で使用
編集フォーム上の項目[isbn_code]のデータ領域で右クリックし、[ロック解除]を選択します。[詳細設定>Default]を選択し、値を以下に変更します。
If(EditForm1.Mode=FormMode.New, locIsbnCode, Parent.Default)
同様に、項目[book_name]、[author]、[publisher]、[memo]、[thumbnail]も設定します(変数はそれぞれのものを使用します)。
[published_date]については、データの種類が日付型のため、設定が若干異なります。
編集フォーム上の項目[published_date]のデータ領域で右クリックし、[ロック解除]を選択します。[詳細設定>DefaultDate]を選択し、値を以下に変更します。
If(EditForm1.Mode=FormMode.New, locPublishedDate, Parent.Default)
プロパティの少し下にある[InputTextPlaceholder]の値も以下の通り変更します。
If(IsBlank(Self.SelectedDate), Text(locPublishedDate, Self.Format, Self.Language))
項目のレイアウト調整
少々扱いに癖がありますが、詳細設定の下の方にある[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,高さ215)
- 7行目：thumbnail(幅640)
アプリ実装:編集画面:バーコード読込・情報取得機能
コンテナーの追加
バーコード読込機能と情報取得機能は新規登録時しか表示しないため、それを制御するためのコンテナーを追加します。
上メニューの[挿入>レイアウト>コンテナー]を選択します。
コンテナーの幅をアプリの幅(640)に広げ、位置をアプリタイトル領域のすぐ下に移動します。
なお、コンテナーの表示/非表示制御は後で設定します(設定途中で非表示になると作業しにくいため)。
バーコードリーダーの追加
コンテナー内の[+]アイコンを選択し、[メディア>バーコードリーダー]を選択します。
追加されたバーコードリーダーの幅と位置を適宜調整します。
追加したバーコードリーダーを選択した状態で、[ディスプレイ]の下記設定を変更します。
- テキスト：クリックして書籍のバーコードを読み込む
- 色関連：このアプリのテーマの色(この例では緑系)
さらにそのままバーコードリーダーを選択した状態で、 [詳細設定>OnScan]を選択し、値を以下に変更します。
UpdateContext({ locIsbnCode:Last(BarcodeReader1.Barcodes).Value });
情報取得ボタンの追加
コンテナーを選択し、上メニューの[挿入>ボタン]を選択します
追加されたボタンの幅と位置を適宜調整します。
追加されたボタンを選択した状態で、 [詳細設定]の下記設定を変更します。
- Text： "ISBNコードから書籍情報を取得する"
- RadiusBottomLeft、RadiusBottomRight、 RadiusTopLeft、RadiusTopRight：10
- Size：20
なお、OnSelectについては、次の工程で作成するフローを呼び出してデータを授受するため、その後に設定します。
アプリ実装:書籍検索フロー
左メニューのフローアイコンを選択し、[フローを新規作成する]を選択します。
[+ 一から作成]を選択します。
[+ 入力の追加]を選択し、以下の通り設定します。
- 種類：テキスト
- 入力名：req-isbn-code
[新しいステップ]を選択します。
[変数>変数を初期化する]を選択し、以下の通り設定します。
- 名前：arrayAuthors
- 種類：アレイ
*著者は複数値を保持しているため、一旦アレイ型でデータを受け取り、アプリに返すときに[、]区切りのテキスト型に変換します
[新しいステップ]を選択し、[組み込み>HTTP>HTTP]を選択します。
[HTTP]は以下の通り設定します。
- 方法：GET
- URI：https://www.googleapis.com/books/v1/volumes?q=isbn:[req-isbn-code](項目)
【2024/11/07追記】
URI内のパラメーターについて、[q=isbn:xxxx]と記述していますが、2024/11/07確認時点で、isbnをISBNと大文字で記載しないと動作しませんでした。エラーが出る場合は大文字に変更して試してください。
[新しいステップ]を選択します。
[変数>変数の設定]を選択し、以下の通り設定します。
- 名前：arrayAuthors
- 値(式)：body('HTTP')?['items']?[0]?['volumeInfo']?['authors']
[新しいステップ]を選択します。
[Power Apps>Power Appまたはフローに応答する]を選択します。
[+ 出力追加]を選択し、以下の通り設定します。
- 種類：テキスト
- 出力名：res-book-name
- 出力値(式)： body('HTTP')?['items']?[0]?['volumeInfo']?['title']
同様に[+出力追加]を選択し、以下の通り他の項目も設定します。
| 種類 | 出力名 | 出力値 |
|---|---|---|
| テキスト | res-author | join(variables('arrayAuthors'),'、') |
| 日付 | res-published-date | body('HTTP')?['items']?[0]?['volumeInfo']?['publishedDate'] |
| テキスト | res-publisher | body('HTTP')?['items']?[0]?['volumeInfo']?['publisher'] |
| テキスト | res-memo | body('HTTP')?['items']?[0]?['volumeInfo']?['description'] |
| テキスト | res-thumbnail | body('HTTP')?['items']?[0]?['volumeInfo']?['imageLinks']?['thumbnail'] |
一通り設定ができました。
左上のフロー名を分かりやすい名称に変更し、[保存>×]を選択し、アプリの作成画面に戻ります。
Postmanについて(参考)
APIを使用したアプリ開発を行う場合、「Postman」というツールを使うと、データ構造が分かり便利です。
無料でサインアップでき、設定がサインアップ時のアカウントに紐づくため、別PCにPostmanを移行した場合もそのアカウントで設定を引き継ぐことができます。
画面はPostmanで書籍検索APIのボリューム検索を実施した結果です。画面下部に検索結果が表示され、データ構造が分かるようになっています。
【2024/11/07追記】
URL欄のパラメーターについて、[q=isbn:xxxx]と記述していますが、2024/11/07確認時点で、isbnをISBNと大文字で記載しないと動作しませんでした。エラーが出る場合は大文字に変更して試してください。
次の記事に続きます。
当ブログ内の連載記事
