2018年4月29日日曜日

PowerAppsで作るアプリ例 (1):学生情報検索アプリ


Microsoftは、モバイルアプリをプログラミング不要で数分で作れてしまうPowerAppsというサービスを提供しています。
では、このPowerAppsでどんなアプリが作れるのか、実際に作ってみた例を紹介します。

この記事では手順を1つ1つ詳細までは解説しません。あくまでアプリの作例とその大まかな構造を紹介することで「こんな感じで、こんな簡単に作れる」ということを分かっていただければと思います。

概要

今回作ったのは、学生情報検索アプリです。私の職場は大学で、学生の交換留学プロジェクト(大学全体の交換留学ではなく、特別プログラム)を担当しているので、海外へ送り出した学生と、日本へ留学に来た学生をそれぞれ管理するアプリが欲しいと思い、作ってみました。

表側の構造

アプリの見える部分(表側)構造は、次のようになっています。
  • トップページ
  • 派遣学生管理ページ
  • 派遣学生新規追加フォーム
  • 受入学生管理ページ
  • 受入学生新規追加フォーム
それぞれ、実際の画面と機能を見ていきましょう(表示されている情報はダミーデータです)。

トップページ



派遣学生・受入学生管理ページへそれぞれジャンプするボタンがあるだけです。

派遣学生管理ページ


名前、派遣先国、連絡先などで検索できます。情報は右側に表示され、保存・削除ができます。 また、右上「+」のボタンから新規追加できます。

派遣学生新規追加フォーム


新たな学生の情報を登録できます。

受入学生管理ページ


名前、出身国、連絡先などで検索できます。情報は右側に表示され、保存・削除ができます。 また、右上「+」のボタンから新規追加できます。

受入学生新規追加フォーム


新たな学生の情報を登録できます。

裏側の構造

表側(見える部分)の構造を紹介しましたが、では、裏側はどのような仕組みになっているのでしょうか。

PowerApps編集ソフト(ブラウザ版)で、裏側の構造を確認してみましょう。



表側のそれぞれの画面に対応した画面が作成されています(Welcome, Inbound, Outbound, InboundEdit, OutboundEdit)。作りたい画面=構造です。わかりやすいですね。初期状態では1枚しか画面がないので、作りたい画面の分だけ、新たに作成する必要があります。

派遣学生管理ページを例にして、その中がどういう構造になっているか紹介します。
左側の「画面」の「Outboundlist」を展開すると、その画面に含まれる様々なパーツのリストが表示されます。


このアプリで重要なのは、 1.学生情報を一覧表示する左部分(Outboundlist)と、2.その内容を表示し編集ができる右部分(Form2_2)です。この2つはそれぞれデータベースに接続され、データの読み書きがなされる部分です。

1.Outboundlistは、「ギャラリー」というパーツです。これは「挿入」メニューから追加できる要素で、あらかじめ何種類かデータ表示方法のテンプレートがあり、その1つです。2.フォームも「挿入」メニューから追加できます。

他は、検索窓、他のページへのジャンプボタン、保存ボタン、削除ボタンがあり、それぞれ関数を付け加えると機能を果たすようになります。

データベース

学生の情報が出てくるということは、データベースがあるはずです。このアプリの場合は何を使っているかというと、Office365のOneDriveです。

OneDriveに学生の情報を蓄積するExcelファイルを保存し、そことPowerAppsを繋げているのです。

ファイルの保存先はOneDriveでなくとも、DropboxなどPowerAppsが連携可能なストレージサービスやデータベースであれば接続が可能です。

まとめ

PowerAppsを使ったアプリの例とその構造を紹介しました。

このアプリを作る難易度ですが、機能自体はシンプルなので「Excelの関数が使える(苦手じゃない)人であれば作れる」程度だと思います。ただ、はじめてだと手間取る部分が多いはずです。慣れれば2−3時間くらいで作れるでしょうね。

例として「学生情報の管理」アプリとしましたが、これとほぼ同じ構造で、顧客管理や在庫管理アプリなどが作れるでしょう。

今後もPowerAppsを使ったアプリ実例は、不定期に紹介していきたいと思います。

PowerAppsの入門書もぼちぼち登場しています。


※個人情報をExcelに入れてクラウドストレージ上に置くのは、職場によっては情報管理規定に反する可能性があります。私の職場もそのおそれがあり、アプリは実運用していません。


EmoticonEmoticon