どうも、まるさ＠maruuusa83です！
大会の副賞でWin8PC（タッチできないけどｗ）を手に入れ、折角なのでWin8アプリに挑戦することにしました。
というのも、アプリストア見てたらアプリまだ少ないようなので、こんなまるさでも売れるアプリを作れるのではとかいう浅はかな考えで御座いますｗｗ
そこで今回MSDNの
Win8App開発チュートリアルをやってみました。
というわけで開発で必要そうな大事なところをまとめていきます。
Win8に挑戦する人に中身を紹介しつつ、自分用のリファレンス。という感じで書いていきます。
※開発に必要なことだけ知りたい！という人向けです。じっくり練習するならチュートリアルをおすすめします。
目次
１、開発環境
・
開発環境について
・
XAMLについて
２、プロジェクトの作成
・
プロジェクトの作成
・
テンプレートの紹介
３、アプリのビルド・起動・終了
・
アプリの起動法
・
アプリの終了法
４、ページの追加
・
プロジェクトの追加の方法
・
ページ追加の時の注意
５、UI要素の追加
・
GridレイアウトへのUI要素の追加
○タイトルバーを作る
○タイトルをつける
○ボタンの追加
○実行する
６、ページの遷移
・
ボタンクリックによるページ遷移の方法
○章を始める前に
○ボタンにイベントハンドラーメソッドを登録する
○遷移のための手続きをイベントハンドラーに記述する
・
スタートページの変更の方法
７、ページレイアウトについて少し詳しく
・
レイアウトを構成するためのUI要素
・
実際に書いてみる
○Gridの設置
○Gridにパーツを追加していく
○Gridのさらなる整形
・
柔軟なレイアウトの構築
○ビューのシミュレートの方法
○スナップビューに対応させる
８、その他について
１、開発環境
今回の僕の開発環境はWindows8上で動いているMicrosoft Visual Studio Ultimate 2012で開発を行い、開発言語は
C#およびXAMLを使っています。
Windows8Appは以下のような多くの言語を簡単に連携させてプログラミングすることができるようです。基本的には処理を記述する言語とUIを記述する言語の組み合わせで書かれるようです。
・JavaScript / HTML
・C# or Visual Basic / XAML
・C++ / XAML
・C++ / DirectX
XAML
XAMLは宣言型言語の一種で、アプリ上で表示されるUI要素をXAMLマークアップで作成できます。
XAMLで別のコードを関連付けてイベントに応答することの設定だとかもここでします。
２、プロジェクトの作成
[ファイル＞新規作成＞プロジェクト] で図のような新しいプロジェクトのダイアログが立ち上がってきます。
左側のウィンドウで
[インストール済み＞テンプレート＞Visual C#＞Windows ストア]の順に展開し、
新しいアプリケーションを選択します。
そして赤で囲んだ「名前」のテキストボックスにプロジェクト名を入れて
[OK]を押してしまえば完了！
 |
| 新しいプロジェクト |
ここで幾つかテンプレートの紹介をします。
新しいアプリケーション
定義済みのコントロールもレイアウトもないテンプレートです。
最低限必要なコードが含まれてます。
グリッド アプリケーション
Topページ（図上）コンテンツをグリッドに配置して閲覧できるようになってるものです。
コンテンツをタップすると詳細画面（図下）が表示されます。グループ名をタップするとグループ詳細画面も表示できます。
 |
| Grid Template |
分割アプリケーション
Topページ（図上）にグループが並び、グループをタップするとコンテンツが縦に並ぶページ（図下）を表示するテンプレートです。
RSSリーダに便利かもしれないです。
 |
| Split Template |
３、アプリのビルド・起動・終了
アプリの起動
プロジェクトは作成するだけで実行可能なアプリケーションになっています。
起動するには、F5キーを押します。F5キーを押すことでデバッグモードでのビルド・展開・起動が行われます。最初にスプラッシュ画面が表示された後、アプリが表示されます。
ビルドだけ行いたいという場合は、
[ビルド＞ソリューションのビルド]でビルドを行えます。
アプリの終了
アプリを閉じるためのボタンやコマンドはないです。
閉じるためのジェスチャーを行うか、Alt+F4 キーで閉じることができます。
デバッグモードで起動した場合、デバッグモードを終了しなければなりません。
VisualStudioに戻って、[デバッグ＞デバッグの停止]でアプリを閉じます。Shift+F5でもよいです。
４、ページの追加
次は、アプリにページを追加する方法について書いていきます。
[プロジェクト＞新しい項目の追加]で図のようなダイアログが表示されます。
 |
| 新しい項目の追加 |
好きなレイアウトを選択しましょう。右側に出る説明でどんなテンプレートなのか大体想像つくと思いますｗ
最低限のものが備えられている「基本ページ」が基本です。
選択したら、下にある「名前」の項目で名前を付けて追加をクリック。
そのプロジェクトに初めて追加するレイアウトの場合、
「この追加テンプレートは、プロジェクトに含まれていないファイルに・・・ファイルを自動的に追加しますか？」
というダイアログが表示されます。必要なファイルを自動でインクルードしてくれるので、
「はい」を選択しておきましょう。
その後、デザイナーが表示されますが、エラーが表示されます。これは新しくインクルードしたファイルがビルドされていないためで、一度ビルドすればエラーは表示されなくなります。
※僕の環境だとVS起動中にPCがスリープからの復帰を経験しているとなぜかVSがハングアップします。
一度VSを立ち上げなおすときちんと読み込むことができます。データ破壊が怖いので、僕はインクルード直前に一度保存してVSを再起動してから行っています。
５、UI要素の追加
ページを追加することができたので、今度はページにUI要素を追加していこうと思います。
だんだん開発っぽくなってきたｗｗ
XAMLに直接書き込むのもいいですが、
Visual Studioには強力なXAMLのビジュアルデザイナーが搭載されてるので、今回はこれを使ってUIを作っていきます。
この章では、試しにタイトルをつけることと、ボタンの追加を行いました。
GridレイアウトへのUI要素の追加
新しいアプリケーションを立ち上げて、MainPage.xamlにちょっとしたUIを作ってみようと思います。
MainPage.xamlは基本ページなので目に見えるUI要素は最初は何も含まれていません。ただ、
全体にGridというUI要素が配置されています。
Gridは行と列で構成されるグリッド領域を作ることができます。これによってレイアウトを作って部品が配置しやすくなります。最もよく使うレイアウトだと思うのでこれを使ってみます。
・
タイトルバーをつくる
Gridの上と左にグリッドレールと呼ばれる点線が表示されてます。このグリッドレールの上にカーソルを移動するとオレンジの線が表示され、クリックすると行もしくは列を追加することができます。
とりあえずタイトルバーを作ってみましょう。
左側のグリッドレールの上にカーソルを移動して適当な場所に1行追加します。
 |
| GridPanel |
するとGridの左端に行の幅を示す数字が出るので、そのあたりにカーソルを置きます。
ポップアップが出たら下矢印をクリックして「ピクセル」を選択してください。
もう一度ポップアップを出して、
左にある数字を140に書き換えると、幅が140ピクセルの行が作られます。これは、
XAML上でのHeightプロパティが編集されています。
・タイトルをつける
今度は、画面左端にある「ツールボックス」ウィンドウを開いて、
[すべてのXAMLコントロール]の中のTextBlockを先ほど作ったタイトルバーの適当な所にドラッグ＆ドロップしてください。
そして、追加したTextBlockを選択した状態でプロパティウィンドウのレイアウトの中の
HorizontalAlignment, VerticalAlignment, Marginのプロパティをリセットします。
リセットは、プロパティのボックスの右にある■をクリックするとメニューが出てくるので、リセットをクリックしてください。
リセットしたら、
Marginの←の値を50に変更してEnterキーを押しましょう。
これで配置は完了です。
次に、スタイルを設定します。
プロパティの
[寄せ集め]の中にあるStyleの右にある□をクリックして
[ローカルリソース＞PageHeaderTitleStyle]を選択してください。これでレイアウトの設定は完了です。
最後にテキストの内容を設定しましょう。
プロパティの
[共通]の中にあるTextプロパティを編集します。■をクリックしてメニューから
「新しいリソースに変換」を選択してください。
ダイアログが立ち上がったら、
リソースの定義先を[このドキュメント＞TextBlock<名前なし>]に変更すると、自分自身をリソースとして持ちます。
もう一度Textプロパティのメニューを開くと、
[リソースの編集]が選択可能になっているので選択し、値を「Hello, Windows App!」に変更しましょう。
 |
| タイトルの設定 |
これでやっと、やっとタイトルが付きましたｗ（汗）
・ボタンの追加
さて、今度はボタンの追加です。TextBlockを追加したように、
Buttonを下の広いグリッドの適当な場所にドラック＆ドロップしましょー！
プロパティの
[レイアウト]で配置していきます。
HorizontalAlignmentをLeft, VerticalAlignmentをTopに指定して、
Marginの←と↑を100に設定しましょう。
これで追加は完了です！！（適当）
・実行してみる
F5キーを押して試しにアプリを実行してみてください。きっとタイトルと押しても何も起きないボタンが表示されるだけのしょぼいアプリができていると思います！はい、喜んで！
 |
| Hello, Windows App! |
このままだと面白くないので、次の項目でボタンにアクションをつけてみます。
６、ページの遷移
さて、ページとUI部品が追加できたので（しろめ）、ページ遷移のやり方を覚えましょー。
今回はボタンにアクションをつける方法も一緒に書いていきます。
ボタンクリックによるページ遷移の方法
ボタンクリックによってページ遷移をするには、まずボタンを設置しなければならないです。
今回は、前の項目で書いたHello, Windows App!のアプリを使って説明していきます。
また、この章を始める前に
アプリの中に、
遷移先となる適当な新しいページを追加しておいてください。（方法については「４、ページの追加」の中で説明しています。）
今回は「基本ページ」をBasicPage.xamlとして追加してあります。
・ボタンにイベントハンドラーメソッドを登録する
ボタンをクリックしたときにアクションをしてもらうには、そのボタンにイベントハンドラーになるメソッドを登録しなければなりません。
このメソッドは登録したタイミングで自動的にそのxamlのなかのcsファイルに追加されます。
とりあえずやってみましょう。
まず、イベントを付けたいボタンを選択し、プロパティの下図の稲妻マークの[イベント]ボタンをクリックします。
 |
| 稲妻マークのイベントボタン |
すると、イベントごとにハンドラーを設定するための画面が開くので、その中からClickの項目を探し出します。
見つけたら、「Button_Click」と入力してEnterキーを押します。
すると、コードエディタにジャンプし、自動でButton_Clickメソッドが作成されていると思います。
ボタンがクリックされるとこのメソッドが実行されます。
・遷移のための手続きをイベントハンドラーに記述する
先ほど自動生成されたハンドラーに、以下のようなコードを追加します。
MainPage.xaml.cs
if (this.Frame != null)
{
this.Frame.Navigate(typeof(BasicPage));
}
赤字ボールドの部分を遷移先に指定したいページのリソース名にすることで設定できます。
新しい項目の追加から追加を行っているページであれば、追加の時に指定した
xamlの名前でOKのはずです。VSが補完してくれると思います。
ナビゲーションのサポートが組み込まれた
LayoutAwarePageクラスに基づいたページであれば、戻るボタンを追加せずとも自動で戻るボタンが追加されます。超便利です。
「空白のページ」でなければ基本的に追加されていると思います。追加するページは「基本ページ」を使いましょうｗｗ
スタートページの変更の方法
ページ遷移をしようと言いつつスタートページの変更の仕方も説明しておきますｗ ニーズ多い気がしたので解説します。
スタートページというのはアプリを起動して一番最初に表示するページです。
VisualStudioの「ソリューション エクスプローラー」という枠（デフォルトの設定だと画面右上）の「App.xaml」を展開した中にある「App.xaml.cs」をダブルクリックしましょう。コードエディターにソースが表示されます。
 |
| ソリューション エクスプローラー |
OnLaunchedメソッドの中に、以下のような部分があるので探してください。
App.xaml.cs
if (rootFrame.Content == null)
{
// ナビゲーション スタックが復元されていない場合、最初のページに移動します。
// このとき、必要な情報をナビゲーション パラメーターとして渡して、新しいページを
// 構成します
if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
}
赤字とボールドで強調した
「MainPage」の部分をスタートページにしたいページのリソース名にすることで設定できます。
新しい項目の追加から追加を行っているページであれば、追加の時に指定した
xamlの名前でOKのはずです。VSが補完してくれると思います。
これで画面遷移周りはどうにかなる（はず）！！
７、ページレイアウトについて少し詳しく
「５、UI要素の追加」の中で少し触れましたが、レイアウトの自由度を上げるために
組み方をもう少し掘り下げてみましょう。
また、
ページレイアウトの様々な方向とビューへの対応についても触れます。
この章では、幾つかUI要素を紹介した後、実際にページを一つ組んでみます。
その後、様々なビューに対応できるように設定していきます。
・レイアウトを構成するためのUI要素
レイアウトを構成するためのUI要素について、幾つか触れていこうと思います。
Grid
5章で使いました。行と列で構成されるグリッド領域の定義が行えます。
基本Gridをベースにレイアウト構築すれば失敗はないような気がしますｗ
使い方は5章を見てみてください。
StackPanel
一列に子オブジェクトを整列させることができます。水平に並べるか垂直に並べるか指定できます。
これらの要素を使ってゴリゴリとレイアウトを書いてみます。
・実際に書いてみる
6章で遷移先にした基本ページに組んでみます。Microsoftのチュートリアルと同じ画面を作ることにします。
⇒
本家チュートリアル
やるんだったら本家がいいと思うけど、とにかく早く作りたいって人は↓をやってみるといいと思います。内容は大体一緒です。
Gridの設置
１、Gridを画面中央に放り込む
２、Gridのプロパティの
[レイアウト]を開く
３、Width, Height, HorizontalAlignment, VerticalAlignment, Marginをリセット
４、Marginの←と↓を120に設定
５、左側のグリッドレールを使って行を２つ追加（3行にする）
６、上の行、真ん中の行をピクセルに設定し、幅を５０、７０に変更する。（下図の通り）（方法は5章参照）
 |
| Gridの設定 |
ちなみに1*というのは「残りのスペースを使いますよ」というのを意味してます。
これでGridの設定はおしまい！
Gridにパーツを追加していく
・GetPhotoボタンの追加
１、ツールボックスから一番上の行にButtonをドラッグ＆ドロップ
２、Buttonが選択された状態で、プロパティパネルでHorizontalAlignment、VerticalAlignment、Marginのそれぞれをリセット
３、
[共通]の中のContentプロパティを"Get photo"に変更
・写真タイトルの追加
４、ツールボックスから2番目の行にTextBlockをドラック＆ドロップ
５、追加したTextBlockが選択された状態で、プロパティパネルでHorizontalAlignment、VerticalAlignment、Marginのそれぞれをリセット
６、
[寄せ集め]の中にあるStyleのプロパティを探す。
７、Styleプロパティのメニューの
[ローカルリソース＞PageSubheaderTextStyle]を選択
・下半分の設計のための準備
８、ツールボックスから下の行にStackPanelをドラッグ＆ドロップ
９、StackPanelが選択された状態で、プロパティパネルでWidth、Height、HorizontalAlignment、VerticalAlignment、Marginのそれぞれをリセット
１０、プロパティパネルでStackPanelのOrientationプロパティをHorizontalへ変更
１１、プロパティパネルの上部にある
[名前]の項目をimagePanelに変更しEnter
・Imageパネルを載せるためのBorderの追加
１２、StackPanelを選択した状態で、ツールボックスからStackPanelにBorderをドラッグ＆ドロップ
１３、プロパティパネルの
[ブラシ]でBackgrowndとBorderBrushのプロパティを単色ブラシを指定して#FF808080に変更
・追加したBorderにImageを載せる
１４、ツールボックスから、BorderにImageをドラック＆ドロップ
１５、追加したImageの
[名前]の項目をdisplayImageに変更
１６、
［共通］のSourceプロパティのドロップダウンリストから、Logo.pngを選択
１７、左端にある
[ドキュメント アウトライン]でImageを含むBorderを選択し、プロパティからWidthをリセット
・Imageの情報を載せるためのテキストを追加する
１８、先ほど追加したImageの右側の空いている部分に、TextBlockを6つドラック＆ドロップ
１９、左から１、３、５番目のTextプロパティをそれぞれ"File name:", "Path:", "Date created:"に変更（メニューを開いてリソースの編集をクリック）
ここで、パーツを追加し終わった状態での画面を見てみます。
 |
| ここまでの状態 |
Gridのさらなる整形
・項目をStackPanelによってグループ化
１、ドキュメントアウトラインで、imagePanelの中のTextBlockをすべて選択
２、右クリックから
[グループ化＞StackPanel]を選択
・グループ化したので、縦にレイアウトを変更
３、先ほど作ったStackPanelのプロパティで
[レイアウト＞Orientation]をVerticalに変更
４、Marginの←を20に変更
・テキストのレイアウトを変更していく
５、１，３，５番目のTextBlockを選択する
６、プロパティのStyleのメニューを開き、
[ローカルリソース＞CaptionTextStyle]を選択
７、２，４，６番目のTextBlockを選択する
８、プロパティのStyleのメニューを開き、
[ローカルリソース＞ItemTextStyle]を選択
９、Marginの←の値を10に設定し、↓の値を30に設定
これでレイアウトができました！
 |
| 完成したレイアウト |
という手順でレイアウトを作っていきます（適当）
・柔軟なレイアウトの構築
Win8アプリはタブレット向けということで、様々な方向や様々なタイプのビューに対応しなければなりません。開発者は大変です。
VisualStudioデザイナーでは、様々なタイプのビューのシミュレートをサポートしています。これで柔軟なレイアウトを構築していきます。
ビューのシミュレートの方法
左端の
［デバイス］パネルを開いて右図のようなビューボタンをクリック
これによって、スナップした状態のビューが再現できます。
先ほど作ったレイアウトに実行した結果がこれ
 |
| スナップビューのシミュレーション |
そのままちょん切れただけで悲惨ですねえ・・・。どうしたらよいのでしょうか。
スナップビューに対応させる
１、スナップビュー表示にした状態のまま、
［デバイス］パネルの中の
［状態記録の有効化］チェックボックスをONにする
２、contentGridコントロールを選ぶ
３、プロパティの［レイアウト］のMarginの←と↓を20に設定
４、imagePanelを選択
５、プロパティの［レイアウト］のOrientationプロパティをVerticalに設定
これで大丈夫！
実際に実行してスナップビューにしてみます。
 |
| 修正済みスナップ |
ハッ！完璧ネ！
と、このような手順で縦表示だとかにどんどん対応させていきます。
これでレイアウトに関するメモ書きは終わりです！
8．その他について
Microsoftのチュートリアルでは他にも、以下のような話題が挙げられています。
- 様々なストレージを使っての状態の保存
- 次回のアプリ起動時にアプリの状態の復元
- ファイルアクセスとファイルピッカーについて
が、しかし、とりあえずお試しでアプリ作るにはまだ必要のない機能な気がするので（書くのが嫌なだけｗ）
次回の記事ということにして今回はここまでということにします。
次回は残りの記事の解説、そのあとには紹介したモノを使って実際にアプリを作ってみようかと考えています。
というわけで
今日はこの辺で ノ
まるさ
一月
XHagoに参加しました。たぶん生まれて初めての発表会（？）です。
ここから今年度に入ります。年度初めであれこれバタバタしています。
各大会のアイデア出しを行ったのもこの月でした。
ITfrogsの面接があり、研修が始まった月です。だいぶ面接緊張した気がしますが、始まってしまえばなんとか頑張れることを知りましたｗ
パソコン甲子園モバイル部門の締切がありました。結局締切前のデスマをします。すごく怒られました。
初週～２週目は試験・閉寮前のアレコレ。
多くの企業の様子を見ることができたので本当に良い経験でした。
シリコンバレーから無事帰沖したのも束の間、沖縄大学院大学（OIST）への訪問や生まれて初めての新聞への寄稿の執筆、帰国後報告会のためのプレゼンづくりなどfrogsでの活動のほか、
寄稿がすごく慣れない感じで、ものすごく時間がかかった上に全然うまくまとまりませんでした。
そして提出直後に高専プロコンの本戦がありました。
今度はパソコン甲子園の本戦があります。
開発には深くかかわってなく、プレゼンもしてないけれど、きちんとプロデュースすることはできたかな、と思っています。これもいい経験になったと思うので、もっと場数を踏んでいいモノ作っていきたいです。
