Theories of Pleiades

技術の話とかイベントに行った話とか思ったこととか

PowerAppsで部員管理システムを作る①

ということで使ってみます。

やること

部活用の部員管理アプリを作ります。

完全内製でもいいのですが、

  • 複雑な機能を要さない
  • 後の代に簡単に引き継げるようにする
  • あまり手数を掛けたくない

などの理由からPowerAppsを使ってみることにします。

物は試しというやつです。

データベースを作る

PowerAppsにサインアップしてデータベースを作ります。

通貨はJPY、言語はJapaneseを選択します。

このあとの邪魔になるのでサンプルを含める~みたいなところのチェックは外してしまいます。


エンティティを作る

一人ひとりの部員を表すテーブルを作っていきます。

サイドバーからデータ→エンティティを選択し、新しいエンティティをクリックします。

表示名は部員とします。

今回は - 氏名 - 氏名ローマ字 - メールアドレス - 学科 - 学年 - 寮生or通生 を作ります。

それぞれ、新しいフィールドをクリックし表示名とID、データ型を入力します。

エンティティには既定でPrimaryNameフィールドが含まれており、これは他のエンティティからアイテムを参照するときの主キーみたいなもの?みたいです。

今回はメールアドレスを主キーとして登録したいので、PrimaryNameをクリックし、表示名を「メールアドレス」に変更します。

学科や学年のように複数のうちから選択したい場合、データ型にオプションセットを指定します。

新しいオプションセットを選択し、任意の選択肢を追加してオプションセットを保存します。

寮生か通学生かは「2つのオプション」というデータ型で実現できます。

フィールド名を「通学区分」とし、寮・通学の2つから選択できるようにします。

全て入力し終えたらエンティティを保存してアプリの作成に移ります。

f:id:mwc922_hsm:20181213053417p:plain
作成したエンティティ


フォームを編集する

エンティティに対応するフォームを作っていきます。

データ→エンティティ→部員→フォームを選択します。

エンティティを作成したとき、自動的に3つのフォームが作成されます。

このうち、種類がメインとなっているものを編集していきます。

f:id:mwc922_hsm:20181213054150p:plain
フォーム編集画面

先程エンティティの作成で追加したフィールド(+自動で追加されたもの)が右側に並んでいるので、必要なものをD&Dで全般タブに移動させます。

f:id:mwc922_hsm:20181213055308p:plain
いぇい

アプリを作る

作成したエンティティに沿ってモデル駆動のアプリを作ります。

アプリ名と説明を入力して完了ボタンを押すだけ。簡単~

f:id:mwc922_hsm:20181213045757p:plain
アプリデザイナー


サイトマップを編集する

アプリの内容を作っていきます。サイトマップの鉛筆マークをクリックします。

f:id:mwc922_hsm:20181213045942p:plain
サイトマップデザイナー

  1. 新しいサブエリアを作成
  2. エンティティ・部員を選択
  3. タイトルを設定(部員管理、とします)
  4. IDを設定(member_areaとします)

f:id:mwc922_hsm:20181213050352p:plain
サブエリアの編集

保存して閉じるをクリックし、アプリデザイナー画面に戻ります。


エンティティのグラフを作成する

部員の学年や学科の内訳が見たいので、グラフを作っていきます。

サイトマップのエンティティビュー内、グラフを選択し、新規作成をクリックします。

f:id:mwc922_hsm:20181213061556p:plain
グラフデザイナー

ここでは例として各学年の割合を示す円グラフを作っていきます。

手順は以下のとおりです。

  1. 画面上部リボンより円グラフを選択
  2. グラフ名を入力
  3. 凡例エントリに部員を指定
  4. 横軸のラベルに学年を指定


作成したアプリを公開する

アプリデザイナー画面右上の保存ボタンをクリックしてから公開ボタンをクリックします。

これでアプリが動作するようになります。

再生ボタンをクリックすると、実際にアプリを動作させることができます。

新規追加から部員を追加するとホーム画面上に部員一覧が表示されるようになり、グラフの表示から各グラフを見ることができます。

f:id:mwc922_hsm:20181213065541p:plain
テストデータを追加した画面

やったー!