アナログ時計を作ろう! (とにかく作ってみたい方向け)

更新日: 2011 年 10 月 26 日

ここでは、あらかじめこちらで用意したプログラムを使って、簡単なアナログ時計を作ってみたいと思います。プログラミングの詳細は抜きにして、とにかく Windows Phone のアプリケーションを作成して動かしてみることを目標とします。

まずは、Windows Phone のプロジェクトを作ってみましょう。プロジェクトとは企画、計画といった意味ですが、ここでは、アプリケーションができるまでの一連の流れを設定できます。1 つのプロジェクトで複数のアプリケーションを作成するケースもあります。

では、Visual Studio を起動し、[ファイル] メニューから [新しいプロジェクト] を選択します。

ここでは、使用する言語は Visual C# とします。
左側のペインで [Visual C#] の中にある [Silverlight for Windows Phone] テンプレートを選択します。
右側のペインにプロジェクトが表示されますので、[Windows Phone アプリケーション] を選択しましょう。
続いて画面下部にある、[名前] のところにプログラムの名前を付けましょう。ここでは、Analog　Clock という名前を付けてみます。名前を入力したら OK ボタンを押します。
続いて以下の画面が表示されます。

ここでは、Windows Phone OS 7.1 を選択して OK ボタンを押します。

これでプロジェクトが完成しました。

ページのトップへ

---

プログラムをコピーしよう!

<phone:PhoneApplicationPage x:Class="Analog_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"> <phone:PhoneApplicationPage.Resources> <Storyboard x:Name="SecondMove" RepeatBehavior="Forever"> <DoubleAnimation Duration="0:1:0" From="0" To="360" Storyboard.TargetName="秒針" Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)" d:IsOptimized="True" /> </Storyboard> <Storyboard x:Name="MinutesMove" RepeatBehavior="Forever"> <DoubleAnimation Duration="1:0:0" From="0" To="360" Storyboard.TargetName="長針" Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)" d:IsOptimized="True" /> </Storyboard> <Storyboard x:Name="HourMove" RepeatBehavior="Forever"> <DoubleAnimation Duration="12:0:0" From="0" To="360" Storyboard.TargetName="短針" Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)" d:IsOptimized="True" /> </Storyboard> </phone:PhoneApplicationPage.Resources> <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです--> <Grid x:Name="LayoutRoot" Background="Transparent" Loaded="LayoutRoot_Loaded"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--TitlePanel は、アプリケーション名とページ タイトルを格納します--> <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="Analog Clock" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> <!--ContentPanel - 追加コンテンツをここに入力します--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0" VerticalAlignment="Top"> <Image Name="文字盤" Height="480" Width="480" /> <Image Name="秒針" HorizontalAlignment="Center" VerticalAlignment="Top" Width="22" Margin="0,40,0,0" IsHitTestVisible="False" Height="240"> <Image.RenderTransform> <RotateTransform CenterX="11" CenterY="200"></RotateTransform > </Image.RenderTransform> </Image> <Image Name="長針" HorizontalAlignment="Center" VerticalAlignment="Top" Height="234" Width="100" Margin="0,16,0,0"> <Image.RenderTransform> <RotateTransform CenterX="50" CenterY="224"></RotateTransform > </Image.RenderTransform> </Image> <Image Name="短針" HorizontalAlignment="Center" VerticalAlignment="Top" Height="180" Width="68" Margin="0,70,0,0"> <Image.RenderTransform> <RotateTransform CenterX="34" CenterY="170"></RotateTransform > </Image.RenderTransform> </Image> </Grid> </Grid> </phone:PhoneApplicationPage> 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; namespace Analog_Clock { public partial class MainPage : PhoneApplicationPage { // コンストラクター public MainPage() { InitializeComponent(); } private void LayoutRoot_Loaded(object sender, RoutedEventArgs e) { SecondMove.Begin(); MinutesMove.Begin(); HourMove.Begin(); int second = DateTime.Now.Second; SecondMove.Seek(new TimeSpan(0, 0, second)); int minutes = DateTime.Now.Minute; MinutesMove.Seek(new TimeSpan(0, minutes, second)); int hour = DateTime.Now.Hour; HourMove.Seek(new TimeSpan(hour, minutes, second)); } } }

プログラムを貼り付けたあと、XAML の画面に戻し、右ペインのデザイン画面を見ると以下のようになっています。

これは、文字盤、秒針、長針、短針の初期位置が設定されている状態です。ここに画像イメージを設定すれば、アナログ時計が完成します。

こちらでは、3 種類の時計の画像ファイルを用意しています。ダウンロードした圧縮ファイルの中に、clock01、clock02、clock03 というフォルダーがあり、それぞれのフォルダーの中に 4 種類の画像ファイルが入っています。どの時計を使っても構いませんが、ここでは、clock01 を利用して説明します。
画像は、以下を利用します。

clock01.png: 文字盤
clock01_sec.png: 秒針
clock01_min.png: 長針
clock01_hour.png: 短針

では、これらの画像を設定しましょう。

XAML のプログラムの中で、漢字で [文字盤] と書かれたところがあります。

この文字盤と書かれたところをクリックしてカーソルを置き、プロパティ ウィンドウを確認します。もしプロパティ ウィンドウが無い場合は、[表示] メニューから [その他のウィンドウ] [プロパティ ウィンドウ] を選択しましょう。

プロパティ ウィンドウの中に Source という項目があると思います。ここで、右側の […] をクリックします。

すると、イメージ選択ウィンドウが表示されますので、追加ボタンをクリックします。

ファイルを開くウィンドウが表示されますので、先ほど用意した clock01.png を指定します。選択が終わったら OK ボタンをクリックします。

同じように秒針、長針、短針についても画像を設定します。

では、プログラムを実行してみましょう。

[デバッグ] メニューから [デバッグ開始] を選択します。すぐにエミュレーター (Windows Phone Emulator) が起動します。しばらく待っていると以下のような画面が表示されます。エミュレーターが起動しないときは、Visual Studio のツール バーに [Windows Phone Device] という文字が表示されていないか確認します。もし表示されていたときは、その部分を [Windows Phone Emulator(JA)] に変更して、再度実行します。

画像ファイルを他の画像と切り替えれば、簡単に別の時計に変ります。また、同じサイズで作成すればご自身でオリジナルの時計を作ることもできます。

画像サイズは、以下の通りです。是非試してみてください。

文字盤: 480 × 480
秒針: 22 × 240
長針: 100 × 234
短針: 68 × 180

サンプル画像

プログラムは、うまく動きましたか?

初めての Windows Phone プログラミングとしても、アナログ時計はなかなか実用的ではないでしょうか。もし、プログラミングに興味が出てきましたら、是非、初めての Windows Phone プログラミングや、デジタル時計を作ろうといった他のコンテンツもご覧になってみてください。