マニュアルキャンセル

XML および XSLT について

検索

最終更新日 : 2021年4月28日

Dreamweaver Web ページで XML および XSLT を使用します。

注意：

Dreamweaver CC 以降では、ユーザーインターフェイスが簡素化されています。そのため、この記事で説明されているオプションの一部が Dreamweaver CC 以降には存在しない場合があります。詳しくは、こちらの記事を参照してください。

Web ページでの XML および XSL の使用

XML（Extensible Markup Language）は、情報を構造化するための言語です。HTML と同様に、XML ではタグを使用して情報を構造化することができますが、XML タグは、HTML タグとは異なり、事前に定義されていません。その代わりに、XML では、自分のデータ構造（スキーマ）に適したタグを作成できます。タグの中にタグをネストして、親タグと子タグのスキーマを作成します。大半の HTML タグと同様に、XML スキーマのすべてのタグには開始タグと終了タグがあります。

次の例では、XML ファイルの基本構造を示します。

<?xml version=“1.0”> 
<mybooks> 
    <book bookid=“1”> 
        <pubdate>03/01/2004</pubdate> 
        <title>Displaying XML Data with Adobe Dreamweaver</title> 
        <author>Charles Brown</author> 
    </book> 
    <book bookid=“2”> 
        <pubdate>04/08/2004</pubdate> 
        <title>Understanding XML</title> 
        <author>John Thompson</author> 
    </book> 
</mybooks>

この例では、それぞれの親 <book> タグに 3 つの子タグ（<pubdate>、<title> および <author>）が含まれています。同時に、各 <book> タグは、スキーマの 1 レベル上位にある <mybooks> タグの子タグでもあります。XML タグは、タグのネストが適切であり、開始タグと終了タグが対応している限り、自由に名前を付けて構造化することができます。

XML ドキュメントには書式は含まれません。構造化された情報が含まれるだけです。XML スキーマを作成した後は、XSL（Extensible Stylesheet Language）を使用して情報を表示することができます。CSS（カスケーディングスタイルシート）で HTML をフォーマットするように、XSL で XML データをフォーマットします。XSL ファイルでスタイル、ページエレメント、レイアウトなどを定義して、それを XML ファイルに適用すると、ユーザーが XML データをブラウザーに表示するときに、XSL ファイルで定義した内容に基づいてデータがフォーマットされるようになります。コンテンツ（XML データ）とプレゼンテーション（XSL ファイルで定義したもの）は完全に分離されており、Web ページに情報を表示する際に自由な表現が可能になります。本質的に XSL は、HTML ページが基本的な出力である XML のプレゼンテーションテクノロジです。

XSLT（Extensible Stylesheet Language Transformations）は XSL のサブセット言語であり、XML データを実際に Web ページに表示し、XSL スタイルを使用して読みやすく整えられた HTML 形式に「変換」します。Dreamweaver を使用すると、アプリケーションサーバーやブラウザーを使用した XSL の変換が実行できる XSLT ページを作成できます。サーバーサイド XSL 変換では、サーバーで XML と XSL の変換が実行され、ページに表示されます。クライアントサイド変換では、ブラウザー（Internet Explorer など）で処理されます。

最終的に使用する方法（サーバーサイド変換またはクライアントサイド変換）は、最終的に求めている結果、利用可能なテクノロジ、XML ソースファイルへのアクセスレベルなどの要因によって決まります。いずれの方法にも、それぞれの利点と限界があります。例えば、サーバーサイド変換はすべてのブラウザーで機能しますが、クライアントサイド変換が機能するのは最近のブラウザー（Internet Explorer 6、Netscape 8、Mozilla 1.8、および Firefox 1.0.2）だけです。サーバーサイド変換では、自分のサーバーや Web 上の他の場所にある XML データを動的に表示することができますが、クライアントサイド変換では、自分の Web サーバーにあるローカルの XML データを使用する必要があります。最後に、サーバーサイド変換では、設定済みのアプリケーションサーバーにページを配置する必要がありますが、クライアントサイド変換で必要なのは Web サーバーへのアクセスだけです。

