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]テンプレートから必要な機能を自力で実装する方が速いかは実装内容によりますので都度判断してみてください。

2012年6月25日月曜日

Metroスタイルアプリの基本構成

 
Metroスタイルアプリのプロジェクト構成について解説を行います。なお、本解説は[Blank App]テンプレートで作成したプロジェクトをベースにした解説となっております。

プロジェクトは主に以下の構成となっています。

  • Properties
  • 参照設定
  • Assets
  • Common
  • App.xaml
  • [プロジェクト名]_TempraryKey.pfx
  • MainPage.xaml
  • Package.appxmanifest
では、各構成がどのような内容かを解説していきます。

Properties

アプリケーションのアセンブリ名/名前空間名やビルドやデバッグ設定を行います。
[Properties]フォルダをクリックする事で以下画像のような画面上で項目設定を行う事も出来ますが、[AssemblyInfo.cs]からコード入力で設定変更する事も可能です。

参照設定

プロジェクトに対してDLLの追加参照や、NuGet管理が行えます。

Assets

テンプレートプロジェクトで自動作成される画像を格納するフォルダです。本フォルダ内で画像を管理する必要はありません。
テンプレートプロジェクトではライブタイル画像やスプラッシュスクリーン画面の画像等が格納されています。

Common








テンプレートプロジェクトで自動作成される共通的に利用するクラスやスタイル等を格納するフォルダです。本フォルダ内で画像を管理する必要はありません。
テンプレートプロジェクトでは共通的に利用するスタイルが定義されている[StandardStyles.xaml]が格納されています。

App.xaml








アプリが起動して最初に実行されるクラスであり、xaml/csファイルがセットで定義されています。他クラスからStaticに参照出来る為、共通の定数や変数、クラスやメソッド等を定義にも使われます。
[App.xaml]にはアプリ全体で読み込むスタイル定義や定数などが定義出来ます。
[App.xaml.cs]にはアプリが起動/一時終了/再開/終了する際に呼び出されるメソッドや、アプリ起動後に表示する画面の起動を行なっています。起動画面の確認はOnLaunchedメソッド内で定義されているNavigateメソッドの引数を確認する事で分かります。

[プロジェクト名]_TempraryKey.pfx





アプリの証明書になります。

MainPage.xaml








[Blank App]テンプレートプロジェクトでの起動する画面です。xaml/ccsファイルがセットで定義されています。

Package.appxmanifest





アプリに関する設定が4つのタブでそれぞれ定義されています。

  • アプリケーションUI

    アプリの表示名やサポート回転の設定、ライブタイル小/大やスプラッシュスクリーンの画像パス設定、共通的に使う背景色やテキスト文字色設定等が行えます。

  • 機能

    アプリ上で利用する機能宣言を行います。ここで宣言している機能のみがアプリ上でAPIを通じて利用可能となります。

  • 宣言

    検索コントラクトや共有コントラクト、バックグラウンドタスク利用などと言った他要因によってアプリ起動を行う為の利用宣言を行います。ここで宣言する事で他要因から本アプリが起動されるようになります。

  • パッケージ化

    アプリケーションのパッケージ情報や利用署名、バージョン情報が設定出来ます。


まとめ

これまでの内容が[Blank App]テンプレートの内容となります。この内容は他のテンプレートでも共通的に使われる構成なので是非覚えておいてください。次は複雑な[Grid App]テンプレートの解説を行いたいと思います。


2012年6月10日日曜日

ロック画面の壁紙取得/設定

Windows8からロック画面が表示されるようになりました。
今回はそのロック画面の壁紙を取得/設定する方法を解説します。

概要

 ロック画面の壁紙取得/設定は、Windows.System.UserProfile名前空間のLockScreenクラスを使う事で可能です。壁紙サイズはMetroスタイルアプリの解像度である1366×768pxとなります。

壁紙の取得方法

ロック画面
アプリ画面
ロック画面に設定中の壁紙画像を取得する事が出来ます。
using Windows.System.UserProfile;

