マニュアル キャンセル

XML および XSLT について

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト
  19. トラブルシューティング
    1. 修正された問題
    2. 既知の問題

 

 

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

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

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン