新しいことにはウェルカム

技術 | 電子工作 | ガジェット | ゲーム のメモ書き

Microsoft (Office365) PowerApps 使い方メモ

以前、Office365 PowerAppsを触っていました。

PowerAppsは、かな~りとっつきにくいツールで、使い方をメモしておかなきゃ忘れてしまいそうだなと思いながら、放置していました。

アプリを修正しようと久しぶりに触ったら、案の定すっかり忘れていたので、今度こそ、 またいつ忘れても大丈夫なように、ハマったところを中心に、使い方をメモしておこうと思います。

量が多くなったので記事を下記の3つに分けていて、本記事は1つ目の記事になります。


Microsoft PowerAppsとは?

Excelに、ボタンやテキスト入力などのフォームを置いて、簡易UIを作ることがあります。

しかし、ExcelファイルをExcel Onlineに上げてしまうと、Excel OnlineではVBAが使えないため、その簡易UIを使うことができません。

そういった、WebのOffice365上で、簡易UIを作るためのツールが、Microsoft PowerAppsです。

ただし、PowerAppsはVBAのようなコーディングができないため、データの入力フォームや、Microsoft Flowを実行するボタンの配置くらいの、ごく簡単なUIしか作れません。

作り方・使い方・更新方法

まず、PowerAppsのサイト構成および、作成から使用、更新の流れが分かりにくいので、順を追って説明します。

作り方

  • [Office365]-[格子アイコン]-[PowerApps]の「+作成」から作ります。ここではテンプレートではなく、アプリを1から作る「キャンバス アプリを一から作成」にします Microsoft (Office365) PowerApps 使い方メモ

  • するとPowerAppsのアプリが作成され、エディタが立ち上がります。 Microsoft (Office365) PowerApps 使い方メモ

  • アプリの保存は[ファイル]メニューを押して[保存]で行います。 Microsoft (Office365) PowerApps 使い方メモ

使い方

上記のエディタページは上に「PowerApps」と書かれているのですが、最初に遷移したOffice365のPowerAppsのページとは別の、エディタ専用のサイトになります。 (最初、同じサイトだと勘違いしていて混乱しました…)

  • 作成したアプリはの実行は、最初にPowerAppsを作成する時に押したOffice365のPowerAppsページの「+作成」の上の「アプリ」メニューから行います。
  • Office365のPowerAppsページからPowerAppsのエディタを開くには、アプリの「編集」から行います。 Microsoft (Office365) PowerApps 使い方メモ

Office365のPowerAppsのページと、PowerAppsのエディタのページは行き来することになるので、両方を立ち上げておいた方がいいかと思います。

Office365のPowerAppsのページからアプリをクリックすうると、無事アプリが実行されます。 Microsoft (Office365) PowerApps 使い方メモ

更新方法

アプリをエディタで修正して保存するには、最初の時と同様、[ファイル]メニューを押して[保存]で行います。

Microsoft (Office365) PowerApps 使い方メモ

そして、ここも分かりにくいのですが、保存しただけではアプリには反映されず、同じく[保存]メニューで表示される「発行」ボタンを押す必要があります。 Microsoft (Office365) PowerApps 使い方メモ

すると、先程と同じ方法でアプリを実行すると、変更内容が反映されます。 Microsoft (Office365) PowerApps 使い方メモ

ちなみに、初回保存時のみ、保存すると即発行が行われます。

アプリは他の人と共有して、他の人が使うこともあるので、発行して反映されるという仕様は妥当かと思うのですが、初回保存はそれが無いので、最初気づかずハマりました…。

エディタからの動作テスト方法

エディタの右上の右三角アイコンを押すと、動作テストが行えます。 Microsoft (Office365) PowerApps 使い方メモ

テストでは、表示している画面からいきなり実行されるので、アプリスタートから確認したい場合は、最初のページを表示してアイコンを押します。

構成

次に、PowerAppsの基本構成と、エディタ画面構成を見ていきます。

オブジェクト

PowerAppsは、Webサイトでいうところの「ページ」のような、「画面」の集まりで構成されます。

