連載
» 2014年01月10日 13時35分 UPDATE

連載:Windowsストア・アプリ開発入門:第9回 効果的に情報を提示する (1/7)

Windowsストアアプリの「タイル」や「トースト通知」などの情報提示手段について学び、「ライブタイル」と「セカンダリタイル」を実装してみよう。

[山本康彦(http://www.bluewatersoft.jp/),BluewaterSoft]
連載:Windowsストア・アプリ開発入門
業務アプリInsider/Insider.NET

powered by Insider.NET

「連載:Windowsストア・アプリ開発入門」のインデックス

連載目次

 ここまでの連載でアプリを作ってきて、その機能はずいぶん充実してきた。ここで、エンドユーザーへの訴求力を向上させることを考えてみよう。このアプリは情報閲覧ツールなので、エンドユーザーに対して効果的に情報を提示できるとよいだろう。そこで今回は、「タイル」や「トースト通知」などの情報提示手段について学び、「ライブタイル」と「セカンダリタイル」を実装してみよう。なお、本稿のサンプルコードは「Dev Center - Windows Store apps サンプル: Windowsストアアプリ開発入門:第9回」からダウンロードできる。

今回作成する「ライブタイル」と「セカンダリタイル」 今回作成する「ライブタイル」と「セカンダリタイル」
スタート画面のタイルを「ライブタイル」にして、最新の記事タイトルを表示する。また、エンドユーザーが「セカンダリタイル」を作成できるようする。この「セカンダリタイル」をタップすると、それぞれのフィードの記事一覧画面が直接開く。

事前準備

 Windows 8.1(以降、Win 8.1)用のWindowsストアアプリ(以降、Win 8.1アプリ)を開発するには、Win 8.1とVisual Studio 2013(以降、VS 2013)が必要だ。本稿では、Windows 8.1 Pro(製品版)とVisual Studio Express 2013 for Windows(製品版)*1を使用している*2。また、前回終了時点のソースコードを用意しておいてほしい(「Windows Store app samples:Windowsストア・アプリ開発入門:第8回」からダウンロード可)。

*1Visual Studio Express 2013 for Windows(製品版)はマイクロソフトのサイトから無償で入手できる。Expressエディションはターゲットプラットフォームごとに製品が分かれていて紛らわしいが、Windowsストアアプリの開発には「for Windows」を使う(「for Windows Desktop」はデスクトップで動作するアプリ用)。なお、Preview版のWin 8.1では動作しないので注意してほしい。

*2本稿のコードはPreview版でもビルド/実行できることを確かめている。実際の操作方法などの細部では異なる点があるのはご容赦願いたい。なお、Win 8.1のPreview版の使用期限は2014年1月の半ばまでだ。


さまざまな情報提示手段

 より多くのエンドユーザーを自分のアプリに引き付けるためには、アプリそのものの機能ももちろん重要であるが、アプリを使っていないときにも魅力を感じてもらえるようにするとよい。Win 8.1には、そのために利用できるさまざまな情報提供手段が用意されている。以下にそれらを簡単にまとめよう。

ライブタイル

 スタート画面に表示されるタイルを、動的に変化する「ライブタイル」(または「タイル通知」とも呼ばれる)にできる。

 ライブタイルのコンテンツはXMLのデータとして提供する。アプリではXMLデータのテンプレートを取得してきて必要なデータを埋め込んで利用する。その方法は本稿で後ほど詳しく説明する。

今回作成する「ライブタイル」
今回作成する「ライブタイル」 今回作成する「ライブタイル」
大タイルとワイドタイルをライブタイルにする。それぞれに、フィードごとの記事タイトルから新しいものを表示する。

 アプリから一度に登録できるライブタイルの数は、「ローカル通知」(後述)の場合は5個までである。その中からシステムによってランダムに選ばれたタイルがスタート画面に順次表示される。また、表示時刻を指定して登録する「スケジュールされた通知」(後述)の場合は、4096個までだ。クラウド経由の場合(後述する「通知の配信方法」を参照)も5個までだが、アプリが動いていなくても更新できる。

 ライブタイルについては次のドキュメントも参照してほしい。

*3この記事中で紹介した「NotificationsExtensionsライブラリ」は、Win 8.1アプリ用のものはまだNuGetパッケージに登録されていない。Win 8.1に対応したソースコードは、MSDNの「Windows 8.1 app samples」サイトで公開されている「App tiles and badges sample」に含まれている。


バッジ

 「バッジ」は、スタート画面のタイルの右下に表示される数字やグリフだ(次の画像)。数字(2桁まで)か用意されたグリフの中から1つだけ表示できる。メールの未読数や新着記事の数、あるいは中断中のアプリの状態の表示などに使うとよいだろう。

タイルに表示されるバッジの例 タイルに表示されるバッジの例

 アプリから登録できるバッジの数は1つだけだ。クラウド経由での更新も、ライブタイルと同様に可能だ。バッジについては次のドキュメントも参照してほしい。

セカンダリタイル

 「セカンダリタイル」は、既定のタイルに加えてスタート画面に配置できるタイルだ。これはどちらかというと情報提示というよりも、エンドユーザーに利便性を与えるものである。

 次の画像は、本稿冒頭に載せた画像からセカンダリタイルの部分を拡大したものだ。例えば、左上にある「お気に入り」と表示されているセカンダリタイルをタップすると、「お気に入り」の一覧画面が直接開く。

今回実装する機能で作成されたセカンダリタイルの例 今回実装する機能で作成されたセカンダリタイルの例
例えば、左上にある「お気に入り」と表示されているセカンダリタイルをタップすると、「お気に入り」の一覧画面が直接開く。残り2つのセカンダリタイルも同様で、タイルに表示されている一覧画面が直接開く。

 セカンダリタイルをスタート画面に出すにはエンドユーザーの操作が必須であり、その操作は「スタート画面にピン留めする」と呼ばれる。スタート画面から消すにもエンドユーザーの操作が必須であり、スタート画面で直接操作するか、アプリで提供される「スタート画面からピン留めを外す」操作を行う。その実装方法は、本稿で後ほど詳しく説明する。

 なお、セカンダリタイルもライブタイルにできる。セカンダリタイルについては次のドキュメントも参照してほしい。

       1|2|3|4|5|6|7 次のページへ

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。