Windows 8 のピン留めサイト

  • Article

お気に入りのあらゆるアプリとコンテンツを最も効率的に探し、それらの最新情報を最も簡単に確認できるのが、Windows 8 のスタート画面です。アクティビティが次々に更新され、自分専用の最新コンテンツを表示してくれるアプリ タイルを通して、ユーザーは自分の環境の最新情報を把握できます。

Windows 8 における Internet Explorer 10 の Metro スタイル ブラウジング エクスペリエンスについては、既に公開されている記事をご確認いただけます。今回の記事では、IE10 のピン留めサイトと、それらが Windows 8 スタート画面でどのように使えるかについて説明します。さらに、サイト独自のビジュアルを適用する方法と、バッジ通知を使ってコンテンツの更新を通知する方法を紹介します。また、ピン留めサイトに関する Web 開発者向けの詳細情報についても説明します。

次のビデオでは、Windows 8 Consumer Preview におけるピン留めサイトの動作をご覧いただけます。

Windows 8 のピン留めサイト

ピン留めサイト – お気に入りを並べただけではありません

Windows のユーザーは、その大半の時間を Web に費やしており、Windows のオプトイン方式の製品利用統計情報 (Microsoft カスタマ エクスペリエンス向上プログラムとして公開) によれば、複数の同じサイトを何度も繰り返し見るということがわかっています。Windows 8 のピン留めサイトを使えば、すぐにアクセスしたいいつものサイトと、スピーディかつ簡単につながることができます。バッジ通知があれば、いつでも最新情報が表示されるサイト タイルを通して、コンテンツの更新を知ることができます。

開発者は、ピン留めサイトを活用することで、Windows スタート画面上で自らのサイトとユーザーをしっかりとつなぎ、サイトのブランド イメージを直接アピールできます。私たちの調査によれば、Windows 7 の IE9 でこの機能を活用したサイトは、サイト訪問者数をおよそ 15% ～ 50% もアップ (英語) させています。サイト タイルが更新された Windows 8 が提供する今まで以上に強力なユーザー エクスペリエンスは、サイトをブラウザーで開いていない場合でも有効です。

実際のピン留めサイトのタイルとバッジ通知を次の 2 つのスクリーン ショットに示します。

スタート画面のピン留めサイト。サイト独自のビジュアルとバッジ通知が表示されている
スタート画面のピン留めサイト。サイト独自のビジュアルとバッジ通知が表示されている

ピン留めサイトのタイルに表示されるバッジ通知の例
ピン留めサイトのタイルに表示されるバッジ通知の例

ピン留めサイトのタイルに表示される、サイト独自のビジュアル

Web 開発者は、アドレス バー、新しいタブ ページ、スタート画面など IE10 のあらゆる場所で使用されるサイト アイコン (Favicon) を提供できます。IE10 では、スタート画面にピン留めされたサイトを大きなサイト アイコン (32 x 32 ピクセル) を使って識別します。この方法は IE9 でタスク バーにピン留めする場合と変わりません。

Metro スタイルの IE10 でサイトをピン留めする操作のスクリーン ショット。サイト タイルのプレビューが表示されている
Metro スタイルの IE10 でサイトをピン留めする操作のスクリーン ショット。サイト タイルのプレビューが表示されている

IE10 は、このアイコンで最も多い面積を占める色を抽出して、スタート画面上のタイルの背景色に自動で適用します。

このアイコンは、X-Icon Editor (英語) などのツールで作成できます。このツールを使って 32 x 32 のサイト用アイコンを作成し、画像をアイコン ファイル形式 (.ico) に変換しましょう。その後は、通常のお気に入りアイコンのマークアップで .ico を関連付けます。

<link href="testdrive.ico" rel="shortcut icon" />

バックグラウンドで更新されるバッジ通知

スタート画面上のピン留めサイトの更新は、Windows 8 からポーリングできます。これは、他のユーザーからの新規メッセージ (電子メールやソーシャル ネットワーク)、ショッピング サイトのセールのお知らせ、ニュースフィードの新着記事など、軽量な通知の場合に便利です。

Internet Explorer 10 と Windows 8 では、ピン留めサイトのタイルにバッジ通知を直接表示できます。つまりユーザーは、サイトをブラウザーで表示しなくても、そのサイトが更新されたことがわかります。たとえば、Windows 8 Consumer Preview の IE10 で、Fresh Tweets デモ (英語) をピン留めすると、このピン留めサイトのタイルが定期的に更新され、新しいツイートの投稿を知らせてくれます。

バックグラウンド通知を有効にするには、サイトからコンポーネントを提供する必要があります。その 1 つがバッジ通知 XML (Windows 用のバッジ通知を記述する XML 応答) で、もう 1 つはピン留めサイトの meta タグ (通知のポーリング先とポーリング頻度を Windows に伝える Web ページ マークアップ) です。

バッジ通知 XML

バッジ通知のポーリングと描画は Windows が処理します。Windows は、ピン留めサイトのタイルの外観が記述されたバッジ通知 XML をポーリングします。このシンプルな XML 応答は、バッジ XML スキーマ (英語) によって定義されます。たとえば、タイルを数値 "3" で更新する場合、次の XML を送信します。

<?xml version="1.0" encoding="utf-8" ?>

<badge value="3"/>

バッジには、数字または警告 ('alert') や新規メッセージ ('newMessage') を示すグリフを表示できます。バッジが表示できる項目の完全な一覧については、MSDN の「バッジの画像を選択する」(英語) をご覧ください。

