[Windows ストア アプリ] タイルを実装する(前編)

こんにちは、うりるーです。

さて、前回は Visual Studio 2012 for Windows 8 を使って Hello, World を表示する Windows ストア アプリを作りました。

今回は Windows 8 を象徴する「スタート画面」に表示されるアプリのロゴ、「タイル」を実装していきます。Windows 8 / Windows RT ではスタート画面に表示されているタイルをタップ、またはクリックするとアプリが起動します。これはアイコンに代わるもので、実装次第ではアイコンとは比べ物にならないほど多くの情報を詰め込むことができます。

タイルにはいくつかの種類に分類することができます。

  • 正方形タイル と ワイドタイル
  • タイル と ライブタイル
  • (プライマリ)タイル とセカンダリ タイル

正方形タイル と ワイドタイル
ワイドタイルは正方形タイル を横に 2つ並べたサイズとほぼ同じ大きさです。
基本的には正方形タイルを使い、週に1回以上新しいコンテンツを受信しそれを通知するときはワイドタイル を使うことが推奨されています。
新しい情報を配信するときは後述のライブタイルの機能を使い、次々回説明するバッジ機能を使った通知で十分な場合はワイドタイルを使わずに正方形タイルを使うと良いとされています。正方形タイルとワイドタイルはそれぞれ別にプログラムを書くことになります。


参考: タイルとトーストの画像サイズ (Windows ストア アプリ) (Windows)

タイル と ライブタイル
標準のタイルは従来の Windows のアイコンのように開発者が用意した画像を読み込み、それを表示します。
たとえば、"カメラ"や"ビデオ"がこれにあたります。


また、ライブタイル というアプリを起動しなくてもスタート画面上でユーザーに情報を配信する機能もあります。ライブタイルには"ニュース"や"Bing検索"のように数秒おきに情報が入れ替わるアプリから"天気"のように同じ情報を表示し続けるアプリまであり、この機能が実装されているアプリは通常ライブタイルが有効な状態でインストールされます。


ただし、ユーザーがライブタイル機能を無効にすることもあり、それの対策のために普通のタイルの実装しなくてはなりません。また、ライブタイルでは情報を詰め込めすぎないように注意する必要もあります。

(プライマリ)タイル とセカンダリ タイル


Windows ストア アプリは通常 1アプリにつき 1タイルが割り当てられていますが、セカンダリ タイルはアプリ内の特定のコンテンツにスタート画面から直接アクセスできるようにするための機能で 1つのアプリにさらに多くのタイルを割り当てることができます。この割り当て作業はユーザーのみが行え、アプリ側が直接作成することができません。スクリーンショットは Internet Explorer からセカンダリ タイルを 2つ追加した状態のものです。なお、今後の記事でセカンダリ タイルについては扱う予定はありません。

参考: セカンダリ タイルの概要 (Windows ストア アプリ) (Windows)

簡単に説明したところで、Visual Studio を使って実際にアプリに組み込んでいきます。
まずは、ライブタイルではないタイルの 正方形タイル と ワイドタイル を設定していきます。
ライブタイルを実装する場合でも普通のタイルを設定する必要があります。

正方形タイルは Visual Studio でアプリを実行したときに自動的に生成してくれるほか、その他のライブタイルではないタイルの設定もとても簡単に行えます。

では Visual Studio を起動します。右上の ソリューション エクスプローラー 内にある「Package.appxmanifest」を開き、アプリケーションUI のタブのページを下にスクロールすると「ビジュアル資産」という項目があります。ライブタイルではないタイルはここから設定をします。


まず画像を用意します。私は次のような画像を用意しました。

Windows ストア アプリでは立体感のないシンプルなロゴが標準的です。
今回はタイルに加え、ロゴ、スプラッシュ スクリーンもついでに設定します。

使った画像はこれです。

Logo.png
WideLogo.png
SmallLogo.png
StoreLogo.png
SplashScreen.png

Windows ストアアプリは様々なスケーリング設定(DPI設定)でもきれいに見せるため、 4つのサイズの画像を用意することが推奨されています。55の倍数以外ピクセル数を使ったり、指定のサイズより大きすぎる画像や小さすぎる画像を指定するとぼやけることがあります。

背景色は画像と同じオレンジ色(#FF6A00)を設定します。
次に各画像を設定していくのですが、まずはデフォルトの画像(Logo.png、SmallLogo.png、SplashScreen.png、StoreLogo.png)をソリューション エクスプローラー内の Assets フォルダーから削除する必要があり、用意した画像の設定はそのあとに行います。


標準ではワイドロゴには画像が設定されていません。
このワイドロゴのところに画像を設定することで、アプリはワイドロゴも使えるようになり、インストールするとアプリの既定の設定がワイドロゴになります。


スタート画面に表示されるタイルの名前はタイルイメージとロゴの項目内にある「短い名前」「名前の表示」「前景テキスト」で設定することができます。短い名前に文字列を入力するとスタート画面や切り替え画面に表示されるアプリの名前を変更することができます。


設定して実行するとこのようになります。



小さいロゴはウィンドウの切り替えやアプリの検索で使われます。



ライブタイルを使わない場合は以上で終わりです。
長くなってしまったので、ライブタイルの実装方法については次回書きたいと思います。

0 件のコメント:

コメントを投稿