21
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

株式会社ネオシステムAdvent Calendar 2023

Day 18

Power AppsとPower Automateを使った業務改善アプリの構築例(貸出管理アプリ)

Last updated at Posted at 2023-11-15

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

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

Power Appsとは

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

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

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

Power Automateとは

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

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

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

今回作るアプリについて

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

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

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

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

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

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

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

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

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

SharePointリストの作成

  • SharePointのホームページにアクセスします。
    無題.png

  • +マークのボタンから リスト をクリックします。
    無題2.png

  • 空白のリスト をクリックします。
    無題3.png

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

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


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

  • 列の追加 をクリックします。
    無題5.png

  • 列の種類を選択します。
    無題6.png

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

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

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

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


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

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

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

サンプルデータを追加

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

  • 新しいアイテムの追加 をクリックします。
    無題11.png

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

Power Appsで貸出アプリを作る

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

アプリの作成画面を開く

  • Power Appsのホームページにアクセスします。
    スライド1.PNG

  • 作成 をクリックし、 空のアプリ をクリックします。
    スライド2.PNG

  • 空のキャンバスアプリ作成 をクリックします。
    スライド3.PNG

  • アプリ名 に任意の名前を入力して 作成 をクリックします。
    スライド4.PNG

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

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

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

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

テキストを入れる

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

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


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

本の一覧を表示させる

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

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

  • BookList をクリックして、データソースの選択 から SharePoint を選択します。
    スライド10.PNG

  • 直接接続(クラウドサービス) をクリックし、接続 をクリックします。
    スライド11.PNG

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

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


  • 本一覧 にチェックを入れ、接続 をクリックします。
    スライド13.PNG


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

  • BookList を選択し、コントロール内の鉛筆マークをクリックします。
    スライド14.PNG

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

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


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


フィルター機能を付ける(テキスト)

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

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


フィルター機能を付ける(トグルボタン)

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

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

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

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


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

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

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

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

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

  • Item プロパティを選択し、数式バーに以下の内容を入力します。
    BookList.Selected
    
    スライド27.PNG

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

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


借りるボタンを作る

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

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

  • BorrowButtonOnSelect プロパティを選択し、数式バーに以下の内容を入力します。
    Patch(本一覧, BookList.Selected, {借りた人:User().Email, 返却日:DateAdd(Today(), 7, TimeUnit.Days), ステータス:First(Choices(本一覧.ステータス, "貸出中"))})
    
    スライド30.PNG

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

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


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

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

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


返却するボタンを作る

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

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

  • ReturnButtonOnSelect プロパティを選択し、数式バーに以下の内容を入力します。
    Patch(本一覧, BookList.Selected, {借りた人:Blank(), 返却日:Blank(), ステータス:First(Choices(本一覧.ステータス, "貸出可能"))})
    
    スライド33.PNG

  • ReturnButtonDisplayMode プロパティを選択し、数式バーに以下の内容を入力します。
    If(And(BookList.Selected.ステータス.Value = "貸出中", BookList.Selected.借りた人 = User().Email), DisplayMode.Edit, DisplayMode.Disabled)
    
    スライド34.PNG

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

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

  • Power Automateのホームページにアクセスします。
    スライド1.PNG

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

  • フロー名欄に任意の名前を入力して、次のように設定します。

    • 開始日:今日の日付
    • 時間:10:00AM(何時でも良い)
    • 繰り返し間隔:「1」「日」

    スライド3.PNG


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

  • 新しいステップ をクリックします。
    スライド4.PNG

  • SharePointコネクタをクリックします。
    スライド5.PNG

  • アクション の中から 複数の項目の取得 をクリックします。
    スライド6.PNG

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

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

  • リスト名 の入力欄から「本一覧」を選択します。
    スライド9.PNG

  • 詳細オプションを表示する をクリックします。
    スライド10.PNG

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

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

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

  • 欄の ステータス をクリックします。
    スライド13.PNG

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

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

分岐条件を作る

  • 新しいステップ をクリックし、コントロールコネクタの 条件 をクリックします。
    スライド15.PNG

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

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

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

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

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


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

  • はいの場合 の方の アクションの追加 をクリックします。
    スライド19.PNG

  • Outlookコネクタの メールの送信(V2) をクリックします。
    スライド20.PNG

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

動作確認をする

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

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

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

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

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

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

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

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

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

フィルターボタンも正常に動作するかを確認します。トグルボタンをオンにすると、「貸出中」になっている本が消えたことが分かります。
スライド41.PNG

返却日になったら、対象者にメールで返却を促す通知をする

このフローは本来、1日おきに自動的に実行されるフローです。
ただPower Automateには、作ったフローを試しに実行できる機能があります。今回はそれを使って正しく動作するかを見ていきます。

まずフローを実行する前に、「本一覧」リストのページにアクセスして、任意の本データにて、以下の画像のようにデータを直接編集してください。
スライド22.PNG

これは「自分が借りた本について、返却日が今日に迫っている」という状況を再現したデータです。
データの編集が終わったら、フローの作成画面に移り、次の手順を実行してください。

  • テスト をクリックします。
    スライド23.PNG

  • 手動 を選択したら テスト をクリックします。
    修正1.png

  • フローの実行 をクリックします。
    スライド25.PNG

  • 完了 をクリックすると、フローの実行結果の画面に遷移します。
    スライド26.PNG

フローの実行が成功すると、自分のアカウントのOutlookに、Power Automateからのメールが届いているはずです。
スライド28.PNG

まとめ

今回は、会社内での本貸し出しに関する管理アプリをPower Appsで作成し、更には返却の通知を行うフローをPower Automateで作成してみました。

PowerPointのようなマウスを使う操作によってアプリ開発が行えるため、プログラミング初心者にも開発しやすい便利なツールであることが分かっていただけたかと思います。

皆さんもPower Platformを用いて、良い業務改善のソリューションをどんどん作っていきましょう!

21
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?