Dreamweaver でサーバーサイド XSL 変換を実行する方法について説明します。 XSLT ページを作成し、HTML を XSLT ページに変換します。
Dreamweaver 以降では、ユーザーインターフェイスが簡素化されています。 そのため、この記事で説明されているオプションの一部が Dreamweaver 以降には存在しない場合があります。 詳しくは、こちらの記事を参照してください。
サーバーサイド XSL 変形を実行するためのワークフロー
サーバーでサーバーサイド XSL 変換を実行することができます。XML データを表示するページを作成する前に、サーバーサイドおよびクライアントサイド XSL 変形について、また web ページでの XML と XSL の使用について読んでください。
サーバーは、サーバーサイド変換を実行するように正しく設定しておく必要があります。 詳しくは、サーバー管理者にご連絡ください。
サーバーサイド XSL 変形を実行するための一般的なワークフローは次のとおりです(各ステップは他のトピックで説明されています):
1.Dreamweaver サイトを設定します。
2.サーバーテクノロジーを選択し、アプリケーションサーバーを設定します。
3.アプリケーションサーバーをテストします。
たとえば、処理が必要なページを作成し、アプリケーションサーバーがページを処理することを確認します。
4.XSLT フラグメントまたはページを作成するか、HTML ページを XSLT ページに変換します。
Dreamweaver サイトで、XSLT フラグメントまたは完全な XSLT ページを作成します。
既存の HTML ページを XSLT ページ全体に変換します。
5.XML データソースをページに添付します。
6.データを XSLT フラグメントまたは完全な XSLT ページにバインドして XML データを表示します。
7.必要に応じて、XML データプレースホルダーを含むテーブルまたはテーブルの行にリピート領域 XSLT オブジェクトを追加します。
8.参照を挿入します。
動的ページに XSLT フラグメントへの参照を挿入するには、XSL 変換サーバービヘイビアーを使用します。
動的ページに完全な XSLT ページへの参照を挿入するには、動的ページからすべての HTML コードを削除してから、XSL 変換サーバービヘイビアーを使用します。
9.ページとフラグメントを投稿します。
動的ページと XSLT フラグメント(または完全な XSLT ページ)の両方をアプリケーションサーバーに送信します。ローカル XML ファイルを使用している場合は、それも投稿する必要があります。
10.ブラウザーで動的ページを表示します。
その際、アプリケーションサーバーがXMLデータを変換し、動的ページに挿入してブラウザーで表示します。
XSLT ページを作成する
WebページでXMLデータを表示することができるXSLTページを作成できます。完全な XSLT ページ(<body> タグと <head> タグを含む XSLT ページ)または XSLT フラグメントのいずれかを作成できます。XSLT フラグメントを作成する場合、本文や見出しタグを含まない独立したファイル(後で動的ページに挿入される単純なコード)を作成します。
既存の XSLT ページを使用して作成する場合、XML データソースをページに適用する必要があります。
XSLT(ページ全体)を選択して、完全なXSLTページを作成します。
XSLT フラグメントを作成する場合、「XSLT(フラグメント)」を選択します。
- 「コンピューターまたはローカルエリアネットワークにローカルファイルを添付」を選択し、「参照」ボタンをクリックしてコンピューター上にあるローカル XML ファイルを参照し、「OK」をクリックします。
- 「インターネット上のリモートファイルを添付」を選択し、インターネット上にある XML ファイル(RSS フィードのファイルなど)の URL を入力して「OK」をクリックします。
「キャンセル」ボタンをクリックすると、XML データソースが関連付けられていない、新しい XSLT ページが生成されます。
バインディングパネルに、XML データソースのスキーマの値が取り込まれます
次の表では、スキーマで表示される可能性のある様々なエレメントについて説明します。
Element |
表す内容 |
詳細 |
|---|---|---|
<> |
必須の非繰り返し XML エレメント |
親ノード内に 1 回のみ表示されるエレメント |
<>+ |
繰り返し XML エレメント |
親ノード内に 1 回以上表示されるエレメント |
<>+ |
オプションの XML エレメント |
親ノード内で 0 回以上表示されるエレメント |
太字のエレメントノード |
現在のコンテキストエレメント |
挿入ポイントがリピート領域内にある場合、通常は繰り返しエレメント |
@ |
XML 属性 |
|
HTML ページを XSLT ページに変換する
既存の HTML ページを XSLT ページに変換することもできます。たとえば、XML データを追加したい事前デザインされた 静的ページがある場合、ページをゼロから再デザインして XSLT ページを作成する代わりに、 ページを XSLT ページに変換できます。
ページのコピーがドキュメントウィンドウで開きます。 新しい ページは XSL スタイルシートで、.xsl 拡張子で保存されます。
XML データソースを適用する
既存の XSLT ページから開始する場合、または Dreamweaver で 新しい XSLT ページを作成するときに XML データソースを添付しない場合は、バインディングパネルを使用して XML データソースを添付する必要があります。
バインディングパネルの右上隅にある「ソース」リンクをクリックして、XML データソースを追加することもできます。
「ローカルファイルを添付」を選択し、「参照」 ボタンをクリックして、コンピューター上のローカル XML ファイルを参照し、「OK」をクリックします。
「リモートファイルを添付」を選択し、 インターネット上の XML ファイルの URL(RSS フィードからのものなど)を入力します。
バインディングパネルに XML データソースのスキーマが 表示されます。
XSLT ページで XML データを表示する
XSLT ページを作成して XML データソースを添付した後、データをページにバインドすることができます。これを行うには、ページに XML データプレースホルダーを追加し、XPath 式ビルダーまたはプロパティインスペクターを使用して、ページに表示される選択されたデータをフォーマットします。
ほとんどの場合、繰り返し領域 XSLT オブジェクトを使用して 繰り返し XML 要素をページに表示します。この場合、 1 つまたは複数の列を持つ単一行テーブル、またはテーブルヘッダーを含める場合は 2 行テーブルを作成することをお勧めします。
XML データ プレースホルダーがページに表示されます。プレースホルダーはハイライト表示され、 波括弧で囲まれています。XML スキーマの階層構造を記述するために XPath(XML パス言語)構文を 使用します。たとえば、 子要素 title をページにドラッグし、その 要素に親要素 rss、channel、item がある場合、 動的コンテンツプレースホルダーの構文は {rss/channel/item/title} になります。
ページ上の XML データプレースホルダーをダブルクリックして、XPath エクスプレッション ビルダーを開きます。XPath エクスプレッションビルダーを使用すると、選択されたデータをフォーマットしたり、 XML スキーマから他のアイテムを選択したりできます。
「ブラウザーでプレビュー」でプレビューすると、Dreamweaver ではアプリケーションサーバーを使用することなく、内部 XSL 変換が実行されます。
繰り返し XML エレメントを表示する
繰り返し領域 XSLT オブジェクトを使用すると、XML データソースの繰り返し要素を web ページに表示できます。例えば、ニュースフィードからアーティクルのタイトルと説明を表示する場合、そのニュースフィードに 10 ~ 20 個のアーティクルが含まれているとすると、XML ファイル内の各タイトルと説明は、繰り返し要素の子要素である可能性があります。
XML データプレースホルダーを含むデザインビューの任意の地域は、繰り返し地域に変更できます。ただし、最も一般的な領域は、テーブル、テーブルの行、または一連のテーブルの行です。
選択は、テーブル、テーブルの行、段落のテキストなど、何でも構いません。
ページの領域を正確に選択するには、ドキュメントウィンドウの左下隅にあるタグセレクターを使用します。 例えば、領域がテーブルである場合は、ページにあるテーブルの内側をクリックし、タグセレクターでタグをクリックします。
挿入 > XSLT オブジェクト > 繰り返し領域を選択します。
挿入パネルの XSLT カテゴリで、繰り返し領域ボタンをクリックします。
ドキュメントウィンドウで、繰り返し領域の周囲に細いタブ付きの灰色のアウトラインが表示されます。ブラウザーで作業をプレビューすると (ファイル/ブラウザーでプレビュー)、灰色のアウトラインが消え、選択が展開されて XML ファイル内の指定された繰り返し要素が表示されます。
繰り返し領域 XSLT オブジェクトをページに追加すると、ドキュメントウィンドウの XML データプレースホルダーが切り詰められます。これは、Dreamweaver が XML データプレースホルダーの XPath を切り詰めて、繰り返し要素のパスに相対的になるようにするためです。
リピート領域(XSL)プロパティを設定する
プロパティインスペクターで、別の XML ノードを選択して繰り返し領域を作成できます。
リピート領域 XSLT オブジェクトを編集する
繰り返し領域 XSLT オブジェクトを領域に追加した後、プロパティインスペクターを使用して編集できます。
動的ページに XSLT フラグメントを挿入
XSLT フラグメントを作成した後、XSL 変換サーバービヘイビアーを使用して動的 web ページに挿入できます。サーバービヘイビアーをページに追加してブラウザーでページを表示すると、アプリケーションサーバーが変換を実行し、選択した XSLT フラグメントの XML データが表示されます。Dreamweaver は、ColdFusion、ASP、または PHP ページの XSL 変形をサポートします。
XSLT ページ全体のコンテンツを動的ページに挿入する場合の手順はまったく同じです。 XSL 変換サーバービヘイビアーを使用して XSLT ページ全体を挿入する前に、動的ページからすべての HTML コードを削除します。
XSLT フラグメントを挿入する際は、ページに挿入ポイントを置いたら必ず「コードビューおよびデザインビューの表示」をクリックして、挿入ポイントが正しい位置にあることを確認します。 正しい位置にない場合は、コードビューの他の場所をクリックして挿入ポイントを目的の位置に合わせます。
Dreamweaver は、指定されたフラグメントに添付されている XML ファイルのファイルパスまたは URL を次のテキストフィールドに入力します。変更するには、「参照」ボタンをクリックし、別のファイルを参照してください。
また、サイトのルートフォルダーに includes/MM_XSLTransform/ フォルダーが作成され、ランタイムライブラリファイルが含まれます。アプリケーションサーバーは、このファイルで定義された機能を使用して変換を実行します。
ダイナミックページから XSLT フラグメントを削除する
フラグメントの挿入に使用された XSL Transformation サーバービヘイビアを削除することで、ページから XSLT フラグメントを削除できます。サーバービヘイビアを削除すると、XSLT フラグメントのみが削除されます。関連する XML、XSLT、またはランタイムライブラリファイルは削除されません。
必ずこの方法を使用してサーバービヘイビアーを削除する必要があります。 生成されたコードを手動で削除すると、サーバービヘイビアーパネルにサーバービヘイビアーが表示されない場合でも、サーバービヘイビアーの一部は削除されずに残ったままになります。
XSL Transformation サーバービヘイビアを編集する
ダイナミック web ページに XSLT フラグメントを追加した後、いつでも XSL Transformation サーバービヘイビアを編集できます。
動的リンクの作成
XSLT ページで、XML データから指定された単語または単語のグループをユーザーがクリックしたときに特定の URL にリンクするダイナミックリンクを作成することができます。詳細な手順については、www.adobe.com/go/dw_documentation の Dreamweaver 正誤表を参照してください。
XSLT フラグメントへのスタイルの適用
XSLT ページ全体(つまり、<body> と <head> タグを含む XSLT ページ)を作成する場合、ページに XML データを表示してから、プロパティインスペクターまたは CSS スタイルパネルを使用して他のコンテンツと同様にデータを書式設定することができます。ただし、ダイナミックページに挿入する XSLT フラグメント(たとえば、ASP、PHP、または Cold Fusion ページに挿入するフラグメント)を作成する場合、フラグメントとダイナミックページでのスタイルのレンダリングはより複雑になります。XSLT フラグメントはダイナミックページとは別に作業しますが、フラグメントはダイナミックページ内で使用することを意図しており、XSLT フラグメントからの出力は最終的にダイナミックページの <body> タグ内のどこかに配置されることを覚えておくことが重要です。このワークフローでは、XSLT フラグメントに <head> 要素(スタイル定義や外部スタイルシートへのリンクなど)を含めないようにすることが重要です。含めてしまうと、アプリケーションサーバーがこれらの要素を動的ページの <body> に配置し、無効なマークアップが生成されてしまいます。
例えば、動的ページに挿入する XSLT フラグメントを作成し、動的ページと同じ外部スタイルシートを使用してフラグメントを書式設定することができます。同じスタイルシートをフラグメントに添付すると、結果として生成される HTML ページには重複したスタイルシートへのリンクが含まれます(1 つは動的ページの <head> セクション、もう 1 つは XSLT フラグメントの内容が表示されるページの <body> セクションに配置されます)。このアプローチの代わりに、デザイン時スタイルシートを使用して外部スタイルシートを参照する必要があります。
XSLT フラグメントの内容をフォーマットするときは、次のワークフローを使用してください:
まず、動的ページに外部スタイルシートを適用します。 これは、どのような Web ページのコンテンツにスタイルを割り当てる場合でも最適な方法です。
次に、同じ外部スタイルシートを XSLT フラグメントにデザインタイムスタイルシートとして適用します。 名前が表すとおり、デザインタイムスタイルシートは Dreamweaver のデザインビューでのみ機能します。
前の 2 つの手順を完了した後は、動的ページに適用したのと同じスタイルシートを使用して、XSLT フラグメントで新しいスタイルを作成できます。 スタイルシートへの参照は Dreamweaver での作業中に限り有効なため、HTML 出力はより簡潔なものになり、フラグメントによってデザインビューに適切なスタイルが表示されます。 さらに、すべてのスタイルは、デザインビューで動的ページを表示するか、ブラウザーで動的ページをプレビューするときに、フラグメントと動的ページの両方に適用されます。
XSLT フラグメントをブラウザーでプレビューしても、ブラウザーではスタイルは表示されません。 動的ページをブラウザーでプレビューして、動的ページのコンテキスト内で XSLT フラグメントを表示してください。
XSL 変換でパラメーターを使用する
web ページに XSL 変換サーバービヘイビアーを追加するときに、XSL 変換のパラメーターを定義できます。パラメーターは XML データの処理と表示方法をコントロールします。例えば、パラメーターを使用してニュースフィードから特定の記事を識別してリスト表示することができます。ページがブラウザーで読み込まれると、パラメーターで指定したアーティクルのみが表示されます。
XSL 変換に XSLT パラメーターを追加する
静的な値を使用する場合は、値ボックスに値を入力します。
動的な値を使用する場合は、値ボックスの横にある動的アイコンをクリックし、動的データダイアログボックスに入力して、「OK」をクリックします。詳細については、動的データダイアログボックスのヘルプボタンをクリックしてください。
XSLT パラメーターを編集する
XSLT パラメーターを削除する
条件付き XSLT 領域の作成および編集
XSLT ページでは、単純な条件付き領域または複数の条件付き領域を作成できます。デザインビューで要素を選択して選択項目に条件付き領域を適用するか、ドキュメント内の挿入ポイントの位置に条件付き領域を挿入することができます。
例えば、アイテムが入手できない場合にアイテムの価格の横に「利用不可」という語を表示したい場合は、ページに「利用不可」というテキストを入力して選択し、選択したテキストに条件付き地域を適用します。Dreamweaver は選択範囲を <xsl:if> タグで囲み、データが条件式の条件と一致する場合にのみページに「Unavailable」という単語を表示します。
条件 XSLT 領域を適用する
XSLT ページに挿入する簡単な条件式を記述できます。条件領域ダイアログを開いたときにコンテンツが選択されている場合、そのコンテンツは <xsl:if> ブロックで囲まれます。コンテンツが選択されていない場合、<xsl:if> ブロックがページの挿入ポイントに追加されます。ダイアログを使って開始し、その後コード表示で式をカスタマイズするのがよいでしょう。
<xsl:if> 要素は他の言語の if 文と似ています。この要素は条件をテストし、結果に基づいて行動を決定する方法を提供します。<xsl:if> 要素では、単一の真または偽の値について式をテストできます。
次の例では、コンテキストノードの @available 属性値が true かどうかをテストします。
次のコードが XSLT ページに挿入されます。
<xsl:if test="@available='true'">
コンテンツをここに配置します
</xsl:if>
true などのストリング値は、二重引用符で囲む必要があります。 Dreamweaver は引用符を自動的にエンコード(')するため、有効な XHTML として入力されます。
ノードの値をテストすることに加えて、任意の条件文でサポートされている任意の XSLT 関数を使用できます。XML ファイル内で、現在のノードについて条件がテストされます。 次の例では、結果セットの最後のノードをテストします。
条件式の記述に関する詳細と例については、リファレンスパネルの <xsl:if> セクションを参照してください(ヘルプ > リファレンス)。
複数の条件 XSLT 地域を適用
XSLT ページに挿入する簡単な条件式を記述できます。条件領域ダイアログを開いたときにコンテンツが選択されている場合、そのコンテンツは <xsl:choose> ブロックで囲まれます。コンテンツを選択していない場合、<xsl:choose> ブロックがページの挿入ポイントに追加されます。ダイアログボックスを使って開始し、その後コードビューで式をカスタマイズするのがよいでしょう。
<xsl:choose> 要素は他の言語の case 文と似ています。この要素は条件をテストし、結果に基づいて行動を決定する方法を提供します。<xsl:choose> 要素では、複数の条件をテストできます。
次の例では、 コンテキストノードの price サブエレメントが 5 未満かどうかをテストします。
この例では、次のコードが XSLT ページに 挿入されます:
<xsl:choose>
<xsl:when test="price<5">
コンテンツをここに配置します
</xsl:when>
<xsl:otherwise>
コンテンツをここに配置します
</xsl:otherwise>
</xsl:choose>
条件を指定して「OK」をクリックすると、別の <xsl:when> タグが <xsl:choose> ブロックに挿入されます。
条件式の記述に関する詳細情報と例については、 リファレンスパネルの <xsl:choose> セクションを参照してください(ヘルプ/リファレンス)。
条件領域(If)プロパティを設定する
条件領域設定プロパティインスペクターの目的は、XSLページの条件領域で使用される条件を変更することです。条件領域は条件をテストし、 結果に基づいて動作します。
条件(When)プロパティの設定
条件領域設定プロパティインスペクターの目的は、XSLページの複数条件領域で使用される条件を変更することです。複数条件領域は 条件をテストし、結果に基づいて動作します。
XSL コメントを挿入する
XSL コメント タグをドキュメントに追加することも、選択範囲を XSL コメントタグで囲むこともできます。
ドキュメントに XSL コメントタグを追加する
デザインビューで、挿入/ XSLT オブジェクト/XSL コメントを選択し、コメントの 内容を入力して(または空白のままにして)「OK」をクリックします。
コードビューで、挿入/XSLT オブジェクト/ XSL コメントを選択します。
挿入パネルの XSLT カテゴリにある XSL コメント アイコンをクリックすることもできます。
選択範囲を XSL コメント タグで囲む
XPath Expression Builder を使用して XML データの式を追加します
XPath(XML Path Language)は、XML ドキュメントの一部をアドレス指定するための非 XML 構文です。これは主に XML データのクエリ言語として使用され、SQL 言語がデータベースのクエリに使用されるのと同様です。XPath の詳細については、W3C の Web サイト www.w3.org/TR/xpath にある XPath 言語仕様を参照してください。
XPath Expression Builder は、データの特定のノードを識別し、繰り返し領域用の簡単な XPath 式を作成できる Dreamweaver の機能です。XMLスキーマツリーから値をドラッグする代わりにこの方法を使用する利点は、表示される値をフォーマットできることです。現在のコンテキストは XPath Expression Builder ダイアログボックスが開かれたときの XSL ファイル内の挿入ポイントの位置に基づいて識別されます。 現在のコンテキストは、XML スキーマツリーで太字で表示されます。 このダイアログボックス内で選択を行うと、現在のコンテキストに相対的な正しい XPath ステートメントが生成されます。これにより 初心者と上級ユーザーの両方にとって正しい XPath 式を作成するプロセスが簡略化されます。
この機能は、特定のノードを識別する、またはリピート領域のための単純な XPath 式を作成できるように設計されています。 手動で式を編集することはできません。 複雑な式を作成する必要があるときは、最初に XPATH 式ビルダーを使って式を作成し、次にコードビュー内、またはプロパティインスペクターを使って式をカスタマイズします。
特定のノードを識別するXPath式を作成します。
ノードを識別するための正しい XPath 式が「式」ボックスに記述されます。
XML スキーマツリーで別のノードを選択すると、式は選択内容を反映して変更されます。
次の例では、item ノードの price サブエレメントを表示します:
この選択により、XSLT ページに次のコードが挿入されます:
<xsl:value-of select="price"/>
選択範囲のフォーマットは、ノードの値が数値を返す場合に便利です。Dreamweaver には、あらかじめ定義されたフォーマット関数のリストが用意されています。利用可能なフォーマット関数の完全なリストと例については、リファレンスパネルを参照してください。
次の例では、price サブエレメントを 小数点以下 2 桁の通貨としてフォーマットします:
これらの オプションにより、XSLT ページに次のコードが挿入されます:<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>
値を返すノードの選択に関する詳細と例については、リファレンスパネルの<xsl:value-of/>セクションを参照してください。
繰り返すノードを選択する
繰り返しを行うノードを選択し、必要に応じて結果をフィルタリングできます。XPath Expression Builderダイアログボックスで、選択したコンテンツは<xsl:for-each>ブロック内に囲まれます。コンテンツを選択していない場合、<xsl:for-each>ブロックはカーソルの挿入ポイントに入力されます。
ノードを識別するための正しいXPath式がExpressionボックスに書き込まれます。
繰り返しアイテムは、XMLスキーマツリー内でプラス(+)記号で識別されます。
次の例では、XMLファイル内の各itemノードを繰り返したいとします。
OKをクリックすると、次のコードがXSLTページに挿入されます:
<xsl:for-each select="provider/store/items/item">
コンテンツをここに配置します
</xsl:for-each>
場合によっては、繰り返しノードのサブセットで作業したいことがあります。たとえば、属性が特定の値を持つアイテムのみを対象にしたい場合などです。この場合、フィルターを作成する必要があります。
繰り返すデータをフィルター処理する
特定の属性値を持つ繰り返しノードを識別するためにフィルターを使用します。
フィルター条件
フィルタリングするデータを含む繰り返しノードを指定します。ポップアップメニューは、XMLスキーマツリーで選択したノードに対する先祖ノードのリストを提供します。
ここでは
結果を制限するために使用されるFilter Byノードの属性またはサブエレメントを指定します。ポップアップメニューから属性またはサブエレメントを選択するか、またはスキーマツリー内のより深い場所に存在する子要素を識別するために、このフィールドに独自のXPath式を入力できます。
演算子
フィルター式で使用する比較演算子を指定します。
Value
「フィルター条件」ノードで確認する値を指定します。 値を入力します。 XSLTページに動的パラメーターが定義されている場合は、ポップアップメニューから1つを選択できます。
値を入力するか、ポップアップメニューで選択を行うと、ExpressionボックスのXPath式が変更されます。
次の例では、@available属性の値がtrueであるitemノードに結果セットを制限します。
OKをクリックすると、次のコードがXSLTページに挿入されます:<xsl:for-each select="provider/store/items/item[@available = 'true']"> Content goes here </xsl:for-each>
true などのストリング値は二重引用符で囲む必要があります。 Dreamweaver では引用符をエンコードして(')、有効な XHTML として入力されるようにします。
フィルター条件の一部として親ノードを指定できる、より複雑なフィルターを作成できます。次の例では、結果セットを @id 属性が 1 に等しい web ストア の item ノードで、かつ item の price ノードが 5 より大きいものに制限します。
「OK」をクリックすると、次のコードが XSLT ページに挿入されます:<xsl:for-each select="provider/store[@id = 1]/items/item[price > 5]"> コンテンツをここに記述 </xsl:for-each>
繰り返し領域の詳細情報と例については、リファレンスパネルの <xsl:for-each> セクションを参照してください。