マニュアル キャンセル

Dreamweaver でのサーバーサイド XSL 変換の実行

  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 サイトのテスト

 

Dreamweaver でサーバーサイド XSL 変換を実行する方法について説明します。XSLT ページを作成し、HTML を XSLT ページに変換します。

注意:

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

サーバーサイド 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 ページを作成する

XML データを Web ページに表示するための XSLT ページを作成できます。<body> タグと <head> タグが含まれる完全な XSLT ページを作成するか、XSLT フラグメントを作成します。XSLT フラグメントを作成すると、body タグや head タグのない、後で動的ページに挿入されるコードの集まりから成る独立したファイルが作成されます。

注意:

既存の XSLT ページを使用して作成する場合、XML データソースをページに適用する必要があります。

  1. ファイル/新規を選択します。
  2. 新規ドキュメントダイアログボックスの「空白ページ」カテゴリーにあるページタイプ列から、次のいずれかを選択します。
    • XSLT ページ全体を作成する場合、「XSLT(ページ全体)」を選択します。

    • XSLT フラグメントを作成する場合、「XSLT(フラグメント)」を選択します。

  3. 「作成」をクリックし、XML ソースの指定ダイアログボックスで次のいずれかの操作を実行します。
    • 「コンピューターまたはローカルエリアネットワークにローカルファイルを添付」を選択し、「参照」ボタンをクリックしてコンピューター上にあるローカル XML ファイルを参照し、「OK」をクリックします。
    • 「インターネット上のリモートファイルを添付」を選択し、インターネット上にある XML ファイル(RSS フィードのファイルなど)の URL を入力して「OK」をクリックします。
    注意:

    「キャンセル」ボタンをクリックすると、XML データソースが関連付けられていない、新しい XSLT ページが生成されます。

    バインディングパネルに、XML データソースのスキーマの値が取り込まれます

    バインディングパネル

    次の表では、スキーマで表示される可能性のある様々なエレメントについて説明します。

    エレメント

    表す内容

    詳細

    <>

    必須の非繰り返し XML エレメント

    親ノード内に 1 回のみ表示されるエレメント

    <>+

    繰り返し XML エレメント

    親ノード内に 1 回以上表示されるエレメント

    <>+

    オプションの XML エレメント

    親ノード内で 0 回以上表示されるエレメント

    太字のエレメントノード

    現在のコンテキストエレメント

    挿入ポイントがリピート領域内にある場合、通常は繰り返しエレメント

    @

    XML 属性

     

     

  4. 新しいページを .xsl または .xslt(デフォルトは .xsl)という拡張子で保存します(ファイル/保存)。

HTML ページを XSLT ページに変換する

既存の HTML ページを XSLT ページに変換することができます。例えば、XML データを追加したい、あらかじめデザインされた静的ページがある場合、XSLT ページを作成し、最初からページを再デザインする代わりに、そのページを XSLT ページに変換できます。

  1. 変換する HTML ページを開きます。
  2. ファイル/変換/XSLT 1.0 を選択します。

    ページのコピーがドキュメントウィンドウで開きます。この新しいページは XSL スタイルシートであり、.xsl 拡張子を付けて保存されます。

XML データソースを適用する

既存の XSLT ページから開始する場合や、Dreamweaver を使用して新しい XSLT ページを作成する際に XML データソースを適用しない場合は、バインディングパネルを使用して XML データソースを適用する必要があります。

  1. バインディングパネル(ウィンドウ/バインディング)で「XML」リンクをクリックします。
    バインディングパネルで「XML」をクリックします

    注意:

    バインディングパネルの右上隅にある「ソース」リンクをクリックして、XML データソースを追加することもできます。

  2. 次のいずれかの操作を実行します。
    • 「コンピューターまたはローカルエリアネットワークにローカルファイルを添付」を選択し、「参照」ボタンをクリックしてコンピューター上にあるローカル XML ファイルを参照し、「OK」をクリックします。

    • 「インターネット上のリモートファイルを添付」を選択し、インターネット上にある XML ファイル(RSS フィードのファイルなど)の URL を入力します。

  3. 「OK」をクリックして XML ソースの指定ダイアログボックスを閉じます。

    バインディングパネルに、XML データソースのスキーマの値が取り込まれます。

