Blog


UniversalWindowsApp開発入門05-Button,TextBlock,TextBox,Imageコントロール-

動画

Buttonコントロール

Buttonコントロールはユーザーによってクリックできるボタンを作成するUIコントロールです。

Buttonコントロールのテキストを変更するにはContentプロパティを変更します。

クリックしたことを検知するにはClickイベントにイベントハンドラとなるメソッドを設定します。

1

TextBlockコントロール

TextBlockコントロールはテキストを表示するUIコントロールです。

TextBlockコントロールの文字を変更するにはTextプロパティを変更します。

2

TextBoxコントール

TextBoxコントロールは編集可能なテキストを表示するUIコントロールです。

表示されているテキストを取得、変更するにはTextプロパティを参照します。

3

Imageコントロール

Imageコントロールは画像を表示するUIコントロールです。

表示している画像を変更するにはSourceプロパティにBitmapImage型で指定します。

4




UniversalWindowsApp開発入門04-データ保存と復元-

動画

UWPにおけるデータ保存

Universal Windows Appなどのアプリケーションでは、アプリケーションの持っている情報などは基本的にメモリの上に置かれるため、アプリが終了するとデータが消えてしまいます。

そのため、アプリが終了する前にデータをストレージに保存し、アプリが開始するときに適切に復元をしなければいけません。

Universal Windows Appではそのようなデータの保存、復元を行うAPIが存在しています。

UWPのアプリの状態

アプリが終了するときにデータの保存、再開するときにデータの復元を行わなければならいのですが、UWPではそのようなアプリの終了、再開のタイミングをイベントとして通知してくれる機能があります。

UWPでは基本的に以下の3つの状態を持ちます。

28

そして、ユーザーによって閉じるボタンなどが押され、アプリが終了するとき、Suspendingイベントが発生し、アプリがユーザーによって起動(再開)されたとき、Resumingイベントが発生します。

つまり、OnSuspendingイベントでデータを保存し、OnResumingイベントでデータを復元すればアプリは終了してもデータを保持し続けることができます。

 

LocalSetting

UWPにおいて、簡易的なデータを保存するときはApplicationDataContainerに保存することができます。

ApplicationDataContainerはディクショナリ構造になっており、キーを指定してデータを保存することができます。

データを復元するときは再度ApplicationDataContainerにアクセスし、キーが存在するか確認したあと、キーを指定してデータを復元します。

 

LocalFolder

大きなデータを保存する場合はStorageFolderを取得してデータをファイルとして書き込みます。

UWPで簡易的なデータの書き込みを行う場合、FileIOというクラスを使うのが便利です。

データ復元時にはファイルが存在するかを確認し、存在する場合は読み込み、データを復元します。

LocalFolderとRoamingFolder

今回使用したLocalFolderはデータをローカルストレージに保存します。

よって、別のデバイスで実行した場合はデータを継続して使うことができません。

そのような別デバイスでもデータを継続して使用するためにUWPではRoamingFolderというものが存在し、RoamingFolderに保存したデータはOneDriveによって別デバイス間でも同期されます。

defferal

Suspendingイベントにおいて、以下のような記述がありますがsuspendingイベントではこの記述の中でデータを保存しなければいけません。

なぜなら、Suspendingイベントにおいて非同期メソッドを用いた場合、非同期メソッドが完了する前にアプリが一時停止に入ってしまって、データが保存できないからです。

なのでsuspendingでは必ず、e.SuspendingOperation.GetDefferal()とdeferral.Complete()の間にデータ保存処理を記述する必要があります。

 




【cocos-2dx+Windows10ゲーム開発】環境構築

VisualStudio2015の場合、cocos2dxのインストーラも付属しているため、非常に簡易にcocos2dxをインストールできます。

VisualStudio2015 -> ファイル -> 新規作成 -> プロジェクト から

インストール済みテンプレートの中のゲームカテゴリの「cocosをインストール」を選択してOKを押します。

1

するとインストーラを起動してくれるのでインストールします。

2

インストールしたらcocosというコマンドが実行できるはずです。

