固定サイト: Windows 7 デスクトップの Internet Explorer 9 との統合

[アーティクル]
01/12/2011

Israel Hilerio (博士)
Internet Explorer のプログラムマネージャー

2010 年 9 月 15 日

このドキュメントは暫定版であり、将来変更されることがあります。

概要

Windows Internet Explorer 9 では、"固定サイト" という機能が導入されています。この機能を使用すると、Web サイトを Windows 7 デスクトップと統合することができます。Web サイトが固定サイトの機能に対応している場合、ユーザーはそのサイトを Windows 7 タスクバーに固定したり、デスクトップまたは [スタート] メニューに追加したりすることができます。固定サイトを使用すると、お気に入りの Web サイトに簡単にアクセスしたり、Microsoft Windows アプリケーションで提供されるのと同じようなショートカット機能を追加したりすることができます。また、固定サイトは、開発コストはほとんどかからないにもかかわらず、堅牢な機能を提供します。機能を実現するために必要なのは、いくつかの meta 要素と JavaScript だけです。現在の Web サイトの既存のコンテンツや属性に変更を加える必要はありません。

次のスクリーンショットは、固定サイトを通じて使用できる機能を示しています。

固定サイトで使用できる機能のスクリーンショット
図 1: 固定サイトで使用できる、Windows 7 タスクバーの機能

サイトをタスクバーに固定する場合も、デスクトップに追加する場合も、[スタート] メニューに追加する場合も、固定サイトごとに .website という拡張子のショートカットファイルが Windows によって生成されます。サイトの URL が特定の .website ファイルの開始 URL として関連付けられ、その URL に基づいて一意の AppID が作成されます。AppID は、この Windows Internet Explorer インスタンスから作成されたすべてのウィンドウやタブによって共有されるため、ユーザーは、同じサイトからインスタンス化されたタブやウィンドウすべてを 1 つのグループとして扱うことができます。

ユーザーが固定サイトから Web サイトを起動すると、Web サイトは、その Web サイトのお気に入りアイコン、ナビゲーションボタンの色、および提供される他の情報を使用して、専用のブランド化された外観で表示されます。固定サイトのウィンドウは、特別なモードで実行される Internet Explorer の分離インスタンスを自動的に起動します (この Internet Explorer モードでは、ブラウザーヘルパーオブジェクトや他のツールバーは有効になりません)。一般的な Web 閲覧に使用されている Internet Explorer のインスタンスがクラッシュしても、固定サイトに使用されているこの自己完結型のインスタンスは影響を受けず、正常に動作し続けます。

この記事で説明する、固定サイトの API と HTML の meta タグを使用すると、Web サイトは、ネイティブ Windows アプリケーションを使用するユーザーにとってなじみのあるデスクトップの概念を通じて、ユーザーと緊密に対話することができます。以下のセクションでは、こうした API が固定サイトを通じて提供する一般的な強化点について説明します。

サイトをタスクバーに固定する
[スタート] メニュー ([すべてのプログラム] メニュー) に Web サイトを追加する
- 固定サイトの API を使用して [スタート] メニューに Web サイトを追加する
- 固定サイトから起動された Web サイトをカスタマイズする
ジャンプリストのタスクを定義する
ジャンプリストのカテゴリを定義してカテゴリに項目を追加する
オーバーレイアイコンを表示する
サムネイルプレビューでサムネイルツールバーのボタンを表示する
タスクバーボタンを点滅させてユーザーの操作が必要なことを示す
アイコンの解像度
機能を検出する
まとめ

サイトをタスクバーに固定する

プログラムを使用してサイトをタスクバーに固定する方法はありません。すべての固定処理には、ユーザーによる操作が必要です。サイトをタスクバーに固定するには、ユーザーは次のいずれかの操作を行う必要があります。

タブを切り離し、タスクバーにドラッグします。
お気に入りアイコンを Internet Explorer のアドレスバーからタスクバーにドラッグします。

