[アーティクル]
11/12/2014

デジタル時計を作ろう!

更新日: 2011 年 10 月 26 日

ここでは、タイマーという機能を利用したデジタル時計を作ってみたいと思います。
プログラムの大きな流れは、タイマーを使って、定期的に画面に配置したテキストブロック (TextBlock) コントロールに現在の時刻を設定するというものです。
タイマーの設定は、Visual Studio が自動的にプログラムを生成してくれる機能がありますので、作業は簡単です。

プロジェクトを作ってみよう!

まずは、Windows Phone のプロジェクトを作ってみましょう。
プロジェクトの作り方は、[初めての Windows Phone プログラミング] のコンテンツを参照してください。

今回は、アプリケーション名を [Digital Clock] にしましょう。
またデザイナー上のページ名も [Digital Clock] にします。[初めての Windows Phone プログラミング] と同様、マイアプリケーションと書かれたところは [Windows Phone Sample] とします。

プロジェクトの準備ができたら、一度プログラムを実行してみましょう。以下のように表示されましたか?

図 1

ページのトップへ

テキストブロック (TextBlock) を配置しよう!

では、時計を表示するためにテキストブロック (TextBlock) をツールボックスからドラッグアンドドロップして配置してみましょう。操作方法は、[初めての Windows Phone プログラミング] のコンテンツをご確認ください。

以下のように少し引き延ばして、大きめに配置します。マウスで 4 辺をドラッグすれば、デザイナー上で簡単に配置できます。

図 2

このままでは、少しテキストの文字が小さいですね。プロパティウィンドウを使って、テキストブロック (TextBlock) のプロパティの [FontSize] (フォントサイズ) を 72 にしましょう。

図 3

続いて色も変えてみましょう。[Foreground] (フォアグラウンド) というプロパティで文字の色を設定できます。ここでは、[Pink] に設定しました。

図 4

これで準備は整いました。デザイン画面は以下のようになります。

図 5

ページのトップへ

オブジェクトとプロパティ、メソッド、イベントについて

プログラムを作る前に C# のプログラミングについて簡単に説明します。

C# では、オブジェクト指向プログラミングがサポートされています。簡単に言えば、プログラムはオブジェクトというものを作り、そのオブジェクトの持つ機能を利用する、といった流れで作られます。
オブジェクトを作るには、new というキーワードをクラス (Class) に対して使います。例えば、今回はデジタル時計を作るためにタイマー (DispatchTimer) というクラスを使うのですが、このクラスを使うためには、最初にオブジェクトを作る必要があります。

具体的には、以下のように記述します。

DispatcherTimer timer = new DispatcherTimer();

これで、timer というオブジェクトが生成されます。オブジェクトができたら、その機能を利用できます。
オブジェクトの持つ機能は、主にプロパティ、メソッド、イベントがあります。
プロパティとは、そのオブジェクトのパラメーターをセットする機能です。
例えば、タイマー (DispatchTimer) の場合は、Interval というプロパティがあり、タイマーの刻みの間隔を設定できます。(今回は省略しています)
例えば、以下のように記述します。(Interval というプロパティに TimeSpan.FromSeconds(1); という値を設定しています。)

timer.Interval = TimeSpan.FromSeconds(1);

メソッドは、オブジェクトの持つプログラムを実行する機能です。タイマーの場合、Start メソッドを使ってタイマーを開始できます。また、Stop メソッドで停止します。
以下のように記述します。

timer.Start();

最後にイベントです。プロパティやメソッドは、どちらもユーザーのプログラムの中で設定したり呼出したりする機能でしたが、イベントはシステムによって呼出されるプログラムを設定する機能です。ここで、呼出されるプログラムのことをイベントハンドラーといいます。

例えば、ボタンの場合は、Click というイベントがあります。このイベントはボタンが押されたときに、イベントハンドラーが呼出されます。今回利用するタイマーの場合は、一定時間ごとに呼出されるイベントハンドラーが利用できます。
以下のように記述します。

timer.Tick += new EventHandler(timer_Tick);

このように記述すると、一定時間ごとに別途用意した、timer_Tick というイベントハンドラーが呼出されるようになります。この記述は、Visual Studio を使うと自動的にイベントハンドラーまで作ってくれます。

ページのトップへ

デジタル時計を作ろう!

それでは、デジタル時計を作ってみましょう。
まずは、C# のソース画面に切り替えます。デザイナー画面上で右クリックするとポップアップメニューが表示されますので、ここで [コードの表示] を選択します。

