Special Windows 10 issue 2015

Volume 30 Number 11

通知 - Windows 10 における適応型通知と対話型通知

Thomas Fennel | Windows 2015

開発者のツールボックスの中でも通知ほどユーザーとのつながりに影響を与えるものはあまりありません。通知は OS 内でのさまざまなエクスペリエンスに使われています。これは Windows モバイル、Windows デスクトップ、Xbox、HoloLens のいすれであろうと同じです。通知にはユーザーを引き付ける力があります。メッセージへの返信のようにタスクの完了を手助けすること、ニュース ヘッドラインのように情報を簡潔かつタイムリーに提供すること、さらには Cortana リマインダーのようにこれまで想定していなかったような機能を使ってユーザーに満足感をもたらすことなどなど、通知はユーザーに価値をもたらし、ユーザーとアプリとのつながりを強めます。

Windows における通知とは

通知には、ユーザとつながるという意味で幅広く考えると OS 全体の中でもさまざまなカテゴリがあります。ユーザーの立場から考えると、通知は多種多様な形態で表現されます。

Windows OS にとって最も象徴的な形式の通知は、タイルです。タイルは Windows デスクトップや Windows モバイルのスタート画面に表示され、フォーム ファクターやデバイスの種類に応じてさまざまな形で表示されます。タイルは、ユーザーにさまざまなメリットを提供します。

まず、プライマリ タイルを使用してアプリを簡単に起動できます。アプリの一覧でアプリをタッチ、長押し、または右クリックすることで、一覧から直接スタート画面にピン留めできるのがプライマリ タイルです。セカンダリ タイルを使用すれば、アプリ内部のコンテンツに直接アクセスできます。開発者がユーザーの同意を得たうえでアプリ内部からプログラムによってピン留めするのがセカンダリ タイルです。

おそらくもっと重要なのは、ライブ タイルです。タイル自体にアプリ内部のコンテンツを表示することで、ユーザーとのつながりを築くのがライブ タイルです。ライブ タイルは、ユーザーが実際にアプリを起動しなくても情報をユーザーに提供します。天気予報や好きなスポーツ チームのスコアを提供するのが、その代表的な例です。こうした情報を、スタート画面の 1 か所からすばやく取得できることで、ユーザーは満足感を得られます。

トーストも通知の 1 つで、モバイル デバイスの上部やデスクトップ画面の右下隅にポップアップします。トーストは割り込み型の通知で、ユーザーにアプリの起動を求めることでユーザーとのつながりを持とうとするものです。Windows 10 より前は、トースト通知をタップしてできることは、アプリを起動することだけでした。開発者は通知を作成する際に設定する一部の静的引数を使用してこれを行います。また、アラームやリマインダーと呼ばれるモバイル通知もありました。これらは大き目のモーダル ダイアログ ボックスを表示するため、ユーザーは何か他のことをするにはまずこの通知に対処しなくてはなりませんでした。こうした通知はトースト通知に似ているため、現在は操作が必要なトースト (Action Required Toasts) に分類されています。

最後の通知形式がバッジです。バッジは主にロック画面に表示され、通常見過ごされているアプリのアイテム数を示します。また、ステータスを表す小さいグリフとして使用されることもあります。感嘆符のようなものと考えてください。バッジはプライマリ タイルにもセカンダリ タイルにも表示されます。

壊れていないものは修理しない

マイクロソフトは、適応型通知と対話型通知の開発に着手するとき、Windows Phone と Windows 8 の両方の通知の状態について開発者コミュニティから寄せられたフィードバックへの対応にあたふたしていました。マイクロソフトではこれまでずっと新しいものを生み出そうと努力を続け、その結果として、通知テクノロジ、インフラストラクチャ、開発者モデルに関して、Windows Phone と Windows デスクトップの間に大きなギャップが生まれました。そのため、今回はまったく新しいものを作ろうとは考えませんでした。Windows 10 では、両プラットフォームの既存の通知フレームワークについて、開発者から好評を得ている点に注目し、単純に既存の形態から完全に脱却を図るのではなく、必要されることに取り組みました。刺激的な取り組みでした。Windows 10 の開発に着手したことだけでなく、Windows Phone チームと Windows チームが 1 つのプラットフォーム チームにまとまったことも刺激的になった理由の 1 つです。こうした変化の中で、そのような信念に基づいたアプローチをとることは必ずしも簡単ではありませんでしたが、この 2 つのプラットフォームの長所をまとめることが正しい道筋であることはわかっていました。その成果である適応型通知と対話型通知は、「One Microsoft」アプローチの象徴といえます。