次のスクリーンショットは、タブを切り離して CNN の Web サイトをタスクバーに固定する方法を示しています。

図 2: ユーザーはタブをクリックして、開いているブラウザーのその他のタブから切り離す

図 3: ユーザーはタブをタスクバーにドロップしてサイトをタスクバーに固定する

サイトを固定したら、カスタマイズされた状態でサイトが表示されていることに注目してください。たとえば、[戻る] ボタンと [進む] ボタンの色が Web サイトの色と一致しています。

図 4: Web サイトに組み込まれている meta 要素を使用してカスタマイズされた固定サイト

タブを切り離して固定サイトとして使用するようユーザーに勧めることをお勧めします。たとえば、Internet Explorer 9 Test Drive サイトで提供されている次のサンプルページには、プロンプトが含まれています (この通知は後で動的に無効にすることができます。無効にするのが適切なときを知るためには、msIsSiteMode メソッドをテストします)。

固定サイトについて、より知ってもらうため Web サイトにプロンプトが表示される
図 5: 固定サイトの知識を増やすため Web サイトにプロンプトが表示される

[スタート] メニュー ([すべてのプログラム] メニュー) に Web サイトを追加する

Internet Explorer 9 では、ユーザーは Windows の [スタート] メニューに任意の Web サイトを追加することができます。これを行うには、メニューコマンドを使用する ([ツール] メニューをクリックし、[ファイル] をポイントし、[スタートメニューにサイトを追加] をクリック) か、[スタート] ボタンにタブをドラッグします。これで、Web サイトが [スタート] メニューの [すべてのプログラム] フォルダーに表示されるようになります。ユーザーの操作による方法以外にも、Web サイトでは、固定サイトの API を使用してプログラムでこの機能を実現することもできます。Web サイトまたはブラウザーを通じてサイトを追加したら、ユーザーは、Windows 上で実行されているネイティブアプリケーションにアクセスするのと同じように、[スタート] メニューからこの Web サイトにアクセスできるようになります。[スタート] メニューのエントリに関連付けられた開始 URL、アイコン、名前、ヒント、およびナビゲーションボタンの色をカスタマイズするためのマークアップを提供すると、[スタート] メニューから起動された Web ページでも、タスクバーに固定された Web ページの場合と同様に、完全にブランド化されたエクスペリエンスが提供されます。

[スタート] メニューにエントリを追加するように設計されたメカニズムのどれを使用した場合も、操作を確認またはキャンセルするようユーザーに求めるダイアログボックスが表示されます (次のスクリーンショット参照)。

図 6: [スタート] メニューにエントリを追加するかどうかをユーザーが確認するダイアログボックス

固定サイトの API を使用して [スタート] メニューに Web サイトを追加する

[スタート] メニューにサイトを追加するには、window.external.msAddSiteMode() メソッドを使用します。次のコード例のように、API は、JavaScript を使用して任意の HTML 要素からトリガーすることができます。

<a onclick="window.external.msAddSiteMode();" href="#">Add Website</a><br />

window.external.msIsSiteMode メソッドを呼び出すと、Web サイトが固定サイトとして起動されたかどうかを特定できます。msIsSiteMode メソッドは、ブール値 (ウィンドウが固定サイトとして起動された場合は true、それ以外の場合は false) を返します。

固定サイトから起動された Web サイトをカスタマイズする

meta 要素を使用して、固定サイトが固定先から起動された後にどのように表示されるかをカスタマイズできます。次の構文を使用します。

<meta name="name" content="content"/>

name と content の値については、次の表を参照してください。

