次の方法で共有

  • [アーティクル]

March 2009

Volume 24 Number 03

Internet Explorer 8 - Web アプリケーションでのスライス、格納、および効率化の新機能

Daron Yöndem | March 2009

コードは MSDN コード ギャラリーからダウンロードできます。
オンラインでのコードの参照

この記事では、次の内容について説明します。

  • Web Slice
  • アクセラレータ
  • DOM ストレージ
  • AJAX ナビゲーション
 この記事では、次のテクノロジを使用しています。
AJAX、JavaScript

この記事は、Internet Explorer 8 のプレリリース版に基づいています。記載されている内容は変更されることがあります。

目次

Web Slice でページ領域を定義する
有効期限と更新頻度
アクセラレータ
検索候補
AJAX ナビゲーション
DOM ストレージ
オフラインおよびオンラインの作業モード
XMLHttpRequest のタイムアウト
まとめ

Internet Explorer 8 によって、この製品は進化の重要な段階に入りました。Internet Explorer 8 は、Web Slice、アクセラレータ、検索候補の表示など、新しいエンド ユーザー向け機能を備えています。また、AJAX ナビゲーションや DOM ストレージなど、より高度な開発者向け機能も備えています。

この記事では、Internet Explorer 8 の機能の詳細な説明を通して、開発者とユーザーの両方の操作性がどのように向上するかについて検証します。新しい機能により、ページの部分的な定義や、更新頻度および有効期限の制御を行うことができます。また、ユーザーの検索およびナビゲーションの操作性が向上します。では、詳しく見ていきましょう。

Web Slice でページ領域を定義する

Web Slice を使用すると、Web ページを複数の領域に分けて、必要に応じて一部の領域のみを表示または更新することができます。Web Slice は、RSS リーダーを使用することなく、Web サイトから最新の情報を得るための手軽なソリューションです。RSS リーダーは、エンド ユーザーにとって扱いが多少複雑な面もあるので、あらゆる状況に最適というわけではありません。

Web Slice とは、プログラムで定義された Web ページの領域です。Web Slice を表示するには、マウスをスライスの上で動かすか、ツール バーの [この Web スライスの購読] ボタンをクリックします。図 1 に、この操作を実行している画面を示します。

fig01.gif

図 1 マウスを画面に重ねて Web Slice を見つける

Web Slice の購読を選択すると、Internet Explorer 8 のお気に入りバーにスライス タイトルが表示されます。Internet Explorer では、オンライン ソースに継続的にアクセスし、更新があった場合はスライス タイトルを太字で表示してユーザーに更新を通知します。ユーザーがタイトルをクリックすると、図 2 に示すように、スライスのコンテンツがポップアップ ウィンドウに表示されます。

fig02.gif

図 2 Web Slice でオークションの最新の入札がわかる

Web Slice の大きな利点の 1 つは、ユーザーがサイトの変更の有無を確認する目的で Web ページの更新を続ける必要がなくなることです。また、ページ全体ではなく関連性のあるデータのみが更新されるので、Web Slice 用にデータ ソースの構築を工夫することで Web サーバーのリソースを節約できます。それだけでなく、Web Slice の利用によって、Web ページの各領域へのユーザー アクセスのより詳細な統計を現在のシステムで提供できるようになります。

先に述べたとおり、Web Slice は開発者が事前に定義するものです。Web Slice をどのように定義すればよいでしょうか。最初に、hslice クラス名を使用して、HTML div 要素を Web Slice コンテナとしてマークする必要があります。Web Slice に必要なその他の定義はすべて hslice 要素に含まれます。次に示すのは空の Web Slice 定義です。

<div class="hslice" id="ProductID1">  </div>

各 Web Slice は、一意の ID を持つ必要があります。この ID は、Internet Explorer がページ上で各 Web Slice を識別するために使用されます。ユーザーが Web Slice の購読を開始した後で Web Slice が変更されると、Internet Explorer はその Web Slice を見つけることができなくなり、お気に入りバーのコンテンツを更新できなくなります。

各 Web Slice には、スライスのタイトルを識別するための要素を含める必要があります。タイトルは、CSS クラスの entry-title によって識別されます。このコンテンツは、お気に入りバーおよび [フィード探索] コマンド バー メニューに表示されます。entry-title テキストは、Web Slice 自体の更新時に必要に応じて変更できます。

