Power AppsとPower Automateを使った業務改善アプリの構築例（貸出管理アプリ） #PowerAutomate

Power Platformは、必要に応じたアプリをローコード及びノーコードで作れるため、内製化支援のツールとしてとても優秀です。

今回はその中でもPower AppsとPower Automateを使って、業務改善を目的としたアプリを構築する例をご紹介します。

Power Appsとは

Power Appsを使えば、任意のアプリケーションを効率よく構築できます。
先述した通りローコード、ノーコードでアプリを作れることから、専門的なプログラミング知識などは必要ありません。

基本的には、GUI（グラフィカル・ユーザー・インターフェース）ベースのマウス操作を用いた直感的な操作によって、アプリのデザインをカスタマイズします。

作れるアプリには「キャンバスアプリ」「モデル駆動型アプリ」の2種類があります。
今回は「キャンバスアプリ」を取り扱います。

Power Automateとは

Power Automateは、繰り返し行われる一連の作業を自動化できるツールです。
自動化された一連の作業はフローと呼ばれます。

こちらもGUIベースの直感的な操作によって、単純なフローから、条件やループなどを使用した高度なフローまで作成可能です。

作れるフローには「クラウドフロー」と「デスクトップフロー」の2種類があります。
今回は「クラウドフロー」を取り扱います。

今回作るアプリについて

今回は私の職場において、実際にアプリを作ることで改善できる部分がないかを考えて何のアプリを作るか決めました。
その中で私が「あったらいいな」と思ったものが、本の貸し出しを管理するアプリです。

私の職場では、エンジニア向けの書籍を無料で貸し出ししています。
ただ現状は、本を借りるときに紙の管理表に必要事項（自分の氏名、借りる本の名前、返却日など）を記入し、各自が本を持っていくという管理方法になっています。

この方法だと、自分が借りたい本が今借りられる状態かどうかを確認するのに、いちいち席を立って紙の管理表を確認しに行く必要があります。
本の貸し出しについて、アプリから貸し出し状況を確認出来るようになれば、移動の手間が省けて便利です。更に返却日に応じて、対象の本を借りている人に向けてメールで通知を行えば、返却し忘れなども防ぐことが出来そうです。

アプリを作るにあたって、搭載する機能をまとめると、以下のようになります。

所蔵されている本の一覧を見て、借りたい本を探す
本を借りる（または返却する）場合は、その本の貸し出し状況を更新する
返却日になったら、対象者にメールで返却を促す通知をする

これらの機能を実装したアプリを、Power AppsとPower Automateを用いて実際に作っていきましょう！

データを保存するテーブルを用意する

アプリ作成に入る前に、まずは本のデータを格納する場所を作る必要があります。
今回は、SharePointのリスト（Microsoft Lists）をテーブルとして利用します。

SharePointは、Microsoft 365のライセンスがあればそのまま利用することが出来ます。

SharePointリストの作成

SharePointのホームページにアクセスします。

＋マークのボタンから リスト をクリックします。

空白のリスト をクリックします。

名前 には「本一覧」、保存先 には「マイリスト」を選択してください。

本来であれば、これから作るリストは今回作るアプリを使う人たちに共有する必要があるので、保存先 にはSharePoint上で作ったサイトを選択しなければいけませんが、今回は試作段階なので「マイリスト」のままで問題ありません。

本のデータに関する列を追加

列の追加 をクリックします。

列の種類を選択します。

名前 に列名を入力し、保存をクリックします。下の表に従って、任意の列を追加してみてください。

列名	列の種類	備考
副題	テキスト
著者名	テキスト
出版社	テキスト
カテゴリ	選択肢	「一般」「IT」「その他」
場所	選択肢	「1F」「2F」

基本的に、各自が「あったら便利だな」と思う列を適宜追加していただければと思います。表に示しているのは、例として私が追加した列の一覧になりますのでご注意ください。

