Microsoft Power Apps

mishima201804 2

三島正裕のOffice 365コラム「Power Appsでフリーアドレスオフィスにいる社員を探そう」

この記事のURLとタイトルをコピーする
mishima201804 2

はじめに

こんにちは!クラウドビジネス担当の三島です。今回のOffice365コラムでは、フリーアドレスオフィスで役立つアプリを作成してみたいと思います。フリーアドレスというのは、仕事の内容に合わせて、自由に着席場所を選べるオフィススタイルのことで、固定席に比べて柔軟なコミュニケーションがとりやすいことから採用する企業は年々増えてきています。当社でも採用しており、業務効率の向上に効果を上げています。

ところが困った問題が一つあります。それは「広いオフィスでは誰がどこにいるのかわからない」と

いうことです。電話やチャットで確認をすれば簡単に解決する問題なのですが、1日に何度も確認をするのは煩わしいですよね。そこで今回は、誰がどの席に座っているのかという情報を簡単に共有できるアプリを作成してみたいと思います。座席番号をクリックするだけのシンプルなアプリですので、ぜひ読んで見てくださいね。


フリーアドレス座席確認アプリ

今回はこのようなアプリを作成します。オフィスの写真をアプリに張り付けて、座席ボタンを配置します。アプリの右側にあるリストには検索フォーム付きの社員一覧を配置して、クリックをすると座席ボタンの枠の色が変わるようにします。

image 1

アプリを作成する

Power Appsでアプリを作成します。Power Appsを起動して、サイドメニューからアプリを選択します。続いて「+アプリの作成」を選択してキャンパスを選びます。キャンパスのサイズはタブレットレイアウトを選択します。

image 1

オフィスの画像をアップロードする

フィスの写真をPower Appsにアップロードします。アップロードはメディアメニューにある画像ボタンを押して、参照ボタンからファイルダイアログを開いて選択をします。今回は3枚の写真それぞれをoffice1、office2、office3という名前でアップロードしています。

image 2 1

エンティティを作成する

どの座席に誰が座っているのかを保存するために、 Common Data Serviceでエンティティを作成します。今回のエンティティは下図の通り作成して下さい。

image 3 1

Common Data Serviceで初めてエンティティを作成される方は下記リンク先の手順を参考に作成してみてください。

Common Data Serviceで来客情報を管理する

エンティティを作成したら、データソースとしてアプリに追加します。ビューメニューにあるデータソースより「データ」を開きます。「+データソースの追加」よりCommon Data Serviceのエンティティ「seat」と今回は「Office365ユーザー」も追加します。

image 4 1

社員リストを作成する

社員を検索して一覧表示するためのリストを作成します。タイトル名は「社員一覧」としてラベルで作成します。その下に名前で検索出来るようにテキスト入力フォームを作成します。更にその下にギャラリーを置いて、検索結果を表示させます。検索結果には座席番号と社員名を表示させています。また、社員がどの部屋にいるかがひと目でわかるように部屋毎に色分けをした四角形を置いています。具体的なパーツと各種パラメータは下図を参考にして下さい。黒文字が各パーツで、青文字がそのパラメータです。

image 5 1

座席ボタンを作成する

座席ボタンを設定します。ボタンを挿入して、下図を参考に各種パラメータを設定します。下図では、ボタンの色は青緑で設定していますが、部屋毎にお好きな色で設定して下さい。OnSelectがボタンを押したときの動作です。社員リストに自身の名前が表示されていればエンティティseatから自身のデータを削除。その後、座席Noと自身の名前をseatに登録します。

座席1ボタンが作成出来ましたら、座席の数だけボタンをコピーして、SeatNoの値を座席番号に合わせて変更して下さい。ボタンのパラメータBorderThicknessとOnSelectにそれぞれ1か所ずつあります。

image 6 1

座席ボタンと部屋の画像を配置する

座席ボタンと部屋の画像を配置します。配置方法は下図を参考にして下さい。最初にオフィスの画像を配置してそのうえに座席ボタンが置かれるように配置します。オフィスの写真にはそれぞれラベルで部屋名を表示させます。

image 7 1

外出ボタンを設定する

外出しているときは全ての座席ボタンの枠線表示をオフにします。エンティティseatに自身のデータがある場合は削除するように設定します。

image 8 1

動作確認をする

すべてのパーツの配置が終わりましたら動作確認をしてみます。

  • 着席する場合
    座席ボタンをクリックします。クリックした座席Noと自身の名前が社員一覧に表示されます。表示された社員名をクリックした時に、座席ボタンの枠線がピンクに変わればOKです。
  • 席を移動する場合
    座席1を選択した状態で、座席2ボタンをクリックします。社員一覧にある自身の座席Noが2に変更されます。自身の社員名をクリックした時に座席No2の枠線がピンクに変わればOKです。
  • 離籍する場合
    外出ボタンをクリックします。社員一覧から自身の名前が削除されます。すべてのボタンの枠線が非表示になっていればOKです。
image 9 1

おわりに

今回はフリーアドレス用のアプリを作成してみましたが如何でしたでしょうか。自動的に座席登録はされないので社員の皆様に積極的にアプリを使用して頂かなくてはならないのが難点ですが、このアプリはアイデア次第でいろいろと活用することが出来ると思います。例えば社員一覧に顔写真を入れたり、内線番号などを入れたりしておくと電話を取り次ぐ方にはとっては便利ですよね。新しく会社に入ってこられた方は顔と名前をおぼえるのが大変ですので、このようなツールがあると喜ばれると思います。着席ボタンを工夫すれば、勤怠管理にも使えるかもしれません。どこで何をしていたのかを記録できるようにすれば日報アプリにも応用できそうです。ぜひ皆さんもトライしてみて下さいね。 Microsoft Power Appsにつきましてはディーアイエスサービス&ソリューションまでお気軽にお問い合わせください。それでは次回もお楽しみに。

image 11 1

三島正裕が登壇!オンデマンドウェビナー

Excelでまとめている、その商談記録。わずか10分でスマホアプリにしてみます!

https://www.cloudtimes.jp/dynamics365/resource/deal-record-excel-make-it-smartphone-app-just-10-minutes

どんなレイアウトでも大丈夫。フリーアドレス座席予約アプリを10分で作成します。

https://www.cloudtimes.jp/dynamics365/resource/create-free-address-seat-reservation-app-in-10-minutes

Dataverse をさらっと知りたい皆様へ。画像付きドキュメント管理アプリを10分で作成します。

https://www.cloudtimes.jp/dynamics365/resource/low-code-tool-dataverse-for-teams


DX教育サービス、「Microsoft Power Apps」見本アプリ


「Microsoft Power Apps」導入事例


Microsoft Power Apps ハッカソン、イベント登壇レポート

関連記事一覧