XSLT ページで XML データを表示する

XSLT ページを作成し、XML データソースを適用したら、データをページにバインドできます。そのためには、ページに XML データプレースホルダーを追加し、XPATH 式ビルダーまたはプロパティインスペクターを使用して、ページに表示される選択したデータをフォーマットします。

  1. 適用した XML データソースと共に XSLT ページを開きます。
  2. (オプション)挿入/テーブルを選択し、テーブルをページに追加します。テーブルを使用して XML データを整理します。
    注意:

    一般的には、リピート領域 XSLT オブジェクトを使用して、繰り返し XML エレメントを 1 ページに表示します。その場合は、列が 1 列以上ある 1 行のテーブルを作成するか、テーブルヘッダーを含める場合は 2 行のテーブルを作成します。

  3. バインディングパネルで XML エレメントを選択し、ページのデータ挿入位置までドラッグします。
    バインディングパネルから XML エレメントを選択

    XML データプレースホルダーがページに表示されます。プレースホルダーがハイライト表示され、波カッコで囲まれます。ここでは、XML スキーマの階層構造を表すために、XPath(XML Path Language)のシンタックスが使用されます。例えば、子エレメント title をページにドラッグし、そのエレメントに親エレメント rsschannelitem がある場合、動的コンテンツプレースホルダーのシンタックスは {rss/channel/item/title} となります。

    ページで XML データプレースホルダーをダブルクリックし、XPATH 式ビルダーを開きます。XPATH 式ビルダーを使用すると、選択したデータをフォーマットするか、XML スキーマから他のアイテムを選択できます。

  4. (オプション)XML データプレースホルダーを選択し、プロパティインスペクターや CSS スタイルパネルを使用して他のコンテンツと同じようにスタイルを追加すると、XML データにスタイルを適用できます。また、デザインタイムスタイルシートを使用して XSLT フラグメントにスタイルを追加することもできます。これらの方法には、いずれも利点と制限事項があります。
  5. 作業結果をブラウザーでプレビューします(ファイル/ブラウザーでプレビュー)。
    注意:

    「ブラウザーでプレビュー」でプレビューすると、Dreamweaver ではアプリケーションサーバーを使用することなく、内部 XSL 変換が実行されます。

繰り返し XML エレメントを表示する

リピート領域 XSLT オブジェクトを使用すると、XML データソースの繰り返しエレメントを Web ページに表示できます。例えば、ニュースフィードにある記事のタイトルと説明を表示する場合で、そのニュースフィードに 10 ~ 20 の記事があるときは、多くの場合、XML ファイル内の各タイトルと記事内容は繰り返しエレメントの子エレメントです。

XML データプレースホルダーが含まれるデザインビューの領域は、リピート領域に変更することができます。ただし、通常はテーブル、テーブル行、または複数のテーブル行などをリピート領域にします。

  1. デザインビューで、XML データプレースホルダーが含まれる領域を選択します。

    テーブル、テーブルの行、テキストの段落など、任意の領域を選択できます。

    デザインビュー

    注意:

    ページの領域を正確に選択するには、ドキュメントウィンドウの左下隅にあるタグセレクターを使用します。例えば、領域がテーブルである場合は、ページにあるテーブルの内側をクリックし、タグセレクターでタグをクリックします。

  2. 次のいずれかの操作を実行します。
    • 挿入/XSLT オブジェクト/リピート領域を選択します。

    • 挿入パネルの「XSLT」カテゴリーで、「リピート領域」ボタンをクリックします。

  3. XPATH 式ビルダーで、小さいプラス「+」記号で表されている繰り返しエレメントを選択します。
    XPath Expression Builder

  4. 「OK」をクリックします。

    ドキュメントウィンドウでは、リピート領域は薄いグレーの枠線で囲まれます。ブラウザーでプレビューすると(ファイル/ブラウザーでプレビュー)、グレーの枠線が消え、選択範囲が拡張されて、XML ファイルにある指定した繰り返しエレメントが表示されます。

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