XML については、www.adobe.com/go/vid0165_jp を参照してください。

サーバーサイド XSL 変換

Dreamweaver では、サーバーサイド XSL 変換が実行できる XSLT ページを作成できます。アプリケーションサーバーが XSL 変換を実行する場合、XML データを含むファイルは、ユーザー独自のサーバーまたは Web 上の任意の場所に配置できます。さらに、変換されたデータは任意のブラウザーで表示できます。ただし、サーバーサイド変換でのページの配置はやや複雑であり、アプリケーションサーバーにアクセスできることが条件になります。

サーバーサイド XSL 変換を使用すると、Dreamweaver を使用して完全な HTML ドキュメント（XSLT ページ全体）を生成する XSLT ページ、または HTML ドキュメントの一部を生成する XSLT フラグメントを作成できます。XSLT ページ全体は一般の HTML ページと似ています。<body> タグと <head> タグがあり、HTML データと XML データを組み合わせてページに表示できます。XSLT フラグメントは、XML データをフォーマットして表示するためのコードの集まりで、別のドキュメントによって使用されます。これは、完全な XSLT ページとは異なる独立したファイルで、<body> タグや <head> タグは含まれません。XML データを独自のページに表示する場合は、XSLT ページ全体を作成して、そのページに XML データをバインドします。一方、XML データを既存の動的ページの特定のセクションに表示する場合（例えば、スポーツ用品店の動的ページの左側に RSS フィードからのスポーツ競技の得点を表示する場合）は、XSLT フラグメントを作成して、そのフラグメントへの参照を動的ページに挿入します。XSLT フラグメントを作成し、他の動的ページと共にそのフラグメントを使用することは、より一般的な手順です。

こうした種類のページを作成する最初の手順は、XSLT フラグメントを作成することです。これは、動的ページで最終的に表示する XML データのレイアウトやフォーマットなどが含まれた別個のファイルです。XSLT フラグメントを作成したら、そのフラグメントへの参照を動的ページ（PHP ページや ColdFusion ページなど）に挿入します。挿入したフラグメントへの参照は、サーバーサイドインクルード（SSI）と同じような機能を持ちます。フォーマットされた XML データ（フラグメント）は別のファイルに存在し、デザインビューでは、フラグメントのプレースホルダーが動的ページに表示されます。フラグメントへの参照のある動的ページがブラウザーで要求されると、サーバーで命令が実行され、プレースホルダーの代わりに、フラグメントのフォーマットされたコンテンツが表示される新しいドキュメントが作成されます。

A. ブラウザーが動的ページを要求する B. Web サーバーがページを検索してアプリケーションサーバーに渡す C. アプリケーションサーバーがページをスキャンして命令を探し、XSLT フラグメントを取得する D. アプリケーションサーバーが変換を実行する（XSLT フラグメントを読み取り、XML データを取得してフォーマットする） E. アプリケーションサーバーがフラグメントの変換結果をページに挿入し、そのページを Web サーバーに渡す F. Web サーバーが完成したページをブラウザーに送信する

XSLT フラグメントへの参照を動的ページに挿入するには、XSL 変換サーバービヘイビアーを使用します。参照を挿入すると、Dreamweaver により、ランタイムライブラリファイルが格納された includes/MM_XSLTransform/ フォルダーが、サイトのルートフォルダーに生成されます。アプリケーションサーバーは、指定された XML データを変換するときに、このファイルに定義されている関数を使用します。このファイルは、XML データと XSLT フラグメントを取得し、XSL 変換を実行して、結果を Web ページに出力します。

ページを正しく表示するには、XSLT フラグメントを含むファイル、データを含む XML ファイル、および生成されたランタイムライブラリファイルは、すべてサーバー上にある必要があります。データソースとしてリモート XML ファイル（RSS フィードのファイルなど）を選択した場合、そのファイルはインターネット上の他の場所にある必要があります。

