はじめに

2015年7月、MicrosoftによってリリースされたWindows OSの最新版であるWindows10と同時に Windowsの新しいアプリケーションプラットフォームであるUniversal Windows Platform(以下UWP)が登場しました。

UWPは近年のデバイスインターフェースであるタッチに最適化しただけでなく、今までのWindowsアプリケーションのイメージを一新させる リッチインターフェース、Windows Store、マルチデバイスでの動作など、今までのWindowsアプリケーションにはなかった様々な機能が備わっています。 また、開発用プログラミング言語においても1つの開発言語に縛られず、C#、Visual Basic、C++、さらにはJava Scriptからもアプリケーション開発が可能であり、 多くの開発者にとって受け入れられやすい環境でもあります。

本連載ではUWP開発を実際に行ってみたい入門者を対象に、環境構築からC#による実際のアプリケーション開発方法を解説することで 最終的には自身でWindowsアプリを作成し、Windows Storeに公開できるように解説を行っていきたいと思います。 また、本連載ではC#の基礎的な知識を必要とします。

Universal Windows Platform

msdn.microsoft.com

ここでいう作成したアプリというものは個々のプラットフォーム向けに作られたアプリではありません。 UWPは1つアプリを作成するとそのアプリは上図のすべてのプラットフォームで作り直すことなく動作することができます。

また、開発環境においても、MicrosoftのIDE(統合開発環境)であるVisual Studioを用いて統一的にアプリを作成でき、 作成したアプリはWindows Storeによって統一的に配信することができます。

このような1つの環境で開発、配信が可能であり、様々なデバイスにおいて動作するような統一的なプラットフォームが Universal Windows Platformなのです。

Visual Studio 2015の画面

また、無償版といってもVisual Studio 2013時代のProfessional(有償版)相当の機能を有し、 UWPの開発にはCommunity Editionで特に問題はありません。

Windows10 SDKに関してはVisual Studioのインストール時に同時にインストールすることができるため 特別に後でインストールする必要はありません。

開発者モード

これで自分で作成したアプリを実行することができるようになりました。

続いてVisual Studio 2015をダウンロードしてインストールします。 visualstudio.comにアクセスし、 [Community 2015 のダウンロード]と書いてあるボタンをクリックし、インストーラをダウンロードします。

visualstudio.comのCommunity Editionのダウンロード先

ダウンロードできたらダウンロードしたvs_community_JPN.exeファイルを起動します。 インストーラが起動したら[インストールの種類を選択してください]という項目で、必ず[カスタム]を選択してください。 [次へ]を押すとインストールできる機能が選択できるので、[ユニバーサルWindowsアプリ開発ツール]にチェックをいれます。 これをすることでVisual Studio 2015のインストールと同時にWindows10 SDKもインストールすることができます。

インストーラで選択する項目

あとはインストールが完了するのを待つだけでUWPの開発環境を整えることができます。

メニューバーから新規プロジェクト作成

新しいプロジェクトダイアログが表示されたら、左側のテンプレートから[ユニバーサル]を選択し、 中央のテンプレート一覧から[空のアプリ(ユニバーサルWindows)]を選択します。

Visual Studioでは1からアプリを書いていくのではなく、最初からある程度のテンプレートが存在しており、 テンプレートを利用することでアプリを素早く作成し始めることができます。 今回の場合、UWPの空のアプリというテンプレートを使ってアプリを作っていきます。

テンプレートを選択できたら[名前]項目にアプリの名前を入力し、[OK]をクリックします。

新しいプロジェクトダイアログ

Visual Studio のレイアウト

①はソリューションエクスプローラーと呼ばれ、プロジェクトに含まれるファイル一覧を表示しています。 ソリューションエクスプローラーの中のMainPage.xamlをダブルクリックすると②の画面が図のようになります。 ②はソリューションエクスプローラーで選択したファイルの中身を表示するエディター領域です。

UWPにおいて.xamlの拡張子のファイルはアプリの画面を定義するファイルとなります。ですのでVisual Studioでxamlファイルを開いた場合、上図のような画面デザイナーが表示されます。

ではxaml画面に実際に要素を置いていきましょう。 Visual Studioの左端にある[ツールボックス]ウインドウを開き、[すべてのXAMLコントロール]から[Button]を選択し、画面にドラッグ&ドロップします。

UI要素を画面に配置

buttonをドラッグ&ドロップすると、デザイナー画面にボタン要素が配置されます。 UWPのxaml画面デザイナーではこのようにマウスで直感的に画面を作成することができます。

button1

また、buttonを選択した状態で右下の[プロパティ]ウインドウを見るとボタン要素に対する様々なプロパティを見ることができます。 今回はプロパティウインドウで、以下の3つの操作を行ってください。

1. 名前を[button1]に変更、
2. 雷のようなマークをクリック
3. Clickの横にあるテキストボックスをダブルクリック

1は、C#のコードからボタン要素を参照するためにわかりやすい名前を記述します。2と3は、そのボタンに発生するイベントを受け取るためのイベント登録を行います。

UWPでは要素(例えばボタン要素)に発生するさまざまなイベント(Clickされたなど)を受け取り、 そのイベントが発生したときの処理を記述することができます。 このようなイベントに対する処理を書くようなプログラミング方法をイベントドリブンと言います。 今回はボタンがクリックされたときにHello,Worldと表示するためにClickイベントを受け取ります。

Clickイベントのテキストボックスをダブルクリックすると[MainPage.xaml.cs]というC#で記述されたソースコードへとエディタ領域が移ります。

コードビハインド

このような.xaml.csという拡張子がついているC#のソースコードはコードビハインドと呼ばれ、必ず同じ名前の.xamlファイルとセットで存在しています。 また、コードビハインドには主にUI要素に起こったイベントに対するプログラムコードを記述します。 今回の場合はbutton1ボタンにClickイベントが発生した時、button1_Clickメソッドが実行されます。なぜbutton1_Clickというメソッドが紐づけられているのかと疑問に思った方もいると思います。先ほどのxamlデザイナに戻り、button1のプロパティのイベント画面を再度見てみると、Clickイベントの横にあったテキストボックス(ダブルクリックした場所)を見てみると[button1_Click]というコードビハインドに記述されているメソッド名が記述されています。 つまり、Visual StudioでUI要素のプロパティウインドウからイベント名をダブルクリックすると、Visual Studioが自動的にコードビハインドにメソッドを生成、UI要素のイベントとメソッドの紐づけを行っています。

では続いてbutton1がクリックされたらボタンの文字列をHello,Worldにするコードを書いていきましょう。 先ほど自動生成されたbutton1_Clickメソッドをこのように変更します。

private void button1_Click(object sender, RoutedEventArgs e)
{
    button1.Content = "Hello,World";
}

メソッド内では何をしているかというと、ボタンのContentプロパティにstring型の"Hello,World"という文字列を代入しています。 ボタンのContentプロパティを変更すると、ボタンに表示されている文字列が変わります。

このように、UI要素に変更を加えるためには以下のようなプログラムを書くことで実現できます。

[UI要素の名前].[プロパティ] = [新しい値]
    

まとめると、UWPは

1. 画面にUI要素を配置する
2. UI要素のイベントを受け取るメソッドを生成する
3. メソッド内に処理 or UI要素に変更を加える処理を書く

という3つの段階を繰り返すことでアプリを作成することができます。

ローカルコンピュータボタン

実行すると1つのウインドウを持ったアプリが実行され、xamlデザイナーで配置した通り、ボタンのみが配置された画面が表示されます。 実際にボタンをクリックしてみると、ボタンに表示されている文字列がHello,Worldとなり、作成したプログラム通りの挙動を確認することができます。

Hello,World

いかがでしたでしょうか。Visual Studioによって、UWPのアプリはこのように非常に直感的かつ簡単な手順で作成することができます。 今回でボタンの配置とボタンをクリックしたときの挙動を記述することができるようになったので、これだけでもアプリを作成することができます。 しかしUWPにはさらに多くの、タッチに最適化されたユーザーインターフェースコントロールがあり、それらを組み合わせることで よりユーザーにとって使いやすいと感じてもらえるアプリを作成することができます。

次回はより多くのUI要素を紹介し、もっと複雑なUI構造を持ったアプリの作成方法を解説します。