Silverlight をインストールするには、ここをクリックします*
Japan変更|すべてのMicrosoft のサイト|サインイン
MSDN
|MSDN ライブラリ|デベロッパー センター|ダウンロード情報|開発ツール製品|コミュニティ|ご意見・ご要望|サイトマップ
MSDN Home > 連載コラム > CODE CORNER > "DXML" in Action : サイトへの DHTML メニューおよび TOC の実装

"DXML" in Action : サイトへの DHTML メニューおよび TOC の実装

George Young
Microsoft Corporation

June 28, 1999
日本語版最終更新日 1999 年 11 月 24 日

サンプル コードのダウンロード この記事のサンプル コードのダウンロード

本記事は、Web 上で Extensible Markup Language (XML) と Extensible Stylesheet Language (XSL) を使用する方法ついて解説した連載シリーズの第 3 回目です。最初の記事では、XML ファイルを使用してサイトの目次 (TOC) 情報を保存する方法や、XSL、カスケード スタイル シート (CSS)、およびスクリプトを使用して DHTML TOC を出力する方法を解説しました。第 2 回目の記事では、最初の記事の場合と同じ XML によるデータを使用して 当社の Web サイト (microsoft.com) で使用されているような DHTML メニューを作成する方法を解説しました。前回の記事をまだ読んでいない方は、本記事に進む前に一読されることをお勧めします。

今月は、サイト上にメニューおよび TOC を実装するための手法をいくつかの異なるアプローチで解説します。次の 3 つのシナリオを例に、いくつかの実装およびアーキテクチャ上の問題を解決してみようと思います。

  1. フレーム内に XML を表示する
  2. ASP #include および、動的に生成した HTML を使用する
  3. ASP #include および、あらかじめ用意された HTML を使用する

出力された DHTML はどのようなブラウザでも表示することができますが、XSL が変換される場所にはすべて Internet Explorer 5 がインストールされている必要があることに注意してください。たとえば、上記の最初のシナリオのように XML をクライアントに送信する場合は、クライアント側に Internet Explorer 5 がインストールされている必要があります。上記の 2 番目および 3 番目のシナリオのようにサーバー上で XML を変換する場合は、サーバー側に Internet Explorer 5 をインストールしてXMLパーサーが利用できる状態になっている必要があります (注意 : Internet Explorer 5 全体ではなく、再配布可能な Microsoft XML パーサー (英語) のみをインストールすることもできます)。

シナリオ 1 : フレーム内に XML を表現する

イントラネットなど純粋な Internet Explorer 5 環境にある場合、ユーザーに出力を送信する最も簡単な方法は、Internet Explorer 5 の XML を直接ブラウズする機能を活用することでしょう。Internet Explorer 5 はスタイル シートを使用して直接 XML を表現できるため、明示的に XML を変換する必要はありません。XML の処理命令 (英語) に従って XSL スタイルシートを指定するだけで済みます。

最初のシナリオとして Microsoft® サイトで使用されている TOC を例にとってみましょう。TOC フレームには、次のように、TOC スタイル シートを参照する webdev.xml ファイルを含めます。

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="toc.xsl"?>

<TOPICLIST TYPE="Web Dev References">
  .
  .
  .
</TOPICLIST>

TOC フレーム自体は、次のようにフレームセット内に配置します。

<FRAMESET COLS="150,*">
  <FRAME NAME="fraToc" SRC="webdev.xml">
  <FRAME NAME="fraContent" SRC="home.htm">
<FRAMESET>

上記を表示するときに Internet Explorer 5 を使用すると、TOC をブラウズする XML のデモを表示することができます。

XML をブラウズする方法は、それを、サーバー上で変換する場合であっても、スタイル シートが適用された XML をユーザーに簡単に送信できるだけでなく、XSL スタイル シート (英語) を簡単にデバッグできるという利点を持つ、優れた方法です。Internet Explorer を使用すると、行番号やエラー タイプといったエラーに関するフィードバックを即座に入手することができます。

シナリオ 2 : ASP #include および、動的に生成した HTML を使用する

Internet Explorer 5 以外のブラウザにも対応したり、ドキュメント全体ではなく画面上部だけにメニューを配置するなど、HTML ドキュメントの一部を XML ドキュメントで構成したりしなければならないことがあります。ASP #include ディレクティブ は、HTML ドキュメントの一部を大きなドキュメントに挿入したり、多数のページにわたって共通コードを共有したりするときに有効な方法です。ASP #include ディレクティブは XML を利用できるように簡単に拡張できるため、#include ファイル内で XSL 変換を実行するだけで済みます。

#include ファイルは、XML ファイルと XSL ファイルの両方を読み込み、それらを HTML に変換し、HTML を ASP ドキュメントに書き換えます。メニューが含まれた ASP ドキュメントの形態は次のとおりです。

リスト 1 : ASP #includeおよび、動的に生成した HTML を使用した一般的な HTML ドキュメント テンプレート

<HTML>
<HEAD>
<TITLE>Dynamic ASP #include demo</TITLE>
</HEAD>
<BODY>
<!-- #include file="menus_dyn.inc" -->
<P>標準的なドキュメント コンテンツはここに配置されています。</P>
</BODY>
</HTML>

面倒な作業はインクルード ファイルに任せます。

リスト 2 : menus_dyn.inc

<% @LANGUAGE="JScript" %>
<%
  var sXml = "webdev.xml";
  var sXsl = "menus.xsl";
  
  var oXmlDoc = Server.CreateObject("Microsoft.XMLDOM");
  oXmlDoc.async = false;
  oXmlDoc.load(Server.MapPath(sXml));
  
  if (false != oXmlDoc.parseError) 
  {
    Response.Write('XML parseError on line ' + oXmlDoc.parseError.line);
    Response.End();
  }

  var oXslDoc = Server.CreateObject("Microsoft.XMLDOM");
  oXslDoc.async = false;
  oXslDoc.load(Server.MapPath(sXsl));

  if (false != oXslDoc.parseError) 
  {
    Response.Write('XSL parseError on line ' + oXslDoc.parseError.line);
    Response.End();
  }

  Response.Write(oXmlDoc.transformNode(oXslDoc));
%>

これで、前回の記事で説明したメニューをクロス ブラウザ形式に更新しました。したがって、どのブラウザでも、動的な #include デモを表示することができます。

シナリオ 3 : ASP #include および、あらかじめ用意された HTML を使用する

サーバーの負荷が大きい場合や、メニューを読み込むたびに XML オブジェクトを呼び出したくない場合は、3 番目の選択肢としてオフラインで変換を実行する方法があります。この場合、使用するコードは動的なインクルードの場合とほとんど同じです。

しかし、Response.Write を使用することにより要求に応じて HTML を出力するのではなく、Scripting.FileSystemObject オブジェクトを使用して、変換された HTML をファイルに保存できるという点が唯一の違いです。

リスト 3 : makemenus.asp

<% @LANGUAGE="JScript" %>
<%
  var sXml = "webdev.xml";
  var sXsl = "menus.xsl";
  
  var oXmlDoc = Server.CreateObject("Microsoft.XMLDOM");
  oXmlDoc.async = false;
  oXmlDoc.load(Server.MapPath(sXml));
  
  if (false != oXmlDoc.parseError) 
  {
    Response.Write('XML parseError on line ' + oXmlDoc.parseError.line);
    Response.End();
  }

  var oXslDoc = Server.CreateObject("Microsoft.XMLDOM");
  oXslDoc.async = false;
  oXslDoc.load(Server.MapPath(sXsl));

  if (false != oXslDoc.parseError) 
  {
    Response.Write('XSL parseError on line ' + oXslDoc.parseError.line);
    Response.End();
  }

  var sOutput = oXmlDoc.transformNode(oXslDoc);
  var sIncFileName = "menus_pre.inc";
  
  var oFS = Server.CreateObject("Scripting.FileSystemObject");
  var oIncFile = oFS.CreateTextFile(Server.MapPath(sIncFileName));
  oIncFile.Write(sOutput);
  oIncFile.Close();
  
  Response.Write('The include file <A HREF="' + sIncFileName + '">' 
    + sIncFileName + '</A> was successfully created.');
%>

ASP の Response ストリームに記述するのではなく、既に変換済みの Microsoft の HTML ファイルを持っているサーバー上に "静的" なファイルを実際に作成します。つまり、すべての XML 変換コードは、#include ファイル内に直接配置するのではなく、"ユーティリティ" ASP ページ内に配置します。これによって、インクルード ファイルが生成されます。

Web アプリケーションの構築プロセスを利用する場合はこの手法が適しています。menus.xml ファイルが更新されるたびに makemenus.asp を読み込んで、更新された #include ファイルを出力するだけの方法です。Visual Basic® アプリケーションでもこのアルゴリズムを使用して同様の作業を行うことができます。

シナリオ 2 の場合と同様に、Microsoft メニューを利用するすべてのドキュメントに、Microsoft の #include ファイルを追加します。

リスト 4 : "構築済み" #include による一般的な HTML ドキュメント テンプレート

<HTML>
<HEAD>
<TITLE>Dynamic ASP #include demo</TITLE>
</HEAD>
<BODY>
<!-- #include file="menus_pre.inc" -->
<P>標準的なドキュメント コンテンツはここに配置されています。</P>
</BODY>
</HTML>

ユーザーへの出力の内容はシナリオ 2 の場合とまったく同じですが、いずれの場合も、静的な #include デモを表示することができます。

上記の 3 つのシナリオのコードは、ソース コードに入っています。

George Young は、Internet Explorer チームの開発者であり、以前は Windows 2000、MSDN Online、および Site Builder Network サイトの開発を手がけました。余暇には、Windows Media Player でメキシコのラジオ局に耳を傾け、ニューオーリンズからワシントン州レドモンドへキャデラックで通勤しています。


Microsoft