便利！PowerAppsでデジタル時計を作ってみる

公開日:2022年9月7日 / 最終更新日:
Power Apps
PowerAppsで時計を作る

デジタル時計を作る

PowerAppsで時計を作って、今の時間をリアルタイムに確認したいと思ったことはありませんか？

意外と簡単に作れて、勤怠管理などのアプリを作成するときにとても便利なのでサクッと作れるようになりましょう！


時計

タイマー(Timerコントロール)を使う

タイマーはどこにある？

  1. メニューから「挿入」を選択する。
  2. 切り替えられたサブのメニューから「入力」を選択する
  3. 選択項目を少し下にスクロールして「タイマー」を選択する

タイマ挿入

実際にやってみるとこんな感じ↓


タイマー

設定するプロパティ

タイマーのプロパティの設定をしましょう。

  1. 「Duration」を1000※に変更する。
    ※単位はミリ秒(1000ミリ秒=1秒)
  2. 「Repeat」をtrueに変更する。
  3. 「AutoStart」をtrueに変更する。
  4. 「OnTimerEnd」を下記のように設定する。
  1. Set(theTime,Now());

タイマー設定_データ_1

タイマー設定_データ_2

時計を表示してみる

表示用のラベルを用意

  • メニューから「挿入」を選択する。
  • 切り替えられたサブのメニューから「テキスト」を選択する。
  • 選択項目から「ラベル」を選択する

ラベルのプロパティの設定をしましょう。

プロパティの「Text」を下記のように設定する。

  1. Text(theTime,”hh:mm:ss”);

ラベル設定_データ

アプリをプレビューして確認！

ここまで出来たら画面右上の再生アイコンから実際にアプリをプレビューしてみましょう。


アプリのプレビュー

すると、見事リアルタイムで動く時計が出来ました！


タイマーイメージ

さいごに

今回はPowerAppsでリアルタイムで動く時計を作ってみました。

時計が動くところまで実装してみましたが冒頭にもあった通りカスタマイズ次第で自分好みのデザインに変えれちゃいます。余裕があればこだわって作ってみるのもいいかもしれませんね。

今回は以上です！お疲れ様でした！

タグ: , , , ,