Web Slice は、hAtom マイクロフォーマットを基盤としています。また、いくつかのプロパティも追加されています。Web Slice 自体は単純なセマンティック HTML マークアップを使用して、購読可能な Web ページの一部を表します。注釈は、HTML ページ内のコンテンツに直接適用できるため、追加のファイルは不要です。

Web Slice には、次の 4 つの主要機能があります。

• 検出
• 更新
• プレビュー
• ナビゲーション

検出

一般に、ユーザーは Web Slice 上にマウス ポインターを合わせることで、Web Slice を検出します。これをドキュメント内検出と呼びます。

図 1: マウス ポインターを Web Slice に合わせたときに表示されるショートカット ボタン

Internet Explorer によって検出された各 Web Slice は、[コマンド] バー上の [フィード探索] ボタン () にエントリとして追加されます。1 つの Web ページに最大 100 個の Web Slice を含めることができますが、[フィード探索] ボタンで一度に表示できるのは 20 エントリです。一覧の先頭に表示される Web Slice をカスタマイズするには、既定の Web Slice を設定します。

図 2: Web Slice も検出する [フィード探索] ボタン

ドキュメント内検出の適用対象は、最上位のドキュメントにある Web Slice のみです。Web Slice の検出と購読は、フレームセット内のドキュメントに対しては無効です。ただし、発行者が独自の購読用インターフェイスを提供している場合があります。詳細については、「ユーザー エクスペリエンスのカスタマイズ」を参照してください。

ユーザーが Web Slice を購読すると、その Web Slice が Internet Explorer の [お気に入り] バーに追加されます。

更新

更新の通知を受け取るには、まず Web Slice を [お気に入り] バーに追加する必要があります。購読すると、Feed Download Engine が Web サイトからの情報を使用して Web Slice を定期的に更新します。Internet Explorer が変更を検出した場合は、[Web Slice] ボタンのテキストを太字にしてユーザーに通知します。

Internet Explorer の既定では、ttl プロパティ要素が存在する場合は、Web Slice 発行者によってこの要素に指定された推奨更新間隔が使用されます。そうでない場合は、既定のフィード間隔 (通常は 24 時間ごと) に従って更新が行われます。ユーザーは、[Web Slice プロパティ] ダイアログ ボックスで更新頻度を調整できます。また、プレビュー ウィンドウの [更新] ボタン () をクリックすると、キャッシュされた Web Slice をいつでも更新できます。

プレビュー

Web Slice を表示するには、[お気に入り] バーで [Web Slice] ボタンをクリックします。プレビュー ウィンドウ ("フライアウト" とも呼ばれる) には、ローカル キャッシュされた Web Slice のコンテンツか、代替表示ソース (発行者が定義している場合) が表示されます。

ナビゲーション

完全な Web ページにすばやくアクセスするには、プレビュー ウィンドウで [開く] ボタン () をクリックします。既定では、Internet Explorer は特定の Web Slice が検出された場所に戻ります。発行者は、bookmark プロパティを使用してこの動作を変更できます。

この記事の残りの部分では、これら 4 つの機能について詳しく説明します。

Internet Explorer は、あるクラス名と属性を持つ要素をスキャンして、Web ページ上の Web Slice を検出します。

必須のプロパティは次のとおりです。

• hslice プロパティ
• id プロパティ
• entry-title プロパティ

hslice プロパティ

hslice 要素は、ブラウザーが購読できる Web ページのセクションを記述します。hslice 要素には、Web Slice の必須プロパティとオプション プロパティがすべて含まれています。

<div class="hslice" id="score"> 

従来のスタイル クラスとは異なり、Web Slice のクラス名には、スタイル シートの CSS ルールは必要ありません。スペース区切りリストを使用して、Web Slice のクラス名とその他のクラスを組み合わせることができます。

<div class="hslice forecast" id="weather"> 

id プロパティ

名前付きアンカーと同様の使用方法で、id 属性は URL 内の Web Slice の識別に使用されます。id 属性は、hslice クラスを使用する同一の要素上に存在する必要があります。

id は固有でなければなりません。Web ページ上の 2 つ以上の Web Slice が同じ id 値を持つ場合、Internet Explorer は最初の値しか認識しません。id 値が変更されると、Internet Explorer は Web Slice を識別できなくなります。

entry-title プロパティ

hslice の少なくとも 1 つの子要素で、 entry-title クラス名を使用する必要があります。このプロパティの値は、[Web Slice] ボタン テキストおよび [フィード探索] ボタン () でアドバタイズされる名前に対応付けられます。