リピート領域(XSL)プロパティを設定する

プロパティインスペクターで別の XML ノードを選択し、リピート領域を作成することができます。

  1. 「選択」ボックスに新しいノードを入力して稲妻アイコンをクリックし、表示される XML スキーマツリーからノードを選択します。

リピート領域 XSLT オブジェクトを編集する

リピート領域 XSLT オブジェクトを領域に追加した後は、プロパティインスペクターを使用して編集できます。

  1. リピート領域を囲むグレーのタブをクリックしてオブジェクトを選択します。
  2. プロパティインスペクター(ウィンドウ/プロパティ)で、「選択」テキストフィールドの横にある動的アイコンをクリックします。
  3. XPATH 式ビルダーで変更を行い、「OK」をクリックします。

動的ページに XSLT フラグメントを挿入する

XSLT フラグメントを作成した後は、XSL 変換サーバービヘイビアーを使用して動的 Web ページに挿入できます。サーバービヘイビアーをページに追加してブラウザーでページを表示すると、選択した XSLT フラグメントの XML データを表示するための変換がアプリケーションサーバーで実行されます。Dreamweaver は、ColdFusion、ASP、PHP の各ページの XSL 変換をサポートしています。

注意:

XSLT ページ全体のコンテンツを動的ページに挿入する場合の手順はまったく同じです。XSL 変換サーバービヘイビアーを使用して XSLT ページ全体を挿入する前に、動的ページからすべての HTML コードを削除します。

  1. 既存の ColdFusion、ASP、または PHP ページを開きます。
  2. デザインビューで、XSLT フラグメントを挿入する位置に挿入ポイントを置きます。
    注意:

    XSLT フラグメントを挿入する際は、ページに挿入ポイントを置いたら必ず「コードビューおよびデザインビューの表示」をクリックして、挿入ポイントが正しい位置にあることを確認します。正しい位置にない場合は、コードビューの他の場所をクリックして挿入ポイントを目的の位置に合わせます。

  3. サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で、「+」ボタンをクリックし、「XSL 変換」を選択します。
    サーバービヘイビアーパネル

  4. XSL 変換ダイアログボックスで「参照」ボタンをクリックし、XSLT フラグメントまたは XSLT ページ全体を参照します。

    Dreamweaver により次のテキストフィールドに、指定したフラグメントに適用されている XML ファイルのファイルパスと URL が入力されます。これを変更するには、「参照」ボタンをクリックして別のファイルを参照します。

  5. (省略可能)「+」ボタンをクリックして、XSLT パラメーターを追加します。
  6. 「OK」をクリックして、XSLT フラグメントへの参照をページに挿入します。このフラグメントは編集できません。フラグメントを編集するには、フラグメントをダブルクリックしてフラグメントのソースファイルを開きます。

    ランタイムライブラリファイルを含むサイトのルートフォルダーに、includes¥MM_XSLTransform¥ フォルダーも作成されます。アプリケーションサーバーは、このファイルに定義された関数を使用して変換を実行します。

  7. 動的ページをサーバーにアップロード(サイト/PUT)し、「はい」をクリックして依存ファイルを含めます。ページを正しく表示するには、XSLT フラグメントを含むファイル、データを含む XML ファイル、および生成されたランタイムライブラリファイルは、すべてサーバー上にある必要があります。データソースとしてリモート XML ファイルを選択した場合、そのファイルはインターネット上の他の場所にある必要があります。

動的ページで XSLT フラグメントを削除する

