ブラウザーでプレビューするページのタイプ
最終更新日 :
2024年4月25日
Dreamweaver Web ページで XML および XSLT を使用します。
メモ
Dreamweaver 以降では、ユーザーインターフェイスが簡素化されています。 そのため、この記事で説明されているオプションの一部が Dreamweaver 以降には存在しない場合があります。 詳しくは、こちらの記事を参照してください。
Web ページでの XML および XSL の使用
Extensible Markup Language（XML） は、情報を構造化できる言語です。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>タグは <mybooks>タグの子タグでもあり、 これはスキーマの1レベル上位にあります。XMLタグは、他のタグ内に適切にネストし、 各開始タグに対応する終了タグを割り当てる限り、 任意の方法で名前付けおよび構造化できます。
XMLドキュメント にはフォーマットが含まれていません。単に構造化された 情報のコンテナです。XMLスキーマができたら、Extensible Stylesheet Language（XSL）を使用して情報を表示できます。カスケーディングスタイルシート（CSS）が HTMLをフォーマットするのと同様に、XSLではXMLデータをフォーマットできます。XSLファイルでスタイル、 ページ要素、レイアウトなどを定義し、それを XMLファイルに添付することで、ユーザーがブラウザーでXMLデータを表示するときに、 XSLファイルで定義された内容に従ってデータがフォーマットされます。コンテンツ（XML データ）とプレゼンテーション（XSL ファイルで定義）は完全に分かれているため、web ページ上での情報の表示方法をより詳細にコントロールできます。基本的に、XSL は XML のプレゼンテーション技術であり、主な出力は HTML ページです。
Extensible Stylesheet Language Transformations（XSLT）は 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 フラグメントを作成し、他の動的ページと組み合わせて使用して XML データを表示することが、より一般的なシナリオです。
これらのタイプのページを作成する最初のステップは、XSLT フラグメントを作成することです。これは、最終的に動的ページに表示したい XML データのレイアウト、フォーマット設定などを含む独立したファイルです。XSLT フラグメントを作成したら、動的ページ（PHP または ColdFusion ページなど）にその参照を挿入します。挿入されたフラグメントへの参照は、Server Side Include（SSI）とよく似た働きをします。フォーマットされた XML データ（フラグメント）は別のファイルに格納され、デザインビューでは、フラグメントのプレースホルダーがダイナミックページ自体に表示されます。フラグメントへの参照を含むダイナミックページをブラウザーがリクエストすると、サーバーがインクルード命令を処理し、プレースホルダーの代わりにフラグメントのフォーマット済みコンテンツが表示される新しい文書を作成します。
A. ブラウザーが動的ページを要求する B. Webサーバーがページを見つけ、アプリケーションサーバーに渡します。 C. アプリケーションサーバーがページをスキャンして命令を探し、XSLT フラグメントを取得する D. アプリケーションサーバーが変換を実行する（XSLT フラグメントを読み取り、XML データを取得してフォーマットする） E. アプリケーションサーバーがフラグメントの変換結果をページに挿入し、そのページを Web サーバーに渡す F. Web サーバーが完成したページをブラウザーに送信する
XSL 変換サーバービヘイビアを使用して、ダイナミックページに XSLT フラグメントへの参照を挿入します。参照を挿入すると、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データを使用してクライアントサイド変換を実行するには、まずXMLソースファイルをXSLTページが配置されているのと同じディレクトリにダウンロードする必要があります。XMLページがローカルサイトにある場合、Dreamweaverを使用してXSLTページにリンクする適切なコードを追加し、両方のページ（ダウンロードしたXMLファイルとリンクされたXSLTページ）をwebサーバーに投稿できます。ユーザーがブラウザーでXMLページを表示すると、前の例と同様に、XSLTページがコンテンツをフォーマットします。
外部のソースから取得したXMLデータに対してクライアントサイド XSL変形を実行することの欠点は、XMLデータが部分的にしか「動的」でないことです。ダウンロードして変更するXMLファイルは、web上の他の場所にあるファイルの単なる「スナップショット」にすぎません。web上の元のXMLファイルが変更された場合、ファイルを再度ダウンロードし、XSLTページにリンクして、XMLファイルをwebサーバーに再アップロードする必要があります。ブラウザーは、元のXMLソースファイルに含まれるデータではなく、webサーバー上のXMLファイルから受信したデータのみをレンダリングします。
XML データと繰り返しエレメント
Repeating Region XSLTオブジェクトを使用すると、ページ内でXMLファイルの繰り返し要素を表示できます。XMLデータプレースホルダーを含む任意の地域は、繰り返し地域に変更できます。ただし、最も一般的な領域は、テーブル、テーブルの行、または一連のテーブルの行です。
次の例は、レストランのメニュー情報を表示するテーブルの行にRepeating Region XSLTオブジェクトを適用する方法を示しています。最初の行は、XMLスキーマの3つの異なる要素を表示します：item、description、price。Repeating Region XSLTオブジェクトがテーブルの行に適用され、ページがアプリケーションサーバーまたはブラウザーによって処理されると、テーブルは各新しいテーブルの行に一意のデータが挿入されて繰り返されます。
ドキュメントウィンドウ内の要素にRepeating Region XSLTオブジェクトを適用すると、繰り返し領域の周囲に細いタブ付きの灰色のアウトラインが表示されます。ブラウザーで作業をプレビューすると（ファイル > ブラウザーでプレビュー）、灰色のアウトラインが消え、選択が展開されて、前の図のようにXMLファイル内の指定された繰り返し要素が表示されます。
Repeating Region XSLTオブジェクトをページに追加すると、ドキュメントウィンドウ内のXMLデータプレースホルダーの長さが短縮されます。これは、DreamweaverがXMLデータプレースホルダーのXPath（XML Path language）式を更新し、繰り返し要素のパスに相対的になるためです。
例えば、次のコードは、Repeating Region 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>
次のコードは、Repeating Region 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は 繰り返し地域内にある項目（title & description）のXPathを、ドキュメント全体ではなく、囲んでいる<xsl:for-each>タグ内のXPathに対する相対パスに 更新しています。
Dreamweaverは他の場合でもコンテキスト相対 XPath式を生成します。例えば、XMLデータプレースホルダーを既に繰り返し 地域XSLTオブジェクトが適用されているテーブルにドラッグすると、Dreamweaverは自動的に 囲んでいる<xsl:for-each>タグ内の既存のXPathに対するXPathを表示します。
XML データのプレビュー
ブラウザーでプレビュー（ファイル > ブラウザーでプレビュー）を使用してXSLTフラグメントまたは完全なXSLTページに挿入したXMLデータをプレビューする場合、XSL変換を実行するエンジンは状況によって異なります。XSLTフラグメントを含む動的ページの場合、アプリケーションサーバーが常に変換を実行します。その他の場合は、Dreamweaverまたはブラウザーのいずれかが 変換を実行している可能性があります。
次の表は、ブラウザーでプレビューを使用する場合の状況と、それぞれの変換を実行するエンジンをまとめています：
|
|
データ変換を実行するエンジン |
|---|---|
|
XSLT フラグメントを含む動的ページ |
アプリケーションサーバー |
|
XSLT フラグメントまたは XSLT ページ全体 |
Dreamweaver |
|
XSLT ページ全体へのリンクが設定された XML ファイル |
ブラウザー |
次のトピックでは、ニーズに基づいて 適切なプレビュー方法を決定するのに役立つガイドラインを提供します。
サーバーサイド変換のためのページのプレビュー
サーバーサイド変換の場合、サイト訪問者が最終的に見るコンテンツは、アプリケーションサーバーによって変換されます。サーバーサイド変換で使用するXSLTおよび動的ページを構築する場合、XSLTフラグメント自体ではなく、XSLTフラグメントを含む動的ページをプレビューすることが常に望ましいです。前者の シナリオでは、アプリケーションサーバーを使用するため、サイト訪問者がページを訪問したときに見るものと 一貫したプレビューが保証されます。後者のシナリオでは、Dreamweaverが変換を実行するため、 若干一貫性のない結果が得られる可能性があります。XSLTフラグメントの作成中にDreamweaverを使用してプレビューできますが、XSLTフラグメントを挿入した後にアプリケーションサーバーを使用して動的ページをプレビューすると、データレンダリングの最も正確な 結果を見ることができます。
クライアントサイド変換のためのページのプレビュー
クライアントサイド変換の場合、サイト訪問者が 最終的に見るコンテンツはブラウザーによって変換されます。これは XMLファイルからXSLTページへのリンクを追加することで実現できます。XMLファイルをDreamweaverで開いて ブラウザーでプレビューすると、ブラウザーにXMLファイルを読み込ませて変換を実行させることができます。これにより、サイト訪問者と 同じエクスペリエンスが得られます。
ただし、このアプローチを使用すると、ブラウザーがXMLを変換してHTMLを内部的に生成するため、ページのデバッグがより困難になります。生成されたHTMLをデバッグするためにブラウザーのソース表示オプションを選択した場合、ページのレンダリングを担当する完全なHTML（タグ、スタイルなど）ではなく、ブラウザーが受信した元のXMLのみが表示されます。ソースコードを表示する際に完全なHTMLを確認するには、代わりにブラウザーでXSLTページをプレビューする必要があります。
XSLT ページ全体と XSLT フラグメントのプレビュー
完全なXSLTページとXSLTフラグメントを作成する際は、データが正しく表示されることを確認するために作業をプレビューする必要があります。ブラウザーでプレビューを使用して完全なXSLTページまたはXSLTフラグメントを表示する場合、Dreamweaverは組み込みの変換エンジンを使用して変換を実行します。この方法により迅速な結果が得られ、ページを段階的に作成してデバッグすることが容易になります。また、ブラウザーでソース表示オプションを選択することで、完全なHTML（タグ、スタイルなど）を表示する方法も提供されます。
メモ
このプレビュー方法は、クライアントまたはサーバーのどちらを使用してデータを変換するかに関係なく、XSLTページの作成を開始する際に一般的に使用されます。
