Power Apps とは？

Power Apps とは「だれでもローコードのアプリをすばやく作成できるツール」です。

PowerPoint でスライドを作成するような感覚と、Excel の関数を利用する感覚で簡単にアプリケーションの作成が可能です。

予め用意されているテキストボックスやボタンなどの部品を画面上に配置し、それらの設定値を変更したり、関数を適応するだけで簡単にビジネスアプリケーションが作成できるツールとなっています。

利用はライセンスを保有しているユーザーで、Power Apps が対応している最新バージョンのブラウザー、もしくはアプリであればどなたでも作成可能です。

画面の説明

アプリ内のすべての画面とコントロールが表示されます
作業中のアプリの画面が表示されます
選択されているコントロールのプロパティが表示・編集を行えます
選択されているコントロールのプロパティをここで選択して構成します
数式を追加して、選択されているコントロールの動作を定義します
デザイン要素のカスタマイズなど、一般的な操作を実行できます

f:id:shizuuuka0202:20200526210357p:plain

実際にアプリを作成してみよう

体調管理アプリを作成してみよう

本日の体温や体調に関する設問を作成し、それらの結果をもとに診断結果を表示するアプリを作成してみましょう。

また、回答結果はSharePointのリストに記録するように設定してみましょう。

f:id:shizuuuka0202:20200526210440p:plain

新規にアプリを作成する

「ホーム」を選択して「キャンバスアプリを一から作成」を選択します。

f:id:shizuuuka0202:20200526210516p:plain

「アプリ名」に「Health Check」と入力します。
「形式」では「電話」を選択します。
完了したら「作成」を選択します。

f:id:shizuuuka0202:20200526210552p:plain

ヘッダーを作成する

「挿入」タブより「ラベル」を選択してラベルを追加します。

f:id:shizuuuka0202:20200526210632p:plain

追加したラベルが左の「ツリービュー」に追加されます。
追加されたラベルの右にある「・・・」を選択し、「名前の変更」を選択します。
また、名前を「TitleLbl」に変更してください。

f:id:shizuuuka0202:20200526210801p:plain

ラベルの文字のプロパティを変更します。
ラベルを選択し、右側に表示されるプロパティを
下図のように変更します。

テキスト：Health Check
フォントサイズ：40
テキストのアラインメント：左右中央揃え

f:id:shizuuuka0202:20200526210932p:plain

ラベルの座標、サイズのプロパティを変更します。
ラベルを選択し、右側に表示されるプロパティを
下図のように変更します。

位置(X)：0
位置(Y)：0
サイズ(高さ)：100

サイズ(幅)に関しては、画面サイズと同じに設定したいため、上部の数式バーより、「Width」を選択し、以下のように設定します。

f:id:shizuuuka0202:20200526211412p:plain

ラベルの色のプロパティを変更します。
ラベルを選択し、右側に表示されるプロパティより
任意の色を選択します。

色は選択するとカラーパレットが表示されるので
そこから任意の色を選択することが可能です。

f:id:shizuuuka0202:20200526213054p:plain

設問を作成する

設問はスクロール可能な画面としたいと思います。
Power Apps でスクロール可能な画面とするには以下のオブジェクトのいずれかを使用する必要があります。

・ギャラリー
　- データソースの複数のレコードを表示することが可能です。

・フォーム
　- データソースのレコードを表示、編集及び作成することが可能です。

・データテーブル
　- コントロールに表示される各フィールドの列ヘッダーを含む形式で　データセットを表示することが可能です。

・カード
　-フォームコントロールの 1 つのフィールドの表示や編集をが可能です。

今回は下線のカードオブジェクトを利用したいと思います。

「カードコントロール」は現在「挿入」タブより追加ができません。
なので下図のように、「挿入」タブ > 「新しい画面」 > 「スクロール可能」よりスクロール可能な画面を新規追加します。

その後追加された画面より、「Canvas1」をコピーします。

f:id:shizuuuka0202:20200526213955p:plain

f:id:shizuuuka0202:20200526214022p:plain