private void BtnGetLockScreen_Click(object sender, RoutedEventArgs e) {
    using (IRandomAccessStream stream = LockScreen.GetImageStream()) {
        BitmapImage bmpImg = new BitmapImage();
        bmpImg.SetSource(stream);
        img.Source = bmpImg;    // Imageコントロールに設定
    }
}
LockScreenクラスのGetImageStreamメソッドの返値としてロック画面の壁紙画像を取得する事が出来ます。

壁紙の設定方法

アプリ画面
ロック画面
ロック画面の壁紙に画像を設定する事が出来ます。
using Windows.ApplicationModel;
using Windows.Storage;
using Windows.System.UserProfile;

async private void BtnSetLockScreen_Click(object sender, RoutedEventArgs e) {
    StorageFile file = await Package.Current.InstalledLocation.GetFileAsync(@"Assets\Toka.png");  // プロジェクト内の画像ファイルを読み込む
    await LockScreen.SetImageFileAsync(file);  // ロック画面の壁紙設定
}

LockScreenクラスのSetImageFileAsyncメソッド、もしくはSetImageStreamAsyncメソッドを使用する事でロック画面の壁紙設定を行う事が可能です。


小ネタ

以降、いくつか小ネタを...

透過壁紙

ロック画面
少し面白い事に透過PNGを設定すると、背景が透けてパスワード入力画面が見えるようになります。ユーザが混乱するため透過PNGはあまり設定させない方が良いのかもしれませんね。

デスクトップの壁紙取得/設定

WinRT APIには無いです。他の方法は調査していません。

2012年6月3日日曜日

Windows8RPのOSとアプリの結び付き

OSとMetroスタイルアプリの結び付きをザックリ整理します。なお、Windows 8 Release PreviewのMetroスタイルアプリ視点での概要説明となりますので注意してください。

2つの画面

Windows8には主な操作画面が2種類存在します。

  • デスクトップ画面

    Windows7までの従来とほぼ同じ見た目と使い勝手の画面となります。ただし、従来まであった[スタート]ボタンが廃止されています。
    Metroスタイルアプリの配置や起動は行えません([スタート]画面を経由する事になります)。
    [スタート]画面へ移動するには[ウィンドウズ]キーを押下します。

  • スタート画面

    Winodows8から追加された画面です。メトロ画面とも呼ばれています。
    画面上にはライブタイルと呼ばれる1x1か2x1サイズのアプリが好きな情報を表示可能なタイルが敷き詰められており、タイルをタップする事で1つのアプリを画面全域に表示する画面となっています。デスクトップアプリもショートカットとしてタイル配置可能です。
    [デスクトップ]画面へ移動するには[デスクトップ]タイルをタップします。

チャーム

どこからでも表示する事が可能なメニューであるチャーム バーが表示されます。
チャームには[検索]、[共有]、[スタート]、[デバイス]、[設定]の4種類の操作が行えます。[スタート]は[ウィンドウズ]キーと同じ動作を行います。それ以外はOS/フォアグラウンド アプリに対するイベントを実施する事が可能で、コントラクトと呼ばれています。

チャームを表示する為には、タッチ操作なら画面右端を左に向かってスワイプ移動させる事で表示され、マウス操作なら画面右上か右下へマウスポインタを移動させると表示されます。
ショートカットキーは[ウィンドウズ]と[C]キーです。

  • 検索


    検索可能なアプリを対象に検索を行うことが可能です。この機能は串刺し検索ではなく、検索を行いたいアプリを選択して検索を実施します。
    なお、デフォルトで選択されているアプリはアクティブ アプリとなります。
    ショートカットキーは[ウィンドウズ]+[Q]キーです。

  • 共有


    共有可能なアプリを対象にアクティブ アプリで共有可能なコンテンツを、共有可能なアプリに受け渡す事が可能です。受け渡すデータ形式が受け取れるアプリが一覧表示され、ユーザ操作によって選ばれたアプリに対してデータが受け渡される事になります。ショートカットキーは[ウィンドウズ]+[H]キーです。
  • デバイス


    アクティブ アプリと連携可能な外部デバイスと連携を行います。連携可能な外部デバイスが一覧表示され、ユーザ操作によって選ばれた外部デバイスに対して連携を行います。ショートカットキーは[ウィンドウズ]+[K]キーです。

  • 設定


    アクティブ アプリとOS設定情報が表示されます。アクティブ アプリの設定項目の場合は画面上に設定情報が表示され、OS設定情報の場合は別アプリが起動して設定画面が表示されます。