cocosコマンドが確認できたら以下のコマンドを実行します。

コマンドが無事実行できたらproj.win10フォルダのTestGame.slnファイルを開きます。14

あとはTestGameプロジェクトをスタートアッププロジェクトに設定してデバッグすればゲームを実行できます。

15




UniversalWindowsApp開発入門03-デバッグ技術-

動画

VisualStudioによるUWPのデバッグ

VisualStudioには優秀なデバッガがついており、プログラムのバグ検出を簡単に行うことができるようになっています。

ここでは以下の項目を解説していきます。

  • デバッグ出力
  • ブレークポイントによるステップ実行

デバッグ出力

UWPのようにGUIアプリケーションでは、デバッグ情報(変数の値など)を直接見たい場合、コンソールなどの簡易出力機能がないため別の出力を使います。

UWPではDebugクラスの静的メソッドを使用することで簡易的にデバッグ情報を出力することができます。

出力先はVisualStudioの「出力」ウインドウです。

Debug.WriteLineメソッドはConsole.WriteLineと同じようなフォーマットで変数を出力することができます。

ただしDebug.WriteLineメソッドはデバッグビルドでしか実行できず、リリースビルドでは最適化されて実行されないので注意が必要です。

ブレークポイントの設定

VisualStudioではブレークポイントというものを設定することでプログラムをその行で止めることができます。

ブレークポイントを設定するにはVisualStudioのエディタ上の左の灰色の列を選択することで設定できます。

実際にデバッグしてみるとブレークポイントで止まると自動変数というウインドウで変数の値を確認できます。

設定したブレークポイントをもう一度クリックするとブレークポイントを解除できます。

ステップ実行

ブレークポイントでプログラムを止めると、止めた行から1行ずつプログラムを実行していくステップ実行をすることができます。

やり方はブレークポイントで実行を止めた後、F10キーを押します。

F10キーによって実行されるものはステップアウトと呼ばれ、メソッドの内部には入りません。

F11キーを押すとステップ実行はメソッド内まで入っていける、ステップインを実行できます。

メソッド内から出るためにはShift+F11を押してステップアウトします。

次のブレークポイントに行くにはF5キーか続行ボタンを押します。

 




In-App MenuとLiveVisualTreeとLivePropertyExplorerでレイアウトのデバッグをする

※この記事はVisualStudio 2015 Update2を当てていることが前提です

In-App Menu

UWPをデバッグするとこのようにIn-App Menuが表示されます。

In-App Menuには

  • ライブビジュアルツリーへ移動
  • 要素の選択を有効化
  • レイアウトガイド表示

の3つのボタンがあります。

1

一番左のライブビジュアルツリーへ移動を選択するとVisualStudioへ移動し、現在のアプリのレイアウト構造が詳細に表示されます。

2

真ん中の要素選択の有効化ボタンをクリックすると、アプリ内のXAML要素を選択できるようになります。

選択された要素はライブビジュアルツリーでリアルタイムに確認できます。

こちらはトグルボタンで、有効化している間はbuttonなどの要素のクリックイベントは発火しません。

3

一番左のレイアウトガイドを表示するはライブビジュアルツリーで選択されている要素のMarginなどのレイアウトガイドを表示できます。

真ん中の要素選択の有効化ボタンと組み合わせると実行中のアプリ内の要素を選択しつつ、レイアウトガイドを表示できます。

4

In-App Menuは二重線のボタンを押すことで最小化できます。

5

ライブビジュアルツリーウインドウで一番左のツールチップをクリックすると完全に消すこともできます。

6

Live Property Explorer

デバッグ中に、VisualStudioのライブプロパティエクスプローラーを表示すると、ライブビジュアルツリーで選択中の要素に対してリアルタイムにプロパティの変更を適用できます。

例えば下記の画像だとButton要素のContent要素プロパティをButton2に帰るとデバッグ中のアプリのContent要素もButton2にかわります。7

しかしライブプロパティエディターで適用した変更はデバッグを終了すると元にもどってしまうので注意が必要です。