スケール変換されないタイルとトーストのテンプレート カタログ

そこでまず、開発者がタイルやトースト通知をデザインする方法について考えてみます。以前のバージョンの Windows のタイルとトーストのテンプレート カタログとして用意していた一連のテンプレートはやや柔軟性に欠けるものでした。これらのテンプレートの目的は、開発者が Windows デザイン言語と視覚的に調和する通知を簡単かつ手軽に作成できるようにすることでした。ただし、開発者が求める可能性のある画像とテキスト構成のすべての組み合わせを作成するために、ほぼ同じテンプレートを何百も用意することになりました。

図 1 は、Windows Phone 8.1 と Windows 8.1 で提供されるタイル カタログのサンプルです。Text01 は 1 行を折り返したテキストです。Text02 は個別の 4 行から成る折り返しのないテキストです。Text03 は見出しと 1 行の折り返しテキストです。Text04 は見出しと折り返しのない 3 行のテキストです。これらは開発者が求める可能性のあるすべての組み合わせにスケール変換されないことは明らかです。

スタイルとレイアウトにわずかな違いしかないタイル テンプレート カタログの 4 つのテンプレート
図 1 スタイルとレイアウトにわずかな違いしかないタイル テンプレート カタログの 4 つのテンプレート

たとえば、折り返しテキストを 2 行必要な場合はどうすればよいでしょう。残念ながら、カタログにそのようなパーツはありません。そのため、開発者は画像のみのテンプレートを使用し、カスタム ビットマップを用意することになります。しかし、これではさまざまな解像度にスケール変換されるとテキストがぼやけ、クラウドからの大きなデータをダウンロードすることになり、バックグラウンド タスクとしてビットマップを生成する際にはパフォーマンスが低下し、信頼性も損なわれます。

トーストの場合は事実上 2 つのスタイルしか存在しなかったため、さらに多くの問題が生じていました。厳密にいえば 8 種類のテンプレートが用意されていましたが、それは画像を使用するトーストか、画像を使用しないトーストに分かれるためです (図 2 参照)。開発者からのフィードバックは、トースト通知の柔軟性が足りないというだけではなく、単純な方法であっても対話できない点が指摘されました。ある程度の量のテキスト、たとえば 3、4 行のテキストを含むトーストを小さな画面で使用するのは簡単ではありませんでした。そのような画面では多くても最初の 2 行しか表示されないためです。コンテンツをすべて表示するために通知領域を拡大する基本的な対話操作さえ、既存のフレームワークでは実現できませんでした。

トースト テンプレート カタログの 2 つのテンプレート


図 2 トースト テンプレート カタログの 2 つのテンプレート

すべての開発者がリッチな通知の作成を希望する (またはその余裕がある) わけではない

ライブ タイルのようなカスタム描画の通知を設計、開発、テストしようとすると、簡単ではないうえにコストもかかるため、テンプレートがあれば大きな問題が解決します。マイクロソフトの通知プラットフォームは、さまざまなフォーム ファクターや画面解像度で実行されます。5 つ異なるタイル サイズと、2 つのトースト サイズをサポートしますが、そのすべてに対して独自の設計、開発、テストが必要になります。テンプレートを使用すればこの負担がなくなります。マイクロソフトのテンプレート言語内に適合する通知を作成する開発者は、開発コストが最小限で済み、テストについてはほとんどコストがかかりません。すべての画面で確実に美しく見えるようにする作業はマイクロソフトが担当します。

開発者は余白、間隔、フォントのサイズや太さを気にする必要がありません。いくつか XML を貼り付け、一部の <text> 属性を変更するだけで、美しく、マイクロソフトの言語と調和の取れた通知を作成することができます。

一方、開発者が自らのブランドと統合できるだけの柔軟性を備えた機能の提供にも強いニーズがあるのは確かです。開発者は、多くの費用と時間を費やして独自の外観を作成し、ブランドを構築することでユーザーを引き付けようとします。こうしたブランドに光を当てることも、マイクロソフトの取り組みにおける重要な理念です。

タイルにとってのテンプレートの意味

Windows 10 のテンプレートの唯一重要な目的は、特定のタイル サイズをターゲットにすることです。Windows 10 では、デスクトップとモバイル兼用として、「小」、「中」、「ワイド」の 3 種類のタイルを用意しました。デスクトップだけは、追加でサイズ「大」のタイルも用意しています。これらのタイルでは、幅と高さがそれぞれ 4 単位の論理グリッドとして考えます。サイズ「小」のタイルは、この論理グリッドの 1 単位 x 1 単位の小さな正方形領域を占有します。サイズ「中」のタイルは、2 単位 x 2 単位の中ぐらいの正方形領域を占有します。この考え方から、サイズ「ワイド」のタイルはグリッドの 4 単位 x 2 単位を占め、サイズ「大」のタイルは全 4 単位 x 4 単位の領域を占有します。