列の種類が「選択肢」の場合は、選択肢について適宜編集を行ってください。

本の貸し出しに関する列の追加

先ほどと同様に、列の追加 から、以下に示した3つの列を追加します。

列名列の種類備考

ステータス選択肢「貸出中」「貸出可能」

借りた人テキスト

返却日日付と時刻

列名	列の種類	備考
ステータス	選択肢	「貸出中」「貸出可能」
借りた人	テキスト
返却日	日付と時刻

サンプルデータを追加

列を追加したら、適当にサンプルとなる本のデータを何件か追加します。
この作業は必須ではないですが、この後のアプリ作成において、サンプルデータがあった方が作りやすいと思います。

新しいアイテムの追加 をクリックします。

「タイトル」～「場所」には任意の内容を入力し、「ステータス」は「貸出可能」を入力して、保存 をクリックします。

Power Appsで貸出アプリを作る

本データの保存先となるテーブルを作ったので、次に貸出管理アプリをPower Appsを使って作ります。

アプリの作成画面を開く

Power Appsのホームページにアクセスします。

作成 をクリックし、 空のアプリ をクリックします。

空のキャンバスアプリ の 作成 をクリックします。

アプリ名 に任意の名前を入力して 作成 をクリックします。

ここで下の画像のような新たなページに遷移すると思います。
このサイトはPower Apps Studioという、キャンバスアプリを作成するのに使用するサイトです。

次はこのPower Apps Studioにて、本の貸し出し管理アプリの画面を構成していきましょう。
説明する際に、Power Apps Studioにおける画面の各部名称を使って説明します。
その名称については下の画像に説明がありますので、ぜひご参照ください。

本の一覧を表示する部分を作る

まずは、先ほど作ったSharePointリスト「本一覧」に保存されているデータを見られるようにしていきます。

テキストを入れる

挿入 から テキストラベル をクリックして、スクリーン内にコントロールを追加します。

スクリーン内にいずれかのコントロールを入れる場合、画面上部の 挿入をクリックすれば、追加できるコントロールの一覧が表示されるので、その中から追加するコントロールを選びます。
このコントロールを追加する操作は、この後も何回か登場しますので、是非覚えていただきたいです！

プロパティペインの テキスト に「本一覧」と入力したら、下の画面を参考に位置を移動させましょう。

本の一覧を表示させる

スクリーン内に 垂直ギャラリー コントロールを追加します。

ツリービューから、このコントロールの3点マークから 名前の変更 をクリックしたら、コントロール名を「BookList」に変更します。

BookList をクリックして、データソースの選択 から SharePoint を選択します。

直接接続（クラウドサービス） をクリックし、接続 をクリックします。

リストの場所を表す SharePoint URLを入力してください というメッセージの下の入力欄に Microsoft ListsのマイリストのURL（URLの確認方法は下記参照） を入力します。

Microsoft ListsのマイリストのURLは、人によって異なります。
「本一覧」のページにアクセスした際のURLの内 http:~_comまでの部分がそれに該当します。

本一覧 にチェックを入れ、接続 をクリックします。

対象の本の貸し出し状況が一目で分かるようにする

BookList を選択し、コントロール内の鉛筆マークをクリックします。

BookListの中に テキストラベル コントロールを追加します。

ギャラリーコントロールは、データソースに保存されている各データを一覧で表示しますが、1つ分のデータをどのように表示するかを決めるテンプレートが存在します。
鉛筆マークを押すと、そのテンプレートのデザインを編集することが出来るようになります。

Text プロパティを選択し、数式バーに以下の内容を入力します。
```
ThisItem.ステータス.Value
```

フィルター機能を付ける（テキスト）

スクリーン内に テキストラベル コントロールを追加します。

プロパティペインの テキスト に「貸出可能な本のみ表示」と入力したら、BookList を少し変形して、「本一覧」の下に配置します。

フィルター機能を付ける（トグルボタン）

