Windows 8.1対応のストアアプリを作成する

CodeZine / 2014年6月2日 14時0分

Hubコントロール

 前回は、これまでWindows 8対応のストアアプリを作ってきた人向けにWindows 8.1に移行する方法について紹介しました。今回は新しくWindows 8.1向けのストアアプリを作成する方法について紹介します。

 Visual Studio 2013 Update 2がRTM(製品出荷状態)に達しました。新しくUniversal Windowsアプリというプロジェクトが作成可能になりました。Universal Windowsアプリでは、WindowsストアアプリとWindows Phoneのアプリを同一プロジェクトで作成できるようになりましたが、Windowsストアアプリには大きな変更は無く、本記事の知識は、そのまま通用します。

 Universal Windowsアプリについても、近々紹介できればと思います。

■Windows 8.1用のストアアプリを作成する環境

 前回のおさらいになりますが、Windows 8.1向けのストアアプリを作成するには、Windows 8.1がインストールされたPCと、Visual Studio 2013が必要です。

 対応するストアアプリのバージョンとVisual Studioの関係は以下のとおりです。

Visual Studio 2012・・・Windows 8に対応したストアプリの作成、開発が可能 Visual Studio 2013・・・Windows 8に対応したストアプリは新規に作成できないが、すでに作成されたプロジェクトを開いて編集することは可能。Windows 8.1対応のストアアプリは新規作成から編集まで可能 ■Visual Studio 2013

 Visual Studio 2013には複数のエディションが存在します。

 無償のExpressエディションはストアアプリの開発、デスクトップアプリの開発など目的別にインストールするソフトウェアが異なります。

 ストアアプリを開発する場合は「Visual Studio Express 2013 for Windows」をインストールします。

 有償のエディションには「Professional 2013」「Premium 2013」「Ultimate 2013」があります。それぞれ利用できる機能が異なりますが、すべてでWindows 8.1対応のWindowsストアアプリの開発が可能です。

 また、90日の無償評価版を利用することで、有償のエディションの機能を試して評価することができます。Expressエディションまたは、無償評価版のダウンロードは以下のページから行えます。

Visual Studio ダウンロードの概要■開発開始時に選択できるプロジェクト

 Visual Studio 2013を起動して、開発を開始する際、ストアアプリ開発では4つのプロジェクトテンプレートが選択できます。「新しいアプリケーション」「グリッドアプリケーション」「ハブアプリ」「分割アプリケーション」の4つです。

Windows 8.1対応のストアアプリ用のテンプレート


 『Windowsストアアプリの概要と、開発の第一歩』で紹介しましたが、Windows 8時代のストアアプリでは選択できるプロジェクトテンプレートは3つでした。

 8.1から、そこに「ハブアプリ」が追加されました。

 今回はこれらのプロジェクトテンプレートを眺めながら、Windows 8.1対応のストアアプリ開発の第一歩目を踏み出すための情報を紹介していきます。

●新しいアプリケーション

 一番シンプルなプロジェクトです。その分、補助的なコードもなく、0から書いていきたい人向けと言えるでしょう。

 全体を眺めるのも一番簡単なプロジェクトなので、まずは「新しいアプリケーション」を作成してみましょう。「新しいアプリケーション」のファイル構成は以下です。

「新しいアプリケーション」のファイル構成


●ファイル構成

 主なファイル(フォルダ)を紹介します。

●Assetsフォルダ

 Assetsフォルダには、アプリケーションで利用する画像が配置されています。今後、画像や音声などの素材を追加していく場合はこちらに追加すると良いでしょう。

●App.xaml&App.xaml.cs

 プロジェクトの起点となるコードです。

●MainPage.xaml&MainPage.xaml.cs

 ページを表すクラスです。新しいアプリケーションではページが一つしかなく、このファイルがそのページを表します。

 画面はXAMLと呼ばれるXML形式の書式で記述しますが、デザインビューでWYSIWYGに、画面に表示される見た目を確認しながら編集することも可能です。

●Package.appxmanifest

 アプリケーションの機能や設定を行うマニフェストファイルです。ストアアプリでは特定の機能を利用する場合、このファイルに宣言を追加する必要があるなど、重要なファイルです。

●フレームレート表示

 新しいアプリケーションテンプレートに限らず、プロジェクトは作成した直後からデバッグ実行できます。デバッグ実行はF5キーで行えます。

 画面にパーツとなるコントロールを何も配置していないにもかかわらず、デバッグ結果には以下の画像のように画面左右上部に数字が表示されています。

「新しいアプリケーション」を変更なしでデバッグする


 これはフレームレートカウンターと言って、その時点のストアアプリの描画性能が表示されています。

 フレームレートカウンターの表示は、App.xaml.csの以下のコードで制御されています。

フレームレートカウンターの表示
#if DEBUG if (System.Diagnostics.Debugger.IsAttached) { this.DebugSettings.EnableFrameRateCounter = true; } #endif
 デバッグ時にデバッガーが接続されていれば、DebugSettingsクラスのEnableFrameRateCounterをtrueに設定しています。

 フレームレートカウンターの値は、左から以下のような意味を持ちます。

App fps:UIスレッドのフレームレート App CPU:UIスレッドのCPU使用率 Sys fps:システム全体のフレームレート。 Sys CPU:システム全体のCPU使用率  EnableFrameRateCounterプロパティについての詳細は、以下のドキュメントを参照ください。

DebugSettings.EnableFrameRateCounter Property●まとめ

 デバッグ実行時も「新しいアプリケーション」の初期状態は、画面に何も配置されていないシンプルな状態ということが確認できました。この状態だと、この後の開発でどのような処理をつけていくか迷うことも多いと思います。

 ストアアプリの構成や作法を確認するために、これからその他のプロジェクトテンプレートを眺めてみることにしましょう。



CodeZine

トピックスRSS

ランキング