適応型通知と対話型通知を設計する多くの作業の過程で、きわめて重要なサイズのみをカタログをまとめることにしました。その結果がタイル用の 4 つのテンプレート、TileSmall、TileMedium、TileWide、TileLarge と、トースト通知用唯一のテンプレート、ToastGeneric です。将来的にはさらにまとめて、どのようなタイル サイズでも同じコンテンツを用意するだけで済む TileGeneric テンプレートを提供することを考えています。そうすれば、開発者は 1 つのテンプレートだけで各タイルに対応できます。

以前のバージョンの Windows では、サーフェス全体のアニメーション特性を定義する場合もテンプレートを使用しました。画像のコレクションをアニメーションで繰り返し表示するタイル用に、独自のテンプレートがありました。同様に、動いたり消えたりするサムネイルのコレクションをいっせいに表示するタイルには別のテンプレートが必要でした。これからは、新たに導入された hint-* 属性を利用することで、アニメーションを扱えるようになります。これについては後ほど説明します。

とはいえ、以前のテンプレート カタログを軽視しているわけではありません。開発者がアプリを Windows 10 の新しいユニバーサル Windows プラットフォーム (UWP) にアップグレードする場合、通知を構築しているサーバー コードやクライアント コードを変更しなくても、アプリは引き続き Windows 10 のモバイルとデスクトップで適切に機能します。それどころか、一部のテンプレートについては、モバイルとデスクトップ間で動作に一貫性がなかったものや、まったく機能しなかったものが適切に動作するようになります。たとえば、ToastImageAndText0* テンプレートのいずれかを Windows Moblie 10 で使用すると、以前は切り捨てられた情報が通知内に適切に表示されるようになります。

適応型通知と対話型通知

Windows 10 では、3 つの主な特徴を導入することで、通知のストーリーを展開し、開発者とユーザーのエクスペリエンスを充実させます。

1 つ目は適応型のタイルとトーストです。見栄えのよい通知を生成するための柔軟なスキーマを用意し、さまざまなフォーム ファクターに応じてアダプティブに表示されるようにします。

2 つ目は対話型トーストです。簡単な操作を行えるトースト通知を作成する手段を提供します。ユーザーは通知内部で簡単な操作やインラインの返信を実行できるようになるため、わざわざアプリを起動して、現在の作業コンテキストを切り替える必要がありません。

3 つ目は、トースト通知履歴の変化に関するイベントをアプリでサブスクライブできる機能です。したがって、システムやユーザーがアプリ独自のトースト通知を処理すると、そのアプリはその処理に関する通知を受け取ることができます。基本的には、これはアクション センター内部でアプリにどのような変更が加えられたかを知る方法です。

適応型ライブ タイルと適応型/対話型トースト通知の動作

ここでは新しい適応型通知と対話型通知の例を示すために、これらを使用する代表的なプロジェクトをビルドする方法をデモします。このデモでは、現実のシナリオを使用して、タイルとトーストの重要な側面を示します。具体的には、電子メール アプリで使用できる新しい形式の通知を取り上げます。

最初は、電子メール アプリのタイルです。タイル自体の作成については、プライマリ タイル用のアプリ マニフェストを使用する方法か、セカンダリ タイル API を使用する方法があります。どちらの方法も、Windows 10 のリリースで特に大きな変更は加えていません。したがって、タイルの作成方法については既に詳細なドキュメントが公開されているため、ここでは詳しく解説しません。タイルとトーストのレイアウトは、セマンティック XML スキーマを使用して定義します。一般的にはこのスキーマを通知ペイロードと呼びます。タイルに関して今回特筆すべきことは、新しいタイル テンプレートと対応する XML ペイロードを使用して、リッチなビジュアルのエクスペリエンスを生み出す方法です。

ここでは適応型タイル通知を作成して、新しい電子メール通知をユーザーに表示します。ユーザーにとって実用的な方法の 1 つは、電子メール アプリを終了後に届いた新着メッセージの数を示し、さらにそのメッセージの送信者名と数行のメール本文を組み合わせて表示することです。図 3 は、このアプリから Windows 10 デスクトップに表示する 4 つのサイズの通知です。

Windows 10 デスクトップの「小」、「中」、「ワイド」、「大」の各タイル
図 3 Windows 10 デスクトップの「小」、「中」、「ワイド」、「大」の各タイル