この初めての Web Slice の作成を終えるには、要素をもう 1 つだけ追加する必要があります。それは entry-content です。Web Slice とそのタイトルを定義しましたが、ユーザーに表示するコンテンツはまだありません。表示するコンテンツに CSS クラスの entry-content を適用することにより、Web Slice コンテンツを定義します。

<div class="hslice" id="ProductID1">
  <h1 class="entry-title">
  Brand New Product!</h1>
  <div class="entry-content">
    <p>
    This is the product
    definition.</p>
  </div>
</div>

図 3 に、私の Web Slice 定義を示します。ProductID1 という名前のこの Web Slice には、タイトルとコンテンツが保持されています。

fig03.gif

図 3 簡単な Web Slice

Web Slice のユーザー エクスペリエンスをさらに充実したものにするには、ビジュアル要素やインライン (またはグローバル) CSS スタイルを使用します。唯一の制限は、スクリプトや ActiveX コントロール (Silverlight など) を使用できないことです。ActiveX が必要な場合は、代替表示ソースを使用する必要があります。代替表示ソースは、Web Slice の entry-content コンテナ要素で定義できます。

次に示すように、コンテンツを entry-content 要素内に収める必要はありません。単純に、Web Slice をリダイレクトし、コンテンツのソースが別の URL にあることをブラウザに通知するだけです。

<div class="hslice" id="ProductID2">
    <h1 class="entry-title">
        Brand New Product</h1>
    <div class="entry-content" href="https://www.contoso.com/web_slice/
        alternative_display.aspx?ID=2">
    </div>
</div>

この方法では表示ソース ページを追跡するだけで、個別の Web Slice の更新回数と、各スライスを購読するユーザーの人数を追跡できます。さらに、表示ソースの alternative_display.aspx ページでは ActiveX コントロールを使用できます。

有効期限と更新頻度

場合によっては、ユーザーがオフラインで Web Slice を更新できない状態であっても、Web Slice の有効期限が適時に切れるように設定することが必要です。これは、オンライン オークションやオンライン販売キャンペーンのサイトでは特に重要です。Web Slice の終了時期を設定するには、次の例のように、endtime クラス名および適切な日時の値を HTML 省略形要素内に追加します。

<div class="hslice" id="ProductID1">
  <h1 class="entry-title">
    Brand New Product!</h1>
  <div class="entry-content">
    <p>
      This is the product definition.</p>
        <p>
          This is the end time:
          <abbr class="endtime" title="2008-10-12T11:00:00-12:00:00">
            12:00</abbr></p>
  </div>
</div>

ユーザーは、お気に入りバーの Web Slice タイトルを右クリックし、[プロパティ] コマンドをクリックして更新頻度を設定できます。図 4 に示すように、カスタム スケジュールを使用できます。

fig04.gif

図 4 ユーザーは Web Slice の更新頻度を設定できる

ユーザー定義による設定のほかにも、time to live (ttl) の値を設定することによってプログラムで頻度を指定できます。

<div class="hslice" id="ProductID6">
  <h1 class="entry-title">
    Brand New Product!!!!</h1>
  <div class="entry-content">
    <p>
      This is the product definition.</p>
    <div class="ttl" style="display: none;">
      15</div>
  </div>
</div>

頻度を指定するために、CSS クラスの ttl とコンテンツの 15 を使用して DIV 要素を作成しました。これにより、この Web Slice のコンテンツの更新を 15 分ごとにチェックするようにブラウザに指示します。デザイン上の選択として、CSS 値の display に none を指定することによって DIV 要素の可視性を非表示に設定しています。

代替表示ソースが使用可能であることは既にお話しましたが、状況によっては、単純に Web Slice でデータを外部データ ソースからフェッチした方が便利なこともあります。外部データ ソースを使用するには 2 とおりの方法があります。1 つは、次のコード スニペットに示すように、別のページの外部 Web Slice を使用する方法です。

<div class="hslice" id="ProductID10">
    <div class="entry-title">
        Product Name
    </div>
    <a rel="feedurl" href="https://www.contoso.com/
        external.aspx#ProductID1"></a>
</div>