<div class="hslice" id="main">
<h2 class="entry-title">Seattle Weather</h2>
    ...
</div> 

複数のテキスト スパンを組み合わせて、Web Slice と同時に更新される動的タイトルを作成することが可能です。entry-title クラスは複数の要素に適用できます。Internet Explorer は、HTML での表示順に値を連結します。

次の例では、Internet Explorer は Web Slice が更新されると "Seattle Weather 62" を表示します。

<div class="hslice" id="main">
<h2 class="entry-title">Seattle Weather</h2>
<p>It is currently <span class="entry-title">62&deg;</span>.</p>
</div>  

Web Slice のタイトルは 128 文字 (半角) までです。

Internet Explorer は、キャッシュされたバージョンと Web Slice を比較して更新をチェックします。Windows RSS Platform は、フィードと Web Slice を定期的 (既定では 24 時間ごと) に更新します。ただし、Web Slice に ttl プロパティが含まれている場合は、指定された値を使用して Feed Download Engine が更新スケジュールを調整します。この頻度は、[Web Slice プロパティ] ダイアログ ボックスでも調整できます。

次の Web Slice 要素は、更新チェックの期間と頻度を制御するのに使用します。

• ttl プロパティ
• endtime プロパティ

ttl プロパティ

time to live (TTL) 値は、Web Slice が最新のものと見なされる時間の長さ (分) です。ユーザーが更新間隔を変更しない限り、Feed Download Engine はこの値を推奨更新頻度と見なします。詳細については、「Feed Download Engine の概要」および「FSS_SUGGESTED」を参照してください。

<p>Updates occur every <span class="ttl">60</span> minutes.</p>

また、abbr オブジェクトと title 属性を使用して TTL を定義することもできます。この方法を使用すると、オブジェクトの内部テキストをユーザー フレンドリーな時刻表記の作成に適用できます。次に例を示します。

<p>Updates occur every <abbr class="ttl" title="60">hour</abbr>.</p>

Internet Explorer が更新チェックに使用する最小間隔は 15 分です。

endtime プロパティ

Web Slice の有効期限です。日付と時刻は title 属性で指定されるので、要素の内部テキストは、必要に応じてユーザー フレンドリーな時刻表記のままになります。

<abbr class="endtime" title="2008-07-25T17:30:00-07:00">(フレンドリーな日付形式)</abbr>

時刻の値は、インターネット上の日付と時刻: タイムスタンプ (RFC3339)に記述されている ISO 8601 国際規格を使用して表記されます。日付と時刻を表す文字列は、一般的なフォーマット (YYYY-MM-DDThh:mm:ss[Z|(+|-)hh:mm]) に従います。

• YYYY : 年 (4 桁)
• MM : 月 (01 ～ 12)
• DD : 日 (01 ～ 31)
• "T" : 日付と時刻の区切り記号
• hh : 時 (00 ～ 23)
• mm : 分 (00 ～ 59)
• ss : 秒 (00 ～59、オプション)
• 次のいずれか
• "Z" - UTC/GMT ("ゼロ")
• ("+"|"-")hh:mm : タイムゾーンとの時間差 (時および分)

タイムゾーンとの時間差とは、UTC との実際の時間差であり、夏時間は自動的に考慮されません。たとえば、シアトルのタイムゾーンとの時間差は、冬は "-08:00" (太平洋標準時)、夏は "-07:00" (太平洋夏時間) になります。最善の結果を得るには、現地時刻の値を UTC に変換してください。

また、RFC822 日付形式 (4 桁の年数) を使用して、夏時間に関する情報を組み込むこともできます。次の例は、上記の ISO 8601 の例と同じ時刻をエンコードします。

<abbr class="endtime" title="25 Jul 2008 17:30:00 PST">(フレンドリーな日付形式)</abbr>

代替更新ソース

ユーザーが基本的な Web Slice を購読すると、Internet Explorer はその Web ページに戻って更新をチェックします。

図 3: 検出と更新の両方を処理する基本的な Web Slice

1 つの Web Slice を更新するために元の Web ページに戻るのは、効率的でない場合があります (Web ページが大きい場合は特にそうです)。ネットワークの使用を効率的に制御するため、Web Slice では更新用の代替ソースを宣言することができます｡

a rel=feedurl

feedurl の rel 属性を指定する Web Slice リンクは、必ず代替更新ソースとして扱われます。代替ソースがある場合、Internet Explorer は代替ソースを購読し、Web Slice の更新で元の Web ページ コンテンツを使用しなくなります。

