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

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

Microsoft (Office365) PowerApps 使い方メモ

はじめに

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

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

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

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

その1:基礎

「Microsoft (Office365) PowerApps 使い方メモ」

その2:データ関連

「Microsoft (Office365) PowerApps 使い方メモ (データソース・コレクション編)」

その3:その他メモ書き

「Microsoft (Office365) PowerApps 使い方メモ (その他)」


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(<移動先画面名>, <移動時アニメーション種類>)関数で行います。

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

  1. ボタンを選択
  2. [OnSelect]プロパティにNavigate(<移動先画面名>, None)

Microsoft (Office365) PowerApps 使い方メモ

変数

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プロパティに記載します

終了処理

アプリを起動している状態でブラウザを閉じても、Office365のサーバーにはアプリが終了したことがすぐに伝わりません。

その状態で新たにアプリを配信しようとすると、まだ開いているアプリがあるとエラーになることがあります。

そんな場合は、閉じるボタンなどを設置し、ボタンが押されるとExit()関数を呼び出して明示的にアプリを閉じるようにすると、Office365にアプリが終了したことがすぐに伝わるようになります。

関数リファレンス

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

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

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

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

www.kwbtblog.com

関連カテゴリー記事

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com