ページから XSLT フラグメントを削除するには、フラグメントを挿入するのに使用した XSL 変換サーバービヘイビアーを削除します。サーバービヘイビアーを削除しても、XSLT フラグメントだけが削除され、関連付けられている XML ファイル、XSLT ファイル、またはランタイムライブラリファイルは削除されません。

  1. サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で、削除する XSL 変換サーバービヘイビアーを選択します。
  2. 「-」ボタンをクリックします。
    注意:

    必ずこの方法を使用してサーバービヘイビアーを削除する必要があります。生成されたコードを手動で削除すると、サーバービヘイビアーパネルにサーバービヘイビアーが表示されない場合でも、サーバービヘイビアーの一部は削除されずに残ったままになります。

XSL 変換サーバービヘイビアーを編集する

XSLT フラグメントを動的 Web ページに追加した後は、XSL 変換サーバービヘイビアーを随時編集することができます。

  1. サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で、編集する XSL 変換サーバービヘイビアーをダブルクリックします。
  2. 変更を加え、「OK」をクリックします。

動的リンクの作成

XSLT ページには、ユーザーが XML データ内の指定された単語または語句をクリックすると特定の URL にリンクする動的リンクを作成できます。詳しい手順については、www.adobe.com/go/dw_documentation_jp で Dreamweaver の正誤表を参照してください。

XSLT フラグメントへのスタイルの適用

完全な XSLT ページ(<body> タグと <head> タグを含む XSLT ページ)を作成する場合は、XML データをページに表示し、プロパティインスペクターまたは CSS スタイルパネルを使用して、他のコンテンツと同じようにデータをフォーマットできます。ただし、動的ページに挿入する XSLT フラグメント(例えば、SP、PHP、Cold Fusion ページに挿入するフラグメント)を作成する場合は、フラグメントのスタイルと動的ページのスタイルの表示が複雑になります。動的ページとは個別に XSLT フラグメントを操作できますが、フラグメントが動的ページ内で使用されること、および XSLT フラグメントの出力は最終的には動的ページの <body> タグ内に置かれるということに注意してください。このワークフローでは、<head> エレメント(スタイル定義や外部スタイルシートのリンクなど)が XSLT フラグメントに含まれていないことを確認してください。これらのエレメントが含まれていると、アプリケーションサーバーによってエレメントがダイナミックページの <body> に配置され、無効なマークアップが生成されます。

例えば、動的ページに挿入する XSLT フラグメントを作成し、動的ページと同じ外部スタイルシートを使用してフラグメントをフォーマットするとします。このスタイルシートをフラグメントに関連付ける場合、結果の HTML ページには、スタイルシートへの重複したリンク(動的ページの <head> セクションに 1 つと、XSLT フラグメントのコンテンツが表示されるページの <body> セクションに 1 つ)が設定されます。この方法の代わりに、デザインタイムスタイルシートを使用して外部スタイルシートを参照します。

XSLT フラグメントのコンテンツをフォーマットするには、次のワークフローを使用します。

  • まず、動的ページに外部スタイルシートを適用します。これは、どのような Web ページのコンテンツにスタイルを割り当てる場合でも最適な方法です。

  • 次に、同じ外部スタイルシートを XSLT フラグメントにデザインタイムスタイルシートとして適用します。名前が表すとおり、デザインタイムスタイルシートは Dreamweaver のデザインビューでのみ機能します。

    前の 2 つの手順を完了した後は、動的ページに適用したのと同じスタイルシートを使用して、XSLT フラグメントで新しいスタイルを作成できます。スタイルシートへの参照は Dreamweaver での作業中に限り有効なため、HTML 出力はより簡潔なものになり、フラグメントによってデザインビューに適切なスタイルが表示されます。さらに、すべてのスタイルは、デザインビューで動的ページを表示するか、ブラウザーで動的ページをプレビューするときに、フラグメントと動的ページの両方に適用されます。

注意:

XSLT フラグメントをブラウザーでプレビューしても、ブラウザーではスタイルは表示されません。動的ページをブラウザーでプレビューして、動的ページのコンテキスト内で XSLT フラグメントを表示してください。