図 4: Web Slice 更新用の代替ソースの指定

上の図では、2 つの Web ページは同じ Web Slice を表しています。ユーザーは、元の Web ページである Basic.html 上で Web Slice を見つけ、これを購読します。ただし、次の例に示すように、Web Slice のソースでは、代替更新ソースを使用するよう指定されています。

<div class="hslice" id="auction">
<span class="entry-title">Auction Item</span>
<a rel="feedurl" href="update.html#auction-update" style="display:none;"></a>
</div> 

空のリンクはユーザーには見えませんが、これにより追加のタブ ストップが作成されます。このリンクは、スクリーン リーダーによって読み取られます。ユーザー エクスペリエンスを良くするために、ユーザーがこれらの Web ページに誤って移動しないよう、代替リンクを非表示にすることをお勧めします。

Update.html は、単純な Web ページで、基本的な Web Slice を表しています。Internet Explorer は、この Web ページを使用して更新の取得とユーザーへの通知を行います。

<div class="hslice" id="auction-update">
<h2 class="entry-title">Auction Item</h2>
<p class="entry-content">Current bid is $66</p>
</div> 

代替更新ソースは、短い RSS や、項目を 1 つだけ持つ Atom フィードを指す場合もあります。mon 名前空間と mon:endtime 要素を使用すると、オプションの有効期限を指定できる点に注意してください。次に例を示します。

<?xml version="1.0"?>
<rss version="2.0"
xmlns:mon="http://www.microsoft.com/schemas/rss/monitoring/2007">
<channel>
<title>Auction Item</title>
<link>http://www.example.com</link>
<ttl>15</ttl>
<mon:endtime>2008-12-06T01:00:00Z</mon:endtime>
<item>
<title>Nintendo DS System = $66.00</title>
<link>http://www.example.com/auction.aspx#slice</link>
<description> ...</description>
</item>
<channel>
</rss> 

次のプロパティはオプションですが、使用することを強くお勧めします。

entry-content プロパティ

このプロパティは、Internet Explorer が [お気に入り] バーで表示する Web Slice の一部を定義します。[Web Slice] ボタンがクリックされると、[Web Slice] プレビュー ウィンドウに entry-content 要素全体が表示されます。プレビュー ウィンドウの既定の幅と高さは、entry-content として指定されたコンテナーのサイズによって決定されます。entry-title プロパティと同様に、Web Slice には複数の entry-content を含めることができます。すべての要素は結合され、1 つのプレビューを形成します。

セキュリティ上の理由から、Web Slice のプレビューでは、スクリプトや Microsoft ActiveX コントロールが許可されません。したがって、HTML フォームやボタンはサポートされません。その代わりに、URL パラメーターを含むリンクを利用して、関連アクションを実行できます。(現在選択されているタブで、ナビゲーションが実行されます。)追加機能が必要な場合は、代替表示ソースを使用します。

スタイルの適用

Web Slice プレビューの作成には、次のスタイル ソースが使用されます。

• entry-content プロパティとその子のインライン スタイル
• 元の Web ページの head で定義されているスタイル ルール
• インポートおよびリンクされたスタイル シート

Web Slice のプレビューでは、親要素のスタイルは継承されません。次の例では、Web Slice プレビューに青いテキストは表示されません。このスタイルは entry-content 要素ではなく、hslice に適用されたものであるためです。

<div class="hslice" id="main" style="color:blue">
<h2 class="entry-title">Seattle Weather</h2>
<p class="entry-content">It is raining.</p>
</div> 

HTML プレビューにこのスタイルを適用するには、 entry-content 要素自体にスタイルを適用します。

<div class="hslice" id="main">
<h2 class="entry-title">Seattle Weather</h2>
<p class="entry-content" style="color:blue">It is raining.</p>
</div> 

Internet Explorer は、プレビューの描画時に entry-content 要素を body 要素でラップします。これにより、Web ページの body 要素に適用されたスタイル ルールが、Web Slice プレビューの body にも適用されます。プレビューで継承されない body スタイルを適用するには、クラス名または id を使用して、元の Web ページの body を差別化します。その後、その要素に固有のスタイル ルールを記述します。次の例では、元の Web ページには緑の背景が適用されますが、プレビューには適用されません。

<style type="text/css">
.MyBody { background-color:green; }
</style>

<body class="MyBody">
<div class="hslice" id="main">
<h2 class="entry-title">Seattle Weather</h2>
<p class="entry-content">It is raining.</p>
</div>
<body> 