この Web Slice 定義では、別の Web Slice を external.aspx から取得しています。ターゲットの Web Slice は、ProductID1 という ID によって識別され、URL にアンカーとしてアタッチされます。div タグ内のコンテンツを表示する代わりに、anchor タグの rel 属性により、別のタグの URL を Web Slice データ ソースとして使用するように Internet Explorer に指示します。

2 つ目の方法は、外部の RSS フィードの使用です。Internet Explorer は、常に RSS フィード内の最初の項目を使用し、受信した RSS XML のエントリ コンテンツを表示します。

<div class="hslice" id="ProductID10">
    <div class="entry-title">
        Product Name
    </div>
    <a rel="feedurl" href="/slicefeed.xml"></a>
</div>

これで、Web Slice に XML ソースを指す feedurl アンカーが指定されました。実行中にパラメータに応じて、XML を出力する汎用的なハンドラに簡単に置き換えることができます。この例の XML ソースを次に示します。

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
  <channel>
    <title>WebSlice RSS</title>
    <ttl>120</ttl>
    <item>
      <title>Product Name Here</title>
      <description>HTML &lt;b&gt;codes&lt;/b&gt; can be used</description>
    </item>
  </channel>
</rss>

Web Slice の設定を HTML コードの entry-content で定義する代わりに、XML データ ソースに定義できます。前のコードでは、Web Slice の ttl プロパティおよび title プロパティの値が XML ソースから提供されています。description タグには、問題なく多彩な HTML を含めることができます。

アクセラレータ

アクセラレータは、Web 閲覧での一般的なタスクの実行を高速化し、自動化を促進するものです。たとえば、ある Web サイトから別の Web サイトへのコピー アンド ペーストをどのくらい頻繁に行うかを考えてみてください。たとえば、企業の Web サイトで探していた住所を見つけたとします。次に、その場所への道順を調べることにしました。住所をコピーし、Live Maps Web サイトにアクセスし、そのページに住所を貼り付けます。アクセラレータでは、この一連の操作を自動化できます。

図 5 は、ユーザーが住所をクリックしただけでアクセラレータにより地図上の位置が見つかった画面です。独自のアクセラレータを記述するのは簡単です。開発者として行う作業は、XML OpenService 記述ファイルを使用してアクセラレータの動作を定義することのみです。OpenService 記述形式について詳しく見ていきましょう。基本的な OpenService 記述ファイルを次に示します。

<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription xmlns="https://www.microsoft.com/schemas/
  openservicedescription/1.0">
  <homepageUrl>https://www.contoso.com/</homepageUrl>
  <display>
    <name>Translate it with Contoso</name>
    <icon>https://www.contoso.com/favicon.ico</icon>
  </display>
  <activity category="translate">
    ...
  </activity>
</openServiceDescription>

fig05.gif

図 5 Live Maps アクセラレータによるすばやい位置検索

アクセラレータの主要なプロパティは、homepageUrl、display、および activity の各タグです。homepageUrl は、提供するサービスの URL です。他のタグおよび設定で使用されるすべての URL は、homepageUrl と同じドメインを使用する必要があります。display タグは、Internet Explorer の右クリック メニューに含まれているアクセラレータのコマンド ボタンの表示特性について設定します。ユーザーがページ上で右クリックすると、名前とアイコンが示されてアクセラレータが検出されます。

activity 要素は、アクセラレータが提供するサービスを定義します。この例では、アクセラレータは翻訳動作を提供します。Internet Explorer のコンテキスト メニューでアクセラレータをグループ化する方法を制御できます。[追加] (リンクを追加する)、[ブログ] (リモート サービスでブログを投稿する)、[定義] (定義を探す)、[地図] (地図を探す)、[翻訳] (選択されているテキストを翻訳する) など、さまざまなカテゴリを使用できます。独自のカテゴリを定義することもできます。推奨されるカテゴリ定義の規則は、(他のアクセラレータ開発者が使用できるような) 汎用性を持つ動詞をカテゴリとして定義することです。

ここで、activitiyAction を activity タグ内に定義しましょう。次の例では、context 値に selection を指定した 1 つの activityAction が示されています。

<activityAction context="selection" >
  <preview action="https://www.contoso.com/translateacc.aspx" method=" get" >
    <parameter name="word" value="{selection}" />
  </preview>
  <execute action=" https://www.contoso.com/translate.aspx " method=" post" >
    <parameter name="word" value="{selection}" />
  </execute>
