アプリを同じプロセスで作っりおなじ結果が表示されることをお見せした。このUWPにおいても同じ知識でおなじアプリを作る事ができますので、UWPでの作る方をご紹介します。インストールされていることを確認してください。エミュレーターがインストールされていることもチェックしておいてください。準備ができたらまずは新しいプロジェクトを作るところから始めます。様々な方法でプロジェクトを作ることができますが、ここではスタート画面の新しいプロジェクトの作成をクリックして作ります。すると新しいプロジェクトのダイアログが開きます。えらびと、中央にテンプレートの一覧が表示されます。Windows)”テンプレートを選びます。次に名前の欄をHelloWorldに変更して右下のOKボタンを押します。新しいプロジェクトを作成してくれます。ダブルクリックします。すると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エディターで追加したプロパティ要素も含まれています。タイプしなおすことによって変更することができます。このボタンオブジェクトを修正するもう一つの方法があります。ボタンオブジェクトはビジュアルデザイナーにもありますし、XAMLエディターにもあります。プロパティなどのように、ここでもプロパティを見つけて変更をすることができます。変更してEnterキーを押せば変更が完了です。このプロパティウィンドウで変更すれば、デザイン画面も変更されるだけでなく、XAMLエディタ側でももちろん変更されます。いうことで、プロパティを変更するには、ビジュアル、ソースコード、そしてプロパティの3つの変更方法があり、どこから変更してもちゃんと連動してすべてが変更される、ということを覚えておいてください。ビジュアルデザイナーに対してTextBlockコントロールをドラッグ&ドロップします。XAMLエディタにもXAMLのコードが現れます。変更して、テキストプロパティを48ポイントに変更します。コントロールはラベル、つまり何かしらのテキストを表示するコントロールです。ここで、XAMLを見るとフォントサイズが64になっていることに気が付きます。設定した48ポイントとこの64は同じことを意味しています。プロパティウィンドウのフォントサイズの単位は、1/72インチが基準の固定サイズとしての単位のポイントです。WIndows10は様々な解像度や画面サイズ上でアプリケーションが動くため、インチのような固定単位が重要ではなく、代わりに画面サイズと解像度をもとにきまる新しい単位が使われているのです。次はボタンコントロールを選択して、プロパティウィンドウの中にある、イベントを表示する稲妻ボタンを選択します。重要などがClickイベントです。ファイルは関連付けられています。これらは1つのパズルの2つのパーツで、同じパズルの2つのピースなのです。これについてはまたあとで話しましょう。表示するコードを書きます。デバッグ次にアプリのテストをするので、画面上のツールバーのデバッグアイコン(緑の三角)ボタンを押します。ローカルコンピューター上で動く指定ですが、ドロップダウンリストを表示すると、そのほかのオプション、例えばシミュレーターやエミュレーター、また同様に部つる的なデバイスなどを選ぶことができます。最初はローカルコンピューター上で実行します。アプリケーションが起動して、かなり大きい画面が起動するのでリサイズして小さくします。World"のテキストが期待通りに現れます。デバッグモードで実行している間は、ブレークポイントを張って中の変数等の確認をすることもできます。実機がなくても実際に配布しなくてもUWPアプリのテストを行うことができます。ローカルコンピューター上でのテストはもっとも簡単にテストを行う方法です。次はエミュレーターでテストをしてみましょう。エミュレーターは仮想環境で物理デバイスを再現しています。Oneもその一つです。このオプションは物理的なスマートフォンを再現しています。見ているとアプリケーションがエミュレーター上にロードされたことが分かります。ボタンを押して閉じることができます。エミュレーターを動かしているときはこの癖をやめた方がいいでしょう。それはいくつかの理由がありますが、一番大きいのはエミュレーターが仮想マシン上で動作しており、罰ボタンを押すとリブートに時間がかかるためです。次にデバッグ中に電話の中に保存したすべての情報がシャットダウンした際に失われてしまうためです。デバッグをしている間はエミュレーターは閉じないようにしましょう。ツールバーのデバッグ停止ボタン(赤い■)を押すことです。デバッグを停止すると、次のデバッグに向けてエミュレーターは動き続けることができます。このセッションではXAMLエディタとデザインビューとプロパティウィンドウの関係について説明しました。イベントのハンドリングをするC#のコードビハインドのファイル上でビジュアルオブジェクトのアトリビュートを書き換えるデモを行いました。さいごにアプリケーションをデスクトップもしくはエミューレーターを使ってデバッグする方法を紹介してました。