コピーした「Canvas1」をScreen1に貼り付けます。
先ほど追加した画面は不要なので削除します。

削除するとコピーしてきた「Canvas1」でエラーが発生します。
×を選択して、「数式バーでエラーを編集」を選択するとエラー内容を表示することが可能です。

今回こちらのYは、「TitleLbl」に合わせたいので以下のように変更します。

Canvas1_1.Y

TitleLbl.Y + TitleLbl.Height

f:id:shizuuuka0202:20200526214204p:plain

設問はカード内に配置したいです。

カード内に配置するためにカードを選択し、「[挿入]ペインから項目を追加する」を選択してください。

f:id:shizuuuka0202:20200526214328p:plain

その後、挿入ビューより「テキストラベル」を選択します。

f:id:shizuuuka0202:20200526214353p:plain

追加したラベルは下図のように設定します。

「Width」に関しては、式を利用しているため関数バーで編集を行います。

f:id:shizuuuka0202:20200526214410p:plain

必須項目をあらわす「*」を追加します。
先ほど追加したラベルを選択した状態で、新規にラベルを追加してください。
これで同様にカード内にオブジェクトの追加が可能です。

追加したラベルは下図のように設定してください。

f:id:shizuuuka0202:20200526214450p:plain

先ほどと同様の方法で次は「テキスト入力」を追加します。

f:id:shizuuuka0202:20200526214853p:plain

追加した「テキスト入力」は下図のように設定します。

f:id:shizuuuka0202:20200526214928p:plain

追加したオブジェクトを、Shiftを押しながらすべて選択してください。
選択が完了したのち「・・・」を選択し、「グループ」を選択します。
これにより選択したオブジェクトがグループ化されます。

「Group1」を「Question1」にリネームしておきましょう。

f:id:shizuuuka0202:20200526215020p:plain

「Question1」をCtrl + C でコピーし、Ctrl + V で貼り付けを行ってください。
すると、同様のオブジェクトがカード内に追加されます。
わかりやすいよう、名前は「XXX2」の形式に変更しておきましょう。

ここで名前の変更を行うと、こちらのオブジェクトを参照している数式も同様に名前が変更されます。

f:id:shizuuuka0202:20200526215040p:plain

「QuestionLbl2」のYの設定を下図のように、Question1のテキストボックスの下にくるように設定します。

これにより、他の項目も「QuestionLbl2」のYを参照して座標の設定を行っているため、座標が調整されます。

f:id:shizuuuka0202:20200526215102p:plain

Question2では入力項目をテキストボックスではなく、ドロップダウンとしたいため、「テキスト入力」を削除し、「ドロップダウン」を選択します。

f:id:shizuuuka0202:20200526215129p:plain

設定した「ドロップダウン」は下図のように設定します。
名前は「AnswerDropdown2」に変更してください。

f:id:shizuuuka0202:20200526215149p:plain

ドロップダウンでの選択肢は「Items」に設定されているデータになります。
デフォルトでは「DropDownSample」が設定されています。
ちなみに「DropDownSample」には下図のようなデータが入っています。

f:id:shizuuuka0202:20200526215224p:plain

この「Items」に設定するデータを作成するには、

「Collect」でコレクションを宣言する
「Table」でレコードの引数からテーブルを作成する
「[]」で囲ってテーブルを作成する

などの方法が存在します。

今回ドロップダウンに設定するデータには、

ドロップダウンに表示されるテキスト
内部的に保持している選択肢に対するポイント

を持たせたいです。

そこで下図のように設定します。

f:id:shizuuuka0202:20200526222545p:plain

これにより、下図のようなテーブル構造とすることができます。

f:id:shizuuuka0202:20200526222342p:plain

これまでの設定でデータの作成ができました。

次に、ドロップダウンに表示したいのは「Text」です。

f:id:shizuuuka0202:20200526222327p:plain

これは右のプロパティより変更が可能です。
下図のように、「Value」にて「Text」を選びます。

これにより、ドロップダウンには「Text」の値が表示されるようになります。

f:id:shizuuuka0202:20200526222702p:plain

