UWP-002 はじめてのUWPアプリ
MVAのC#講座の中でC#を使ってデスクトップ（WPF)アプリとASP.NETでのWebアプリケーションでC#を使ったHello World アプリを同じプロセスで作っりおなじ結果が表示されることをお見せした。
そしてこのUWPにおいても同じ知識でおなじアプリを作る事ができますので、UWPでの作る方をご紹介します。
プロジェクトの作成
まず始める前に、Visual Studio 2015 がインストールされていることを確認してください。（そしてオプションでUWPアプリのSDKも入れてあることを確認してください）次にWindows 10 のエミュレーターがインストールされていることもチェックしておいてください。
準備ができたらまずは新しいプロジェクトを作るところから始めます。Visual Studio では様々な方法でプロジェクトを作ることができますが、ここではスタート画面の新しいプロジェクトの作成をクリックして作ります。すると新しいプロジェクトのダイアログが開きます。
左ペインは、インストール済み＞テンプレート＞Visual C#＞Windows＞ユニバーサル をえらびと、中央にテンプレートの一覧が表示されます。一番上のオプション”空のアプリケーション（ユニバーサル Windows）”テンプレートを選びます。
次に名前の欄をHelloWorldに変更して右下のOKボタンを押します。
するとしばらくしてVisual Studio が新しいプロジェクトを作成してくれます。
ビジュアル デザイナー
初めに（画面右上にある）ソリューションエクスプローラーから MainPage.xaml をダブルクリックします。すると2つのペインを持ったデザイン画面が開きます。画面上はビジュアルデザイナーで、下のほうがテキストタイプのコードベースデザイナーです。このデザイナーはコードを修正してスクリーン上にオブジェクトを作ることもできます。下の画面には上の画面に対応したXAMLのコードが表示されていて、これをXAMLエディターと呼んでいます。
上のペインには、アプリのビジュアルデザインが表示されています。そして、アプリをデザインもしくは1920x1080の解像度を持つ5インチの画面に表示したときにどのようにレンダリングされるのか実際に見ることができるようになっています。
このビジュアルデザイナーは今は300％のスケールで表示されています。これはデザインをするには非常に高い拡大率ですので、変更することができます。またこの表示は縦画面、横画面をボタンを押して切り替えて確認することができます。
ひとまず少し大きすぎるので、画面を確認するためにはスクロールしないと見えません。ですので画面左下の角のズームウィンドウを調整して33%に変更しましょう。これで視認性が良くなります。
はじめにデザイナー画面にいくつかのコントロールを追加します。左にあるToolBoxのタブをクリックしてパネルを表示します。右上のPinをクリックして固定しておけば自動的に隠れないようになります。そしてこのToolBoxは画面の左サイドにドッキングしています。もしこの場所を変えたいのならばToolBoxのバーをドラッグしてドッキングする場所を変更できます。
もう一つ気を付けてほしい点があります。一番を上を見るとコモンXAMLコントロールというカテゴリーがありますが、これを閉じると、もう一つXAMLコントロールという2つのカテゴリがあることが分かります。基本的に通常使うコントロールはコモンXAMLコントロールに含まれています。
さて、ではButtonコントロールをToolBoxからドラッグ&ドロップしてデザイン画面に配置します。
マウスでドロップしたところにコントロールが置かれます。
そうするとXAMLエディター側にも変更が加えられ、＜＞で囲まれたタグの形式でコントロールが追加されます。
このタグは、HTMLによく似ていますがHTMLではありません。しかしWebページのデザインを定義するという感覚ではHTMLに似ています。プログラミング言語であるこのXAMLを使ってアプリケーションの様々なコントロールとそのレイアウトを簡単に定義することができます。
ここでボタンコントロールを作成しましたが、そこにはコントロールの名前やコントロールの内容など様々なプロパティが定義されています。位置合わせとしては、水平位置、垂直位置、そしてMarginといったプロパティがあります。マージンであれば見るわかるように、上から10左から41ピクセルの位置で定義されてて、実際にそこに配置されています。右と下は0ですが気にする必要はありません。
しかし、ここにはXAMLエディターで追加したプロパティ要素も含まれています。もしボタン名をC#のプログラム的に変更したかったら、今度はこのClickMeButton を呼びます。
そして、Content エリアの内容をClick Me とタイプしなおすことによって変更することができます。もしここで変更するとビジュアルエディター側の表示もこれまでのものから Click Me に変更されます。
またこのボタンオブジェクトを修正するもう一つの方法があります。ボタンオブジェクトはビジュアルデザイナーにもありますし、XAMLエディターにもあります。そしてまた画面右下にあるプロパティウィンドウ、例えばTextプロパティやContent プロパティなどのように、ここでもプロパティを見つけて変更をすることができます。変更してEnterキーを押せば変更が完了です。
このプロパティウィンドウで変更すれば、デザイン画面も変更されるだけでなく、XAMLエディタ側でももちろん変更されます。Content プロパティを ”Click This” に変更します。ということで、プロパティを変更するには、ビジュアル、ソースコード、そしてプロパティの3つの変更方法があり、どこから変更してもちゃんと連動してすべてが変更される、ということを覚えておいてください。
では次にToolBox からビジュアルデザイナーに対してTextBlockコントロールをドラッグ&ドロップします。XAMLエディタにもXAMLのコードが現れます。名前をResultTextBlock に変更して、テキストプロパティを48ポイントに変更します。
TextBlock コントロールはラベル、つまり何かしらのテキストを表示するコントロールです。さてここで、XAMLを見るとフォントサイズが64になっていることに気が付きます。
設定した48ポイントとこの64は同じことを意味しています。プロパティウィンドウのフォントサイズの単位は、1/72インチが基準の固定サイズとしての単位のポイントです。しかしWIndows10は様々な解像度や画面サイズ上でアプリケーションが動くため、インチのような固定単位が重要ではなく、代わりに画面サイズと解像度をもとにきまる新しい単位が使われているのです。
コードの実装
次はボタンコントロールを選択して、プロパティウィンドウの中にある、イベントを表示する稲妻ボタンを選択します。
もっとも重要などがClickイベントです。プロパティウィンドウのClickの横のテキストボックスをダウブルクリックして、MainPage.xaml.cs ファイルを開きます。
ここで、ソリューションエクスプローラーをみてみると、MainPage.xaml と MainPage.xamlcs ファイルは関連付けられています。これらは1つのパズルの2つのパーツで、同じパズルの2つのピースなのです。これについてはまたあとで話しましょう。
ここで、ユーザーがClickMeButtonをクリックしたら、ResultTextBlockにHelloWorld と表示するコードを書きます。
デバッグ
次にアプリのテストをするので、画面上のツールバーのデバッグアイコン（緑の三角）ボタンを押します。
これは開発しているWindows のローカルコンピューター上で動く指定ですが、ドロップダウンリストを表示すると、そのほかのオプション、例えばシミュレーターやエミュレーター、また同様に部つる的なデバイスなどを選ぶことができます。
最初はローカルコンピューター上で実行します。アプリケーションが起動して、かなり大きい画面が起動するのでリサイズして小さくします。ボタンをクリックすると"Hello World"のテキストが期待通りに現れます。
デバッグモードで実行している間は、ブレークポイントを張って中の変数等の確認をすることもできます。また実機がなくても実際に配布しなくてもUWPアプリのテストを行うことができます。ローカルコンピューター上でのテストはもっとも簡単にテストを行う方法です。しかし次はエミュレーターでテストをしてみましょう。エミュレーターは仮想環境で物理デバイスを再現しています。物理でバイトはスマートフォンデバイスやタブレットで、もしくは今は再現する環境がないですがXBOX Oneもその一つです。
ではアプリケーションをもう一度動かしますが、今度は Emulator 10.0.1.0 WVGA を選択します。このオプションは物理的なスマートフォンを再現しています。見ているとアプリケーションがエミュレーター上にロードされたことが分かります。
エミュレーター上でデバッグを止めるには、エミュレーターの右上の × ボタンを押して閉じることができます。しかし、エミュレーターを動かしているときはこの癖をやめた方がいいでしょう。それはいくつかの理由がありますが、一番大きいのはエミュレーターが仮想マシン上で動作しており、罰ボタンを押すとリブートに時間がかかるためです。そして次にデバッグ中に電話の中に保存したすべての情報がシャットダウンした際に失われてしまうためです。ですので、もしデバッグをしている間はエミュレーターは閉じないようにしましょう。
デバッグを止める別の方法はVisual Studio のツールバーのデバッグ停止ボタン（赤い■）を押すことです。
デバッグを停止すると、次のデバッグに向けてエミュレーターは動き続けることができます。
このセッションではXAMLエディタとデザインビューとプロパティウィンドウの関係について説明しました。そしてイベントのハンドリングをするC#のコードビハインドのファイル上でビジュアルオブジェクトのアトリビュートを書き換えるデモを行いました。さいごにアプリケーションをデスクトップもしくはエミューレーターを使ってデバッグする方法を紹介してました。