Name	Content
application-name	ショートカットの名前です。指定されていない場合、ドキュメントのタイトルが代わりに使用されます。
msapplication-tooltip	Windows の [スタート] メニューまたはデスクトップにある、固定サイトのショートカットアイコンをポイントしたときに、ヒントとして表示される省略可能なテキストです。
msapplication-starturl	アプリケーションのルート URL です。指定されていない場合、現在のページのアドレスが代わりに使用されます。HTTP プロトコル、HTTPS プロトコル、または FTP プロトコルのみが許可されます。
msapplication-navbutton-color	固定サイトのブラウザーウィンドウにある [戻る] ボタンと [進む] ボタンの色です。名前付きの色、または、"カスケードスタイルシート (CSS)、レベル 3 (CSS3)" で定義されている、色を表す 16 進値は、すべて有効です。詳細については、「Color Table」(英語) を参照してください。この meta 要素がない場合、色はショートカットアイコンに基づいて決定されます。
msapplication-window	固定サイトのブラウザーウィンドウの初期サイズです。コンテンツのサブ要素では、サイズが N で表され、セミコロンで区切られます。 width=N (最小で 800) height=N (最小で 600) この値はユーザーの操作によって上書きされます。Windows は、ユーザーがウィンドウのサイズを変更すると、ユーザーによって生成されたウィンドウサイズを保持し、インスタンスを閉じます。

次のコード例では、meta 要素を使用してヒント、開始 URL、ウィンドウの初期サイズ、およびナビゲーションボタンの色を指定して、固定サイトのショートカットをカスタマイズしています。

<meta name="application-name" content="Sample Site Mode Application"/>
<meta name="msapplication-tooltip" content="Start the page in Site Mode"/>
<meta name="msapplication-starturl" content="http://example.com/start.html"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>

次のように既存の Web ページ構文を使用して、使用するお気に入りアイコンを指定することもできます。

<LINK rel="shortcut icon" type=image/x-icon href="http://host/favicon.ico">
<LINK rel=icon type=image/ico href="./favicon.ico">

Windows は、32x32 バージョンのお気に入りアイコンを指定されたファイルから取得しようと試みます。このサイズのバージョンが見つからない場合、Windows は、16x16 バージョンのお気に入りアイコンを 32x32 のドキュメントイメージのフレームに入れます。お気に入りアイコンが指定されていない場合、Windows では、フレームに入れられたバージョンの Internet Explorer アイコンを使用します。お気に入りアイコンも、ユーザーがプロパティ設定ダイアログボックスを通じて上書きできます。

ジャンプリストのタスクを定義する

ジャンプリストのタスクは、特定の Web サイトに合わせて調整された、アプリケーション固有のアクションです。Web サイトでは、ジャンプリストのタスクを使用して、最も頻繁に使用されるコマンドをユーザーに公開することができます。ジャンプリストのタスクは、Web サイトの機能と、ユーザーがそうした機能を使用して実行することを期待される主要なアクションの両方に基づいて定義する必要があります。ジャンプリストのタスクは、ユーザーがいつでも (ブラウザーインスタンスが実行されていなくても) アクセスできる静的な URI のセットを提供します。さらに、Web サイトでは、ジャンプリストのタスクを使用することで、ユーザーがサイトを訪れていないときでも、サイト内の最も一般的なアクセス先をユーザーに知らせることができます。たとえば、Web ベースのコミュニケーションアプリケーションでは、ユーザーが連絡先、受信トレイ、およびプロファイル情報にすばやくアクセスできるようなコマンドを公開することができます。

図 7: コミュニケーションサイトに関連付けられた、ジャンプリストのタスク

ジャンプリストのタスクには、.website ファイルに格納された静的な URL パスを使用して直接アクセスすることができます。タスクは頻繁に変更されることは想定されていませんが、Web ページの meta 要素に変更を加えることで更新することができます。変更は、ブラウザーによって最初に読み込まれるときではなく、ユーザーが固定サイトを次に起動したときに有効になります。