XSL 変換でパラメーターを使用する

XSL 変換サーバービヘイビアーを Web ページに追加するとき、XSL 変換のパラメーターを定義できます。パラメーターにより、XML データの処理方法と表示方法が決まります。例えば、ニュースフィードの特定の記事を指定して一覧表示するパラメーターを使用することができます。ページがブラウザーに読み込まれると、パラメーターで指定した記事だけが表示されます。

XSLT パラメーターを XSL 変換に追加する

  1. XSL 変換ダイアログボックスを開きます。そのためには、サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で XSL 変換サーバービヘイビアーをダブルクリックするか、新規の XSL 変換サーバービヘイビアーを追加します。
  2. XSL 変換ダイアログボックスで、XSLT パラメーターの横にある「+」ボタンをクリックします。
    XSL 変換ダイアログボックス

  3. パラメーターの追加ダイアログボックスの「名前」ボックスに、パラメーターの名前を入力します。名前にはアルファベットだけが使用できます。スペースは使用できません。
  4. 次のいずれかの操作を実行します。
    • 静的な値を使用するには、「値」ボックスに入力します。

    • 動的な値を使用する場合は、「値」ボックスの横にある動的アイコンをクリックし、動的データダイアログボックスに入力して「OK」をクリックします。詳しくは、動的データダイアログボックスの「ヘルプ」ボタンをクリックしてください。

  5. 「初期設定値」ボックスから、ページでランタイム値が受信されない場合に使用するパラメーターの値を入力して「OK」をクリックします。

XSLT パラメーターを編集する

  1. XSL 変換ダイアログボックスを開きます。そのためには、サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で XSL 変換サーバービヘイビアーをダブルクリックするか、新規の XSL 変換サーバービヘイビアーを追加します。
  2. XSLT パラメーターリストからパラメーターを選択します。
  3. 「編集」ボタンをクリックします。
  4. 変更を加え、「OK」をクリックします。

XSLT パラメーターを削除する

  1. XSL 変換ダイアログボックスを開きます。そのためには、サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で XSL 変換サーバービヘイビアーをダブルクリックするか、新規の XSL 変換サーバービヘイビアーを追加します。
  2. XSLT パラメーターリストからパラメーターを選択します。
  3. 「-」ボタンをクリックします。

条件 XSLT 領域を作成および編集する

XSLT ページに簡単な条件領域または複数の条件領域を作成することができます。デザインビューでエレメントを選択して選択範囲に条件領域を適用するか、ドキュメントで挿入ポイントのある任意の場所に条件領域を挿入できます。

例えば、アイテムが入手できない場合に、そのアイテムの価格の横に「ご利用できません」と表示するときは、ページで「ご利用できません」と入力し、そのテキストを選択して、選択したテキストに条件領域を適用します。Dreamweaver によって選択範囲が <xsl:if> タグで囲まれ、データが条件式の条件に一致する場合のみ、このテキストがページに表示されます。

条件 XSLT 領域を適用する

XSLT ページに挿入する単純な条件式を作成できます。条件領域ダイアログボックスを開いたときにコンテンツが選択されている場合、そのコンテンツは <xsl:if> ブロックによって囲まれます。コンテンツが選択されていない場合は、ページの挿入ポイントに <xsl:if> ブロックが追加されます。最初にこのダイアログボックスを使って式を作成し、次にコードビューで式をカスタマイズすることをお勧めします。