</activityAction>

context 属性は、activityAction の主要なコンポーネントです。context は、このアクションをどのような場合に使用できるかを定義します。アクセラレータが現在の context に適合するアクションを提供できない場合、Internet Explorer のアクセラレータのメニューに表示されません。現在の context の選択は、selection と link です。context が selection の場合、ユーザーはテキストを選択してアクセラレータ メニューに移動することにより、アクセラレータを使用できます。context が link の場合、ユーザーはハイパーリンクを右クリックすることによりアクションを開始できます。

個別の activityAction で、execute および preview の定義を使用できます。execute は、ユーザーがアクセラレータ メニューのアクセラレータ コマンドをクリックしたときに起動されます。preview action は、ユーザーがマウスをメニューのアクセラレータ コマンドの上に置いたときに起動されます。preview タグと execute タグは両方ともアクション URL とメソッドを保持します。get または post をデータ転送のメソッドとして使用できます。

パラメータは各アクションに対して名前/値ペアとして定義されます。値は、角かっこ内のキーワードから自動的に指定されます。たとえば、{selection} は、ユーザーが選択したテキストが関連付けられたパラメータの値になることを意味しています。可能な値キーワードの一覧を図 6 に示します。

図 6 キーワード オプション
名前 説明
documentDomain 現在のページのドメイン アドレス。
documentTitle 現在のページのタイトル。
documentUrl 現在のページの完全な URL。
link ユーザーがリンクをクリックした場合に、リンクの完全アドレスを提供します。
linkDomain ユーザーがリンクをクリックした場合に、リンクのドメイン アドレスを提供します。
linkRel ユーザーがリンクをクリックした場合に、リンクの rel プロパティを提供します。
linkText ユーザーがリンクをクリックした場合に、リンクのテキストを提供します。
selection 現在のページの選択されたテキスト。

プレビュー ウィンドウは IFrame のように動作します。つまり、プレビュー ウィンドウ内であらゆる種類の操作を使用できます。また、特定のインターフェイスを設計して、preview および execute action の URL を区別する場合に適しています。

この例の最終的な OpenService 記述ファイルを図 7 に示します。次に、Web サイトにアクセスしたユーザーに対してアクセラレータのインストールを促すように設定します。アクセラレータのインストールに必要なスクリプトは、次のとおりです。

<div>
    <input id="Button1" type="button" 
    value="Click to Install" 
    onclick="window.external.AddService('myaccelerat.xml');" /> 
</div>

図 7 最終的な OpenService 記述ファイル

<?xml version="1.0" encoding="utf-8" ?>
<openServiceDescription xmlns="https://www.microsoft.com/schemas/
  openservicedescription/1.0">
  <homepageUrl>https://www.contoso.com/</homepageUrl>
  <display>
    <name>Translate with Contoso</name>
    <icon>https://www.contoso.com/favicon.ico</icon>
  </display>
  <activity category="translate">
    <activityAction context="selection" >
      <preview action="https://www.contoso.com/translate.asp">
        <parameter name="Word" value="{selection}" />
      </preview>
      <execute action="https://www.contoso.com/translate.asp">
        <parameter name="Word" value="{selection}" />
      </execute>
    </activityAction>
  </activity>
</openServiceDescription>

AddService メソッドは、OpenService Description XML ファイルの URL を取得し、インストールを開始します。アクセラレータが既にインストールされているかどうかを確認するには、isServiceInstalled メソッドを呼び出します。

検索候補

Internet Explorer 7.0 では、検索プロバイダという新機能が導入されました。ユーザーは、さまざまな検索プロバイダをブラウザに統合し、検索バーを使用してお気に入りの検索エンジンに簡単に移動することができます。これは、XML ベースの OpenSearch 仕様ファイルによって可能になっています。Internet Explorer 8 では、さらに進化した検索機能として、検索候補という機能が備わっています。名前が示すとおり、ユーザーが検索キーワードを入力するとブラウザが検索候補を提供します。

ユーザーが入力したときに、ブラウザは選択された検索候補プロバイダにアクセスし、検索キーワードに関連する候補を要求します。結果のデータが即座に表示されるため、ユーザーの検索の操作性が向上します (図 8 を参照)。