ジャンプリストのタスクは、HTML の meta タグを使用して定義します。固定された Web サイトにアクセスする際、Windows では、インストール中にこうしたタグをキャッシュし適用します。タスクに定義される URL は、1 つのドメインに限定されません。次のコード例では、Web ページの、ジャンプリストのタスク 2 つ (Task 1 および Task 2) を定義しています。ユーザーが Task 1 をクリックすると、固定サイトのウィンドウで Page1.html が起動されます。同様に、ユーザーが Task 2 をクリックすると、固定サイトのウィンドウで、microsoft.com ドメイン上の Page2.html が起動されます。

<META name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/>
<META name="msapplication-task" content="name=Task 2;action-uri=https://microsoft.com/Page2.html;icon-uri=https://host/icon2.ico"/>

固定サイトのウィンドウでは、すべてのタスクが現在の固定サイトのウィンドウのタブ内で開かれます。ブラウザーインスタンスが存在しない場合は、新しいブラウザーインスタンスが作成されます。Web サイトでは、最大 5 つのタスクを定義することができます。action-uri フィールドの相対 URL は、meta 情報を含むページの URI を使用してインストール中に解決されます。

サイトでは、タスクを表す meta 要素をいつでも更新することができます。ジャンプリストのタスクに加えられた変更は、次にサイトが起動されたときに反映されます。

ジャンプリストのカテゴリを定義してカテゴリに項目を追加する

ジャンプリストのカテゴリは、Web サイトの動的な情報をエンドユーザーに公開するための優れたメカニズムです。同じドメイン上の任意の Web ページからカスタムカテゴリに項目を追加することができます。カスタムカテゴリ内のジャンプリスト項目はジャンプリストのタスクと視覚的に区別されており、ユーザーが個々に保持したり削除したりできます。ユーザーが固定サイトのジャンプリスト項目をクリックすると、固定サイトのウィンドウでは、固定サイトと同じブラウザーインスタンスの別のタブににその項目が表示されます。ただし、カテゴリリスト内のジャンプリスト項目は、アプリケーションにコマンドを送信して移動を回避するための手段ではなく、ユーザーを特定の URI に移動させることを目的としたジャンプ先です。

ジャンプリストのカテゴリを使用して、ジャンプ先やアクションの形でユーザーがコンテキストに応じた情報にアクセスできるようにすることができます。ジャンプ先は、ファイル、ドキュメント、または URL へのアクセスに使用できます。カテゴリ内の項目は、ユーザー固有のコンテキストに応じた URL を表します。これには、ソーシャルネットワーキングサイト上のプロファイルページや音楽ストリーミングサイト上のラジオ局が含まれる場合があります。ユーザーは、項目のリンクをクリックしてリソースに直接アクセスします。アクションには、サイトへのアクセス、履歴の閲覧などが含まれることがあります。Web サイトでは、カスタムカテゴリを使用して、バックエンドで発生している対話操作や警告についてユーザーに知らせることもできます (電子メールが新たに届いた、友人がオンラインになった、予定が近づいているなど)。カスタムカテゴリのもう 1 つのメリットは、ブラウザーインスタンスを閉じた後もジャンプリストに保持されることです。これにより、ブラウザーが実行されていないときにサイト情報にアクセスするための、コンテキストに応じたメカニズムがユーザーに提供されます。

次のスクリーンショットは、Microsoft Office Outlook Web Access で "Notifications" (通知) というカスタムカテゴリを使用して、scrum (スクラム) という近づいている予定を表示するようすを示しています。ユーザーが [scrum] (スクラム) をクリックすると、IE で、固定サイトと同じブラウザーインスタンスに新しいタブが開かれ、予定の情報が表示されます。

図 8: Outlook Web Access のカスタム通知

カスタムカテゴリの管理は、次のようないくつかの段階で構成されています。

