[C#]Visual Studio 2013で、Windows8.1向けWindowsストアアプリを作成してみる

Windowsストアアプリ

Windowsストアアプリ

Windowsストアアプリと言っても、Windows8用とWindows8.1用と異なり、
Windows8用のストアアプリはVisual Studio 2012で開発し、
Windows8.1用のストアアプリはVisual Studio 2013で開発する必要がある。

Windows8は無料アップデートでWindows8.1になるので、もうWin8用ストアアプリを態々作る必要も無いだろう。
なので、最初からWin8.1向けWindowsストアアプリ開発に挑戦してみる。

 

早速、先日インストールしたVisual Studio Community 2013を起動。
Visual Studio Community 2013

 

新しいプロジェクトを作成

Visual Studioが起動したらWindowsストア・アプリのプロジェクトを作成してみる。
[ファイル]-[新規作成]-[プロジェクト]メニューを選択。
[ファイル]-[新規作成]-[プロジェクト]メニューを選択

 

「新しいプロジェクト」ダイアログの左側ツリーで、
[テンプレート]-[Visual C#]-[ストア アプリ]を選択。
とりあえず、今回はHello Worldアプリを試作する程度なので
「空のアプリケーション(ユニバーサル アプリ)」を選択。
「空のアプリケーション(ユニバーサル アプリ)」を選択

 

最初にWindows8.1 開発者用ライセンスを取得しなければならないようだ。
開発者用ライセンス

開発者用ライセンス

Windows8.1 開発者用ライセンスを取得する

Windows8.1 でこのスタイルのアプリを開発するには開発者用ライセンスが必要です。
開発者用ライセンスを使用すると、Microsoftがテストを行って認証する前に、このコンピュータ上でアプリのインストールやテストを行うことができます。

開発者用ライセンスは、アプリの開発、テスト、および評価の目的でのみ使用することができます。
それ以外の事項については、Windows8.1ソフトウェア ライセンス条項にある Windows8.1 および開発者用ライセンスの使用に準拠します。

開発者用ライセンスを取得すると、開発者用ライセンスの仕様に関するデータがMicrosoftに送信されます。
詳細については、プライバシーに関する声明をお読みください。

これら条項に同意し、開発者用ライセンスをインストールする場合は、[同意します]をクリックします。

 

Microsoftアカウントでサインイン
Microsoftアカウント

 

開発者用ライセンスを取得

開発者用ライセンスを取得しました。
ライセンスの有効期限日までWindows8.1のアプリを開発することができます。
アプリの開発を続けるには、期限切れになる前にライセンスを更新する必要があります。

 

これでプロジェクト雛形が作成された。
プロジェクト

 

試しに、この初っ端の状態でいきなり実行してみる。
[ローカルコンピュータ]の実行ボタンまたは[F5]キー押下。
[ローカルコンピュータ]の実行

 

スプラッシュ画面
起動すると一瞬、スプラッシュ画面(タイトル、アイコン)が表示される。

 

実行画面
真っ黒な画面と画面右上に数値が表示される。

 

停止は[Alt]+[Tab]などでVisual Studioの画面に戻り、停止ボタンまたは[Shift]+[F5]キーで停止。
アプリの画面を閉じただけではデバッグは止まらないようだ。
停止ボタン

 

Hello worldの作成

とりあえず、Hello worldアプリということで、文字を表示してみる。

 

右側のソリューションエクスプローラーのツリーから、Windows8.1用の”MainPage.xaml”をダブルクリックすると、編集用の画面(タブ)が開かれる。
MainPage.xaml
Windowsストアアプリでは、Windows Formアプリと違って画面はXAML(XML)で作る必要がある。

 

Hello worldの文字を表示するために、コントロールを配置する。
画面左側の[ツールボックス]タブを開き、TextBlockコントロールを画面にドラッグ&ドロップ。
画面左側の[ツールボックス]タブ
TextBlockコントロールを画面にドラッグ&ドロップ

 

プロパティ
画面右下のプロパティか、画面下側のXMLでTextの値を”TextBlock”から”Hello world”に変更。
ついでに、フォントとサイズも変更。これで完成。

 

これで実行(F5)すると、ビルドされ「Hello world」のWindowsストアアプリが実行される。
実行

 

あと、この作成したアプリは、スタート画面にも登録される。
まだDebugモードなんだけど。
一応、このアイコンからもビルドしたアプリを実行可能。
スタート画面にも登録

 
 

日時表示アプリを作ってみる

Hello worldを表示するだけでは詰まらないし、C#のプログラムを1行も書いていないので、ちょっと改造して現在時刻を表示するアプリを作ってみる。

 

さっきのHello worldのTextBlockコントロールに現在時刻を表示するようにする。
そのためは、C#プログラムから識別できるようにするためTextBlockコントロールに名前を付けてやる必要がある。

適当に”timeText”という名前を付けてみる。
変数名

 

今度はプログラム側の処理を用意する。
“MainPage.xaml.cs”を開き、以下のソースを書き込む。
ソースを書き込む

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234238 を参照してください

namespace HelloWorldApp
{
    /// <summary>
    /// Frame 内へナビゲートするために利用する空欄ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            
            DispatcherTimer tm = new DispatcherTimer();
            tm.Interval = TimeSpan.FromSeconds(1);
            tm.Tick += timeTick;
            tm.Start();
        }

        void timeTick(object sender, object e)
        {
            timeText.Text = DateTime.Now.ToString("HH:mm:ss");
        }
    }
}

29~38行目を追記。

 

これで1秒間隔で現在日時を更新表示するアプリが完成。
実行してみると、一応、その通り動いた。
アプリが完成

 

以前、XAMLを使ったWPFアプリを作ったことがあるけど、やっぱWindows FormアプリとGUIの作り方が大分違うので、ちょっと違うことをやろうとすると戸惑ってしまう。

このWindowsストアアプリは、今回のようなXAML+C#の組み合わせだけでなく、HTML5+JavaScriptの組み合わせでも開発することができるらしい。
けど、HTML5も勉強不足だし、どのみち勉強しないと使えるようにはならないな。。

Androidは乗り遅れたし、iPhoneもMac持ってないからダメだし、Windowsストアアプリ開発を少し勉強していこうかな。
4年前も同じようなこと考えてて、結局、何もできずサボっていた。
なんか、やりたいこといっぱいあるんだけど。

 
 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


*