スクリーン内に 切り替え コントロールを追加します。

「貸出可能な本のみ表示」と書かれたテキストラベルの横の位置に移動させたら、ツリービュー から、このコントロール名を「AvailableToggle」に変更します。

BookList の Items プロパティを選択し、数式バーに以下の内容を入力します。
```
Filter(本一覧, AvailableToggle.Value = false || ステータス.Value = "貸出可能")
```

Filter 関数は、指定したテーブルに対して特定の条件を満たすレコードのみを返す関数です。
参考：https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-filter-lookup

対象の本についての貸し出し状況を操作する部分を作る

垂直ギャラリー内でクリックした本の詳細を表示させる

スクリーン内に 表示フォーム コントロールを追加します。

プロパティペインの データソース をクリックし、「本一覧」をクリックします。

プロパティペインの フィールド にある フィールドの編集 をクリックし、フィールドの追加 から「タイトル」「副題」「カテゴリ」「著者名」「出版社」「場所」を追加します。

Item プロパティを選択し、数式バーに以下の内容を入力します。
```
BookList.Selected
```

Item プロパティは、フォーム内でどのレコードを表示するかを決めます。

BookList.Selected とは、BookList の中のレコードの内、マウスクリックで選択されたレコードを表します。

借りるボタンを作る

スクリーン内に ボタン コントロールを追加します。

プロパティペインの テキスト に「この本を借りる」と入力したら、ツリービューから、このコントロール名を「BorrowButton」に変更します。

BorrowButton の OnSelect プロパティを選択し、数式バーに以下の内容を入力します。

Patch(本一覧, BookList.Selected, {借りた人:User().Email, 返却日:DateAdd(Today(), 7, TimeUnit.Days), ステータス:First(Choices(本一覧.ステータス, "貸出中"))})

OnSelect プロパティは、対象のコントロールをクリックした場合の動作を決めます。

Patch 関数は、対象のテーブルについて、特定のレコードに対して内容を編集したり、また新しくレコードを追加したりすることができる関数です。
参考：https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-patch

BorrowButton の DisplayMode プロパティを選択し、数式バーに以下の内容を入力します。
```
If(BookList.Selected.ステータス.Value = "貸出可能", DisplayMode.Edit, DisplayMode.Disabled)
```

DisplayMode プロパティは、対象のコントロールに対する操作（クリックなど）を制御します。

If 関数は、条件に合わせて返す値を変えることが出来る関数です。
参考：https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-if

返却するボタンを作る

スクリーン内に ボタン コントロールを追加します。

プロパティペインの テキスト に「この本を返却する」と入力したら、ツリービューから、このコントロール名を「ReturnButton」に変更します。

ReturnButton の OnSelect プロパティを選択し、数式バーに以下の内容を入力します。

Patch(本一覧, BookList.Selected, {借りた人:Blank(), 返却日:Blank(), ステータス:First(Choices(本一覧.ステータス, "貸出可能"))})

ReturnButton の DisplayMode プロパティを選択し、数式バーに以下の内容を入力します。

If(And(BookList.Selected.ステータス.Value = "貸出中", BookList.Selected.借りた人 = User().Email), DisplayMode.Edit, DisplayMode.Disabled)

Power Automateで本の返却を通知するフローを作る

クラウドフローの作成画面を開く

Power Automateのホームページにアクセスします。

作成 をクリックし、 スケジュール済みクラウドフロー をクリックします。

フロー名欄に任意の名前を入力して、次のように設定します。
- 開始日：今日の日付
- 時間：10:00AM（何時でも良い）
- 繰り返し間隔：「1」「日」

全ての本データを取得するアクションを追加する

新しいステップ をクリックします。

SharePointコネクタをクリックします。

アクション の中から 複数の項目の取得 をクリックします。

追加したアクションを1度クリックして詳細を開いたら、サイトのアドレス の入力欄から カスタム値の入力 をクリックします。