Dreamweaver により、サーバーサイド変換で使用する XSLT ページ全体を作成することもできます。XSLT ページ全体が XSLT フラグメントとまったく同じように動作するのは、XSL 変換サーバービヘイビアーを使って XSLT ページ全体への参照を挿入し、HTML ページの完全なコンテンツを挿入するときだけです。そのため、動的ページ（コンテナページとして動作する .cfm、.php、または .asp ページ）では、参照を挿入する前にすべての HTML をクリアしておく必要があります。

Dreamweaver は、ColdFusion、ASP、PHP の各ページの XSL 変換をサポートしています。

注意：

サーバーは、サーバーサイド変換を実行するように正しく設定しておく必要があります。詳しくは、サーバー管理者にご連絡ください。

クライアントサイド XSL 変換

アプリケーションサーバーを使用せずに、クライアントで XSL 変換を実行することができます。Dreamweaver を使用して、XSL 変換を実行する XSLT ページ全体を作成できますが、クライアントサイド変換では、表示データが含まれる XML ファイルを操作する必要があります。さらに、クライアントサイド変換は、最新のブラウザー（Internet Explorer 6、Netscape 8、Mozilla 1.8、および Firefox 1.0.2）のみで動作します。

まず、XSLT ページ全体を作成して XML データソースを適用します（新規ページを作成する際に、Dreamweaver によってデータソースの適用が要求されます）。最初から XSLT ページを作成するか、既存の HTML ページを XSLT ページに変換することができます。既存の HTML ページを XSLT ページに変換するときは、バイディングパネル（ウィンドウ／バインディング）を使用して、XML データを適用する必要があります。

XSLT ページを作成したら、XSLT ページへの参照を XML ファイルに挿入し、XML データを含む XML ファイルに XSLT ページをリンクする必要があります。これは、HTML ページの <head> セクションに外部 CSS スタイルシートへの参照を挿入するのと同様です。サイトのビジターは、ブラウザーで、XSLT ページではなく XML ファイルを表示する必要があります。サイトのビジターがページを表示すると、ブラウザーで XSL 変換が実行され、リンクされた XSLT ページによってフォーマットされた XML データが表示されます。

リンクされた XSLT ページと XML ページの関係は、外部 CSS/HTML ページモデルと似ていますが、実際には異なります。テキストなどのコンテンツを含む HTML ページがある場合は、外部スタイルシートを使ってコンテンツをフォーマットします。HTML ページによってコンテンツが決まり、ユーザーには表示されない外部 CSS コードによって表示が決まります。XSLT および XML の場合、状況は逆になります。ユーザーにはそのままの形式で表示されない XML ファイルによってコンテンツが決まり、XSLT ページによって表示が決まります。XSLT ページには、通常は標準の HTML に含まれる、テーブル、レイアウト、グラフィックなどが含まれます。ユーザーがブラウザーで XML ファイルを表示すると、XSLT ページによってコンテンツがフォーマットされます。

A. ブラウザーが XML ファイルを要求する B. サーバーがブラウザーへの応答として XML ファイルを送信する C. ブラウザーが XML ディレクティブを読み取り、XSLT ファイルを呼び出す D. サーバーが XSLT ファイルをブラウザーに送信する E. ブラウザーが XML データを変換して表示する

Dreamweaver を使用して XSLT ページを XML ページにリンクすると、Dreamweaver により XML ページの先頭に適切なコードが挿入されます。リンク先の XML ページを自分が所有している場合（つまり XML ファイルが自分の Web サーバー上に排他的に存在する場合）、Dreamweaver を使用して、2 つのページをリンクする適切なコードを挿入するだけで済みます。XML ファイルを所有している場合、クライアントによって実行される XSL 変換は完全に動的になります。つまり、XML ファイルでデータを更新するたびに、リンクされた XSLT ページを使用する HTML 出力は、新しい情報で自動的に更新されます。

注意：