<xsl:if> エレメントは、他の言語の if ステートメントに似ています。このエレメントにより、条件をテストし、その結果に基づいて操作を実行することができます。<xsl:if> エレメントを使用すると、単一の true または false 値の式をテストできます。

  1. 挿入/XSLT オブジェクト/条件領域を選択するか、挿入パネルの XLST カテゴリーにある条件領域アイコンをクリックします。
  2. 条件領域ダイアログボックスに、領域に使用する条件式を入力します。

    次の例では、コンテキストノードの @available 属性が true であるかどうかをテストします。

    条件領域ダイアログボックス

  3. 「OK」をクリックします。

    次のコードが XSLT ページに挿入されます。

    <xsl:if test="@available=&apos;true&apos;"> 
        Content goes here 
    </xsl:if>
    注意:

    true などのストリング値は、二重引用符で囲む必要があります。Dreamweaver によって二重引用符がエンコードされ(&apos;)、有効な XHTML として入力されます。

    値についてノードをテストすることに加えて、任意の条件ステートメントで、サポートされている任意の XSLT 関数を使用できます。XML ファイル内で、現在のノードについて条件がテストされます。次の例では、結果セットの最後のノードについてテストします。

    結果セットにおける最後のノードのテスト

    条件式の記述の詳細と例については、リファレンスパネルの「<xsl:if>」セクションを参照してください(ヘルプ/リファレンス)。

複数の条件 XSLT 領域を適用する

XSLT ページに挿入する単純な条件式を作成できます。条件領域ダイアログボックスを開いたときにコンテンツが選択されている場合、そのコンテンツは <xsl:choose> ブロックによって囲まれます。コンテンツが選択されていない場合は、ページの挿入ポイントに <xsl:choose> ブロックが追加されます。最初にこのダイアログボックスを使って式を作成し、次にコードビューで式をカスタマイズすることをお勧めします。

<xsl:choose> エレメントは、他の言語の case ステートメントに似ています。このエレメントにより、条件をテストし、その結果に基づいて操作を実行することができます。<xsl:choose> エレメントを使用すると、複数の条件についてテストできます。

  1. 挿入/XSLT オブジェクト/複数条件領域を選択するか、挿入パネルの XLST カテゴリーにある複数条件領域アイコンをクリックします。
  2. 複数条件領域ダイアログボックスに最初の条件を入力します。

    次の例では、コンテキストノードの price サブエレメントが 5 より小さいかどうかをテストします。

    複数条件領域ダイアログボックス

  3. 「OK」をクリックします。

    この例では、次のコードが XSLT ページに挿入されます。

    <xsl:choose> 
        <xsl:when test="price&lt;5"> 
            Content goes here 
        </xsl:when> 
        <xsl:otherwise> 
            Content goes here 
        </xsl:otherwise> 
    </xsl:choose>
  4. 他の条件を挿入するには、コードビューで <xsl:when> タグペアの間、または <xsl:otherwise> タグの直前に挿入ポイントを置き、条件領域を挿入します(挿入/XSLT オブジェクト/複数条件領域)。

    条件を指定して「OK」をクリックすると、別の <xsl:when> タグが <xsl:choose> ブロックに挿入されます。

    条件式の記述の詳細と例については、リファレンスパネルの「<xsl:choose>」セクションを参照してください(ヘルプ/リファレンス)。

条件領域(If)プロパティを設定する

この条件領域設定のプロパティインスペクターでは、XSL ページの条件領域で使用される条件を変更します。条件領域は条件をテストし、その結果に基づいて操作を実行します。

  1. 「テスト」ボックスに新しい条件を入力し、Enter キーを押します。

条件(When)プロパティの設定

この条件領域設定のプロパティインスペクターでは、XSL ページの複数の条件領域で使用される条件を変更します。複数の条件領域で条件がテストされ、その結果に基づいて操作が実行されます。

  1. 「テスト」ボックスに新しい条件を入力し、Enter キーを押します。

XSL コメントを挿入する

ドキュメントに XSL コメントタグを追加するか、選択範囲を XSL コメントタグで囲むことができます。

ドキュメントに XSL コメントタグを追加する

  1. 次のいずれかの操作を実行します。
    • デザインビューで挿入/XSLT オブジェクト/XSL コメントを選択し、コメントの内容を入力して(またはテキストボックスを空白のままにして)「OK」をクリックします。

    • コードビューで挿入/XSLT オブジェクト/XSL コメントを選択します。

    注意:

    挿入パネルの XSLT カテゴリーにあるXSL コメントアイコンをクリックすることもできます。