カテゴリを作成する — まず、msSiteModeCreateJumplist メソッドを呼び出して、ラベル付きのカスタムカテゴリを作成します。次のコード例では、List1 という名前のカスタムカテゴリを作成しています。一連の手順に出てくる他のメソッドを使用する前に、msSiteModeCreateJumplist を少なくとも 1 回呼び出す必要があります。
```
window.external.msSiteModeCreateJumplist('List1');
```
カテゴリラベルは、そのカテゴリに少なくとも 1 つの項目が設定されるまで表示されません。2 つ目のカテゴリを作成すると、既存のカテゴリが置き換えられます。
項目を作成する — メモリ内リストに項目を追加します (項目はまだ表示されません)。次のコード例では、msSiteModeAddJumpListItem メソッドを使用して、Item 1、Item 2、Item 3 という 3 つのリスト項目を作成しています。1 つ目のパラメーターでは、項目名を指定しています。2 つ目のパラメーターでは、項目が選択されたときに使用する URL を指定しています。3 つ目のパラメーターでは、リスト上の項目を表示するときに使用するアイコンを指定しています。
```
window.external.msSiteModeAddJumpListItem('Item 1', 'http://host/Item1.html', 'http://host/images/item1.ico');
window.external.msSiteModeAddJumpListItem('Item 2', 'http://host/Item2.html', 'http://host/images/item2.ico');
window.external.msSiteModeAddJumpListItem('Item 3', 'Item3.html', 'images/item3.ico');
```
リストを表示する — メモリ内リストをジャンプリストとして表示します。msSiteModeShowJumplist メソッドを呼び出すとすぐに、ジャンプリストのメモリ内リストが Windows によって更新されます。
```
window.external.msSiteModeShowJumplist();
```
リストをクリアする — カスタムリスト上の項目をクリアします。msSiteModeClearJumplist メソッドを呼び出すとすぐに、Windows によってジャンプリストから項目が削除されます。
```
window.external.msSiteModeClearJumplist();
```

固定サイトの API では、カスタムカテゴリ内に一度に最大 20 個の項目を表示します。20 個を超える項目をカテゴリに追加すると、以前に追加した項目は削除されます。固定サイトの API では、既存のエントリを複製しません。ただし、重複するエントリはリストの最上部に移動されます。場合によっては、表示される項目の最大数がシステムによって減らされます。これは、ユーザーによる選択、ディスプレイの解像度、フォントサイズなど、さまざまな要因に基づいて行われます。すべてのカテゴリのすべての項目を表示するのに十分なスペースがない場合、項目は下から順に切り詰められます。

Web サイトでは、カテゴリの状態を保持し、カテゴリへの項目の追加とカテゴリからの項目の削除を行う必要があります。また、Web サイトでは、次のイベントリスナーのいずれかを使用して、ユーザーがカスタムカテゴリから項目を削除したときにトリガーされるイベントを登録することができます。

document.addEventListener('mssitemodejumplistitemremoved', removed, false);
document.attachEvent('onmssitemodejumplistitemremoved', removed);

次のように、リスナーは URL パラメーターを使用して、デリゲートへのコールバックを生成します。

function removed(url) { … }

ユーザーがジャンプリストから項目を削除しても、Windows では、シェルイベントをキャプチャしたり、サイトに返したりすることができません。したがって、イベントは、ユーザーがジャンプリスト項目を追加し Web サイトによって msSiteModeShowJumplist メソッドが呼び出された後で、固定サイトを実行している IE インスタンスによって人為的に生成されます。ただし、イベントが生成されるのは、サイトによって挿入される前にユーザーによって削除された項目がある場合のみです。これにより、ジャンプリストのメモリ内表現とジャンプリストの実際の項目の間に不一致が生じます。固定サイトの API は、イベントがトリガーされた後で、ジャンプリストのメモリ内表現とジャンプリストの実際の項目を同期します。

同じドメインに属するページはどれも、JavaScript API を使用して、ジャンプリストカテゴリの情報に変更を加えることができます。

オーバーレイアイコンを表示する

