Power Apps × Outlook で会議室予約アプリを作ってみた

Power Platform を好奇心でいじってるエンジニア歴 1 年目の、横田です!
今回は Power Apps で「会議室をサクッと予約できるアプリ」を作ってみたので、その紹介と感想です!
今回のアプリでは Outlook を用いて会議室のスケジュール管理をしています。Outlook 関連の実装は「Power Apps のトリセツ(もちろん非公式)# Outlook スケジュール編」に載っています!
それではやっていきましょう!

アプリを作ったきっかけ

先日、他社さんの会議室にお伺いした際に、各会議室ごとのドアの前に会議室の空き情報などを管理しているタブレットが配置してあって、「これ Power Apps でサクッと作れるやん! 」と思い、実際に作ってみたのがきっかけです。

アプリのユースケース

~ 3 人で会話中 ~
Aさん:「一旦話まとめたいからサクッとミーティングしよっか」
Bさん:「えっと…どこか会議室空いている?」
Cさん:「ちょっとまってよー(outlookで確認中)」
Cさん:「会議室Aが空いてる!予約するねー!」
これです。今空いている会議室を探すというユースケース

~ 会議室前の外での出来事 ~
Aさん:「うわーすげーメンツが揃ってミーティングしてるよ」
Bさん:「すげーハイレベルな会話が飛び交ってるんだろうな」
Aさん:「このミーティング長そうだな…」
Cさん:「ちょっとまってよー(outlookで確認中)」
Cさん:「あー18:00までだって、あと 3 時間もあるよ」
これです。目の前でやっているミーティングがいつまでなのか知りたいというユースケース

~ ミーティング後 ~
Aさん:「よーし今のミーティングを踏まえて次のアクションまとめよっか」
Bさん:「この会議室そのまま使えるかな?」
Cさん:「ちょっとまってよー(outlookで確認中)」
Cさん:「あと30分は空いてるよー!予約しとくねー!」
これです。ミーティングを延長したいというユースケース

「そんなユースケース結構レアやん?」と書きながら思いましたが、3 つ集まれば需要ありということで続けていきます!

アプリの機能

  • 今から何分という形で会議室の予約がすぐにできる
  • 普通に会議室の予約ができる
  • 今のミーティングを延長できる
  • 会議室の状況が確認できる

アプリの利用例

ここからは利用シーンごとにアプリの操作方法を紹介してきます!本当は予約する際に確認画面とかを設けたほうがいいかなとか、色々細かい点が気になりましたが、サクッと作ってみたかったのでご容赦ください。

今からすぐに会議室を予約する

  1. 15分、30分、60分の中から必要な時間を選択してタップ!

普通に会議室を予約する

  1. 開始時間を選択
  2. 何分枠かを選択
  3. 予約ボタンをタップ!

今のミーティングを延長する

  1. 15分、30分、60分の中から必要な時間を選択してタップ!

会議室の状況を確認する

  1. 見る

まとめ

今回は会議室の空き状況を確認してサクッと予約できるアプリを作ってみました!
まずアプリを作ってみた感想は、Power Apps と Outlook を接続してスケジュールを可視化するのは簡単なのに、デザインの細かな設定が難しく、慣れる必要があるなと感じました。
また、今回のアプリはスクリーンが1枚だけの1ページアプリを意識して作りました。1ページアプリを意識したら、予約処理後のスケジュール更新のコードを各ボタンにコピペすることになり、同じコードのオンパレードがとても嫌でした。変数やコレクションをどう管理すればアプリが作りやすく、編集しやすくなるのか、そのベストプラクティス的な部分を学ぶ必要があるなと感じました。
アプリの作成時間は、約 10 時間ぐらいです!UI の作成に時間がかかりましたが、我ながら会議の開始時間を選択するスクロールは触っててテンション上がりました、笑。

余談

最近 Power Apps でグラデーションしたいなと思って調べてみたら、htmlを埋め込んでグラデーションしているツイートを見つけたので、html で Power Apps をデザインするブログも今度書きます!!

FIXER Inc. 横田力哉
  • FIXER Inc. 横田力哉
  • 大学で脳科学を研究し、全く別世界のクラウドの会社に飛び込んだ、社会人2年目です!メインは MaaS 関連の Webアプリ開発で、縁を感じて Power Platform も触っています!

%d人のブロガーが「いいね」をつけました。