ログイン画面を作って解説!PowerAppsグローバル変数の活用

ログイン画面を作って解説 グローバル変数の活用

PowerAppsでは、グローバル変数を使ってアプリ全体でデータを共有が可能です。ログイン情報やユーザーの設定データを保持する際に活用できます。今回は、グローバル変数の基本的な使い方と、ログイン情報を維持する方法を詳しく紹介します。

※今回紹介するログイン機能はセキュリティに問題があるため、実際の実装時には「ハッシュ化」を利用するようにしてください。


\ ホワイトペーパー /
貴社のPowerApps導入をぐっと前に進めるための
資料3点セット

【下記の3点の資料が無料でダウンロードできます】

  • Powe Apps 活用事例集
  • 【MS365で使える範囲も分かる】PowerAppsのライセンス早見表
  • 【担当者のスキルレベルや導入の進め方から判断!】PowerPlatformで内製化をすすめるためのロードマップ
目次

グローバル変数とは?

グローバル変数は、アプリ全体でどこからも参照できる変数です。一度値を設定すれば、どの画面でも利用できるため、ログイン情報やアプリの共通設定を保持するのに適しています。

特徴

  • アプリ全体で共有可能
  • 値はリセットされるまで維持される
  • 初期化には値を設定する必要がある

グローバル変数の基本構文

グローバル変数を扱うには、以下の関数を使います。

1. Set()

グローバル変数に値を設定します。

構文:

Set(変数名, 値)

例:

Set(CurrentUser, “Yamada”)

  • CurrentUser: グローバル変数名
  • “Yamada”: 設定する値

2. グローバル変数の参照

設定されたグローバル変数は、アプリ内のどのコンポーネントからでも利用可能です。

例:

CurrentUser

3. グローバル変数のクリア

PowerAppsにはグローバル変数を直接リセットする関数はありませんが、空の値を設定することで実質的にリセットできます。

例:

Set(CurrentUser, Blank())


ログイン情報の管理にグローバル変数を使ってみよう

グローバル変数をつかってログイン情報を維持するログインアプリを作ってみましょう

アプリの動きとしては以下の通りです。

  1. ユーザーがログイン画面でメールアドレスとパスワードを入力。
  2. 入力したメールアドレスをグローバル変数に保存。
  3. 他の画面でこのメールアドレスを利用して各ユーザ毎に保存された情報などを表示。

早速作っていきましょう。


1. 空のキャンバスアプリを作成

Power Appsにアクセスし「追加」から「空のアプリ」を作成します。


2. ログインページの作成

アプリ編集画面に変わったら画面内にテキスト入力のコントロールを配置します。

挿入の「テキスト入力」にあります。



テキスト入力をメールアドレス用、パスワード用に二つ配置し、プレスホルダーをそれぞれ設定しておきます。プレスホルダーはプロパティの「ヒントのテキスト」で設定できます。併せて初期値が「”テキスト”」となっているので、空欄に設定しておきましょう。

ログインボタンも挿入から配置します。

3. ログイン後のページ作成

あとで処理を追加しますが、ログインボタンを押し、ログインが成功した後に遷移する画面をつくります。画面左側のツリービュー下にある「新しい画面」をクリックすると新しい画面が追加できます。

追加後はマイページのような感じでアカウント情報を表示させるのをイメージしてコントロールを配置しておきます。

4. データリストを作成・連携

関数や変数を設定するにあたって、ログイン情報のデータが必要になるので作成しておきます。

ここで示す方法は一例なので、SharePointを利用しても問題ありません。

PowerAppsのホームメニュー「テーブル」からも作成できます。

「新しいテーブルを作成する」をクリックして「空白」を選択します。その後、メールアドレス、パスワード、名前の列を作ってデータを入れて保存しておきます。

リストができたらPowerApps編集画面の左側「データ」からデータの追加を行います。

先ほど作成したテーブルの名前を選択するとアプリにデータソースが追加できます。



5. 関数と変数の設定・各種設定

準備ができたので、ボタンやテキストの表示と関数と変数の設定をしていきましょう。ログイン画面を選択し、「ログイン」ボタンを選択し「OnSelectプロパティ」に以下の関数を入力します。