ピン留めサイトの meta タグ

次のステップではバッジ通知 XML を Web ページに関連付けます。IE10 は、対象の Web ページが通知やジャンプ リストといったピン留めサイトの機能をサポートしているかどうかを、meta タグの "application-name" で判定します。バッジ通知をサポートするには、バッジ通知 XML の URL と、Windows による URL 要求の頻度を記述した新しい meta タグをマークアップに追加します。IE は、meta タグの "msapplication-badge" がページ上に存在するかどうかをチェックしてからピン留めを実行します。また、その後ピン留めサイトのタイルからサイトを起動する際にも同じタグをチェックします。

<meta name="msapplication-badge" value="frequency=360;polling-uri=https://ietestdrive2.com/PinnedSites/TweetCounter/microsoft/360" />

value パラメーターは、polling-uri (必須) と frequency (オプション) の 2 つで構成されます。

polling-uri は、先ほど定義したシンプルな XML ドキュメントを Windows が要求する場合の、要求先の絶対 URI です。

frequency は、更新間隔を示すオプションの分数で、次に示す値のいずれかにする必要があります。

  • 30 (Windows による URI のポーリング間隔: 30 分)
  • 60 (1 時間)
  • 360 (6 時間)
  • 720 (12 時間)
  • 1440 (1 日。既定値です)

frequency が省略されている場合、または上記以外の値が指定されている場合は、1 日 1 回 (1440 分) の既定値が適用されます。

バッジ通知更新用の開発者向け API

開発者は、サイト タイルのバッジを Web ページから直接消去または更新することで、サイト タイルを常に最新の状態に維持できます。

ユーザーがスタート画面からピン留めサイトのタイルを起動すると、Web サイトが SiteMode という独自セッション内部で実行されます。ここで、この Web サイトは、次の JavaScript 関数を使ってバッジを更新できます。

window.external.msSiteModeClearBadge(): タイル上のバッジ通知を消去します。 Fresh Tweets デモ (英語) の場合、通知を受信したユーザーがタイルをタップしてブラウザーを起動したときに、Web ページが msSiteModeClearBadge() を使ってタイル上の通知を消去します。これで、次回バッジの更新と共にタイルが点灯したときに、ユーザーは新しいコンテンツがあることを認識できます。

window.external.msSiteModeRefreshBadge(): URI のポーリングを使ってサイトのバッジを更新するよう Windows に要求します。たとえば、ピン留めサイトのタイルで 3 件の未読メッセージがあることを確認したユーザーが、タイルをクリックしてサイトに戻ったとします。ここでユーザーが 1 件目の更新情報だけを読んだ場合に更新を実行することで、既読/未読の正しい数をバッジに反映させることができます (この場合は 2)。

Windows 8 Consumer Preview の場合、これら 2 つの API が機能するのは、ローカル イントラネットまたは信頼済みサイト ゾーンで実行されているサイトだけです。これについては次のプレビュー リリースで修正される予定です。これらの API を Consumer Preview と自社サイトでテストするには、[インターネットのプロパティ] ダイアログの [セキュリティ] タブを使って、対象のドメインを [信頼済みサイトの一覧] に追加してください。

デスクトップ タスク バーの通知

アイコン オーバーレイとしてピン留めサイトのデスクトップ タスク バーに表示される通知は、Windows 8 とデスクトップの IE10 でも引き続き機能します。ただし、この形式の通知は Windows 8 スタート画面のピン留めサイトでは利用できません。バッテリ消費を効率化するため、スタート画面の場合 Windows 8 はすべてのタイルの通知を処理します。

ジャンプ リストによるスピーディなサイト内ナビゲーション

NYTimes.com、CNN.com、Amazon.com などの多くの有名サイトがサポートしている IE9 のピン留めサイトの機能に、特定タスクやサイトの特定領域にアクセスできるジャンプ リストがあります。IE10 では、ジャンプ リストをナビゲーション バーで利用できるようにすることで、タッチ操作を活用したサイト ナビゲーションを実現しています。

ユーザーがスタート画面からサイトを起動すると、サイトで使用できる次のようなジャンプ リストがピン ボタンに表示されます。

Fresh Tweets デモが表示するジャンプ リストのスクリーン ショット
Fresh Tweets デモが表示するジャンプ リストのスクリーン ショット

表示されるジャンプ リストは、IE9 が Windows 7 のタスク バーに表示するものと同じです。

サイトのジャンプ リストには、ページ マークアップを使って静的なタスクを追加するか (詳細)、ユーザーの操作に基づいて項目を動的に追加する (詳細) ことができます。Windows 8 のバッジとジャンプ リストはサイト独自の機能です。完全修飾ドメイン名ごとに設定できるポーリング データは 1 つだけ、ジャンプ リストのデータは 1 セットだけです。

まとめ

Internet Explorer 10 は、Windows 8 スタート画面との統合を通して、Web サイトを中心に据えたエクスペリエンスを実現します。Web 開発者は、サイト独自のビジュアルを作成してピン留めサイトのタイルに適用し、サイトが更新されたことを通知によって知らせ、ジャンプ リストを提供してスピーディなサイト内ナビゲーションを実現できます。

Windows 8 における皆さんの Web サイトの魅力を最大限に高める、これらのシンプルな機能をぜひご活用ください。

- Internet Explorer 担当プログラム マネージャー Rahul Lalmalani