ドロップダウンをQuestion2と同じグループに設定します。
その後、Question2とAnswerDropdown2を選択してグループ化します。

これにより、Question2のグループとドロップダウンがグループ化された「Group2」が作成されます。

「Group2」は「Question2」にリネームしておきましょう。

f:id:shizuuuka0202:20200526222747p:plain

同様に設問の必要項目数だけコピー & ペーストを行い、設問を作成します。

コピーされた項目は必要にあわせて座標やテキストなどの内容、また名前の変更を行いましょう。

f:id:shizuuuka0202:20200526222947p:plain

最後の設問は下図のようにチェックボックスで回答を行う形式にしたいと思います。

f:id:shizuuuka0202:20200526223026p:plain

こちらも他のグループ同様コピー & ペーストを行い、回答欄であるテキスト入力を削除してください。

必須入力を表すマークに関しては、削除は行わず下図のように非表示に設定します。

f:id:shizuuuka0202:20200526223053p:plain

チェックボックスを追加します。
下図のようにチェックボックスの追加を行ってください。

f:id:shizuuuka0202:20200526223151p:plain

追加を行ったチェックボックスはこれまで同様座標の設定を行い、「テキスト」にて表示するテキストの変更を行ってください。

これを必要数分追加します。

f:id:shizuuuka0202:20200526223217p:plain

回答ボタンを作成する

下図のようにボタンを画面内に配置します。

f:id:shizuuuka0202:20200526223259p:plain

回答を行うボタンですので、スクロールを行うキャンバスの外にボタンを配置します。
配置したボタンは下図のように、画面の下の中央に配置されるように設定します。

f:id:shizuuuka0202:20200526223339p:plain

また、このままではCanvasとボタンが重なってしまうので、Canvasの高さを左図のように調整します。

f:id:shizuuuka0202:20200526223430p:plain

データソースを作成する

回答ボタンを押したときにデータを保存するためのデータソースをSharePoint リストに作成します。

リストは下図のように作成し、タイトルの「必須」を外してください。

注意として、赤枠で囲った症状の有無を記録する箇所ですが、こちらは名称を英語で作成したのち日本語にリネームしてください。詳しくは次ページで解説します。

f:id:shizuuuka0202:20200526223457p:plain

まずは下図のように英語名称で名前を設定し、保存します。
その後、「列の設定」>「編集」より日本語名称に変更してください。

この設定を行わないで、初めから日本語名称で列の作成を行ってしまうと、後述するPower Apps 側でSharePoint リストにデータを登録するために用いる「Patch」関数で適切に列を指定できなくなってしまいます。

f:id:shizuuuka0202:20200526223517p:plain

データを登録する

先ほど作成したデータソースをアプリで読み込めるようにします。

下図のように「データソース」の検索窓より「SharePoint」と検索して「SharePoint」を選択します。その後、対象のリストを選択してデータソースの追加は完了です。

f:id:shizuuuka0202:20200526223615p:plain

続いて回答ボタンが押された時の処理を以下のように記載します。

OnSelect

If(
    !IsBlank(AnswerTextInput1.Text),
    Patch(
        HealthCheck,
        {
            UserEmail: User().Email,
            Temperature: Value(AnswerTextInput1.Text),
            Point: Sum(
                AnswerDropdown2.Selected.Point,  AnswerDropdown3.Selected.Point,
                AnswerDropdown4.Selected.Point,  AnswerDropdown5.Selected.Point,
                AnswerDropdown6.Selected.Point,  AnswerDropdown7.Selected.Point,
                AnswerDropdown8.Selected.Point,  AnswerDropdown9.Selected.Point,
                AnswerDropdown10.Selected.Point, AnswerDropdown11.Selected.Point,
                AnswerDropdown12.Selected.Point, AnswerDropdown13.Selected.Point,
                AnswerDropdown14.Selected.Point, AnswerDropdown15.Selected.Point,
                AnswerDropdown16.Selected.Point, AnswerDropdown17.Selected.Point,
                AnswerDropdown18.Selected.Point, AnswerDropdown19.Selected.Point,
                AnswerDropdown20.Selected.Point, AnswerDropdown21.Selected.Point
            ),
            Symptom1: Checkbox1.Value,
            Symptom2: Checkbox1_1.Value,
            Symptom3: Checkbox1_2.Value,
            Symptom4: Checkbox1_3.Value,
            Symptom5: Checkbox1_4.Value,
            Symptom6: Checkbox1_5.Value,
            Symptom7: Checkbox1_6.Value
        }
    );
    Navigate(
        Screen2,
        ScreenTransition.Fade
    ),
    Notify(
        "体温が入力されていません。",
        NotificationType.Error
    )
)

