こんにちは。ひらいです。
本記事はtruestarアドベントカレンダー2023の、12月12日分の記事となります。
今回、Power Appsで簡易なアプリ開発を行う機会があったので、どんな感じなのかを紹介したいと思います。
なおPower Appsとは、Microsoft社が提供するアプリケーション開発環境で、必要最低限のローコードで簡単なWebアプリの構築・共有が可能なツールです。
Microsoft 365のアプリケーションの一つなので、スタンダードな機能だけであれば追加のライセンス無しに使えるところも強みです。
特に、裏にデータベースがあって、そこにデータを追加・編集できるフォームのようなWebアプリを作るのに向いています。
Power Appsを起動する
Power Appsはブラウザ上で動作するツールです。
Microsoft 365のアプリ一覧からアクセスすることができます。
Power Appsのホーム画面に遷移します。
データベースからそれに沿ったアプリを作成したり、逆に入力フォームを作成してそれを格納するデータベースを構築したり、典型的なビジネスアプリであればテンプレートから作成することもできます。
今回は例として、日々のタスクの状況を入力できるアプリを作ってみたいと思います。
項目として必要なのは、日付、タスク名、タスクの状況の3つぐらいでしょうか。
スタンダードコネクタとプレミアムコネクタ
Power Appsは基本的に裏でデータベースを持って、それに接続してデータをやり取りする仕組みです。
このデータへの接続に、スタンダードコネクタとプレミアムコネクタの2種類があって、プレミアムコネクタを使用するには追加ライセンスが必要となります。
この追加ライセンスは開発者だけでなくアプリの利用者にも必要になるため、全社的に利用してもらうような場合は少々ハードルが高くなります。
DataverseやSQLServerのデータに接続する場合はプレミアムコネクタが必要になります。
今回は手軽に作ってみるということで、スタンダードコネクタだけでOKな、SharePointのデータに接続してみることにします。
まずはSharePoint上にExcelでテーブルを作成します。
SharePoint上でExcelのワークブックを新規作成して、先ほどの3項目を列として持つシートを作成します。
列名には日本語も使えるのですが、列のスキーマ名には英数字しか使えず、それが自動生成の際にエラーを起こすので、列名は英字にしておきます。
また、日付や数値などデータ型を自動的に認識してくれるので、サンプルとして1行データを入力しておくと便利です。
このままではデータベースとして利用できないので、範囲を選択して「挿入」-「テーブル」を選択し、テーブルに変換します。
「先頭行をテーブルの見出しとして使用する」にチェックしておけば、フィールドは自動的に生成されます。
シートの準備ができたら、所定のファイル名を付けて保存します。ファイル名は「DailyTask」としました。
データからアプリを初期生成する
データの準備ができたので、いよいよアプリの構築に入りましょう。
Power Appsのホーム画面に戻り、「データで開始する」を選択します。
するといくつかのオプションが出てきます。
「Excelファイルのアップロード」や「空白のテーブルから開始する」を選ぶと、プレミアムコネクタが必要になってしまうため、「外部データを選択」を選びます。
「Excelから」を選択して、先ほど保存したExcelファイルのテーブルを選択します。
先ほどのテーブルにはIDの列がなかったので、推奨されている通りに「新しい列の自動生成値」でID列を新規作成します。
そして右下の「アプリを作成する」を押すと、読み込んだテーブルからイイ感じでアプリを生成してくれます。
機能的には、データの新規作成、既存データの検索、編集、削除ができ、新規作成と編集用に各項目の入力フォームがあるという、シンプルで使いやすい構成となっています。
細かいことにこだわらなければ、これだけで十分使えるアプリです。
まずは生成されたアプリをいったん保存しておきましょう。
右上の保存ボタンを押すと、最初なのでアプリの名前を付けて保存するようになります。次からは上書き保存となります。
アプリをカスタマイズする
さて、これだけではさすがに不十分なので、いくつか修正していきたいと思います。
カスタマイズは編集画面から行うことができます。
ここまで来ると若干のコード編集やプログラムの知識が必要になりますが、編集画面はVisual Studioなどと同じような感じなので、どこで何ができるかは使っていくうちに分かってくるでしょう。
中央にアプリの外観、左ペインにフォーム部品の一覧がツリービューの形で表示され、右ペインに選択した部品のプロパティが表示されます。そして上部で選択したプロパティの数式が入力できるようになっています。
タイトルを変更
まずはアプリのタイトルが「テーブル1」とデフォルトのままになっているので、気の利いたアプリ名に変更しましょう。
タイトルのパーツを選択して、プロパティの「テキスト」を編集すればOKです。
数式を見ると、タイトルはデータソースのテーブル名を取得しているようですね。
タイトルは固定で構わないので、直接テキストを入力してしまいます。
「タスク状況入力」とでもしましょうか。
ここはあくまで数式なので、文字列を表す""を付けて「"タスク状況入力"」と入力する必要があります。
これでタイトルが変わりました。
日付の時刻部分を消す
入力するのは日付だけでいいのに、時刻の入力欄まで生成されています。不要なので消してしまいましょう。
それぞれの入力欄はデータカード(DataCard)という形で管理されています。
不用意に変更できないよう、初期状態ではロックがされているので、日付のデータカードを選択して、右ペインの「詳細設定」を選択し、「プロパティを変更するためにロックを解除します」をクリックします。
そうするとロックが解除されて編集できるようになります。
時間と分、それと区切り文字の「：」のパーツを3つとも選択します。Ctrlキーを押しながら選択すれば、複数選択になります。
3つ選択した状態で「delete」キーを押せば、パーツが削除されます。めでたし、めでたし。
……と、何ということでしょう。
エラーが2つも表示されてしまいました。
慌てることなかれ。
エラーのアイコンをクリックして「数式バーで編集」を選ぶと、どこがエラーになっているのかが分かります。
これを見ると、時刻入力欄を削除したのに、それをもとに時刻部分を計算して値を更新しようとしているのが原因のようです。
数式の中で時刻を加算している部分をカットしてやればOKです。
めでたくエラーが1つ解消されました。
もう1つのエラーは、ErrorMessage2という部品のYプロパティで起こっているようです。
これは、日付の入力に不備があった場合に表示するエラーメッセージのY座標が、削除した時間入力欄の座標をもとに計算されているせいで起きるエラーのようです。
このあたりは多少のプログラムの知識や類推力が必要になってきますが、慌てずエラー箇所の名前やコードを読み解けば分かります。
「HourValue1」が削除した時間入力欄のパーツ名なので、これを日付入力欄のパーツ名「DateValue1」に直してやればOKです。
無事2つともエラーが解消されました。
IDの入力欄を消去
テーブルデータからアプリを初期生成した際に追加した、ID列が「PowerAppsId」として入力欄が生成されてしまっています。
これは自分で入力すべき項目ではなく、システムで自動的に振るべき項目なので、入力フォームからは消したいです。
試してみると分かりますが、この欄には適当な値を入力しても、自動的に生成されたIDが付与されるようになっています。
しかし、空欄にしたままだとエラーが発生します。
データカード「PowerAppsId_DataCard1」の「Default」プロパティを以下のように変更することで、うまくいきました。
If(IsBlank(ThisItem.__PowerAppsId__),"a",ThisItem.__PowerAppsId__)
「ThisItem」が現在選択中のレコードなので、それのPowerAppsIdがブランク、すなわち新規作成の場合はとりあえず「a」という文字列を、そうでなければPowerAppsIdの値をそのまま持ってきています。
データ追加時に「a」という文字列は自動的に生成されたID値に置き換わります。
これで、IDの入力欄を自動化することができました。
最後にデータカードのプロパティで、表示をオフにしてやれば、非表示となります。
以上で、IDの入力欄を非表示にすることができました。
項目の順番を変更
想定していた項目の順番は、日付(Date)、タスク名(Task)、タスクの状況(Status)なのですが、フォームの配置を見ると、タスク名とタスクの状況の順序が逆になっています。
これはツリービューからフォーム(Form1)を選択し、「フィールドの編集」で各項目を上下に移動して順番を変更すれば、入力フォーム上の項目も入れ替わってくれます。
この通り、配置が変わりました。
リストの表示内容を変更
左側のリストの表示内容が、タスクの状況、タスク名、IDとなっていますが、これは想定とは異なります。
欲しいのは日付とタスク名で、タスクの状況とIDはリストに載せる必要はありません。
左のリストはギャラリーと呼ぶそうです。
「RecordsGallery1」のパーツを選択して、レイアウトで表示内容は変更できるようです。
今回は日付とタスク名の2つの項目を表示させたいので、「タイトルとサブタイトル」に変更します。
リストの中身は後で直すとして、とりあえず2項目になりました。
ただ、横幅がはみ出してしまったので、プロパティの「コンテナー内に配置」で一番右の「拡大」を選択し、はみ出さないようにします。
次にギャラリーのタイトルの内容を、タスクの状況から日付に変更します。
タイトルのパーツを選択して、プロパティの「テキスト」を修正します。
テキストの数式は「ThisItem.Status」となっており、これが現在のレコードのタスクの状況を表しているので、これを以下のように日付に変更してやればOKです。日付はText関数を使って書式を変換しています。
Text(ThisItem.Date,DateTimeFormat.ShortDate)
この通り、タイトルが日付に変わりました。
サブタイトルの方はもともとタスク名になっているので変更不要ですが、もし変更したい場合は同様にして修正が可能です。
選択中のレコードのタイトルを変更
最後に、選択中のレコードのタイトルも、日付とタスク名に変更したいですね。
選択中のレコードのタイトルを表示しているパーツを選択します。
テキストの数式を見ると、「RecordsGallery1.Selected.Status」となっています。
意味は、ギャラリー（左のリスト）の選択されているレコードの、タスクの状況(Status)なので、これを変更してやればOKです。
今回は、日付とタスク名を全角スペースで区切って表示したいので、以下のようにしました。
Text(RecordsGallery1.Selected.Date,DateTimeFormat.ShortDate) & " " & RecordsGallery1.Selected.Task
実際にタイトルが変わっているのが分かります。
ほか、細かい機能はいろいろ付けようと思えば付けられますが、いったんはこんなところでしょうか。
アプリのプレビュー（テスト実行）
それでは作成したアプリをテスト実行してみましょう。
まずはアプリを保存して、次にその隣の「アプリのプレビュー」ボタンを押せば、アプリが実行されます。
すると実際のアプリの画面が表示されます。
もうこれで普通に動作するので、いろいろ入力して試してみましょう。
右上でデバイス別の表示を確認することができ、通常のWebブラウザでの表示、スマホ端末での表示、タブレット端末での表示をそれぞれ確認することができます。
×ボタンを押せば、元の編集画面に戻ります。
この先、アプリを公開するとなるともう少し手続きが必要ですが、自分で使う分には以上で完成となります。
多少試行錯誤しながらでも、1～2時間程度でここまでのものは作れてしまいました。
おわりに
データベースの入力フォームアプリは昔から様々なものが作られてきましたが、新規入力だけならともかく、既存データの編集や削除となるといろいろ考えることが多くなり、簡単なものでも数日は要する作業でした。
しかしPower Appsを使うことで、この手のよくあるアプリならば、数時間で十分に実用的なものができてしまいました。恐ろしい時代……。
実際に広く公開するアプリとするには、もう少し作り込みが必要にはなりますが、最初の動くものが短時間で作れるので、あとはこれを実際のユーザーに試用してもらいながら、細かな仕様を調整していくなど、かなり開発がやりやすくなる印象です。
まだまだ自動生成の癖や限界はありますが、Power Appsだけに今後もどんどんパワーアップしていくことが期待されますね。
皆さんもぜひ活用してみてください。