Windows アプリケーションでは、アプリケーションのタスクバーボタン上にオーバーレイアイコンを表示して、ユーザーに通知を提供し状態を知らせることができます。msSiteModeSetIconOverlay メソッドを使用すると、固定サイトのタスクバーボタンにアイコンオーバーレイが追加されます。オーバーレイアイコンは、固定サイトのウィンドウの内容が見えない場合 (ブラウザーウィンドウが最小化されている場合や別のウィンドウで遮られている場合など) に Web サイトに注意を引くのに役立ちます。オーバーレイアイコンは、重要で長期にわたる状態や通知 (ネットワークの状態、オンライン状態、新着メールなど) を提供するために使用します。絶えず変化するオーバーレイやアニメーションを表示すると、ユーザーエクスペリエンスが良好でないものになることを覚えておいてください。

Windows では、オーバーレイアイコンはタスクバーボタンの右下隅に表示されます。ただし、オーバーレイアイコンを表示するには、タスクバーが既定の大きいアイコンモードになっている必要があります。Web サイトが実行されていないとき、または固定サイトとして実行されていないときは、オーバーレイアイコンは表示されません。オーバーレイアイコンは、同じドメイン内のどの Web ページからでも表示できます。また、Web サイトでは、最初にオーバーレイアイコンをクリアすることなく、複数のオーバーレイアイコンを適用することができます。ただし、オーバーレイアイコンをクリアすると、アイコンは最近追加されたものから順に削除されます。つまり、クリアは、最後に表示されるアイコンが最初に削除されるアイコンとなるような順序で行われるということです。

次のスクリーンショットは、Outlook Web Access がベルのオーバーレイアイコンを使用して、予定の時間になったことをユーザーに知らせるようすを示しています。

図 9: Outlook Web Access のオーバーレイアイコン

次のコード例では、msSiteModeSetIconOverlay メソッドを使用して、オーバーレイアイコン overlay1.ico をタスクバーボタンに追加し、"Overlay 1" という文字列のヒントを提供しています。

window.external.msSiteModeSetIconOverlay('http://host/images/overlay1.ico', 'Overlay 1');

オーバーレイアイコンを削除するには、msSiteModeClearIconOverlay メソッドを呼び出します。

window.external.msSiteModeClearIconOverlay();

サムネイルプレビューでサムネイルツールバーのボタンを表示する

ネイティブ Windows アプリケーションでは、ユーザーは、サイトのウィンドウを復元したりアクティブにしたりせずに、タスクバーのサムネイルツールバーのボタンを操作することができます。固定サイトでは、同じ機能を個々の Web ページに利用することができます。各ボタンは Web ページ内で実行できるコマンドを表すので、ユーザーは、ウィンドウが最小化された状態でも、また、ウィンドウをアクティブにしなくても、Web ページとの対話操作を行うことができます。次のスクリーンショットは、複数のビデオクリップを含む Web ページが、サムネイルツールバーのボタンを使用して、ユーザーに直接ページにアクセスさせることなく再生、一時停止、およびビデオの選択を制御するようすを示しています。

ビデオを制御するための、サムネイルツールバーのボタン
図 10: ビデオ制御用の、サムネイルツールバーのボタン

サムネイルツールバーには、最大 7 つのボタンを表示することができます。サムネイルを表示するスペースは限られており、また、表示するサムネイルの数は絶えず変化するので、特定のツールバーサイズはアプリケーションに保証されません。表示スペースが少ない場合、ツールバーのボタンは必要に応じて右から順に切り詰められます。したがって、アプリケーションでは、優先順位が最も高いボタンが左の方に配置され、切り詰められる可能性が最も低くなるように、ボタンに関連付けられたコマンドに優先順位を付ける必要があります。

ユーザーがサムネイルツールバーのボタンをクリックすると、特定の ID を持つイベントが処理対象として Web ページに返されます。このようなイベントのスコープは、イベントを作成したドメインです。ボタンを作成したり、ボタンの表示/非表示や有効/無効を切り替えたりすることができます。また、ボタンのイメージを置き換えることもできます。