上記の動作を簡単に解説すると、必須項目が入力されている場合、データソースにデータを登録して次の画面に遷移します。
データが登録されていない場合は、エラーメッセージを表示します。

それでは式の解説を行います。

まずIf文の処理についてです。
黄色のマーカーの箇所が条件になり、赤枠が条件を満たす場合、青枠が条件を満たさない場合の処理になります。

条件は必須入力項目が入力されているかを判断しています。
今回、必須項目で空白である可能性があるのは設問1の体温の入力のみですので、設問1の回答欄が空白でないか？を条件としています。

f:id:shizuuuka0202:20200526223741p:plain

続いて、Patch関数について解説します。
こちらは、データソースのレコードを作成もしくは変更するときに利用する関数です。
今回は「HealthCheck」というデータソースに対して、{}で囲われたレコードを作成しています。

レコードは、
{更新する列名: 更新する値}
となっています。

Patch(
    HealthCheck,
    {
        UserEmail: User().Email,
        Temperature: Value(AnswerTextInput1.Text),
        Point: Sum(
            AnswerDropdown2.Selected.Point,  AnswerDropdown3.Selected.Point,
            AnswerDropdown4.Selected.Point,  AnswerDropdown5.Selected.Point,
            AnswerDropdown6.Selected.Point,  AnswerDropdown7.Selected.Point,
            AnswerDropdown8.Selected.Point,  AnswerDropdown9.Selected.Point,
            AnswerDropdown10.Selected.Point, AnswerDropdown11.Selected.Point,
            AnswerDropdown12.Selected.Point, AnswerDropdown13.Selected.Point,
            AnswerDropdown14.Selected.Point, AnswerDropdown15.Selected.Point,
            AnswerDropdown16.Selected.Point, AnswerDropdown17.Selected.Point,
            AnswerDropdown18.Selected.Point, AnswerDropdown19.Selected.Point,
            AnswerDropdown20.Selected.Point, AnswerDropdown21.Selected.Point
        ),
        Symptom1: Checkbox1.Value,
        Symptom2: Checkbox1_1.Value,
        Symptom3: Checkbox1_2.Value,
        Symptom4: Checkbox1_3.Value,
        Symptom5: Checkbox1_4.Value,
        Symptom6: Checkbox1_5.Value,
        Symptom7: Checkbox1_6.Value
    }
);

続いてNavigate関数についてです。
こちらは、指定した画面に遷移する際に使用する関数です。
第2引数には遷移を行う際のアニメーションを指定しています。

アニメーションのサンプルはこちらの公式docより確認が可能です。

Navigate(
    Screen2,
    ScreenTransition.Fade
)

最後にNotify関数についてです。
こちらの関数は、ユーザーにバナーメッセージを表示する際に使用する関数になります。

今回の設定では、「体温が入力されていません。」というエラーのバナーメッセージがユーザーに表示されることになります。

Notify(
    "体温が入力されていません。",
    NotificationType.Error
)

結果画面を作成する

Screen2にScreen1で作成したタイトルラベルと同様のラベルをコピーし、貼り付けます。

このようにオブジェクトのコピーは画面をまたいでのコピーも可能です。

「～診断結果～」ラベルは新規で作成し、タイトルラベルの下にくるよう設定します。

f:id:shizuuuka0202:20200526223905p:plain

戻るボタンを実装する

「挿入」>「アイコン」より「戻る」を選択します。
サイズはタイトルラベルの高さに揃えたいと思います。