Set(

    CurrentUser,

    LookUp(

       テーブル1,

        メールアドレス = メールアドレス入力.Text &&

        パスワード = パスワード入力.Text

    )

);

If(

    IsBlank(CurrentUser),

    Notify("メールアドレスまたはパスワードが間違っています。", NotificationType.Error),

    Navigate(ログイン後画面, ScreenTransition.Fade),Reset(メールアドレス入力)&&Reset(パスワード入力)

)


テキスト入力に保存された情報をリストと照らし合わせ、合致する行の情報全てをグローバル変数として取得、格納する処理になります。ログイン成功後はReset関数で入力を空にしています。

パスワード入力欄に入力したパスワードが隠れるようにパスワード入力inputを選択し、プロパティの「モード」をパスワードに設定します。



ログインが成功するとグローバル変数を取得して情報を表示するように設定します。Textプロパティに以下のように入力するとグローバル変数に格納されたデータが表示されます。

これはグローバル変数CurrentUserの名前に保存されたデータを表示しています。適宜「メールアドレス」などに変更し表示されるようにしてください。

6. ログアウト機能の追加

ログイン後の画面のログアウトボタンOnSelectプロパティに以下を設定します。

Set(CurrentUser, Blank());

Navigate(ログイン画面, ScreenTransition.Fade)
  • Set(CurrentUser, Blank()): グローバル変数をリセット。
  • Navigate(ログイン画面, ScreenTransition.Fade): ログイン画面に戻る。

これでログアウト後にまたログインが必要となる処理の実装ができました。

画面右上の「アプリのプレビュー」からプレビューを行い、動作を確認してみてください。

ログイン機能実装の注意点 ハッシュ化

今回紹介した方法はあくまでもグローバル変数にデータを格納する方法を説明するために取った手法であるため、実際のログイン機能に使うにはセキュリティ面で大変危険です。
理由としてパスワードが暗号化(ハッシュ化)されずにデータの受け渡しが行われている点でセキュリティ上危険性があるためです。

ハッシュ化とは元のデータを暗号化する処理のことを指します。今回は入力したパスワードがそのまま保存、受け渡しが行われています。
今回の実装方法の場合入力した情報が万が一盗聴された場合にパスワードが第三者にそのまま伝わってしまう危険性があります。

PowerAppsにはパスワードをハッシュ化する関数や機能が備わっていないため、新規登録、ログイン機能を実装する場合にはPowerAutomateやAzure Functionを併せて使用したシステム設計が必要となる点に注意しましょう。

ただ、ログイン中のユーザを認識するだけ(ユーザ名だけを保存する)の場合には有用なので多画面でセキュリティに関係ないデータを共有したい場合に使うのがおすすめです。


グローバル変数の注意点

アプリ間で共有したいデータを保存しておくのに便利なグローバル変数ですが、いくつか注意点があります。

  1. アプリセッション中のみ有効
    • グローバル変数の値はアプリを閉じるとリセットされるため永続的に保持するデータは、DataverseSharePointリストなどに保存する
  2. 多用しすぎに注意
    • グローバル変数が多すぎると管理が複雑になる
    • 本当に必要なデータのみグローバル変数に保存するのが最善

まとめ

PowerAppsのグローバル変数は、ログイン情報の管理やユーザーごとに違う情報を見せたいとき非常に便利です。今回の例を参考に、アプリ内でデータを効率よく扱い、より使いやすいアプリを作成してみてください。今回使用したログイン情報の一時保存の他にもおすすめの使い方があります。

おすすめの使い方:

  • ログイン情報の一時保存 
  • アプリ内設定の管理
  • ユーザー権限の切り替え

ぜひ、グローバル変数を活用してPowerAppsで効率化してみてください。

\ システム開発にお悩みの方へ /
貴社のシステム開発・アプリ開発を爆速で進めるための
超高速開発が分かる資料3点セット

【下記の3点の資料が無料でダウンロードできます】

  • 【料金表付き】新規事業を爆速で立ち上げられる高速開発支援サービスの紹介資料
  • 【最短24時間で納品?】高速開発のプロジェクト支援事例集
  • 導入に向けて開発プラットフォームのランニングコスト比較表
  • URLをコピーしました!

お役立ち資料



資料請求はこちら

資料請求

無料デモアプリはこちら

無料で作成依頼
目次