1. システムとオフィスの融合|株式会社QES
  2. media
  3. マイクロソフトソリューション Power Apps
  4. Power Appsでアナログ時計を作る

QESブログ

Power Appsでアナログ時計を作る

  • LINEで送る
  • このエントリーをはてなブックマークに追加


こんにちは。システムソリューション営業本部の吾妻です。

先日とある案件でPower Appsキャンバスアプリを実装していた際に、ふとPower Appsでアナログ時計を実装するにはどうすればよいか気になったので、さっそく検証してみました。現在時刻を表示するだけでなく、残り時間を表示したり、スピードメーターを表示したりといった応用も考えられるかと思いますので、ぜひ皆さんもお試しください。

ちなみにデジタル時計であれば、Timerコントロールを1つ置くだけで出来上がります。
clock01.png


アナログ時計の仕様

今回実装するアナログ時計は以下のような見た目のものとします。

  • 長針(分)・短針(時)・秒針の3つの針がある
  • 針の長さは秒針≧長針>短針、太さは短針>長針>秒針
  • 針が滑らかに進む
  • 日付(日のみ)を数字で表示する窓がある

「アナログ時計 Power Apps」などで検索してみると、円周上を点Pが動いていくようなデモがコミュニティで紹介されていますが、針がないので今回は利用できません。


実装手順

早速実装していきます。

(1) 今回実装するアナログ時計は共通部品として他のキャンバスアプリでも使い回したいので、カスタムコンポーネントを作成して、その中にコントロールを配置していきます。
まずは、先程のデジタル時計と同様に、変数に現在時刻を格納し続けるためのTimerコントロールを配置します。

(2) Power Appsキャンバスアプリのコントロールの中で、図形を描画して任意の角度に回転させることができるようなものは、現時点では「アイコン」コントロールのみです(「イメージ」コントロールは90度刻みを定数で指定します)。なので今回3本の針を描画するためにアイコンコントロールに「縦線」アイコンを指定して、コンポーネントに配置します。

(3) そのままだと、時計の中心を挟んで上下両方に針が表示されてしまうので、PaddingBottomプロパティに「Self.Height/2」(高さの半分が余白)と指定することで上方向だけに針が表示されるようにします。
clock03.png

(4) 長針(分)・短針(時)・秒針の3つ分アイコンを配置したら、各々の「Rotation」プロパティに以下の数式を指定します。
 コントロール   Rotation 
 Second   360 * ( (Second(now) + Value(Text(now,"fff")) / 1000) / 60) 
 Minute   360 * ( Minute(now) / 60) 
 Hour   360 * (Hour(now) + Minute(now) / 60) / 12 

(5) 続いて、針の太さを調整していきます。
縦線アイコンの太さは、コントロールのプロパティからは直接設定できず、大きさ(Width / Height)や余白(Padding***)を介して間接的に設定するしかないようです。そこで、秒針のアイコンが一番小さく、短針のアイコンが一番大きくなるよう、以下のようにプロパティを設定します。定数は好みに応じて変更してください。
 コントロール   X   Y   Width   Height 
 Second   ( Parent.Width - Self.Width ) / 2   ( Parent.Height - Self.Height ) / 2   Parent.Width * 1.34   Self.Width 
 Minute   ( Parent.Width - Self.Width ) / 2   ( Parent.Height - Self.Height ) / 2   Second.Width * 1.2   Self.Width 
 Hour   ( Parent.Width - Self.Width ) / 2   ( Parent.Height - Self.Height ) / 2   Minute.Width * 1.4   Self.Width 

(6) さらに、針の長さを調整していきます。長さについてもコントロールのプロパティからは直接設定できないため、今回はマスク画像をアップロードして、画像コントロールをアイコンの上に被せることで無理矢理長さを制限します。マスク画像は、中心に透明の円があり、周囲は白い背景となっているものを用意しました(下の表では背景色を設定しているので真ん中の円が aliceblue になっています)。
circle-white.png circle-white-60.png

(7) アイコンコントロールと画像コントロール(マスク画像)の前後関係に注意して配置します。中心に飾りの円と、右下に日付を表示するラベルも追加しました。いくつかのコントロールについては、X座標やY座標のプロパティが負値をとりますが、コントロールを全部カスタムコンポーネントの中に配置しているおかげで、コンポーネントの領域からはみ出した部分はキャンバスアプリに表示されません。
clock04.png

(8) 最後に、カスタムコンポーネントをキャンバスアプリのスクリーンに配置して、色や大きさを整えれば完成です。
clock05.png



🎉これで完成です!!🎉




QESではPower Platform導入時の支援から、アプリケーション開発、導入後の保守サポートまで対応しております。
Power Apps/Power Platformに関して、お手伝いできることがありましたら何なりとご相談くださいませ。また以下のページもご覧ください。


他にも、Power Apps関連の記事があります。




このブログで参照されている、Microsoft、Windows、その他のマイクロソフト製品およびサービスは、米国およびその他の国におけるマイクロソフトの商標または登録商標です。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

お気軽にお問い合わせください。

ページのトップへ