サムネイルツールバーのボタンは、表示される前にメモリ内で定義されます。次のコード例では、msSiteModeAddThumbBarButton メソッドを使用して、サムネイルツールバーのボタンを 3 つ作成し、アイコンリソースファイルの URL を 1 つ目のパラメーターで、(省略可能な) ヒントを 2 つ目のパラメーターで渡しています。このメソッドは、サムネイルツールバーのボタンのクリックイベントが生成されたときにシステムによって使用される ID を返します。

btn1 = window.external.msSiteModeAddThumbBarButton( 'http://host/images/button1.ico', 'button 1');
btn2 = window.external.msSiteModeAddThumbBarButton( 'http://host/images/button2.ico', 'button 2');
btn1 = window.external.msSiteModeAddThumbBarButton( 'http://host/images/button3.ico', 'button 3');

イベントハンドラーで onmsthumbnailclick イベントにサブスクライブして、ユーザーがサムネイルツールバーのボタンをクリックしたときに生成されるイベントをキャプチャします。次のコード例では、サムネイルツールバーのボタンによって生成されるすべてのイベントを処理するために、イベントハンドラー handler1 を登録しています。

document.addEventListener('msthumbnailclick', handler1, false);
…
function handler1 (btn) {
         alert ("addeventlist:thumbnail btn id" + btn.buttonID);
}

定義が済んだら、msSiteModeShowThumbBar メソッドを使用してボタンを 1 度だけインスタンス化することができます。

window.external.msSiteModeShowThumbBar();

ボタンがインスタンス化されたら、msSiteModeUpdateThumbBarButton メソッドを使用してボタンの状態と可視性を設定します。次のコード例では、button1 を無効かつ表示されるようにし、button2 を有効かつ表示されるようにし、button3 を有効かつ非表示にしています。

window.external.msSiteModeUpdateThumbBarButton(btn1, false, true);
window.external.msSiteModeUpdateThumbBarButton(btn2, true, true);
window.external.msSiteModeUpdateThumbBarButton(btn3, true, false);

ボタンの状態に対する変更はすぐに適用されます。ただし、ボタンの可視性に対する変更は、サムネイルプレビューウィンドウを更新するまで適用されません。

代替のスタイルを定義および実装して、サムネイルツールバーに既に表示されているボタンの情報を動的に置き換えることができます。まず、新しいスタイルを定義します。msSiteModeAddButtonStyle メソッドを使用して、指定したボタンの代替のアイコンイメージとヒントを定義します。各スタイルは、代替のイメージと新しいヒントの値で構成されています。次のコード例では、新しいイメージとヒントを使用して btn1 用の style1 を定義しています。

style1 = window.external.msSiteModeAddButtonStyle(btn1, 'http://host/images/style1.ico', 'style1');

次に、msSiteModeAddButtonStyle メソッドを使用して、定義したスタイルを既に表示されているボタンに適用します。次のコード例では、上で定義した style1 を btn1 に適用しています。

window.external.msSiteModeShowButtonStyle(btn1, style1);

ユーザーが Web サイトのドメインから出た場合や他のページに移動した場合、サイトでは、サムネイルツールバーのボタンを非表示にする必要があります。同様に、ユーザーがページに戻ってきたら、サイトでは、こうしたボタンを再インスタンス化し、表示する必要があります。

こうしたボタンを再インスタンス化する場合、サイトでは、同じインスタンスの msSiteModeShowThumbBar メソッドを呼び出すべきではありません (例外がトリガーされるため)。最低でも、ボタンが再初期化され再び表示された後で機能し続けることを確認するため、try/catch ブロックで周りを囲んでこのメソッドを呼び出す必要があります。このシナリオをサポートするには、msSiteModeAddThumbBarButton メソッドを複数回呼び出して、イベントハンドラー内でイベントの処理に使用される必要な ID の変数を再初期化します。したがって、msSiteModeAddThumbBarButton メソッドは毎回同じボタン ID を返すことが保証されます。これにより、ページの外でのナビゲーションとは関係なくイベント処理ロジックを再利用することが可能になります。

