【Power Apps】時間帯によって背景画像を変更する方法

業務で Power Apps アプリを作成・改善していく中で、「時間帯によって画面の雰囲気を変えたい」といった要望を求められることがありました。

この記事では、そのようなケースを想定し、Power Apps アプリで Image コントロールを使用して、時間帯ごとに背景画像を切り替える方法について解説します。

対象読者と前提
事前準備
- 画像素材を準備する
- 時間帯を設定する
Power Appsでの設定手順
おわりに

対象読者と前提

対象読者：Power Appsアプリ利用者
前提：背景画像を設定したい画面を作成済み

事前準備

画像素材を準備する

まず、使用したい背景画像を複数枚用意します。今回は、朝・昼・夜用の3つの画像を用意します。

画像名は「朝」「昼」「夜」で設定しておきます。

時間帯を設定する

次に、背景を切り替えたい具体的な時間帯を決定します。今回は、各時間帯を下記のように設定します。

朝：06:00～11:00
昼：11:00～17:00
夜：17:00～24:00

※ 今回は、上記以外の時間は背景画像が表示されないようにしました

Power Appsでの設定手順

アプリを作成する

Power Appsを開き、新しいアプリを作成します。背景画像を設定したい画面を作成してください。

画像をアップロードする

この手順では、朝・昼・夜の背景画像をアプリに取り込みます。

「メディアの追加」から「アップロード」をクリックします。
朝・昼・夜用の3つの画像をアップロードします。

メディアの追加からアップロード画面を開いた状態です。朝・昼・夜の3つの画像が追加されたことを確認してください。

画像をセットする

この手順では、アップロードした画像を表示するための Image コントロールを配置します。

「挿入」をクリックします。
検索ボックスで「画像」を入力し、「画像」をクリックします。
Imageコントロールが挿入されます。

Imageコントロール挿入直後の状態です。
Imageをクリックして画面全体に広げます。

Imageを拡大して画面全体に広げた状態です。
Imageのプロパティ詳細設定から「ImagePosition」を検索します。
ImagePositionプロパティを「ImagePosition.Fit」から「ImagePosition.Fill」に修正します。
※ 「Fit」→「Fill」にすると、画像の余白をなくせます。

時間帯ごとに設定する

この手順では、現在時刻に応じて背景画像が切り替わるように Image プロパティへ式を設定します。

Imageの「Image」プロパティをクリックします。
時間帯に応じて背景画像を切り替えるため、以下の式を入力します。

If(
    Hour(Now()) >= 6  && Hour(Now()) < 11,
    朝,
    Hour(Now()) >= 11 && Hour(Now()) < 17,
    昼,
    Hour(Now()) >= 17 && Hour(Now()) < 24,
    夜
)

これにより、アプリ表示時に自動的に時間帯に応じた背景画像が選択されます。

※ 画像はMicrosoft 365 Copilotで生成したものを使用しています