Windowsストアアプリ開発　超入門

Windowsストアアプリ開発

#Windowsストアアプリ

#RIA

#Windows

T君

2012.11.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

始めに

Windows 8 のWindowsストアアプリ(旧称 Metroスタイルアプリ) で勉強したことをまとめていきます。
言語はVisual C#を使います。画面のレイアウトなどコーディングせずに設定できる部分はなるべくコーディングなしで進めていきたいと思います。あとWindowsストアアプリはWindows7以前のOSでは開発できないので、スナップやアプリバー、チャームなどWindows 8 に関する説明は省きます。

開発環境

Windowsストアアプリの開発にはVisual Studio 2012 for Windows 8を使います。
Visual Studio 2012 Express for Windows 8 はWindows 8上にのみインストール可能です。
Expressエディションという評価版のエディションであれば無料で使えます。

2010までは言語ごとにアプリケーションが分けられていたのですが、

Visual Studio 2012 Express for Web
Visual Studio 2012 Express for Windows 8
Visual Studio 2012 Express for Windows Desktop
Visual Studio 2012 Express for Windows Phone

と用途別に分けられるようになりました。

以下のサイトからダウンロードできます。
http://www.microsoft.com/visualstudio/jpn/downloads

プロジェクトの作成

インストール後、Visula Studioを起動すると開発者用ライセンスに関するダイアログが出ると思います。私はとりあえず取得しておきました。
ダイアログを閉じるとスタート画面が表示されます。「新しいプロジェクト」をクリックして下さい。

プロジェクトを作成します。使える言語としてはVisual C#、Visual Basic、Visual C++
2012からJavascriptでも開発できるようになりました。

Visual Studio 2012 Express for Windows 8の特徴

Visual C#で「新しいアプリケーション」を選択してプロジェクトを作成しました。
ソリューションエクスプローラーの中にMainPage.xamlというファイルがあるので選択すると、以下のような画面になります。
プロジェクトが作成できたのでVisual Studio 2012 Express for Windows 8の特徴を見ていきます。

デバイスウインドウ

まずは画面左端のデバイスと表示されている部分をクリックしてデバイスウインドウを見てみます。
ここではディスプレイのサイズを選択します。最小サイズが1366×768になっていますが、1024×768以上であればWindowsストアアプリを起動することができます。ただし、1366×768未満の端末の場合、スナップ機能が使えません。

他にもビューという項目を切り替えると画面の向きを切り替えることができます。試しに縦にしてみました。
縦、横の他にWindows 8にはスナップ機能という画面を分割して複数のアプリを表示する機能があるので４つのレイアウトがあることを意識しなくてはいけません(縦位置の場合はスナップは使えません。)レイアウトの変更方法は以下のページに書きました。
スナップ表示した際にレイアウトを変更する

マニフェストデザイナー

次にソリューションエクスプローラーの中にPackage.appxmanifestというファイルがありますので開いてみます。
この画面でサポートするアプリケーションの向きやロゴなどを設定します。
[ストア]メニューから[アプリケーションマニフェストを編集]を選択しても開くことができます。

次に機能タブを見てみると、どの機能を使うかを設定するようです。この点はAndroidアプリに似ていますね。

マニフェストデザイナーに関してはMSDNの以下のサイトに詳しく書いてあります。
デベロッパーセンター - マニフェストデザイナー

簡単なサンプルの作成

一通り見てみたので、簡単なサンプルを作ってみます。ボタンを押すとHello Worldと表示されるだけのサンプルです。

実装する

まずはMainPage.xamlを開いてデザイン上にツールボックスからButtonとTextBlockをドラッグ&ドロップします。

TextBlockはデフォルトでTextBlockという文字列が表示されているのでプロパティウインドウから削除します。文字をもう少し大きくしてみましょう。あとでTextBlockに文字列を設定するので呼び出せるよう名前をつけておきます。ここではMyTextとしました。

ソースコードは以下のようになっていました。

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Button" HorizontalAlignment="Left" Margin="50,50,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.25,-0.171" Click="Button_Click_1"/>
        <TextBlock Name="MyText" HorizontalAlignment="Left" Margin="150,50,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="38" Width="200" FontSize="36"/>
    </Grid>

画面上のボタンをダブルクリックすると、MainPage.xaml.csに切り替わります。
イベントハンドラは自動で作成されるので処理の部分のみ追記しました。

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            MyText.Text = "Hello World.";
        }

シミュレータ上で実行

それでは実装できたので実行してみましょう。Windows8ではWindowsストアアプリを起動できますが、
PCの場合は縦横を変更したりはできないのでそのような場合はシミュレータを使います。
アプリを起動するアイコンの左にローカルコンピューターと表示されていますが、ここをシミュレーターに変更して起動します。