タスクバーボタンを点滅させてユーザーの操作が必要なことを示す

サイトのタスクを先へ進めたり完了したりするために操作が必要であることをユーザーに通知することが必要な場合があります。固定サイトのタスクバーアイコンを点滅させるには、msSiteModeActivate メソッドを使用します。たとえば、ユーザーが資格情報を入力する必要がある場合、ダウンロードが完了した場合、別のユーザーがそのユーザーと連絡を取ろうとしている場合などに、この処理を使用します。

状態をアクティブにするには、msSiteModeActivate メソッドを呼び出します。

window.external.msSiteModeActivate();

アイコンが最大 20 回点滅してから、タスクバーボタンは永続的に点灯した状態になります。ユーザーがサイトとの対話操作を行ったら、タスクバーボタンは点滅しない状態にリセットされます。

アイコンの解像度

固定サイトは、いくつかの場所 (ジャンプリストのジャンプ先、タスクバーボタン、サムネイルプレビューのボタン、およびオーバーレイアイコン) でアイコンを使用します。アイコンファイルには、次のサイズの画像が格納されている必要があります。

推奨: 16x16、32x32、48x48
最適: 16x16、24x24、32x32、64x64

標準的な構成では、タスクバーアイコンは 32x32、ジャンプリストのジャンプ先のアイコンは 16x16、サムネイルプレビューのボタンは 16x16、オーバーレイアイコンは 16x16 です。固定サイトのブラウザーウィンドウの左上隅にあるイメージには、指定されたお気に入りアイコンの 24x24 バージョンが使用されます。サイトのお気に入りアイコンとは異なる .ico ファイルを使用して、ジャンプリストの項目/タスクのアクション/ジャンプ先を表すため、ユーザーは実行したいタスクをすばやく特定しやすくなります。

機能を検出する

機能の検出を使用して、ブラウザーが固定サイトをサポートしていることを確認する必要があります。使用しているブラウザーでこの機能がサポートされている場合は、次のコード例の評価結果は true になります。

if (window.external.msIsSiteMode) {
    // Web サイトが固定サイトから起動されたかどうかを確認します。
    if (window.external.msIsSiteMode())
    {
        // TRUE
    }
    else
    {
        // FALSE
    }
}

注: Internet Explorer 9 Beta リリースでは、次のように、API をテストするための呼び出しを try/catch ブロック内で行うことが求められます。

try {
     if(window.external.msIsSiteMode()) { }
     else {}
}
catch(e) { }

まとめ

固定サイトを使用すると、ユーザーは、Windows 上で実行可能コードを実行するアプリケーションと同じように、お気に入りの Web サイトを Windows 7 デスクトップ、[スタート] メニュー、およびタスクバーと統合することができます。固定サイトの API を使用すると、Web ページでは、デスクトップとの統合を強化することができ、ブラウザーウィンドウの内容がユーザーに見えない状態でも、情報、通知、および警告をユーザーにプッシュすることができます。また、固定サイトを使用すると、ブランド化されたエクスペリエンスを実現でき、Web サイトの機能をタスクバーで知らせることができます。

Israel Hilerio は、Internet Explorer チームのプログラムマネージャーです。

固定サイト: Windows 7 デスクトップの Internet Explorer 9 との統合

概要

サイトをタスク バーに固定する

[スタート] メニュー ([すべてのプログラム] メニュー) に Web サイトを追加する

固定サイトの API を使用して [スタート] メニューに Web サイトを追加する

固定サイトから起動された Web サイトをカスタマイズする

ジャンプ リストのタスクを定義する

ジャンプ リストのカテゴリを定義してカテゴリに項目を追加する

オーバーレイ アイコンを表示する

サムネイル プレビューでサムネイル ツール バーのボタンを表示する

タスク バー ボタンを点滅させてユーザーの操作が必要なことを示す