図 6

ソースコードが表示されたらプログラムを作成しましょう。
まずは、一定時間ごとにイベントが呼び出されるようにし、そのメソッドの中で TextBlock に時刻を設定するようにします。
一定時間ごとにイベントが呼出されるようにするには、前述したとおり、DispatchTimer というクラスを使います。
このクラスを使うために以下のように太字の行を追加します。

続いて、コンストラクターと書かれたメソッドの中で、以下のように太字の部分を記述します。

// コンストラクター
public MainPage()
{
InitializeComponent();

    DispatcherTimer timer = new DispatcherTimer();
    timer.Tick
    timer.Start();
}

ここで、timer.Tick の部分が書きかけですが、ここでは、一定時間ごとにイベントハンドラーを呼出すというイベントの定義をします。
timer.Tick に続けて += と入力しましょう。すると、自動的にイベントハンドラーとイベント用のメソッドが表示されますので、タブキーを 2 回押して生成させます。

(+= TAB TAB とキー入力します)

プログラムは以下のようになります。

public partial class MainPage : PhoneApplicationPage { // コンストラクター public MainPage() { InitializeComponent(); DispatcherTimer timer = new DispatcherTimer(); timer.Tick += new EventHandler(timer_Tick); timer.Start(); } void timer_Tick(object sender, EventArgs e) { throw new NotImplementedException(); } }

新しく timer_Tick というイベントハンドラーが生成されました。このイベントハンドラーは、一定時間ごとに呼出されます。現在書かれている、throw new NotImplementedException(); は、プログラムが書き込まれていませんという意味のエラーを出す行です。この行は削除してイベントでの処理を記述する必要があります。

では、イベントハンドラーで時刻表示をするプログラムを記述します。
新しく生成された timer_Tick というイベントハンドラーがあります。

void timer_Tick(object sender, EventArgs e) { throw new NotImplementedException(); }

ここを太字の部分のように書き換えます。

void timer_Tick(object sender, EventArgs e)
{
textBlock1.Text = DateTime.Now.ToLongTimeString();
}

DateTime.Now.ToLongTimeString(); は、現在の時刻を文字列で返します。これを先ほど配置した TextBlock の Text プロパティに設定したということです。
これで、一定時間ごとに先ほど貼り付けたテキストボックスに現在の時刻が表示されます。

これでデジタル時計のプログラムは完成です。実行すると以下のようになります。

図 7

ページのトップへ

おわりに

デジタル時計は、いかがでしたでしょうか?

イベントハンドラーを作る部分が C# の構文としては難しいですが、作成自体は Visual Studio が自動で行ってくれるのでやり方さえ覚えてしまえば簡単です。
また、ここまでのプログラムによって、コントロールの配置、プロパティの書き換え、イベントの作成、メソッドの実行など、開発に必要な基礎的な操作を一通り試せたはずです。

ここからは、いろいろなコントロールを利用するなど、プログラムの拡張を試してみてはいかがでしょうか?
また、DateTime.Now.ToLongDateString(); を使えば時刻ではなく、日付を取得することができますのでこれを表示するのも面白いでしょう。

ページのトップへ

プログラム全文

--- MainPage.xaml ---

<phone:PhoneApplicationPage x:Class="Digital_Clock.MainPage" xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="https://schemas.microsoft.com/expression/blend/2008" xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True">  <Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>  <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="ApplicationTitle" Text="Windows Phone Sample" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="Digital Clock" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel>  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Height="93" HorizontalAlignment="Left" Margin="12,56,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="438" FontSize="72" Foreground="Pink" /> </Grid> </Grid>   </phone:PhoneApplicationPage>

--- MainPage.xaml.cs ---

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; using System.Windows.Threading; namespace Digital_Clock { public partial class MainPage : PhoneApplicationPage { // コンストラクター public MainPage() { InitializeComponent(); DispatcherTimer timer = new DispatcherTimer(); timer.Tick += new EventHandler(timer_Tick); timer.Start(); } void timer_Tick(object sender, EventArgs e) { textBlock1.Text = DateTime.Now.ToLongTimeString(); } } }

ページのトップへ

デジタル時計を作ろう!

プロジェクトを作ってみよう!

テキストブロック (TextBlock) を配置しよう!

オブジェクトとプロパティ、メソッド、イベントについて

デジタル時計を作ろう!

おわりに

プログラム全文

その他のリソース