１．Microsoft Power Appsでアプリ作成
こんにちは！
普段はとあるスーパーの物流部門で働いている人です。文系出身の初心者ですが、物流現場のデジタル化に挑戦中です！
デジタル化のための情報収集をしていたところ、社内環境でMicrosoft Power Appsというローコードツールを使用できることがわかりました。以前、Glideというノーコードツールを使って物流ポータルアプリを作成したのですが、社内環境で使えるPower Appsでもアプリを作れるようになりたい！ということで、Glideの使い方を少し振り返りながら、Glideで作成したアプリをPowerAppsでも作成していきたいと思います！。
Microsoft Power Apps
プログラミングをしなくてもアプリ作成が行えるローコード開発ツールです。クラウドサービスであるMicrosoft Power Platformの一つで、Power Automateなどのツールと連携することもできます。
Power Appsのアカウント
Power Appsは基本的に会社や学校での利用を前提に作られているため、個人のメールアドレスやGmailなどのフリーメールアドレスでは登録できないようです。会社や学校など組織から発行されているメールアドレスを使ってアカウント登録をする必要があるので利用の際はご注意下さい。
↓↓↓以前、Glideでアプリ作成に挑戦した記事はコチラ↓↓↓
２．作成結果
１）作成するもの
以前、Glideで物流ポータルアプリを作成しましたが、機能の中から店舗検索の部分をPower Appsで作成してみました。店舗一覧を作成して各店舗の物流情報を紐付けるというものです。
２）作成したアプリの動画
結果として、ほとんど同じアプリができました！！
アプリの細かい見た目や一部PowerApps側のプレミアム機能(Map機能など)を除くと、Glideで作成した店舗検索アプリとほぼ同じアプリを作成することができました！
しかし、アプリの作成方法についてはGlideとは異なりますので、次の項から作成手順を説明していきたいと思います。
３．Microsoft Power Appsでのアプリ作成手順
１）使用したツール
・Microsoft Power Apps（アプリ作成に使用）
・Googleスプレッドシート（データソースとして使用）
Power Appsは主にキャンバスアプリ、モデル駆動型アプリ、ポータルアプリに分かれます。今回はGlideのような使い方ができて、比較的シンプルなキャンバスアプリを作成しようと思います。
２）データソースの準備
アプリの作成に入る前に、店舗詳細のデータを準備してデータソースとします。以前、Glideでアプリを作成した時にGoogleスプレッドシートに店舗詳細のデータを作成していますので、同じものをGoogleスプレッドシートにコピペして使います。
GlideではGoogleスプレッドシートやエクセルなどをデータソースとして選べましたが、Power Appsのキャンバスアプリでは更に多くのデータソースと連携してデータ操作を行うことができるようです。
Power Appsで連携できるデータソースの例
(１)Microsoft製品
Excelファイル、SharePointリスト、Dataverse、Teamsなど
(２)Microsoft製品以外
Googleスプレッドシート、Gmail、Twitter、Dropboxなど
(データは以前Googleスプレッドシートで作成したものをコピペして使用)
３）アプリの作成開始
データソースの準備ができたので、アプリの作成に入ります。通常キャンバスアプリはPower Appsのホーム画面の「空のアプリ」を選んで作成することが多いと思いますが、今回はGlideと比較をしたいのでデータソースを接続してからアプリを作成していきます。
(Microsof365からPowerAppsを起動⇒データソースを接続⇒アプリ画面が立ち上がるまで)
読み込み後(データソース接続後)の画面を見ると、既にアプリの画面のようなものができています！Glideと同じようにデータソースを渡すと、ある程度自動でアプリを作成してくれるようです。画面構成もなんとなくGlideに似ています。
しかし、データの抽出内容が必要な内容ではなかったので、その辺りを修正していきます。
Power Apps Studio(データソース読み込み後の画面)
↓↓↓PowerAppsの画面構成の説明記事はコチラ↓↓↓
４）アプリの内容確認とビュー
まず、現在のキャンバスアプリがどうなっているのか確認するためアプリのプレビューを見ます。Glideの場合は中央のアプリ画面を直接さわるとアプリの動作を確認できましたが、PowerAppsの場合、画面右上の▷ボタンを押してプレビュー画面を開く必要があります(またはF5ボタンを押す)。プレビューを確認すると店舗一覧の画面と店舗詳細の画面、編集画面があり、ボタンを押すと各画面に画面遷移するようです。表示内容を変えていきたいので元の編集画面に戻します。
Power AppsのキャンバスアプリではUI要素の追加や動作の構成を直接行いますが、UI要素をコントロール、構成する内容をプロパティと呼びます。今回はデータソースからアプリを作成していてアプリがある程度できていますので、左側ウィンドウからコントロールを選んで修正を行っていきます。
↓↓↓左側のウィンドウの説明記事はコチラ↓↓↓
コントロールを修正するのに左のウィンドウにあるツリービューを選ぶと、画面ごとに作成中のアプリのコントロールがツリー構造で表示され、ツリービュー内のコントロールを選択することで、中央のアプリのコントロールを選択したことになります 。
下の図はPowerAppsのツリービューとアプリの連携イメージです。Gildeの場合は中央のアプリ部分を動かせば、左ウィンドウも自動で中央のアプリに対応したウィンドウに変わりますが、PowerAppsの場合はツリービューの中で階層別にアプリ画面が構成されていますので、編集したい画面を変更する場合はツリービューから変更する必要があります。
↓↓↓コントロールについての説明記事はコチラ↓↓↓
５）アプリ内容の編集 ～店舗一覧画面～
それでは、アプリの内容を編集していきます。まずは店舗一覧画面から修正します。店舗一覧画面のツリービューからレイアウトのコントロールとなるBrouseGallery1を選びます。BrouseGllery1を選ぶと店舗一覧画面全体の選択になりますので、選択した状態で右側のウィンドウの中にあるレイアウトを選ぶと好きなレイアウトに変更することができます。今回はレイアウトの中から「画像、タイトル、サブタイトル」を選ぶことにします。すると、中央のアプリ画面のレイアウトが変わりました！
操作方法は違いますが、左側のウィンドウでコンポーネントを選ぶ、右側のウィンドウでレイアウトや詳細を設定する、変更内容が中央のアプリに反映される、という基本的な構成がGlideと似ています。
レイアウトを変更したので次に表示する内容を変更します。Glideと似ていると書きましたが、ここでは続けて右側のウィンドウの「フィールド」の「編集」をクリックします。表示されているデータ項目がでてくるので、その中から「Title」と「Subtitle」をそれぞれ「店舗名」と「店舗コード」に変更します。データ項目は接続しているデータソースのデータ項目が自動で表示されます。
変更を終了すると・・・表示項目に店舗名と店舗コードが表示されるようになりました！
レイアウトと表示内容は変更できましたが、画像がうまく反映されていません。画像の部分の「image」を選択しても画像をファイルから取り込んだり、アプリ内に保存されている画像は選択できそうですが、データソースの項目を選択できそうにありません。この場合、ThisItem.項目名を入力することでデータの値を参照させることができます。
この入力は右側のウィンドウの「データ」の「Image」に入力するか、画面上部のフォームから入力することができます。
ギャラリー(Gallery)コントロール
今回、レイアウトの変更や表示内容の変更に使用したコントロールを「ギャラリーコントロール」と言います。「ギャラリーコントロール」はデータソースと接続することで、データソース内のさまざまなレコードを表示できるコントロールです。キャンバスアプリ作成の際にはよく使うコントロールになりますので覚えておいて下さい。
↓↓↓ギャラリーコントロールの使い方についての参考記事はコチラ↓↓↓
６）アプリ内容の編集 ～店舗詳細画面～
店舗一覧画面の編集がいったん終了しましたので、店舗詳細画面の編集に移ります。
店舗詳細画面はツリービューの中のDetailScreenになりますのでツリービューから選択します。次にDetailScreenの下にDetailFormがありますので選択します。この画面も４）と同じように階層別になっており、DetailFormが４）のBrowserGalleryと同じような使い方ができます。
DetailFormを選択すると中央のアプリ画面と右側のウィンドウの内容が変わります。中央のアプリにはデータソースの項目が自動で抽出されていますが、確認したい項目ではないので項目を変更します。右側のウィンドウの中から「フィールドの編集」を選ぶと中央のアプリに現在出ている項目の一覧がでてきます。項目を追加したい場合は、上部の「+フィールドの追加」を項目を削除したい場合は項目の横の「・・・」を選んで削除を押します。これで店舗詳細画面の編集ができました！
７）アプリ画面の追加
店舗一覧画面、店舗詳細画面の編集は終了しましたが、Glideでは店舗一覧を都道府県別に分けていました。しかし、現在PowerAppsで確認できているアプリの画面は店舗一覧画面、店舗詳細画面、店舗編集画面の３種類ですので都道府県別に分けることができません。そこで、アプリ画面を追加することにします。
追加するにはまず左側のウィンドウのツリービューの中から「+新しい画面」を選択し、テンプレートの中から「空」を選びます。するとツリービューにScreen1が追加され空のアプリ画面が作成されました。
画面のテンプレートについて
今回は空のアプリを選択しましたが、テンプレートの中にはGlideでもおなじみの「リスト」や、写真撮影など何かのアクションをした場合の「成功」など様々なテンプレートがありますので用途に合わせて選んで下さい。
空のアプリ画面では何もできませんので、UI要素を追加します。左側のウィンドウのツリービューの下に「+挿入」がありますので選択します。選択するとアプリに挿入できるUI要素の一覧がでてきますので、まずはテキストの表示ができる「テキストラベル」を選択します。テキストラベルには「東京都」と入力して、次に「アイコン」の中から「＞右」を選択します。このときのUIは「＞右」である必要はなく、好きなUIを追加しても構いませんが、今回は店舗一覧画面の画面遷移にも使用されている「＞右」を使用します。
アプリに挿入したUIですが何もしなければアプリの中でただの模様です。「東京都」に変更したテキストラベルはラベルとしての役割がありますが、「＞」アイコンはアプリの中で何の役割も果たしません。そこで、「＞」に動きを持たせるためにMicrosof Power Fxという関数を入力します。
「＞」アイコンをクリックすると画面上部の数式バーにOnSelect、falseという文字が見えます。このOnselectはUIを選んだ時に指定された式を実行するという属性です。(例：テストラベルの場合はTextと表示)falseは数式が何も入っていない場合のデフォルトの値です。falseの代わりに関数を入力することで、「＞」はアクションを持つことになります。そこで、数式バーにNavigate関数を入力します。Navigateは画面の遷移の際に使用する関数で、Navigate(スクリーン名、アニメーション)という構成です。
この段階でもプレビューを確認できるので、画面右上のボタンを押すと遷移に成功しています。
↓↓↓Microsof Power Fxの概要についてはコチラの記事をご参照ください↓↓↓
同様の方法で「東京都」の他に「神奈川県」、「埼玉県」、「千葉県」を追加して都道府県にわける画面を完成させます。
※都道府県を分ける項目についてはコピペしたデータソースをそのまま使用した訳ではなく、それぞれの都道府県の店舗のデータソースを用意しています。本当はGlideと同じようにリレーション機能を使って大元のデータソースから東京都には東京都の店舗、神奈川県には神奈川県の店舗の抽出をしたかったのですが、PowerAppsでの方法がわからなかったため方法を変えています。
あとは店舗詳細の表示項目を調整すると、Glideで作成した店舗検索アプリとほぼ同じものが作成できました！
４．さいごに～PowerApps(キャンバスアプリ)とGlideの使用感比較(個人的感想)～
PowerApps(キャンバスアプリ)とGlide２つのノーコードツールを使って簡単なアプリ作成をしてみましたが、個人的な感想をひとことで言うと「PowerAppsの方が少し難しいけど、PowerAppsの方が自由度が高くいろいろできそう」と思いました。(ノーコードツール内での比較の話です)
ちなみに私自身が今後アプリ作成する際にどちらかのツールを選ぶなら、個人的に使うアプリはGlideで、会社で使うアプリはPowerAppsで作成すると思います。Glideの方がアプリ作成しやすいのですが、PowerAppsは会社のMicrosoft365環境でできるというメリットが大きいです。
但し、Glideも今後いろいろな変化があるようですし、他にもたくさんノーコードツールがあるので全部覚えるのは大変ですが、用途に合ったツールを使っていければいいかもしれません。(手を広げればいいというものではありませんが・・・)
↓↓↓Glideの展望を紹介している記事はコチラ↓↓↓
ノーコード(ローコード)といえど、初心者にとっては覚えることも多いのですが、今後もGlideやPowerAppsのモデル駆動型アプリなどノーコード(ローコード)ツールを使ったアプリ作成に挑戦していきます！