クライアントサイド変換に使用する XML ファイルと XSL ファイルは、同じディレクトリにある必要があります。同じディレクトリにない場合、ブラウザーは XML ファイルを読み取り、変換する XSLT ページを見つけますが、XSLT ページに相対リンクで定義されているアセット（スタイルシートやイメージなど）を見つけることができません。

リンク先の XML ページを自分が所有していない場合（例えば、Web 上の RSS フィードからの XML データを使用する場合）、ワークフローは少し複雑になります。外部ソースからの XML データを使ってクライアントサイド変換を実行する場合は、最初に、XSLT ページが存在するディレクトリに XML ソースファイルをダウンロードする必要があります。XML ページをローカルサイトにダウンロードしたら、Dreamweaver を使用して、そのページを XSLT ページにリンクする適切なコードを追加し、両方のページ（ダウンロードした XML ファイルおよびリンク先の XSLT ページ）を Web サーバーにポストできます。ユーザーがブラウザーで XML ページを表示すると、XSLT ページによって前述のようにコンテンツがフォーマットされます。

外部ソースからの XML データでクライアントサイド XSL 変換を実行する上での短所は、XML データが部分的にしか「動的」にならないということです。ダウンロードして変更する XML ファイルは、Web 上の他の場所にあるファイルの「スナップショット」にすぎません。Web 上にある元の XML ファイルが変更された場合は、ファイルを再度ダウンロードし、そのファイルを XSLT ページにリンクして、Web サーバーにファイルを再ポストする必要があります。ブラウザーは、元の XML ソースファイルに含まれたデータではなく、Web サーバー上の XML ファイルから受信したデータを表示するのみです。

XML データと繰り返しエレメント

リピート領域 XSLT オブジェクトを使用すると、XML ファイルの繰り返しエレメントをページ内に表示できます。XML データプレースホルダーが含まれる領域は、リピート領域に変換することができます。ただし、通常はテーブル、テーブル行、または複数のテーブル行などをリピート領域にします。

次の例では、レストランのメニューを表示するテーブル行にリピート領域 XSLT オブジェクトを適用する方法を示します。最初の行は、XML スキーマの 3 つの異なるエレメントであるアイテム、説明、価格を表示します。リピート領域 XSLT オブジェクトがテーブル行に適用され、ページがアプリケーションサーバーまたはブラウザーで処理されると、新しい各テーブルに一意のデータが挿入されてテーブル行が繰り返されます。

リピート領域 XSLT オブジェクトをドキュメントウィンドウでエレメントに適用すると、リピート領域は薄いグレーの枠線で囲まれます。上記の図のように、ブラウザーでプレビューすると（ファイル／ブラウザーでプレビュー）、グレーの枠線が消え、選択範囲が拡張されて、XML ファイルにある指定した繰り返しエレメントが表示されます。

リピート領域 XSLT オブジェクトをページに追加すると、ドキュメントウィンドウの XML データプレースホルダーの長さが切り捨てられます。これは、繰り返しエレメントのパスを基準にした相対パスになるように、Dreamweaver では XMLデータプレースホルダーの XPath（XML Path Language）式が更新されるためです。

例えば、次のコードは、テーブルにリピート領域 XSLT オブジェクトを適用せずに、2 つの動的プレースホルダーを含むテーブルを対象にしています。

<table width="500" border="1"> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/title"/></td> 
    </tr> 
    <tr> 
        <td><xsl:value-of select="rss/channel/item/description"/></td> 
    </tr> 
</table>

次のコードは、リピート領域 XSLT オブジェクトを適用した同じテーブルを対象としています。

<xsl:for-each select="rss/channel/item"> 
    <table width="500" border="1"> 
        <tr> 
            <td><xsl:value-of select="title"/></td> 
        </tr> 
        <tr> 
            <td><xsl:value-of select="description"/></td> 
        </tr> 
    </table> 
</xsl:for-each>

前述の例では、Dreamweaver により、完全なドキュメントではなく、<xsl:for-each> タグ間の XPath に対して相対的なリピート領域（title および description）内にある項目の XPath が更新されました。