図 4 は、図 3 のタイルを表す通知ペイロードです。

図 4 サイズ「中」の適応型タイルを作成する XML ペイロード

<binding template="TileMedium" branding="logo">
  <group>
    <subgroup>
      <text hint-style="caption">Matt Hidinger</text>
      <text hint-style="captionsubtle">Photos from our trip</text>
      <text hint-style="captionsubtle">Check out these awesome photos
        I took while in New Zealand!</text>
    </subgroup>
  </group>
  <text />
  <group>
    <subgroup>
      <text hint-style="caption">Lei Xu</text>
      <text hint-style="captionsubtle">Build 2015 Dinner</text>
      <text hint-style="captionsubtle">Want to go out for dinner after
        Build tonight?</text>
    </subgroup>
  </group>
</binding>

図 4 には興味深い点がいくつかあります。

まず、ここではサイズ「中」のペイロードしか示していません。binding 要素が TileMedium になっていることから、サイズ「中」のペイロードであることがわかります。4 つのサイズの XML ペイロードをすべて示すと長くなりすぎるためです。図 3 に示したタイルをすべて表現するには、TileSmall、TileWide、TileLarge も必要です。ただし、内容はほぼ同じです。4 つのタイルすべての bnding 要素を 1 つの通知ペイロード内で指定してもかまいません。

次に、実際の通知には、タイル上に表示されるよりも多くのコンテンツが含まれています。この点は、2 つの異なるタグ セット、<group> タグと <subgroup> タグで表現しています。それは、タイルが多様な画面解像度で表示され、高解像度の画面で表示される場合に備えてより多くの情報を含んでいるためです。解像度が高いほど、多くのコンテンツを表示できます。<group> タグと <subgroup> タグは、コンテンツが不適切な場所で切り離されないように、コンテンツを意味的にまとめるための情報をシステムに指示します。つまり、できるだけひとまとめにする情報の "単位" を記述します。

3 つ目は、ペイロードの中央にある text 要素です。実のところ、これは単に空白行を指定する方法です。これは、サイズ「大」のタイルの例で確認できます。

最後は、前述の hint-* 要素です。これも上記のペイロードで確認できます。この要素は、今回導入した新しい柔軟性の中でも大きな部分を占め、テキストの簡易スタイル設定などを支援します (図 5 参照)。さまざまなヒントを使用して、画像の不透明度、プロファイル写真のトリミング方法、特定のシナリオをターゲットにしてタイル上のアイテムをアニメーションにする方法などを指定できます。利用可能なヒントなど、タイルの詳細については、MSDN ブログ (bit.ly/1NYvsbw、英語) を参照してください。

サイズ「中」のタイル、低解像度画面 (左) と高解像度画面 (右)
図 5 サイズ「中」のタイル、低解像度画面 (左) と高解像度画面 (右)

情報密度のポイントがわかるように、図 4 のペイロードを低解像度画面と高解像度画面で表示した例を示します (図 5 参照)。この例はサイズ「大」のタイルとサイズ「中」のタイルを並べたように見えますが、実際は同じサイズ「中」のタイルを低価格携帯電話の低解像度画面に表示したものと、スマートフォンの高解像度画面に表示したものです。

今度は、実現可能な 2 つ目の興味深く魅力のある機能として、適応型かつ対話型のトースト通知を使用します。タイル API と同様、トースト API でもトースト通知とトースト オブジェクトの作成方法は何も変わっていません。タイルとほぼ同様、実際に新しくなったのはトースト API で使用できるペイロードです。

新しく作成できるようになったのは、新着メール受信時にメール本文のテキストを数行表示して、メール自体に簡易操作を実行できる、ユーザーにとっは便利なトースト通知です。通常、ユーザーがメールに対して行う操作は 2 つです。1 つはそのメールを既読にする操作です。これによって、メール アプリでメッセージ一覧を見たときに、再びそのアイテムに注意を払う必要がなくなります。もう 1 つは読んだメールをすぐに削除する操作です。Windows 10 デスクトップには、このトースト通知は図 6 のように表示されます。

メール アプリの適応型かつ対話型のトースト
図 6 メール アプリの適応型かつ対話型のトースト

図 7 の XML によって、図 6 に示した通知が生成されます。

図 7 メール アプリの適応型かつ対話型のトースト

