Windows8のストア画面で手軽に時計を表示するサンプル

2013年4月19日(金)
薬師寺 国安

こんにちは、薬師寺国安です。前回まで、Windows Store Applicationプログラミングの基本編、応用編を解説して来ましたが、それらの連載で紹介しきれなかったサンプルはまだまだありますので、引き続き紹介していきたいと思います。ここで紹介するサンプルを使って、ぜひ便利なアプリ作りに役立ててください。

それでは早速ですが、今回のサンプルを紹介していきます。

Windows 8のWindows ストア画面にはあらかじめ時刻が表示されていません。時刻を見るには図1のようにマウスカーソルを右隅上または右隅下に持っていき、チャームを表示させることで見られます。また、タッチパネルの場合は右端から左に向かってスワイプすることでチャームが表示され、時刻が表示されます。

この、時計を表示させる手間がちょっと面倒臭いので、タイルに時刻表示のアイコンを表示しておいて、いつでも好きな時にタイルをクリックすることで時刻の表示を可能にしてみたいと思います。

このサンプルでは時刻は10秒間隔で表示されます。起動すると10秒のカウントダウンが始まり(図2)、0になるとアニメーションを伴って時刻が表示されます(図3)。時刻の文字色はSettingsアイコンから色を選択することができます。Saveアイコンで保存すると、色情報は保存されますので、次回起動時にも設定した色で時刻が表示されます(図4)。

図1:マウスカーソルを右隅上または右隅下に持っていき、チャームを表示させることで時刻表示が可能(クリックで拡大)
図2:10秒のカウント後時刻がアニメーションを伴って表示される(クリックで拡大)
図3:時刻がアニメーションを伴って表示されている(クリックで拡大)
図4:Settingで文字をRedに指定して保存した(クリックで拡大)

実際に動かした動画は下記のようになります。スマホで撮影した動画のため、見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「TimeShow」という名前を付けています。

ソリューションエクスプローラー内にImageというフォルダを作って、背景に敷く画像を配置しておきます。ダウンロードされたサンプルファイルには、画像ファイルは追加済みです。

NuGetパッケージの管理

今回はCodePlexで公開されている、WinRT XAML Toolkitに含まれているコントロールを使用します。WinRT XAML Toolkitについては下記のURLを参照してください。
※ここで使用しているバージョンは1.3.4ですが、最新のバージョンは1.3.6になります。
→ WinRT XAML Toolkit

WinRT XAML Toolkitをインストールするには、ソリューションエクスプローラー内の「すべてのファイルを表示」して、表示された「参照設定」の上でマウスの右クリックをします。「NuGetパッケージの管理(N)」が表示されます(図5)。

図5:「NuGetパッケージの管理(N)」を表示する(クリックで拡大)

表示される画面の左に表示されている、「オンライン」を選択し、検索欄にWinRTXamlToolkitと入力します。するとWinRT XAML Toolkitの[インストール(I)]画面が表示されますので(図6)、インストールをクリックします。同様にその下に表示されているWinRT XAML Toolkit-Debugging Toolsもインストールしてください。必須ではありませんが、念のためインストールしておきます。

図6:「NuGetパッケージの管理(N)」からWinRT XAML Tookitをインストールする(クリックで拡大)

インストールが成功するとインストール済みのチェックアイコンが表示されます(図7)。

図7:インストール済みのチェックアイコンが表示される(クリックで拡大)

[閉じる]ボタンをクリックして画面を閉じます。ソリューションエクスプローラー内の「参照設定」を見るとWinRTXAMLToolkitとWinRTXamlToolkit.Debuggingが追加されています。同時にWinRTXAMLToolkitとWinRTXamlToolkit.Debuggingの情報が記述された、packages.configも作成されます(図8)。

ここでもし、WinRT XAML ToolkitやWinRTXamlToolkit.Debuggingを削除して、再度「NuGetの管理(N)」からインストールしようとしても、このpackages.configが存在していると、インストール済みとなってしまいますので、このファイルも削除する必要があります。

図8:WinRT XAML ToolkitとWinRTXamlToolkit.Debuggingがインストールされた(クリックで拡大)
  • Windows 8のWindowsストア画面で手軽に時計を表示させるためのサンプル

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています