マナティ

Windows 10 アプリ開発入門 ― Universal Windows Platformではじめよう

Universal Windows Platform 開発に入門しよう―UWP第1回

Universal Windows PlatformのアプリはVisual Studioを使って、直感的かつ簡単な手順で作成することができます。

54192_ext_02_0.jpg

はじめに

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#の基礎的な知識を必要とします。


1 Universal Windows Platform を詳しく知ろう

UWPを語る上で最も大きな特徴といえば作成したアプリが動作するプラットフォームの多様さであるといえます。

以下の図を見ると、UWPで作成したアプリ(以下 UWP Apps)はWindows PC、Windows Phoneなどの携帯端末、ゲーム機であるXbox、 84インチの巨大なデバイスであるSurface Hub、さらにはRaspberry piなどのIoT Device上でも動作することが示されています。

oneplatform.png

Universal Windows Platform

msdn.microsoft.com

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

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

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


2 UWP Appsを作るために必要な環境

UWPなアプリを作るためには以下の環境が必要になります。

・Windows 10 PC
・Visual Studio 2015
・Windows 10 SDK

Visual StudioとはMicrosoftのIDEであり、2016年5月時点での最新バージョンは2015です。 また、Community Editionという無償版があり、無償で開発を開始できます。

visualstudio.png

Visual Studio 2015の画面

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

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


3 環境構築をしよう

では実際にUWPの開発環境を構築していきましょう。 先ほども述べた通り、UWPの開発にはWindows10のPCが必要なため、用意してください。 Windows 8.1以前のOSを使っている方は2016年7月29日まで無償でアップグレードが可能なので アップグレードをお勧めします。

Windows10のPCですが、そのままでは作成したアプリを実行することができません。 Windows10の開発者モードを有効にする必要があります。 開発者モードを有効にするには、[設定]->[更新とセキュリティ]->[開発者向け]とたどり、[開発者モード]を クリックします。

developermode.png

開発者モード

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

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

 

vsdownload.png

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

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

 

install.png

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

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


4 新しくプロジェクトを作ってみよう

Visual Studioではアプリを作成するとき、アプリのソースコードやライブラリファイルなどを集約させた [プロジェクト]を作ります。

Visual Studioを起動し、メニューバーから[ファイル]->[新規作成]->[プロジェクト]をクリックします。

newproject.png

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

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

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

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

 

newproject2.png

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


5 Hello, Worldのプログラムを書いてみよう

では実際にHello,Worldを表示するプログラムを作ってみましょう。 新しくプロジェクトを作ると、下図のようなレイアウトの画面になります。

xamleditor.png

Visual Studio のレイアウト

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

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

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

putui.png

UI要素を画面に配置

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

button.png

button1

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

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

 

property.png

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

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

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

codebehaind.png

コードビハインド

このような.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";
}
button1_Clickメソッド

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

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

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

まとめると、UWPは

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

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


6 作成したアプリを実行しよう

では実際に作成したアプリを実行してみましょう。 アプリを実行するには緑色の三角がある[ローカルコンピュータ]というボタンを押します。

run.png

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

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

hello.png

Hello,World








 

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

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

著者プロフィール

栂井良太(著者)
Microsoft MVP for Windows Development、Microsoft Student Partners
Windowsのデスクトップソフトを趣味で作成しているうちにWindowsに関連した技術に関心を持ち、Windows Phone 7、Windows 8などのアプリに関連した情報をブログ、オフラインコミュニティにて発信、現在はUniversal Windows App、Azureなどを普及すべく情報発信中。
Webサイト:http://garicchi.com