fig08.gif

図 8 現在のページから移動せずに検索キーワードの候補に簡単にアクセスできる

検索候補のしくみについて詳しく説明する前に、検索プロバイダが必要です。検索プロバイダを構成する 3 つの主要な要素は、名前、検索 URL、およびアイコンです。これらは OpenSearch 仕様 XML で適性に定義されます。次に示すのは、検索候補以外の全機能を備えている、Internet Explorer 7.0 用に記述された検索プロバイダです。

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Contoso Search</ShortName>
  <Url type="text/html" template="https://www.contoso.com/?key2search=
    {searchTerms}"/>
  <Image height="16" width="16" type="image/icon">
    https://www.contoso.com/favicon.ico</Image>
</OpenSearchDescription>

ShortName タグには検索プロバイダ名が含まれ、URL タグでは検索エンジンの検索パスが定義されています。URL パターン内の searchTerms キーワードは、ユーザーにより入力された検索キーワードで置き換えられます。最後に、Image タグは検索プロバイダのアイコン ファイルを指しています。

検索プロバイダをインストールするために、ユーザーはページ上の HTML 要素をクリックするか、Internet Explorer 8 の検索ボックスで検索プロバイダを見つける必要があります。アクセラレータと同じ方法で、検索プロバイダは window.external.AddSearchProvider JavaScript 関数でインストールできます。

<a href="#" onclick="window.external.AddSearchProvider('http://
    www.contoso.com/provider.xml')">  Add Search Provider  </a>

AddSearchProvider JavaScript 関数には、インストール プロセスを初期化するためのパラメータとして OpenSearch XML ファイルの URL が必要です。

OpenSearch XML ファイルを明示的に参照する代わりに、ブラウザが Web ページを探して検索プロバイダを検出するように設定できます。検索プロバイダが検出されるようにするには、HTML ページのヘッダーに OpenSearch XML ファイルへの非表示リンクを挿入する必要があります。検索プロバイダへの非表示リンクを次に示します。

<link title="Contoso Search" rel="search" type="application/
opensearchdescription+xml" href="https://www.contoso.com/provider.xml" />

リンクのタイトルはブラウザに表示される検索エンジンの名前です。非表示リンクの rel プロパティと type プロパティは、ここで示したように完全に同じ名前にする必要があります。検索プロバイダへのリンクであることをブラウザが認識する方法だからです。最後に、href 属性には OpenSearch description XML ファイルの URL が含まれます。

検索プロバイダの準備が完了したので、次は検索候補を追加しましょう。最初に、OpenSearch description XML ファイルを変更し、検索候補データ ソースを指定する必要があります。

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Contoso Search</ShortName>
  <Url type="text/html" template="https://www.contoso.com/?key2search=
    {searchTerms}"/>  
  <Url type="application/x-suggestions+json" template="http://
  www.contoso.com/json.ashx? key2search ={searchTerms}"/>
  <Image height="16" width="16" type="image/icon">http://
    www.contoso.com/favicon.ico</Image>
</OpenSearchDescription>

リンクのタイトルはブラウザに表示される検索エンジンの名前です。非表示リンクの rel プロパティと type プロパティは、ここで示したように完全に同じ名前にする必要があります。検索プロバイダへのリンクであることをブラウザが認識する方法だからです。最後に、href 属性には OpenSearch description XML ファイルの URL が含まれます。

検索プロバイダの準備が完了したので、次は検索候補を追加しましょう。最初に、OpenSearch description XML ファイルを変更し、検索候補データ ソースを指定する必要があります。

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>Contoso Search</ShortName>
  <Url type="text/html" template="https://www.contoso.com/?key2search=
    {searchTerms}"/>  
  <Url type="application/x-suggestions+json" template="http://
  www.contoso.com/json.ashx? key2search ={searchTerms}"/>
  <Image height="16" width="16" type="image/icon">http://
    www.contoso.com/favicon.ico</Image>
</OpenSearchDescription>

ここで示しているように、前の検索プロバイダ記述ファイルに対して XML の 1 行を追加しました。別の type 値を指定した新しい URL タグです。検索候補機能を使用するために、ユーザーから提供された検索キーワードを評価して適切な候補リストを作成できるサービスが必要です。

