次の方法で共有


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

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 サイトの色と一致しています。

Web サイトに組み込まれている meta 要素を使用してカスタマイズされた固定サイト
図 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 で、固定サイトと同じブラウザー インスタンスに新しいタブが開かれ、予定の情報が表示されます。

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

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

  1. カテゴリを作成する — まず、msSiteModeCreateJumplist メソッドを呼び出して、ラベル付きのカスタム カテゴリを作成します。次のコード例では、List1 という名前のカスタム カテゴリを作成しています。一連の手順に出てくる他のメソッドを使用する前に、msSiteModeCreateJumplist を少なくとも 1 回呼び出す必要があります。

    window.external.msSiteModeCreateJumplist('List1');
    

    カテゴリ ラベルは、そのカテゴリに少なくとも 1 つの項目が設定されるまで表示されません。2 つ目のカテゴリを作成すると、既存のカテゴリが置き換えられます。

  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');
    
  3. リストを表示する — メモリ内リストをジャンプ リストとして表示します。msSiteModeShowJumplist メソッドを呼び出すとすぐに、ジャンプ リストのメモリ内リストが Windows によって更新されます。

    window.external.msSiteModeShowJumplist();
    

  4. リストをクリアする — カスタム リスト上の項目をクリアします。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 がベルのオーバーレイ アイコンを使用して、予定の時間になったことをユーザーに知らせるようすを示しています。

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 チームのプログラム マネージャーです。