長期化している新型コロナウイルス対策で、リモート環境でも業務効率を上げるツールを検討されておられる方は多いと思います。当社でもPower Platformをベースに、様々な業務をクラウドアプリに置き換える試みをしています。その中で特に効果を実感していることは、スマホアプリが短期間で作成・改修出来る手軽さから、必要な情報をリアルタイムに連携する仕組みが作りやすくなったこと、データを可視化する手段が増え、状況の把握がスピーディーに行えるようになったことです。

さて、前回紹介した「Power AppsとCommon Data Serviceを使った出社率を管理するアプリ」は、情報収集をスピーディーに行うための仕組みでしたが、今回紹介する機能は、収集したデータを可視化するための仕組みです。

予定入力画面で入力されたデータから出社率を集計し、結果表示画面でグラフや一覧表を表示します。表示する内容は、下図の通りです。(1)の円グラフでは選択した日付のデータを区分ごとに集計し、全社の出社率を表示します。(2)の一覧表では1週間分の全社の出社率を日単位で表示します。(3)の棒グラフでは所属ごとの出社率を表示します。

今回のアプリでは、前回作成したエンティティを使用します。以下、Power Appsで出社率をグラフ化する機能をつくっていきます。

(1)結果表示画面のスクリーンを追加する。

まず、結果表示画面を作成するため、新規にスクリーンを追加します。挿入メニューより「新しい画面」で「空」を選択して追加します。このアプリではスクリーンを表示したタイミングでグラフや一覧表を表示させますので、スクリーンのプロパティOnVisibleを設定します。

最初にSet関数を使って変数SelectDaysを作成します。この変数には当日の日付をセットします。続いてエンティティWorkChkの中から、変数の日付と等しい予定日のデータだけに絞り込み、コレクションlist_SelectDaysにセットします。

(2)円グラフを作成する。

次に、円グラフを表示するためのコレクションを作成します。選択日付でフィルタリングしたlistSelectDaysを区分（在宅・出社・休み）ごとにCountIf関数で集計します。集計した結果は、新しく作成するコレクションlistZaitakuChk_Allにセットします。

円グラフは挿入メニューより「グラフ」を選択。円グラフを指定するとスクリーンにサンプルの円グラフが表示されます。ここで円グラフを選択してプロパティItemsを先程作成したコレクションlistZaitakuChkAllに変更すると区分ごとに色分けされた円グラフが表示されます。

(3)円グラフをデザインする

続いて、円グラフをデザインします。円グラフの色を変えるには円グラフをタップしてプロパティItemColorSetを設定します。色はRGBAで指定します。カンマ区切りでRGBAを指定すると、区分ごとに色を指定することができます。下図のように1色だけ指定すると、Power Appsがその色をベースに自動的に他の区分の色もセットしてくれます。

円グラフをリングにするには、背景色の円アイコンを挿入して円グラフの上に被せます。出社率はラベルで表示します。listZaitakuChkAllのレコードの内、在宅と出社の件数をもとに計算します。

(4)1週間分の出社率を表示する

1週間分の出社率を表示します。選択日付の区分ごとの件数はlistZaitakuChkAllに値がありますので、LookUpで区分を指定してラベルに表示します。

選択日付以降の出社率はギャラリーを使って表示させます。ギャラリーにセットしているのは1から6までの数値が入っているコレクションWeekChkです。日付の計算が出来るDateAdd関数を使ってWeekChkの数値を加算することで6日分の日付を表示させています。出社率はDateAddで求めた日付を条件にCountIfで件数を取得して計算しています。

(5)棒グラフ用のコレクションを作成する

さらに、棒グラフ用のコレクションを作成します。こちらも円グラフの時と同様にスクリーンのプロパティOnVisibleに書いていきます。最初に選択日付でフィルタリングしたコレクションlistSelectDaysに含まれる所属名を重複なしで取り出し、新しいコレクションlistBelongsGroupにセットします。

続いてlistSelectDaysの予定件数を所属と区分別にカウントして、listBelongsGroupに列としてひもづけます。listBelongsGroupに含まれる所属をレコード単位でlistSelectDaysの所属に紐付けるには@を使用します。

listBelongsGroupに在宅、出社、休みの列が追加され、listZaitakuChk_Belongsというコレクションを新たに作成しました。

(6)棒グラフをギャラリーに表示する

コレクションlistZaitakuChkBelongsをギャラリーにセットして、一覧表を作成します。ギャラリー内の所属名や区分を表示するには、下図を参考にラベルを使ってコレクションの列を指定します。出社率を示す棒グラフですが、これはPower Appsのグラフ機能ではなく、アイコンの四角形を組み合わせて表現しています。水色の四角形の幅を100として、上に被せた紺色の四角形の幅を出社率の値にするだけで完成します。

(7)出社理由一覧表を作成する

最後に出社理由を一覧表示してみます。個人ごとの出社理由が一覧表示されていると、上長は出社させる社員の優先順位がつけやすいですよね。 出社理由を表示するため、スクリーンとギャラリーを新規にアプリに追加します。このギャラリーには、日付選択でフィルタリングをしたコレクションlist_SelectDaysを、所属名で更に絞り込んでセットします。社員名や区分、理由をラベルでコレクションから表示することができればアプリは完成です。

以上、出社率管理アプリの作り方について、2回にわたり解説しましたが、いかがだったでしょうか。日々入力されるデータも、グラフ化ができるようになると、一目で状況がわかるので便利ですよね。グラフ表示するまでにコレクションの中身を整える作業が大変だとは思いますが、これに慣れておくと、アプリの見栄えも一層良くなると思いますので、ぜひトライしてみて下さい。

著者プロフィール

三島正裕


1978年島根県生まれ。ディーアイエスソリューション株式会社所属。クラウドサービスを中心としたシステム提案やアプリケーション開発をする傍ら現在はマイクロソフト製品の活用事例「Office 365徹底活用コラム」を自社サイトで執筆中。