リストは XML 形式または JSON 形式で提供できます。例では、JSON を使用して候補サービスへのポインタを追加しました。ただし、次の XML を使用することで、XML ベースのサービスを簡単に使用できます。

<Url type="application/x-suggestions+xml" template="http://
  www.contoso.com/xml.ashx? 
  key2search  ={searchTerms}"/>

XML と JSON のデータ ソースには重要な違いがあります。JSON データ ソースは、提案された結果、それぞれの結果に対する説明、および URL (必要な場合) を含む候補リストを提供できます。その例を次に示します。

["con",
["contoso soft", "contoso books", "contoso rent"],
["software company", "book store", "rent a car"],
["https://www.contoso.com/soft", "https://www.contoso.com/books", "https://www.contoso.com/rent"]]

fig10.gif

図 10 検索候補リストのサンプル

Internet Explorer 8 では、JSON データを実行中に取得して、オートコンプリート リストに即座に表示することができます。プロバイダから返すデータに検索キーワードが含まれている必要があることに注意してください。JSON の例の最初の要素には、検索キーワードである "con." が含まれています。

Internet Explorer の検索候補を提供するために XML 形式の使用を選択した場合は、結果リストのタイトルを選択し、結果を区切り記号で分割し、視覚的な候補を提供することもできます。

最初に、2 つの結果および 1 つの区切り記号のみを含む検索候補リストを提供します。図 9 内の XML 応答には、Query タグ内に送信されたキーワードが含まれ、Section タグ内に 2 つの Item が使用されています。Section タグにはタイトルが含まれ、各 Item 内に Text、Description、および移動先の Url があります。

図 9 検索候補の XML

<SearchSuggestion>
    <Query>con</Query>
    <Section title="First Section">
        <Item>
            <Text>Result 1</Text>
            <Description>Description 1</Description>
            <Url>https://www.contoso.com?id=1</Url>
        </Item>
        <Separator title="Others"/>
        <Item>
            <Text>Result 2</Text>
            <Description>Description 2</Description>
            <Url>https://www.contoso.com?id=2</Url>
        </Item>
    </Section>
</SearchSuggestion>

Separator タグを title と共に使用して、検索候補ボックスにさまざまな結果リストを提供できます。URL は、ユーザーがリスト内の項目をクリックするときに使用されます。図 10 は、Internet Explorer 8 で XML データがどのように表示されるかを示しています。

検索候補リストの従来の表示に加えて、ユーザー エクスペリエンスを向上させる画像を使用し、各候補に画像を提供することもできます。それには、該当する Item タグに Image タグを追加するだけです。

 

<Item>
<Text>Result 1</Text>
<Description>Description 1</Description>
<Url>https://www.contoso.com?id=1</Url>
<Image Source=https://www.contoso.com/image.jpg
    alt="A picture is worth thousand words" width="70"></Image>
</Item>

AJAX ナビゲーション

AJAX は、Rich Internet applications (RIA) の主要なコンポーネントの 1 つであり、HTML が使用される場合は必ず保持されます。各ユーザー アクションに対してページ全体の更新およびサーバー/クライアント サイクルを要求することなく、AJAX を使用して UI を更新できます。ただし、AJAX にも短所があります。

AJAX を使用して Web ページ コンテンツを変更した場合、アドレス バーが変更されません。これは理にかなっています。しかし、お気に入りに追加する場合など、ユーザーが現在のページの状態と整合性のある URL を必要とする場合はどうでしょうか。また、ユーザーがブラウザの [戻る] ボタンをクリックした場合はどうでしょうか。前にアクセスした Web サイトが表示されるでしょう。

何らかの形で、Web サイトを更新せずに URL の変更を反映する必要があります。フラグメント識別子を入力します。フラグメント識別子は、その名前が示すとおり、ページの一部の状態を識別します。