そして、その画面の上にボタンなどのコントロールを配置していきます。

エディタの「ツリービュー」に、そのアプリに存在する「画面」「コントロール」などの全オブジェクトが表示されます。

  • 「ツリービュー」の一番上にある「画面」が、アプリを起動した時に一番最初に表示される画面となります。(図では「Screen1」)
  • 画面「Screen1」の中に、各種コントロールオブジェクトが配置されていきます。 Microsoft (Office365) PowerApps 使い方メモ

あるオブジェクトから、他のオブジェクトを参照する場合、「ツリービュー」のオブジェクト名を使うので、ここのオブジェクト名は重要です。

プロパティ

各オブジェクトは、大きさや色、クリックした時に呼び出される「OnSelect」などのイベントハンドラが、そのオブジェクトの「プロパティ」として定義されています。

それらのプロパティに値を設定したり、コードを追加していくことにより、アプリを作成していきます。そして、コードを書ける場所はプロパティのみです。

エディタでオブジェクトのプロパティを設定するには、まず、エディタの「ツリービュー」で設定したいオブジェクトを選択します。

選択したオブジェクトのプロパティは

  • メニュー下の関数式
  • 右カラムの「プロパティ」タブ
  • 右カラムの「詳細設定」タブ

の3箇所に表示され、そこから設定します。

表示箇所は3つありますが、見せ方が違うだけで、どれも同じものです。分かりにくいです…

Microsoft (Office365) PowerApps 使い方メモ (「TextInput1」を選択している。3ヶ所に「TextInput1」のプロパティが表示される)

画面移動

別の画面に移動させるにはNavigate(<移動先画面名>, <移動時アニメーション種類>)関数で行います。

例えば、ボタンを押したら次の画面に遷移するようにするには

  • ボタンを選択
  • 「OnSelect」プロパティに「Navigate(<移動先画面名>, None)」

とします。 Microsoft (Office365) PowerApps 使い方メモ

変数

  • アプリ全体で使える、グローバル変数
  • 画面内でのみ使える、コンテキスト変数

の2種類の変数が使えます。

  • グローバル変数の値のセットはSet({<変数名>:<値>})で行います。
  • コンテキスト変数の値のセットはUpdateContext({<変数名>:<値>})で行います。

変数の宣言はなく、値をセットすると動的に変数が作成されます。

関数の書き方・および注意点

  • PowerAppsはプログラムが書けません。全て関数で記述し、その関数はオブジェクトのプロパティに記述します。
  • 制御文(IF・Switch)も関数になります
    • 例えば、ボタンを押した時に、変数の値によって飛び先を変えるには、ボタンのOnSelectに下記のような関数を書きます。
      • IF(TestVar=true, Navigate(Screen1, None), Navigate(Screen2, None))
  • シングルクォーテーションで囲った文字はオブジェクトを指すので、文字列は必ずダブルクォーテーションで書きます。
  • 文字列の結合は「&」で行います。
    • 例)"文字列"&"文字列"
    • もしくは、Concatenate()文字連結関数を使います。(Concat()関数はありますが、文字列連結の関数ではないので注意が必要です)
  • 文字列にはエスケープシーケンスが使えません。Char()関数で直接文字を書きます。
    • 例)改行を使う:"文字列"&Char(10)&"次の行の文字列"
  • 2つ以上の関数を続けて記載する場合は、関数の後に「;」を入れて関数を区切って記載します。
    • 例)変数を設定して画面移動する:Set({Flag:true});Navigate()

初期化処理

  • アプリを起動した時の初期化処理は、「App」オブジェクトの「OnStart」プロパティに記載します
  • 各画面が表示される時の初期化処理は、各画面オブジェクトの「OnVisible」プロパティに記載します

関数リファレンス

PowerAppsは関数だけでコーディングしていく形になります。

関数リファレンスは下記にあるのですが、分類がされていないので、名前から推測して自力で探します。

https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/formula-reference

続いて、PowerAppsで扱うデータソースの説明になりますが、長くなったので別記事にしました。

www.kwbtblog.com