<toast>
  <visual>
    <binding template="ToastGeneric">
      <text>Andrew Bares</text>
      <text>Ideas for blog posts and the template visualizer.</text>
      <text>Hey guys, I've got some great ideas for the blog and
        some feature ideas for the...</text>
      <image placement="AppLogoOverride" hint-crop="circle" src="AndrewBares.png" />
    </binding>
  </visual>
  <actions>
    <action activationType="background" content="Mark Read" arguments="read" />
    <action activationType="background" content="Delete" arguments="delete" />
  </actions>
  <audio src="ms-winsoundevent:Notification.Mail"/>
</toast>

前述の通知ペイロードと同様、図 7 のペイロードにも興味深い新しい点がいくつかあります。

まず、以前のテンプレートとは異なり、text 要素を自由に指定でき、それぞれ固有の ID を必要としません。このトースト通知の 3 行のテキストは、独立した 3 つの text 要素を使用して作成しています。

次に、最初の行のテキストは太字ですが、残りの行はすべて太字ではありません。今のところ、トーストのテキストには、タイル通知のテキストに使用できる hint-* スタイルをすべて使用できるわけだはありません。今後のリリースで多くの hint とスタイルをトーストで使用できるようになるまでは、このスタイル設定が常に適用されます。ただし、一部のヒントは使用できます。たとえば、hint-crop 属性は機能するため、このペイロードでも hint-crop 属性と、AppLogoOverride を指定した placement 属性とを組み合わせて、Andrew の画像を円形にトリミングしています。この placement 属性によって、通常であればアプリのロゴが表示される場所に画像を表示しています。利用可能なヒントなど、トースト通知の詳細については、MSDN ブログ (bit.ly/1N3o7GY、英語) を参照してください。

最後に、このペイロードの action セクションで 2 つのボタンを配置しています。これらのボタンには、メールでのユーザーの一般的な操作の action 要素を指定しています。arguments 要素は、ボタンがクリックされたときに呼び出すアプリに渡す値です。今回の場合、これらの操作をアプリのバックグラウンド タスクで処理するため、activationType に background を使用しています。アプリを起動して操作を完了する場合は activationType に foreground を指定します。標準プロトコル起動を利用して Web サイトやアプリ間通信を呼び出す場合は activationType に protocol を指定します。

通知の表示に必要な XML ペイロードを作成したら、この対話型トースト通知でユーザーが行う操作を処理する必要があります。

まず、activationType に background を選択しているので、コードを実行するバックグラウンド タスクが必要です。バックグラウンド タスクは、アプリの Package.appxmanifest 内で宣言する必要があります (図 8 参照)。

対話型トースト操作を処理するバックグラウンド タスクを宣言する Package.appxmanifest
図 8 対話型トースト操作を処理するバックグラウンド タスクを宣言する Package.appxmanifest

Package.appxmanifest にタスクを登録後、コードをバックグラウンド タスクに追加して、実際にユーザーの操作を処理します。操作を処理する独自のコードを追加できる簡単なスタブを図 9 に示します。

図 9 引数またはユーザー入力を処理するバックグラウンド タスク

namespace Tasks
{
  public sealed class ToastHandlerTask : IBackgroundTask
  {
    public void Run(IBackgroundTaskInstance taskInstance)
    {
      // Retrieve and consume the pre-defined arguments and user inputs here.
      var details = taskInstance.TriggerDetails as NotificationActionTriggerDetails;
      var arguments = details.Arguments;
      // Handle either marking the mail as read or deleting it from the database.
    }
  }
}

これで、アプリは完成です。ユーザーを引き付けるコンテンツをタイルに動的に表示し、ユーザーが通常行う操作をトーストで実行できるようにしました。アプリはユーザーにとってさらに使いやすく、満足度の高いものになります。新しい情報をすばやく入手し、現在作業中のコンテキストを切り替えることなく、アプリを簡単に操作できるようになります。皆さんがすばらしいアプリを作成されることを楽しみにしています。Windows 10 の適応型通知と対話型通知を利用して、ユーザーとのつながりを深めることを願っています。


Thomas Fennel は、マイクロソフトで Windows Developer Ecosystem および Platform 部門の主任プログラム マネージャー リードを務めています。連絡先は tfennel@microsoft.com (英語のみ) です。

この記事のレビューに協力してくれたマイクロソフト技術スタッフの Andrew Bares、Matt Hidinger、および Lei Xu に心より感謝いたします。
Andrew Bares はマイクロソフトでプログラム マネージャーを務めており、Windows アプリケーション開発を専門に扱っています。

Lei Xu はマイクロソフトでプログラム マネージャーを務めており、トーストおよびアクション センター プラットフォームを担当しています。

Matt Hidinger はマイクロソフトでシニア プログラム マネージャーを務めており、タイル通知プラットフォームを担当しています。