各 URL にフラグメント識別子を保持できます。(www.contoso.com/default.aspx\#5 のように) URL の末尾にポンド記号 (#) を追加するだけです。# 記号の後のコンテンツを変更すると、Web ページは更新されませんが、ブラウザの履歴ログに変更が記録され、前または次へ移動するナビゲーションが提供されます。

Internet Explorer 8 では、この機能は window.location.hash プロパティおよび新しい hashChanged イベントで提供されます。window.location.hash プロパティを変更するたびに、アドレス バーが更新され、hash プロパティのコンテンツで # 記号の後ろの部分が置き換えられます。ユーザーがブラウザ ボタンを使用して別の Web ページにアクセスしようとすると、hashChanged イベントが起動され、ターゲットの hash 値 (ターゲット ページの # 記号の後ろの値) が提供されます。

AJAX 呼び出しを提供するために WebMethod で簡単な Web サイトを作成してみましょう。このサンプル Web サイトには、HTML ボタンと DIV 要素が含まれます。HTML ボタンがクリックされるたびに、DIV 要素の数値のコンテンツが WebMethod に送信されます。

<form id="form1" runat="server">
    <asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" 
        runat="server">
    </asp:ScriptManager>
<div>
    <input id="Button1" onclick="GetNext();" type="button" value="button" />
    <div id="content">0</div>
</div>
</form>

サービスを呼び出すために、次の JavaScript を追加します。

function GetNext() {
    PageMethods.GetNext($get("content").innerHTML, Done);
}
function Done(sender) {
    $get("content").innerHTML = sender;
    window.location.hash = sender;
}

最後に、ページの分離コード ファイルに WebMethod を作成し、integer パラメータをインクリメントして AJAX 呼び出し元に返します。

<System.Web.Services.WebMethod()> _
Public Shared Function GetNext(ByVal x As Integer) As Integer
    Return x + 1
End Function

GetNext という JavaScript メソッドにより、サーバーへの XMLHttpRequest が作成されます。GetNext メソッドのパラメータは、DIV 要素のコンテンツおよびコールバック メソッドです。サービス応答の結果としてコールバック メソッドの Done が呼び出されると、新しい値が DIV 要素に返されます。

ここが興味深い点です。新しいコンテンツで Web ページを変更した後で、Web ページの現在の状態を識別するために window.location.hash プロパティに一意の識別子を割り当てます。この簡単な例では、その値は DIV 要素と同じ数値です。hash プロパティを変更した後で、ブラウザの履歴を確認すると、一覧に新しいエントリが表示されています。

ユーザーがブラウザの履歴の前のページまたは次のページに移動するたびに、onhashchange イベントを処理する JavaScript 関数に hash プロパティが渡されます。これは、次のコードを使用して行われます。

<body onhashchange="HashChanged();">

この関数は、ユーザーが前のページまたは次のページに移動するたびに呼び出されます。Internet Explorer 8 は、ブラウザの履歴の値に基づいて window.location.hash プロパティを更新します。これにより、hash 値の取得とページの更新を簡単に行うことができます。hash データ自体を使用したページの更新のような単純な操作であるか (次に示す例を参照)、または hash に格納された一意の識別子に基づいてサーバーのデータを要求するような操作であるかは関係ありません。

function HashChanged() {
    $get("content").innerHTML = window.location.hash;
}

DOM ストレージ

現在は、クライアントにデータを格納する必要がある場合は document.cookie を使用するという方法が定番であり、標準化された唯一の方法です。ただし、残念ながら今日のオンライン アプリケーションで使用するには柔軟性や能力が不十分な手法です。Cookie の重大な短所の 1 つは、4 KB という制限です。Internet Explorer 8 には、この問題を解決する機能があります。それが DOM ストレージです。

DOM ストレージは、HTML 5 草稿の一部であり、クライアント側に大きなデータストア (約 10 MB) を提供します。このストレージの容量が大きい理由は、Cookie と異なり、データが各要求と共にサーバーに送信されるわけではないためです。また、localStorage に有効期限がないこともその理由です。

DOM ストレージでのデータの格納と取得を行うために、必要なのはキーと値のペアのみです。localStorage JavaScript クラスは、DOM ストレージのすべての機能にアクセスするための setItem、getItem、および removeItem というメソッドを提供します。

function Save() {
    localStorage.setItem("MyItem", $get("Text1").value);
}
function Load() {
    $get("Text1").value = localStorage.getItem("MyItem");
}

このコードは、DOM Storage をバッキング ストアとして使用して、C# または Visual Basic での get プロパティおよび set プロパティと同等の動作を実行します。まず、Save 関数で MyItem というキー名を使用して TextBox 値を DOM ストレージに格納します。次に、Load 関数で同じキー名を指定して DOM ストレージのデータを取得します。

オフラインとオンラインの作業モード

各ユーザーのインターネットへの接続状態が正常であるかどうかを検出し、適切なレベルの機能を提供できる日が来ることを、多くの Web 開発者同様、私自身も待ち望んでいました。Internet Explorer 8 では、ホスト PC のインターネット接続の状態を window.navigator の onLine プロシージャで取得できます。従来、このプロパティはユーザーがオフライン作業を選択したかどうかを表していましたが、IE 8 では、現在のユーザーがネットワークへの接続を確立しているかどうかを示すようになりました。

onLine プロパティに加えて、Internet Explorer 8 では ononline および onoffline という 2 つの新しいコールバック ハンドラを使用できます (「ononline イベント」および「onoffline イベント」を参照)。onoffline ハンドラは、システムがネットワーク接続を失った場合に呼び出され、ononline ハンドラは接続が再開された場合に呼び出されます。イベント リスナをアタッチして接続状態についてすぐに通知を受け取るようにすることができます。これにより、オンライン機能とオフライン機能の両方を融合した環境をユーザーに提供できます。

図 11 に、Web ページ本体に定義された ononline イベントと onoffline イベントの簡単な使用例を示します。ユーザーがネットワークに接続するたびに、Online JavaScript メソッドが起動されます。同様に、ユーザーがネットワーク接続を解除するたびに、Offline メソッドが起動されます。

図 11 Ononline イベントと Onoffline イベントの使用

<html >
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        function Online() {
            alert("I'm online");
        }
        function Offline() {
            alert("I'm offline");
        }
    </script>
</head>
<body ononline="Online();" onoffline="Offline();">
    <form id="form1" runat="server">
    </form>
</body>
</html>

XMLHttpRequest のタイムアウト

Internet Explorer 8 の新しい XMLHttpRequest には、TimeOut プロパティおよび ontimeout イベントがあります。これにより、要求キュー内の 1 つの要求がタイムアウトすることで別の要求の処理が開始されるように XMLHttpRequest を定義できます。次のコードでは、新しい XmlHttpRequest を作成して、timeout プロパティおよび ontimeout イベント リスナを設定しています。

function GetAReqeust() {
    var MyRequest = XMLHttpRequest();
    MyRequest.ontmeout = TimeOutHere;
    MyRequest.open("GET","https://www.contoso.com/data.xml");
    MyRequest.timeout = 2000;
    MyRequest.send(null);
}
function TimeOutHere() {
    alert("Request to Contoso timed out!");
}

timeout 設定を定義する場合は、次の 2 つの規則に従う必要があります。timeout イベント リスナは要求を開く前にバインドし、timeout プロパティは要求を開いた後で設定します。

AJAX アプリケーションを設計するときの大きな問題の 1 つは、同一生成ポリシーに起因する、さまざまなリモート ドメインのサービスとの通信に関連する問題です。

いくつか回避策がありますが、要件を満たすものではありません。簡単で安全な通信の方法が必要です。Internet Explorer 8 は、XDomainRequest という新しいクライアント側のオブジェクトを提供します。このオブジェクトにより、開発者はサーバー側のプロキシの実装を求めることなく、リモート ドメインにアクセスできます。

リモート サーバーで Access-Control-Allow-Origin:* という Http ヘッダーを提供する場合、他のすべてのリモート サイトは現在の Web ページからのデータを要求できます。クライアント側での XDomainRequest オブジェクトの使用は、通常の XmlHttpRequest と同じです。

おわかりのとおり、Internet Explorer 8 には、Web 開発者が長い間対処に困っていた多くの問題を解決する機能が備わっています。コンテンツおよびサービスをさらに緊密にブラウザに統合する場合も、新しいブラウザ プラットフォーム サービスを活用して一体性を高めたユーザー操作環境を提供する場合も、Internet Explorer 8 のリッチでシームレスなユーザー エクスペリエンスを実現するためのツールが役立ちます。

Daron Yöndem は、トルコの Deveload Software の創設者です。彼は Microsoft Regional Director であり、ASP.NET の MVP です。また、INETA MEA Speaker Bureau でリーダーを務め、世界中で講演活動を行っています。ASP.NET AJAX に関する 2 冊の著作があります。