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


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

アナログ時計の仕様

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

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

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

実装手順

早速実装していきます。

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

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

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


(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 になっています）。

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


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

🎉これで完成です!!🎉

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


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

---

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