前述のスタイルに関するガイダンスは、メインの Web ページから抽出された Web Slice にのみ適用されます。代替表示ソースは、Web Slice プレビューのスタイルを完全に制御することができます。

代替表示ソース

[お気に入り] バーの [Web Slice] ボタンをクリックすると、entry-content 要素のキャッシュ値のプレビューが生成されます。Windows RSS Platform はストレージに使用されるため、スクリプトや ActiveX コントロールなどのアクティブ コンテンツは削除されます。Web Slice プレビューで対話型の Web コンテンツをホストするには、代替表示ソースを使用する必要があります。

図 5: 代替表示ソースの指定

a rel=entry-content

代替表示を指定するには、entry-content 要素を、次の属性を持つリンクに変更します。

• href: 代替表示 Web ページの場所です。
• rel: 値は entry-content である必要があります。

<div class="hslice" id="auction">
<span class="entry-title">Auction Item</span>
<a rel="entry-content" href="display.html" style="display:none;"></a>
</div> 

ユーザーが [Web Slice] プレビュー ウィンドウを開くと、Display.html に移動します。entry-content のキャッシュ コピーは使用されません。代替表示ソースのプレビューは、96 dpi の画面上で幅 320、高さ 240 のスペースに収まるサイズにする必要があります。プレビュー ウィンドウでは、別のサイズが使用されていても、Web Slice は自動的にサイズ変更されません。

次のものは、代替表示ソースのプレビューではサポートされません。

• ダイアログ ボックスおよびポップアップ - スクリプト アラート、HTML ポップアップ、[印刷] や [お気に入りに追加] などのダイアログ ボックスはすべてブロックされます。Web Slice フライアウトからは、どの種類のウィンドウも起動できません。
• ActiveX コントロールの初回インストール - プレビュー ウィンドウには情報バー (金色のバー) が表示されないため、発行者は、ドメインに対してすべての ActiveX オブジェクトが有効であることを事前に確認する必要があります。これを行わないと、壊れたコントロールのアイコン (赤の "X") が表示されます。これと同じ制限は、ダウンロードなど、情報バーでユーザーとの対話を必要とするものすべてに適用されます。
  メモ: ActiveX コントロールがインストールされていない場合は、オブジェクト タグ内に代替テキストが表示されます。発行者はこのテキストを使用して、ダウンロード手順などを示すことができます。
• window.external の呼び出し - プレビュー ウィンドウと関連付けられた有効な external オブジェクトはありません。

代替表示ソースを使用すると、Web Slice プレビュー内のすべてのハイパーリンクの移動先がプレビュー ウィンドウ内になります。現在のタブでリンクを開くには、新しいウィンドウでリンクが開くように指定します。次に例を示します。

<a href="gotosite.html" target="_blank">view full site</a>

サーバーの場合は、代替表示ソースとして機能する Web ページに対して、no-cache HTTP ヘッダー応答を使用することを検討してください。これにより、Web Slice をプレビューするユーザーが最新のコンテンツを表示できるようになります。

代替更新と代替表示を組み合わせることも可能です。

図 6: 代替更新ソースと代替表示ソースの併用

このシナリオが機能するには、Basic.html のコードに代替 "更新" ソースを含める必要があります。次に例を示します。

<div class="hslice" id="auction">
<span class="entry-title">Auction Item - Alternative Update</span>
<a rel="feedurl" href="update.html#auction-update" style="display:none;"></a>
</div> 

Update.html は、代替 "表示" ソースに関する情報を提供します。

<div class="hslice" id="auction-update">
<h2 class="entry-title">Auction Item - Alternative Display</h2>
<div class="entry-content">Current bid is $66</div>
<a rel="entry-content" href="display.html" style="display:none;"></a>
</div>  

Web Slice フライアウトで [開く] ボタン () をクリックすると、Internet Explorer は通常、Web Slice が最初に検出された Web ページに移動しますが、代替更新ソースが指定されている場合は、代替更新ソースに移動します。発行者は、bookmark プロパティを使用して別の場所を指定することで、この動作を変更することもできます。

bookmark プロパティ

bookmark プロパティを使用すると、[開く] ボタンのクリック時に、指定された場所に移動するようになります。次の例では、Location.html を開きます。

<div class="hslice" id="auction">
<h2 class="entry-title">Auction Item</h2>
<a rel="bookmark" href="Location.html" style="display:none;"></a>
</div> 

次の上級テクニックは、ユーザーが Web サイト上の Web Slice と対話する方法をカスタマイズする際に役立ちます。