その他の状況でも、Dreamweaver によってコンテキスト相対 XPath 式が生成されます。例えば、既にリピート領域 XSLT オブジェクトが適用されたテーブルに XML データプレースホルダーをドラッグすると、Dreamweaver により、<xsl:for-each> タグ内にある既存の XPath に対して相対的な XPath が自動的に表示されます。

XML データのプレビュー

「ブラウザーでプレビュー」（ファイル／ブラウザーでプレビュー）を使用して、XSLT フラグメントまたは XSLT ページ全体に挿入した XML データをプレビューする際に、XSL 変換を実行するエンジンは状況によって異なります。XSLT フラグメントを含む動的ページに対しては、アプリケーションサーバーが常に変換を実行します。Dreamweaver またはブラウザーによって変換が実行される場合もあります。

次の表では、「ブラウザーでプレビュー」を使用する状況と、変換を実行するエンジンを示します。

ブラウザーでプレビューするページのタイプ	データ変換を実行するエンジン
XSLT フラグメントを含む動的ページ	アプリケーションサーバー
XSLT フラグメントまたは XSLT ページ全体	Dreamweaver
XSLT ページ全体へのリンクが設定された XML ファイル	ブラウザー

以下のトピックでは、ニーズに応じて適切なプレビュー方法を判断するためのガイドラインを示します。

サーバーサイド変換のためのページのプレビュー

サーバーサイド変換の場合、最終的にサイトのビジターに表示されるコンテンツは、アプリケーションサーバーによって変換されます。サーバーサイド変換で使用する XSLT および動的ページを作成するときは、XSLT フラグメントそのものではなく、XSLT フラグメントを含む動的ページをプレビューすることを常にお勧めします。前の例では、ビジターに表示されるページとプレビューとの一貫性を保つために、アプリケーションサーバーを使用しました。後の例では、Dreamweaver によって変換を実行しましたが、結果に若干の不整合が生ずる可能性がありました。Dreamweaver により、作成中に XSLT フラグメントをプレビューできますが、XSLT フラグメントを挿入した後にアプリケーションサーバーを使用して動的ページをプレビューすると、データ表示の最も正確な結果を取得できます。

クライアントサイド変換のためのページのプレビュー

クライアントサイド変換の場合、最終的にサイトのビジターに表示されるコンテンツは、ブラウザーによって変換されます。このためには、XML ファイルから XSLT ページにリンクを追加します。Dreamweaver で XML ファイルを開き、ブラウザーでプレビューすると、ブラウザーで強制的に XML ファイルが読み込まれ、変換されます。これにより、サイトのビジターと同じ体験をすることができます。

ただし、この方法を使用すると、ブラウザーにより XML が変換され、HTML が内部的に生成されるため、ページのデバッグが困難になります。ブラウザーのソースを表示するオプションを選択して、生成された HTML をデバッグする場合、ページを表示する完全な HTML（タグ、スタイルなど）ではなく、ブラウザーが受け取った元の XML のみが表示されます。ソースコードを表示するときに完全な HTML を表示するには、代わりにブラウザーで XSLT ページをプレビューする必要があります。

XSLT ページ全体と XSLT フラグメントのプレビュー

XSLT ページ全体と XSLT フラグメントを作成するときは、作業をプレビューして、データが正しく表示されるかどうか確認することをお勧めします。「ブラウザーでプレビュー」を使用して XSLT ページ全体または XSLT フラグメントを表示する場合、Dreamweaver では組み込み変換エンジンを使って変換が実行されます。この方法により、素早く結果を得て、ページの作成とデバッグを徐々に行うのが簡単になります。また、ブラウザーでソースを表示するオプションを選択することで、完全な HTML（タグ、スタイルなど）を表示する方法が得られます。

注意：

このプレビュー方法は、クライアントとサーバーのどちらを使用してデータを変換するかに関係なく、XSLT ページの作成を開始するときに一般的に使用されます。

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る