【ITニュース解説】How can developers build a dynamic, state-driven and fully customized UI using Canvas?

IT開発の現場では、標準で用意されているUI部品だけでは実現できない、特別なデザインや動きを持つ画面を作りたい場面が頻繁に現れる。例えば、単なるボタンではなく、会社のブランドイメージを強く強く反映した独自の形状のボタンや、アニメーションする複雑な進捗バー、あるいは一般的なデジタル時計ではなく、昔ながらの機械式アナログ時計を再現したいといった要望である。このような高度なカスタマイズが求められる場面で威力を発揮するのが、Canvasという技術である。

Canvasは、画面上に絵を描くキャンバスのように、開発者がピクセルレベルで自由にグラフィックを描画できる機能を提供する。これにより、既存のコンポーネントの制約に縛られることなく、完全にオリジナルのUIを作成できる。例えば、カスタムデザインの時計、データの可視化に使うチャートやメーター、ゲームのユーザーインターフェース、インタラクティブな描画ツール、さらには特定のブランドを表現する特殊なアニメーションなど、その用途は非常に幅広い。

しかし、ただ絵を描くだけでは不十分な場合が多い。例えば時計であれば、単に文字盤と針を描くだけでなく、実際の時刻に合わせて針が動くようにする必要がある。単なる静的な画像ではなく、アプリケーションの状態（データ）の変化に応じて、画面が自動的に更新され、生き生きとした動きを見せる「動的で状態駆動型」のUIをCanvasで実現することが、開発者にとって大きな課題となることがよくある。

この記事では、HarmonyOSアプリケーション開発で用いられるArkTSというプログラミング言語と、ArkUIというUIフレームワークのコンポーネント駆動モデルを組み合わせることで、この課題をどのように解決するのかを解説している。具体的には、毎秒更新される機械式アナログ時計を例に、Canvasを使った動的なUIの作り方を紹介している。

今回作成する機械式時計は、MechanicClockという名前の再利用可能なUI部品（コンポーネント）として定義される。このコンポーネントは、他の場所で何度も利用できるように設計されており、非常に効率的である。

まず、この時計コンポーネントが外部から設定を受け取れるように、timezoneというプロパティ（@Propで定義）を持つ。これにより、時計を表示したい都市のタイムゾーンを指定できる。例えば「ヨーロッパ/イスタンブール」と設定すれば、イスタンブールの現在時刻を時計が指し示す。

次に、時計の現在時刻を管理するために、currentTimeという状態変数（@Stateで定義）を持つ。ArkUIでは、@Stateで定義された変数が変更されると、その変数に依存するUIが自動的に再描画されるという仕組みがある。これを「リアクティビティ」と呼び、UIを動的にする上で非常に重要な要素である。

実際の描画には、CanvasRenderingContext2Dというオブジェクトが使われる。これは、Canvas上で線や円、テキストなどを描画するための様々なツール（メソッド）を提供する「絵筆」や「絵の具」のようなものだと考えると良い。

時計の時刻を更新する処理はupdateTime()メソッドで行われ、指定されたタイムゾーンに基づいて現在の時刻を正確に取得し、currentTime状態変数を更新する。この更新が、時計の針の動きをトリガーする。

描画自体はdrawHand()、drawClockFace()、drawFullClock()といったメソッドに分けられている。drawClockFace()は時計の文字盤、目盛り、数字といった静的な部分を描画する。drawHand()は引数で指定された角度、長さ、太さ、色に基づいて針を描画する。そしてdrawFullClock()が、文字盤を描き、現在のcurrentTimeに基づいて時針、分針、秒針の角度を計算し、それぞれの針を描画することで、最終的な時計の絵を完成させる。

この時計を動かすためには、毎秒ごとに時刻を更新し、再描画する必要がある。これは、コンポーネントのライフサイクルメソッドであるaboutToAppear()とaboutToDisappear()を利用して実現される。aboutToAppear()はコンポーネントが画面に表示される直前に一度だけ実行され、ここでJavaScriptのsetInterval()関数を使って、1秒（1000ミリ秒）ごとにupdateTime()とdrawFullClock()を繰り返し呼び出すタイマーを設定する。これにより、時計は毎秒カチカチと動き続ける。そして、aboutToDisappear()はコンポーネントが画面から消える直前に実行され、ここでclearInterval()を使ってタイマーを停止し、不要な処理がバックグラウンドで動き続けるのを防ぎ、リソースを適切に管理する。

最終的に、build()メソッドの中でCanvasコンポーネントを配置し、そのonReadyイベントで初期のdrawFullClock()を呼び出すことで、画面に時計が描画される。

このMechanicClockコンポーネントを一度作成してしまえば、あとはこれを再利用するだけで、様々な場所に時計を配置できる。例えば、複数の主要都市の時刻を同時に表示したい場合、Gridというレイアウトコンポーネントの中にMechanicClockを複数配置し、それぞれの時計に異なるtimezoneプロパティを渡すだけで良い。各時計は独立して、指定されたタイムゾーンに基づいて時刻を更新し、滑らかに針を動かす。ArkUIのリアクティブな状態管理とCanvasの精密な描画能力が組み合わさることで、ページ全体やコンポーネント全体を再読み込みすることなく、必要な部分だけを効率的に更新できるため、非常にスムーズで一貫性のあるユーザー体験が提供される。

ただし、Canvasの使用にはいくつかの注意点がある。Canvas機能はAPIレベル8以降のHarmonyOSでサポートされていること、そして、あまりにも多くのCanvasコンポーネントを同時に表示すると、特に性能の低いデバイスでは描画処理が重くなり、アプリケーションの動作に影響を与える可能性があることを理解しておく必要がある。

このように、CanvasをArkUIの状態管理機能とArkTSの構造と組み合わせることで、標準のUIコンポーネントでは実現が難しい、高度にカスタマイズされ、かつ動的に変化する美しいユーザーインターフェースを作成する能力が手に入る。今回の機械式時計のように、単なる表示にとどまらない、生き生きとした表現が可能になるのである。