2012年7月1日日曜日

適したMetroスタイルアプリ テンプレートの選び方


Metroスタイルアプリ開発をするにあたり、VS2012RCでは「Blank App」「Grid App」「Split App」の3つのテンプレートがあります。3つあると、どれから開発し始めたらいいか迷ってしまいます。そこで、今回はどのテンプレートから開発に着手すると良いか判断し易くなるよう解説します。

Blank App

本ブログでの解説ページ:Metroスタイルアプリの基本構成

1つの画面のみで構成されており、最もシンプルなテンプレートとなっています。
ブランク画面
画面上に何も表示しない「ブランク画面」1つのみで構成されています。
標準提供されていて欲しいStyleや独自コントロールが無いのと、スナップ対応がされていない為、このテンプレートをベースに開発する事はあまりオススメ出来ません。

Grid App

本ブログでの解説ページ:なし(いつかするかも)

スナップに対応した3つの画面から構成されており、グループ管理されているコンテンツを[全コンテンツ]-[グループ毎]-[コンテンツ詳細]に分けられた画面で表示するテンプレートです。
グループ区切りに全コンテンツをタイルで一覧表示する画面 
グループ毎の全コンテンツをタイルで一覧表示する画面
コンテンツ毎の詳細を表示する画面
3種類の画面は、GridViewを使用して横長にタイルを表示している「グループ区切りに全コンテンツをタイルで一覧表示する画面」と「グループ毎の全コンテンツをタイルで一覧表示する画面」、FlipViewによるグループ内のコンテンツを画面を左右で切り替える「グループ毎の全コンテンツをタイルで一覧表示する画面」で構成されています。
各画面のスナップ
3つの画面にスナップ対応されています。

GridViewとFlipView、そしてスナップはMetroスタイルアプリを代表する表示方法が実装されている事が特徴的なテンプレートです。さらに各画面を実装するにあたり使用されているStyleや独自コントロールが揃っており、新たに画面構築するにあたって使いまわせる内容となっています。

Split App

本ブログでの解説ページ:なし(いつかするかも)

スナップに対応した2種類の画面から構成されており、グループ管理されているコンテンツを[全グループ]-[グループ毎+コンテンツ詳細]に分けられた画面で表示するテンプレートです。
全グループをタイルで一覧表示する画面
グループ毎の全コンテンツを一覧表示し、選択コンテンツの詳細を表示する画面 

2種類の画面は、GridViewを使用して横長にタイルを表示している「全グループをタイルで一覧表示する画面」、ListViewとScrollViewerで一覧と詳細表示を1つの画面で2分割表示している「グループ毎の全コンテンツを一覧表示し、選択コンテンツの詳細を表示するg画面」で構成されています。
スナップは2分割表示している「グループ毎の全コンテンツを一覧表示し、選択コンテンツの詳細を表示する画面」を2つのスナップに分けた計3つのスナップビューで構成されています。

各画面のスナップ
スナップのデフォルト遷移が少し変わっていて、[全グループ]スナップビューからグループ選択すると[コンテンツ詳細]スナップビューがいきなり表示されます。なぜか[グループ毎]スナップビューが飛ばされます。

他プラットフォームのタブレットでよく見かける画面左に一覧、右に詳細を表示する画面レイアウトが実装されている事が特徴的なテンプレートです。なお、[Grid App]テンプレートと同様にStyleや独自コントロールが揃っています。

まとめ

アプリ開発するなら[Blank App]テンプレートから始めるのではなく、[Grid App]か[Split App]テンプレートから始めた方が楽できそうな事が分かって頂けたかと思います。ただし、2つのテンプレートはMVVMで実装されている事と開発者にとって余分な機能まで実装されている場合があります。余計な機能を削る方が速いか、[Blank App]テンプレートから必要な機能を自力で実装する方が速いかは実装内容によりますので都度判断してみてください。