PHONE APPLI Engineer blog

エンジニアブログ

簡単かつスピーディーに投票アプリを開発できちゃう Microsoft Power Apps の紹介

はじめまして、株式会社 PHONE APPLI リサーチデベロップメント の松井です。
22年度に新卒入社したばかりのひよっこ社員です。
この記事は、自分が入社してから書く記事の第 1 号です。

Power Apps で投票アプリを開発する事になった経緯

オンラインプレゼン大会を新入社員が主催ですることになり、個々のプレゼン内容の評価を視聴者に投票してもらう事になる。

プレゼン後に Microsoft Forms で投票してもらう仕組みだと、プレゼン全体の評価は得られるが要所要所の評価が得られにくい。そこで、プレゼン中に簡単に投票できる仕組みにすることを思いついた。

プレゼン中に簡単に投票できる投票アプリを開発することにしたが、プレゼン大会まで期間が 1 週間ほどしかなかった。

そこで、スピーディーかつ簡単に開発してアプリを公開できるサービスはないかと調べた所、マッチしたのが Microsoft Power Apps だった。

Power Apps とは

Microsoft Power Apps は様々なデータソース (Excel, SharePoint など) 、基盤データプラットフォームに接続できるビジネスアプリを短時間で開発できる Microsoft のサービスです。

docs.microsoft.com

短時間で開発とはいっても結局「開発」なんだから難しいんじゃないの?とお考えの方、

安心してください!

Power Apps には Power Apps Studio というWeb上で実行できるエディタが用意されており、 PowerPoint でスライドを作成するのに近い感覚でアプリを開発する事ができます。

しかも、開発したアプリはレスポンシブデザインのため、ブラウザ上でもモバイルデバイスでもシームレスに実行できちゃいます。

すごいですね!

個人的に、Power Apps のおかげで楽に開発できたと感じた点をリストアップしてみました。

  • Excel 関数や Power Point の知識があればほとんど開発できる

  • 画面の大きさやデバイスの種類、OSなどを考慮しなくてもいい

  • Excelをデータベース代わりに使える

  • バージョン管理機能

  • 静的解析機能でエラーの早期発見ができる

どんな感じで開発するの?

Power Apps は Power Apps Studio (Web 上の専用エディタ) を使って開発します。
(2022年6月の時点ではプレビュー機能ですが、フォームのイメージ画像や Figma の UI キットから読み込んで開発することもできます。)

Power Apps Studio によって、PowerPoint でスライドを作るのと同じように、図形を追加したりテキストボックスを追加したりしてユーザーが触る画面を開発することができるようになっています。

データの計算や条件分岐などのデータの扱い方も、Excel 関数ライクな書き方で開発することができます。

そのため PowerPointExcel をある程度使ったことがある人であれば、 PowerApps の学習を少しすれば使いこなすことができるようになると思います。

Power Apps Studio

ちなみにこの画面は0から作成したわけではなく、Excel のテーブルをもとに自動生成したものです。
データの紐付けを含めて最低限のレイアウトを自動で用意してくれるので、後からレイアウトを調整するだけで思い通りのアプリを開発する事ができます。

どんなものを作ったの?

実際にどのような投票アプリを開発したのかをご紹介します。

投票アプリ Tameee

発表者リストページの氏名とタイトルは伏せ字にしていますが、実際は Excel 上の発表者情報を読み込んで表示します。Excel 上で発表者情報を管理しているので、急に発表者情報に変更や追加があったとしても即座に情報を編集し、アプリに反映する事ができます。

投票ページは5つの評価項目をクリック・タップして手動で送信するようなシステムです。初めは押した分だけ自動で送信するように開発していましたが、何十人ものユーザが同時に使用した際の負荷試験などのテストを行う時間がなかったので安全策として送信は手動で行うようにしました。

送信された評価は、評価記録用 Excel のテーブルに保存されます。そのため、Excel のグラフ機能などを使用して即座に評価を可視化することができました。

ちなみにどうして羊なのかというと、企画段階で「ためになるボタン(タメェ〜ボタン)」を実装する計画があったのでその名残で羊のアイコンを使っています。

PC とスマホで表示はどう違う?

先ほどの投票アプリの画像は PC 画面のキャプチャなのですが、じゃあスマートフォンではどのように表示されるのか気になりますよね?

そんなあなたのために!

PC とスマートフォンのそれぞれでアプリを表示して横に並べ、写真を撮ってみました。

PCとスマートフォンの表示比較

こんな風にスマートフォンでも、Microsoft Power Apps アプリを使えば PC と全く同じ内容のアプリを使用することができます。

いちいちスマートフォン向けに追加で開発する必要がないため、アプリ開発時間を大幅に短縮することができます!

プレゼン大会で使ってみてどうだった?

視聴者からは、「使いやすい」「かわいい!」「何回でも投票したくなる」といったコメントをいただきました。

Power Apps は Teams のチャット上部タブに作成した投票アプリを追加して視聴者がアプリをすぐに開いて投票できる状態にできるので、簡単に視聴者がアクセスできたため大量の評価を収集する事ができました。

また、プレゼン中に簡単に投票できるようにした事で「どこが一番盛り上がっていた」「プレゼン中のここが良かった」「プレゼンのこの箇所が特にためになった」などの分析を狙い通りにすることができました。

さいごに

ここまでは Power Apps の良いところばかりを紹介してきましたがデメリットもあります。
それは凝ったものを作ろうとすると結構時間がかかってしまう事です。
ただ、「自分で環境を作ったり外部サービスとの接続方法を考えたりしてわざわざ開発するほどでもないなー」っていうシステムを開発するには最適なので一度使ってみてください!

以上、アプリをスピーディーに開発する事ができる便利なサービス Power Apps の紹介と、実際に開発してプレゼン大会で使用した投票アプリの紹介でした。

この記事が誰かのタメェ〜になれば良いなぁ


PHONE APPLIについて

phoneappli.net
phoneappli.net