選択範囲を XSL コメントタグで囲む

  1. コードビューに切り替えます(表示/コード)。
  2. コメントするコードを選択します。
  3. コーディングツールバーで、「コメントの適用」ボタンをクリックし、「<xsl:comment></xsl:comment> コメントの適用」を選択します。

XPATH 式ビルダーを使用して XML データの式を追加する

XPath(XML Path Language)は、XML ドキュメントの一部に対応する非 XML シンタックスです。SQL 言語がデータベースのクエリーに使用されるように、ほとんどの場合、XPath は XML データのクエリー言語として使用されます。XPath について詳しくは、W3C Web サイト(www.w3.org/TR/xpath)の XPath 言語仕様を参照してください。

XPATH 式ビルダーは、データの特定のノードを識別し、領域を繰り返すための単純な XPath 式を作成できる Dreamweaver の機能です。XML スキーマツリーから値をドラッグする代わりにこの方法を使用する利点は、表示される値をフォーマットできることにあります。現在のコンテキストは、XPATH 式ビルダーダイアログボックスが開いたときの XSL ファイルの挿入ポイントの位置に基づいて識別されます。現在のコンテキストは、XML スキーマツリーで太字で表示されます。このダイアログボックス内で選択すると、現在のコンテキストに対して相対的な、正しい XPath ステートメントが生成されます。これにより、初級ユーザーおよび上級ユーザーにとって、正しい XPath 式を記述する処理が簡単になります。

注意:

この機能は、特定のノードを識別する、またはリピート領域のための単純な XPath 式を作成できるように設計されています。手動で式を編集することはできません。複雑な式を作成する必要があるときは、最初に XPATH 式ビルダーを使って式を作成し、次にコードビュー内、またはプロパティインスペクターを使って式をカスタマイズします。

特定のノードを識別する XPath 式を作成する

  1. ページで XML データプレースホルダーをダブルクリックし、XPATH 式ビルダーを開きます。
  2. XPATH 式ビルダー(動的テキスト)ダイアログボックスで、XML スキーマツリーの任意のノードを選択します。

    「式」ボックスで、ノードを識別するための正しい XPath 式が作成されます。

    注意:

    XML スキーマツリーで別のノードを選択すると、その選択を反映して式が変更されます。

    次の例では、price サブエレメント(item ノード)を表示します。

    XPATH Expression Builder(動的テキスト)ダイアログボックス

    この選択により、XSLT ページに次のコードが挿入されます。

    <xsl:value-of select="price"/>
  3. (オプション)フォーマットポップアップメニューからフォーマットオプションを選択します。

    ノードの値が数値を返す場合に、選択範囲のフォーマットが役立ちます。Dreamweaver には事前に定義されているフォーマット関数のリストが表示されます。使用できるフォーマット関数と例の詳細なリストについては、リファレンスパネルを参照してください。

    次の例では、price サブエレメントを小数点以下 2 桁の通貨としてフォーマットします。

    price サブエレメントを小数点以下 2 桁の通貨としてフォーマット

    これらのオプションは、XSLT ページに次のコードを挿入します。< xsl:value-select="format-number(provider/store/items/item/price,'$#.00') の"/>

    <xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>
  4. 「OK」をクリックします。
  5. XML ファイルで各ノードの値を表示するには、動的テキスト(HTML テーブル行や段落など)を含むエレメントにリピート領域を適用します。

    ノードの選択と戻り値の詳細と例については、リファレンスパネルの「<xsl:value-of/>」セクションを参照してください。

繰り返すノードを選択する