• Web Slice アイコンの使用
• 既定の Web Slice の設定
• ドキュメント内検出の無効化
• 動的な Web Slice の作成
• ユーザーの認証

Web Slice アイコンの使用

Web Slice アイコンは、Web サイトのコンテンツを購読可能にする Web Slice 機能が Web サイトに含まれていることを示す、共通の視覚的手掛かりとなります。Web Slice アイコンは、Web Slice アイコンに関するガイドラインに従って使用してください。開発者は、さまざまなサイズの Web Slice アイコンの .png ファイルと .gif ファイルをダウンロードできます。

既定の Web Slice の設定

[フィード探索] ボタン () は、Internet Explorer がドキュメントを解析した順序に従って各 Web Slice を一覧表示します。発行者は、先頭に表示される Web Slice を選択することで、特定の Web Slice を格上げして Web ページ全体を代表させることができます｡たとえば、書店の Web サイトで、売上上位の書籍の一覧と、それぞれの書評を同じ Web ページ上でマークアップする場合は、売上 1 位の書籍の Web Slice を既定として格上げすると良いでしょう。書評は単に読者数を増やすだけですが、これならば Web サイトの売上目標達成を支援することになります。

既定の Web Slice を指定するには、ドキュメントの head に link 要素を追加します。

<link 
rel="default-slice"
type="application/x-hatom" 
href="#auction" />

link 要素には、次の属性が必要です。

• rel: 値は default-slice である必要があります。
• type: 値は application/x-hatom である必要があります。
• href: 現在のドキュメント内の Web Slice の #id です。

現在のドキュメント内に既定の Web Slice が見つからない場合、link は無視されます。

ドキュメント内検出の無効化

すべての Web ページで Web Slice のドキュメント内検出を無効にするには、[インターネット オプション] ダイアログ ボックスで [コンテンツ] タブをクリックし、フィードの [設定] ボタンをクリックして、[ページ上の Web Slice 探索を有効にする] チェック ボックスをオフにします。現在のページで Web Slice のドキュメント内検出を無効にするには、ドキュメントの head に次の meta 要素を追加します (値にはすべて大文字小文字の区別があります)。

<meta name="slice" scheme="IE" content="off"/> 

ドキュメント内検出を無効にしても、[フィード探索] ボタン () は、Web ページに Web Slice が含まれていることを示します。ただし、Web Slice を検出してインストールするには、その Web ページで独自の UI を提供する必要があります。ユーザーにインストールを指示するプロンプトを表示するには、window.external.AddToFavoritesBar() を呼び出します。

動的な Web Slice の作成

Web Slices は、ダウンロードして後で表示できる静的コンテンツとはうまく連携しますが、フォーム データ、AJAX (Asynchronous JavaScript and XML)、またはユーザーとの対話に応じて変化するコンテンツ用の Web Slice を作成する場合は、より難しくなります。たとえば、Web Slice を使用して、ユーザーのいる場所から数キロ以内にあるすべての映画館で上映されている映画を一覧表示する場合や、ユーザーの検索条件と一致する新刊書籍を一覧表示する場合などが考えられます。こうした Web Slice を更新するには、Internet Explorer が Web Slice を生成した条件を再作成する必要があります。

ドキュメントのロード後に Web Slice を動的に作成または更新する場合は、プレビューを処理する代替更新ソースまたは代替表示ソース (あるいはその両方) を提供する必要があります。外部リソースに URL パラメーターを渡すと、ユーザーの入力内容に基づいて応答を生成できるようになります。最後に、Web Slice の更新または挿入後に、window.external.ContentDiscoveryReset() を呼び出して、[フィード探索] ボタン () 上の Web Slice とフィードの一覧を更新します。

ユーザーの認証

Web サイトでユーザー認証を必要とする場合は、ログイン資格情報を Cookie に保存するという方法をユーザーに提供することを検討してください。Cookie を使用すると、ブラウザを閉じた後にユーザーを識別することができます｡ユーザー名とパスワードの設定は [Web Slice プロパティ] ダイアログ ボックスで使用できますが、これらが使用されるのは、HTTPS+Basic および HTTP/HTTPS+Digest 認証のみです。Cookie ベースの認証はこれらの認証よりも広くサポートされており、Web Slice のセキュリティ設定に関係なく機能します。

個人情報を保持させたくないユーザーもいるため、認証が失敗した場合にサイトにログインする方法を Web Slice で説明する必要があります。代替更新ソースを使用する場合は、項目の説明にこの情報が含まれた単一項目フィードを返します。