UWP-003 UWPアプリ開発に関するトピックのまとめ
ここでは前の回の開発に関してより細かい点について細くいきます。これにより、UWPアプリ開発におけるUI開発とそれをVisul Studio 上でやることに対しての知識を身に着けることができるでしょう。
UIデザインのパターン
アプリのUIデザインに関してはいくつかの方法がありました。初めにコントロールをツールボックスからデザインビューに対してドラッグアンドドロップして、位置や大きさを調整する方法。プロパティウィンドウはコントロールが持つ様々なアトリビュートを変更すしてデザインビューで見ることができます。しかしHTMLのようにビジュアルデザイナーは必要とするすべてのプロパティの表現を完全に持っているわけではありません。
そのため、実際のXAMLの文法についてはまだやっていません。XAMLの文法については次のレッスンで紹介します。
Page クラスを構成する2つのファイル
されあに、すべてのページのファイルは、C#でイベントをハンドリングするためのコードビハインドファイルが関連付けらえています。 Windows 10 においては、MainPage.xaml と MainPage.xaml.cs といったファイルの中で、ネームスペースを見ると MainPage と呼ばれるクラスが分離クラスとして定義されていることが分かります。
開発におけるこの分離クラスというのは、複数のファイルに収められた複数に分離されて定義された1つのクラスを示します。しかしファイル自体は同じクラス名を持ち、同じネームスペースを持ち、分離というキーワードを使って1つのクラスの定義を複数のファイルを使って実装することができます。
MainPage はPageと呼ばれるオブジェクトをもとに作れらています。クラスの部分をマウスでホバーすると、Pageくらすじたいは Windows.UI.Xaml.Ctontrols.Page となっていることが出見えるはずです。もしMainPage.xaml をひらいて一番初めの行のあたりを見ると、ページオブジェクトをベースにして、クラス名が HellowWorld で、ネームスペースとして、MainPage クラスがあることが分かります。
MainPage.xaml と MainPage.xaml.cs は1つのクラスを定義する2つの異なるファイルです。それぞれのファイルが一方がビジュアルを表現し、一方がふるまいを定義しています。
デバッグモードとエミュレーター
次にデバッグモードについてです。Windows 10 ではすべてのデバッグ手法が使えます。ブレークポイントを使ってコードのステップ実行を擦すことも可能ですし、アプリケーションを動かしながら途中のプロパティの値の状態を確認することができます。
また、デバッグモードで様々な異なるエミュレーターが用意されていたことに不思議に思われたかもしれません。エミュレーターは異なる画面サイズや解像度を再現しているだけでなく、異なるメモリーサイズや関連したハードウェアの違いも再現しています。そのためスクリーンの解像度や画面サイズと同様に、少ないメモリの環境だけでなくメモリが多い環境でのてすとも行うことができます。さらにエミュレーターについては右上についているボタンで様々な動作をさせることができます。それぞれのボタンで画面の回転、マルチタッチ入力、ズームといった操作を実現できます。
ツールバーのボタンの一番下には >> のボタンがあり、さらにここからより様々な機能にアクセスすることができます。これをタップしてウィンドウを開くと追加機能を見ることができます。例えば、加速度センサーの機能や、シェイクモーションの記録、ジェスチャーなどによってアプリケーションがどのように反応するのか、をテストすることができます。
同様にGPSのテストも行うことができます。ロケーションサービスをテストするときに異なる場所でのふるまいをシミュレートすることができます。
Visual Studio の MainPage.xaml に戻りますが、我々はToolboxから様々なXAMLコントロールを作ることができます。それぞれのコントロールはUIとその振る舞いを持ち、開発者がプロパティウィンドウや特定のキーイベントに対する対応をコードで書いたり、そのプロパティを変更することでカスタマイズされます。
前のデモではプロパティのイベントタブをハンドリングしてお見せしました。
コントロールと画面設計について
ツールボックスは数十のコントロールを持っており、それぞれはシンプルな入力やボタンやテキストボックスといったコントロールです。そこにはTextBlock といった画面用のコントロールがあります。またDropDownlistBox や日付と時間を選ぶDateコントロールといったような選択入力型のコントロールもあります。グリッドはデータを画面に表示するために利用されるもので、グリッドのようなアプリケーション内でコントロールの位置決めをするためのレイアウトコントロールがあります。
グリッドはMainPage.xaml で使われていることがわかるでしょう。我々はもっとこれらのレイアウトコントロールを理解するために時間をとる必要があります。これはUWPアプリのアダプティブデザインのためにも非常に重要です。レイアウトコントロールを活用することで1つのソースコードで異なるデバイスフォームファクターに対応させることができるようになります。
UWPアプリは、すべてのWindowsデバイス上で動作するリッチなビジュアルコントロールを提供しています。これらはマウスでの入力だけでなく時に指での操作の場合もあります。しかし数千ネームスペースのクラス内の数千の関数を通じて同じAPIが提供されています。
例えば、もしインターネットから何かしらのリソースを取得する場合、もしｋはファイルシステムにあるファイルを使って何かしたい場合、たとえすまーご論上であってもタブレット上であってもデスクトップでもXBOXであっても、同じAPIを使うことができます。そしてもし音楽やビデオを再生するなら、UWP APIにはそのためのメソッドがあり、そういったAPIを今後のレッスンの中で紹介していきます。
レイアウトやビジュアルコントロールは、画面サイズや動作しているデバイスによって変更が必要です。アダプティブトリガーを作ることで、画面サイズに応じてアプリケーションのスケーリングとレイアウトを調整することができます。このあたりも重要ですので今後のシリーズの中で紹介します。