最近使用したアプリのリスト

[スタート]画面上から起動したアプリが履歴管理されているリストです。
サムネイルを画面中央へ移動させるとアプリ起動、画面下部へ移動させるとアプリを終了させる事が可能です。

アプリ起動リストを表示する為には、タッチ操作なら画面左端を右に向かってスワイプ移動させる事で表示され、マウス操作なら画面左上か左下へマウスポインタを移動させて下か上へ移動すると表示されます。
ショートカットキーは[ウィンドウズ]と[TAB]キーです。


アプリバー


[スタート]画面から起動可能なアプリはアクティブ アプリに関するイベントを実施する為のバーであるアプリバーが表示可能です。バー上の右にはアプリ全体に関するイベント、左には表示中の画面に関するイベントを実施するボタンを配置するルールとなっています。

アプリバーを表示する為には、タッチ操作なら画面下端を上に向かってスワイプ移動させるか、画面上端を下に向かってスワイプ移動させる事で表示されます。マウス操作なら右クリックで表示されます。

ロック画面

ロック画面の左下に任意アプリ情報を表示する事が可能です。表示すべき内容がある場合のみ、アプリ情報が表示されます。

スナップ

Metroスタイルアプリは画面の左か右端に横幅320pxの領域で表示する事が可能です(解像度が横幅1366px以上の場合)。この幅で表示される領域の事をスナップと言い、それ以外の領域の事をフィルと呼びます。スナップに対応したアプリだと、小さな領域の中で最適化されて表示されます。
  1. tweetTROアプリはスナップに対応されていました。画面の上端をタップして、左か右端へドラッグ&ドロップします。

  2. これでスナップ領域へtweetTROが配置されました。フルで表示していた時と違い、320pxに合わせたレイアウトで表示されています。
  3. あとはいつも通りにアプリを起動するとフィル領域にアプリが表示されます。

OSとMetroスタイルアプリの結び付きである連携部分はこんな感じだと思います。どこで連携取っているかが分かれば、ライフサイクルやアプリの表現方法が見えてくる...ハズ。

2012年6月2日土曜日

Windows 8 Release Previewをインストール

先日Windows8CPとVS11βのインストール手順を書きましたが、6/1に次バージョンが出た為、インストールする上での差分を記載しておきます。

Windows 8 Release Preview のインストール

以下のサイトからDLして、手順に沿って行います。
http://windows.microsoft.com/ja-JP/windows-8/release-preview
  1. DLしてきた実行ファイルを起動
  2. まずは互換性のチェックが行われる
  3. 互換性のチェックが終わったら、チェック結果を報告してくれるので、内容に問題なければ[次へ]を押下
  4. Windows 8 Release Previewをインストールする際に聞かれるプロダクトキーが発行される為、メモして[次へ]を押下(プロダクトキーはインストール後にも表示される)
  5. Windows 8 Release Previewのダウンロードが開始される。およそ30分くらい掛かる
  6. インストールとインストールファイルのチェックが自動的に完了すると、Windows 8 Release Previewをどのようにインストールするかの確認が行われる。ディスクを作成して別パーティションにインストールしたい場合、[メディアを作ってインストール]を選択してディスクに焼く
  7. この後のインストール手順は以前のエントリーを参照ください。

Visual Studio 2012 Release Candidate のインストール

以下のサイトからDLして、手順は以前のエントリーを参照ください。 

もしWebインストーラーでインストール時にエラーが発生する場合は、以下のリンク先にあるISOイメージファイルからインストールしてみてください。