ただ高さを揃えただけですと、アイコンが大きすぎるので、「パディング」によりアイコンの見た目の大きさを調整しています。

f:id:shizuuuka0202:20200526224012p:plain

戻るボタンが押された時の処理を記載します。
指定した画面への遷移には「Navigate」関数を用いましたが、前の画面に戻る処理を行いたい場合は、「Back」関数を用います。

下図のように画面遷移のアニメーションを指定しなかった場合、既定ではこの画面に遷移するときに利用されたアニメーションが逆再生で実行されます。

f:id:shizuuuka0202:20200526224102p:plain

診断結果を表示する

戻るボタンが押された時の処理を記載します。

指定した画面への遷移には「Navigate」関数を用いましたが、前の画面に戻る処理を行いたい場合は、「Back」関数を用います。

"あなたへの負担は" & Switch(
    Round(
        Average(
            AnswerDropdown2.Selected.Point,
            AnswerDropdown3.Selected.Point,
            AnswerDropdown4.Selected.Point,
            AnswerDropdown5.Selected.Point,
            AnswerDropdown6.Selected.Point,
            AnswerDropdown7.Selected.Point,
            AnswerDropdown8.Selected.Point,
            AnswerDropdown9.Selected.Point,
            AnswerDropdown10.Selected.Point,
            AnswerDropdown11.Selected.Point,
            AnswerDropdown12.Selected.Point,
            AnswerDropdown13.Selected.Point,
            AnswerDropdown14.Selected.Point,
            AnswerDropdown15.Selected.Point,
            AnswerDropdown16.Selected.Point,
            AnswerDropdown17.Selected.Point,
            AnswerDropdown18.Selected.Point,
            AnswerDropdown19.Selected.Point,
            AnswerDropdown20.Selected.Point,
            AnswerDropdown21.Selected.Point
        ),
        0
    ),
    0, "低い",
    1, "やや高い",
    2, "高い",
    3, "非常に高い"
) & "と考えられます。" & Char(10) & "体調に気を使いながら、無理をしないように心掛けましょう。"

ラベルをもう一つ追加します。
続いて表示を行うのは自覚症状があった場合に休養を促すメッセージを表示するためのラベルです。

テキストには任意のメッセージを入力してください。
表示条件は下図のように記載します。

これによりチェックボックスに1つでもチェックがついていた場合ラベルが表示され、チェックがない場合は表示しないという制御が実現できます。

f:id:shizuuuka0202:20200526224210p:plain

Teamsを開く

休養を連絡するなどするために、アプリ側からTeams を開けるようボタンを設定します。

ボタンを追加してください。
表示条件には休養を促すメッセージと同様の条件を設定します。

指定したリンクを開くには、下記のようにLaunch関数を用います。
これによりTeams が開きます。

f:id:shizuuuka0202:20200526224304p:plain

画像を追加する

「メディア」>「アップロード」より任意の画像をアプリ内に追加します。

f:id:shizuuuka0202:20200526224342p:plain

追加した画像は「メディア」>「画像」コントロールを利用することで表示が可能です。
もしくは追加した画像をダブルクリックすることでも追加することができます。

f:id:shizuuuka0202:20200526224419p:plain

追加した画像の、「画像」プロパティにて先ほど追加した画像を選択します。

以上の操作で画像をPower Apps 内に表示することができます。

f:id:shizuuuka0202:20200526224450p:plain

まとめ

以上のようにローコードで簡単にアプリケーションの作成を行うことができました。

日々の業務のちょっとしたアイディアをPower Apps を用いて形にし、業務の改善・効率化に自信の手で挑戦してみるのはいかがでしょうか。

興味を持たれた方は、「yoshida-t@i-sol.jp」までご連絡ください。

参考関数の一覧 – 数式のレファレンス（マイクロソフト公式docs）各種コネクターの利用方法 – コネクターの一覧（マイクロソフト公式docs）

目次に戻る

iTAC_Technical_Documents

アイタックソリューションズ株式会社

Power Apps で作成するHealth Check アプリ