先ほど調べたMicrosoft Listsの「マイリスト」のURLを入力します。

リスト名 の入力欄から「本一覧」を選択します。

詳細オプションを表示する をクリックします。

フィルタークエリ の入力欄には、次の内容を入力します。
（[「ステータス」列の内部名] の部分の内容は、下記の方法から確認して下さい。）
```
OData_[「ステータス」列の内部名] eq '貸出中'
```

[「ステータス」列の内部名]の部分は、人によって内容が異なります。次の手順で「ステータス」列の内部名を確認し、その文字列を当てはめてください。

SharePointリスト「本一覧」のページを開いたら、右上の歯車マークから リストの設定 をクリックします。

列 欄の ステータス をクリックします。

開いたページのURLの内&Field= 以降の文字列が「ステータス」列の内部名です。

返却期限を迎えている人に向けてメールを送信するアクションを追加する

分岐条件を作る

新しいステップ をクリックし、コントロールコネクタの 条件 をクリックします。

左側の 値の選択 には、動的なコンテンツ から 複数の項目の取得 の 返却日 をクリックして入力してください。

条件アクションが、自動的にApply to eachアクションの中に入れられたことを確認します。右側の 値の選択 には、式 の Fx と書かれた入力欄に、次の内容を入力して OK をクリックしてください。
```
utcNow('yyyy-MM-dd')
```

Apply to each（それぞれに適用する）アクションは、コントロールコネクタ内のアクションの1つで、このアクション内に記述されたフローを、指定されたデータ数分繰り返し行うことが出来ます。
データの指定は 以前の手順から出力を選択 と書かれたボックスに入力します。

自動的に Apply to each アクションに囲まれたのは、 複数の項目を取得する アクションから出力されるデータの個数が複数あるため、全てのデータの対して同じアクションを適用する必要があるとシステム側が判断したためです。

utcNow 関数は、現在日時を返す関数です。引数として日時表記のフォーマットを渡すことで、任意の表記形式にすることもできます。

メールを送信するアクションを追加する

はいの場合 の方の アクションの追加 をクリックします。

Outlookコネクタの メールの送信(V2) をクリックします。

宛先 には、動的なコンテンツ から 複数の項目の取得 の 借りた人 をクリックして入力します。
件名 と 本文 には、本貸し出しアプリからの返却に関する通知であることが分かるような内容を入力します。例としては、以下の画像をご参照ください。

動作確認をする

作ったアプリとフローが正常に動作するかどうかを確認しましょう。

所蔵されている本の一覧を見て、借りたい本を探す

この機能については、既にアプリを作成している途中でSharePointリスト「本一覧」の全データを垂直ギャラリーにて表示させていたので、正しく動作しているとします。

本を借りる（または返却する）場合は、その本の貸し出し状況を更新する

まず対象の本を借りる場合は、アプリ内の「この本を借りる」ボタンを押します。
すると、「この本を借りる」ボタンが押せなくなり、代わりに「この本を返却する」ボタンが押せるようになったと思います。

また「本一覧」リストのページにアクセスしてデータを見てみると、対象の本データの「借りる人」列には自分のEmailアドレスが、「返却日」列にはボタンを押した日から1週間後の日付が格納されており、「ステータス」列も「貸出中」に変化しているはずです。

「この本を返却する」ボタンを押した場合はこの逆で、「借りる人」「返却日」列が空になって、「ステータス」列は「貸出可能」に戻ります。

次に「本一覧」リストのページにアクセスして、任意の本データにて、以下の画像のようにデータを直接編集してみます。

これは「自分以外の誰かがその本を借りている」という状況を再現したデータになります。
この本データについてアプリ内から確認してみると、どちらのボタンも押せなくなっています。他の人が借りているから当然「この本を借りる」ことは出来ないし、「この本を返却する」ことも出来ないため、こちらも正常に動作していることが確認できます。