繰り返すノードを選択し、必要に応じて結果をフィルター処理できます。XPATH 式ビルダーダイアログボックス内では、選択したコンテンツが <xsl:for-each> ブロックによって囲まれます。コンテンツを選択していない場合、挿入ポイントに <xsl:for-each> ブロックが挿入されます。

  1. ページで XML データプレースホルダーをダブルクリックし、XPATH 式ビルダーを開きます。
  2. XPATH 式ビルダー(リピート領域)ダイアログボックスから、XML スキーマツリーで繰り返すアイテムを選択します。

    「式」ボックスで、ノードを識別するための正しい XPath 式が作成されます。

    注意:

    繰り返しアイテムは、XML スキーマツリーで「+」記号で表されます。

    次の例では、XML ファイル内で各 item ノードを繰り返します。

    XPATH Expression Builder(リピート領域)ダイアログボックス

    「OK」をクリックすると、次のコードが XSLT ページに挿入されます。

    <xsl:for-each select="provider/store/items/item"> 
     Content goes here 
    </xsl:for-each>

    場合によっては、繰り返しノードのサブセットを操作することがあります。例えば、属性に特定の値があるアイテムだけを操作するなどです。この場合は、フィルターを作成する必要があります。

繰り返すデータをフィルター処理する

特定の属性値を持つ繰り返しノードを識別するには、フィルターを使用します。

  1. XML スキーマツリーで、繰り返すノードを選択します。
  2. 「ビルドフィルター」ボタンをクリックします。
  3. 「+」ボタンをクリックして空のフィルターを作成します。
  4. 次のフィールドにフィルター条件を入力します。

    フィルター条件

    フィルター処理に使用するデータを含む繰り返しノードを指定します。ポップアップメニューには、XML スキーマツリーで選択したノードに対して相対的な祖先ノードのリストが表示されます。

    このシンタックスでは

    結果を絞り込むために使用する「フィルター条件」ノードの属性またはサブエレメントを指定します。このポップアップメニューから属性またはサブエレメントを選択するか、このフィールドに独自の XPath 式を入力して、スキーマツリーのより深い場所に存在する子を識別することができます。

    演算子

    フィルター式で使用する比較演算子を指定します。

    「フィルター条件」ノードで確認する値を指定します。値を入力します。XSLT ページに対して動的パラメーターが指定されている場合は、ポップアップメニューからパラメーターを選択できます。

  5. 別のフィルターを指定するには、もう一度「+」ボタンをクリックします。

    値を入力するか、ポップアップメニューで選択する場合、「式」ボックスの XPath 式が変更されます。

    次の例では、結果セットを item ノード(@available 属性の値が true となるもの)に制限します。

    結果セットを item ノード(@available 属性の値が true となるもの)に制限します

    「OK」をクリックすると、次のコードが XSLT ページに挿入されます。<xsl:for-each select="provider/store/items/item[@available = &apos;true&apos;]"> コンテンツをここに配置 </xsl:for-each>

    <xsl:for-each select="provider/store/items/item[@available = &apos;true&apos;]"> 
          Content goes here 
    </xsl:for-each>
    注意:

    true などのストリング値は二重引用符で囲む必要があります。Dreamweaver によって二重引用符がエンコードされ(&apos;)、有効な XHTML として入力されます。

    親ノードをフィルター条件の一部として指定できる、より複雑なフィルターを作成することができます。次の例では、結果セットを item ノード(store@id 属性が 1 で、itemprice ノードが 5 より大きいもの)に制限します。

    結果セットを item ノード(store の @id 属性が 1 で、item の price ノードが 5 より大きいもの)に制限します

    「OK」をクリックすると、次のコードが XSLT ページに挿入されます。<xsl:for-each select="provider/store[@id = 1]/items/item[price &gt; 5]"> コンテンツをここに配置 </xsl:for-each>

    リピート領域の詳細と例については、リファレンスパネルの「<xsl:for-each>」セクションを参照してください。

    <xsl:for-each select="provider/store[@id = 1]/items/item[price &gt; 5]"> 
        Content goes here 
    </xsl:for-each>
アドビのロゴ

アカウントにログイン