UWPの基本

2017年8月6日：UWP

UWPはUniversal Windows Platform の頭文字をとった名称です。日本語で、「一般的なWindows基盤」という意味で、スマートフォン、タブレット、パソコンなど様々なWindowsデバイスで動くプログラムを作る言語のことです。UWPはWindows10以降で動作することが可能で、Windowsストアで販売可能です。

UWPでは、画面のデザインをXAMLで、動作をC++やC#で記述するようになっています。XAMLとはExtensible Application Markedup Languageの略称です。Markedup Languageとあることから予測がつくと思いますが、ウェブのHTMLのようにタグで記述する形式となっています。HTMLはホームページを作成する言語で、デザイン性に優れています。このデザイン性を活かして、XAMLをデザイン専用としたわけです。一方、動作に関しては、C++やC#といった従来型のプログラミング言語を使用します。C++やC#はライブラリが豊富で、動作も早いのが特長です。このこともあり、動作にはC++やC#を採用したのでしょう。UWPのプログラミングをするには、Windows10とVisual Studio Communityが必要です。Visual Studio Communityに関しては、 Microsoftのページからダウンロードとインストールをしましょう。

以上からわかるように、UWPをマスターするには、XAMLによるデザインと、C++やC#による動作のプログラミングの習得が必要です。C++やC#プログラミングに関しては、そちらを学習していただければ問題ありません。UWPでは、XAMLのデザインとC++やC#からボタンなどのパーツを制御する方法を理解する必要があります。ここでは、UWP特有の事柄について解説していきます。

UWPのプロジェクトを作成

はじめにUWPについて見ていきましょう。そのためにプロジェクトを作ります。まず、Visual Studio 2015を起動し、プロジェクトを作成します。

プロジェクト名を適当につけます。ここではSampleAppとします。

ターゲットプラットフォームが聞かれるので、どのデバイスでプログラムを使用するかを選択しましょう。ここでは、Windows10を使用するので、Windows10をターゲットとしています。

UWPの構造

UWPの構造を見ていきます。右のほうにソリューションエクスプローラーがあります。ない場合は、表示からソリューションエクスプローラーを選択し、画面に表示させます。

見てわかるようにSampleAppは、参照、外部依存関係、Assetsなど様々なファイルから構成されいます。プログラミングで主に使用するファイルは「MainPage.xaml」とその下にある「MainPage.cpp」と「MainPage.h」です。前者で画面をデザインし、後者２つで動作を記述していきます。

XAMLを見てみる

まず、MainPage.xamlをダブルクリックしてください。すると、以下のように画面が立ち上がります。

上半分に実際の画面で、下のコードが画面のコードです。ビジュアル表示か、コード表示の違いですね。HTMLでウェブをデザインしたことのある人は、しっくりくると思います。コードは以下のようになっています。

<Page
    x:Class="SampleApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SampleApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>

一見、複雑ですが、シンプルにすると

<Page>
   <Grid></Grid>
</Page>

となります。XAMLではHTMLと同様に、タグでできており、<X>と</X>で囲む構造になっています。Xにはタグの名称となります。ここでは、Pageというタグの内部にGridタグがあることがわかります。Pageは画面全体のことだと思ってください。Gridは、画面の分割を行う要素となります。

タグ<X>の中に、x:Class、xmlns、Backgroundなど様々な記述があります。これらの記述はタグの詳細情報を表しています。例えば、BackgroundはGridの画面背景の色を指定しています。

cppとhを見てみる

続いて、MainPage.xaml.hをみてみましょう。すると以下のように記述されています。

namespace SampleApp
{
	public ref class MainPage sealed
	{
	public:
		MainPage();

	};
}

MainPageというクラスがあり、MainPage()というコンストラクタと呼ばれる初期に実行される命令があることがわかります。MainPageというメソッドは、MainPage.xaml.cppに記載されています。

MainPage::MainPage()
{
	InitializeComponent();
}

InitializeComponent()という命令で、部品を配置していることがわかります。つまり、起動すると、InitializeComponent()で画面が初期化されるというわけですね。

ボタンを配置する

さらに理解を深めるため、ボタンを設置し、ボタンを押したら表示がOFFからONへ変わるプログラムを作っています。まず、ツールボックスからButtonをドラッグアンドドロップで画面に設置します。もちろん、XAMLを直接いじってもいいのですが、この方が楽なので。

以下のように配置しました。いまButtonが選択されています。上と左にそれぞれ31と24とクリップのようなものがあります。これは、上と左にそれぞれ31と24で固定することを意味します。もしも、クリップを押すと、固定することを消すことができます。これをうまく使うと、画面に依存して部品のサイズをかえることが可能になります。

では、XAMLを見てみましょう。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="10,35,0,0" VerticalAlignment="Top"/>
</Grid>

Gridの中に新しくButtonが追加されています。Buttonには以下のプロパティ(ボタンのパラメタ）があります。

x:Name：ボタンの名前。cppで動作を書く際に使用する。ここではbuttonとなっている。
Content：ボタンのテキスト
HorizontalAlignment：水平方向のアライメント。leftなので左揃いになる。
Margin：隙間をいくらあけるか、ここでは左に10、上に35開けるようにしている。
VerticalAlignment：垂直方向のアライメント。Topなので上揃い

とりあえずButtonのテキストを変更します。ContentをOFFヘ変更します。するとButtonの表記が変わるはずです。

次に動作を記述します。そのために、ボタンをダブルクリックします。すると自動的にMainPage.cppにメソッドが追加されます。

void SampleApp::MainPage::button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{

}

このメソッドにTextBlockのテキストを変える命令をかきます。

void SampleApp::MainPage::button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
	button->Content = button->Content->ToString() == "OFF"? "ON":"OFF";
}

if文を使ってもいいのですが完結にかくため、三項演算子「A?B:C」を使いました。Aが正しいならB、そうでないならCという意味です。今回はボタンの文章がOFFならON、そうでないならOFFとするという意味です。これで実行すると、ボタンをクリックするとONとOFFが切り替わります。

著者：安井真人(やすい　まさと)
@yasui_masatoさんをフォロー