マニュアル キャンセル

ページへの動的コンテンツの追加

 

 

注意:

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

動的コンテンツの追加について

動的コンテンツのソースを定義すると、そのソースを使用してページに動的コンテンツを追加できます。コンテンツソースの内容として可能なものには、レコードセットの列、HTML フォームを使用して送信された値、サーバーオブジェクトに含まれている値およびその他のデータがあります。

Dreamweaver では、Web ページやその HTML ソースコードのほとんどすべての場所に動的コンテンツを配置できます。動的コンテンツを挿入ポイントに配置したり、テキストストリングを置き換えたりできる他、HTML 属性として挿入することもできます。例えば、動的コンテンツを使用して、イメージの src 属性やフォームフィールドの value 属性を定義することができます。

バインディングパネルでコンテンツのソースを選択して、ページに動的コンテンツを追加できます。Dreamweaver によってページのコードにサーバーサイドスクリプトが挿入されます。これは、ブラウザーからこのページが要求されたときに、コンテンツソースからページの HTML コードにデータを転送することをサーバーに指示するものです。

あるページエレメントを動的にする(ダイナミック化する)には、通常、複数の方法があります。例えば、イメージを動的にする場合は、バインディングパネル、プロパティインスペクター、または挿入メニューの「イメージ」コマンドを使用することができます。

初期設定では、HTML ページには一度に 1 レコードだけを表示できます。レコードセットの他のレコードを表示するには、一度に 1 つずつレコード間を移動するリンクを追加します。または、リピート領域を作成して、複数のレコードを同じページに表示します。

動的テキストについて

動的テキストには、既存のテキストまたは挿入ポイントに設定されているテキストフォーマットがすべて適用されます。例えば、選択したテキストに CSS(Cascading Style Sheet)スタイルが設定されている場合は、そのテキストを置き換える動的コンテンツにもそのスタイルが適用されます。動的コンテンツのテキストフォーマットは、Dreamweaver のテキストフォーマットツールを使用して追加または変更できます。

動的テキストには、データフォーマットを適用することもできます。例えば、データに日付が含まれている場合、米国のビジターには 04/17/00、カナダのビジターには 17/04/00 など、特定の日付フォーマットを指定することができます。

テキストを動的にする

既存のテキストを動的テキストで置き換えることも、動的テキストをページ上の特定の挿入ポイントに挿入することもできます。

動的テキストの追加

  1. デザインビューで、ページ上のテキストを選択するか、動的テキストを追加する場所をクリックします。
  2. バインディングパネル(ウィンドウ/バインディング)のリストからコンテンツソースを選択します。レコードセットを選択する場合は、レコードセット内の希望の列を指定します。

    コンテンツソースとして使用するのは、その内容がプレーンテキスト(ASCII テキスト)のものです。プレーンテキストには HTML も含まれます。リストにコンテンツソースがまったく表示されない場合や、表示されたコンテンツソースの中に要求を満たすものがない場合は、「+」ボタンをクリックして新しいコンテンツソースを定義します。

  3. (オプション)テキストのデータフォーマットを選択します。
  4. 「挿入」をクリックするか、コンテンツソースをページにドラッグします。

    動的コンテンツプレースホルダーが表示されます。ページ上のテキストが選択されている場合は、選択範囲がプレースホルダーで置換されます。レコードセットコンテンツを表すプレースホルダーのシンタックスは {RecordsetName.ColumnName} です。ここで、Recordset はレコードセットの名前、ColumnName はレコードセットから選択した列の名前です。

    動的テキストのプレースホルダーの長さによっては、ドキュメントウィンドウでのページのレイアウトが変形することがあります。この問題を解決するには、次のトピックで説明されているように、空の波カッコをプレースホルダーとして使用します。

動的テキストのプレースホルダーの表示

  1. 編集/環境設定/不可視エレメント(Windows)または Dreamweaver/環境設定/不可視エレメント(Mac OS)を選択します。
  2. 動的テキストの表示方法ポップアップメニューで { } を選択して、「OK」をクリックします。

イメージを動的にする

ページ上のイメージを動的にすることができます。例えば、チャリティオークションで販売する商品を表示するページをデザインするとします。1 ページに 1 つの商品の説明と写真を掲載します。ページの基本的なレイアウトは全商品に共通ですが、写真と説明は商品によって異なります。

  1. デザインビュー(表示/デザイン)でページを開き、イメージを表示する場所に挿入ポイントを置きます。
  2. 挿入/イメージを選択します。

    イメージソースの選択ダイアログボックスが表示されます。

  3. 「データソース」オプション(Windows)または「データソース」ボタン(Mac OS)をクリックします。

    コンテンツソースのリストが表示されます。

  4. リストからコンテンツソースを選択し、「OK」をクリックします。

    コンテンツソースは、イメージファイルへのパスを含むレコードセットであることが必要です。サイトのファイル構造によって、パスは絶対パス、ドキュメント相対パス、ルート相対パスのいずれかになります。

    注意:

    現在、Dreamweaver はデータベース内に格納されているバイナリイメージをサポートしていません。

    リストにレコードセットがまったく表示されない場合や、表示された中に必要なレコードセットがない場合は、新しいレコードセットを定義します。

HTML 属性を動的にする

HTML 属性をデータにバインドすることにより、ページの外観を動的に変更できます。例えば、テーブルの background 属性をレコードセットのフィールドにバインドすると、テーブルの背景イメージを変えることができます。

HTML 属性をバインドするには、バインディングパネルまたはプロパティインスペクターを使用します。

バインディングパネルを使用して HTML 属性を動的にする

  1. ウィンドウ/バインディングを選択し、バインディングパネルを開きます。
  2. バインディングパネルに、使用するデータソースが表示されていることを確認します。

    コンテンツソースには、バインドする HTML 属性に対して適切なデータが含まれている必要があります。リストにコンテンツソースがまったく表示されない場合や、表示されたコンテンツソースの中に要求を満たすものがない場合は、「+」ボタンをクリックして新しいコンテンツソースを定義します。

  3. デザインビューで、HTML オブジェクトを選択します。

    例えば、HTML テーブルを選択するには、テーブルの内側をクリックし、ドキュメントウィンドウの左下にあるタグセレクターで <table> タグをクリックします。

  4. バインディングパネルのリストからコンテンツソースを選択します。
  5. 「バインド先」ボックスのポップアップメニューで HTML 属性を選択します。
  6. 「バインド」をクリックします。

    次にアプリケーションサーバーでページが実行されるときは、このデータソースの値が HTML 属性に割り当てられます。

プロパティインスペクターを使用して HTML 属性を動的にする

  1. デザインビューで、HTML オブジェクトを選択し、プロパティインスペクターを開きます(ウィンドウ/プロパティ)。

    例えば、HTML テーブルを選択するには、テーブルの内側をクリックし、ドキュメントウィンドウの左下にあるタグセレクターで <table> タグをクリックします。

  2. 動的コンテンツソースを HTML 属性にバインドする方法は、動的コンテンツソースの位置によって異なります。
    • プロパティインスペクターで、バインドする属性の横にフォルダーアイコンが表示されている場合は、そのフォルダーアイコンをクリックするとファイル選択ダイアログボックスが表示されます。次に「データソース」オプションをクリックすると、データソースのリストが表示されます。

    • バインドする属性の横にフォルダーアイコンがない場合は、プロパティインスペクターの左側の「リスト」タブ(2 つあるタブのうち下のもの)をクリックしてください。

      プロパティインスペクターのリストビューが表示されます。

    • バインドする属性がリストビューに表示されていない場合は、「+」ボタンをクリックして属性名を入力するか、小さい矢印ボタンをクリックしてポップアップメニューから属性を選択します。

  3. 属性の値を動的にするには、属性をクリックして、稲妻アイコンをクリックするか、属性の行の最後にあるフォルダーアイコンをクリックします。

    稲妻アイコンをクリックした場合は、データソースのリストが表示されます。

    フォルダーアイコンをクリックした場合は、ファイル選択ダイアログボックスが表示されます。「データソース」オプションを選択して、コンテンツソースのリストを表示します。

  4. コンテンツソースのリストからコンテンツのソースを選択して、「OK」をクリックします。

    コンテンツソースには、バインドする HTML 属性に対して適切なデータが含まれている必要があります。リストにコンテンツソースがまったく表示されない場合や、表示されたコンテンツソースの中に要求を満たすものがない場合は、新しいコンテンツソースを定義します。

    次にアプリケーションサーバーでページが実行されるときは、このデータソースの値が HTML 属性に割り当てられます。

ActiveX、Flash およびその他のオブジェクトのパラメーターを動的にする

ActiveX、Flash、Shockwave、Director、および Generator オブジェクトのパラメーターだけでなく、Java アプレットやプラグインのパラメーターも動的にすることができます。

作業を始める前に、レコードセットのフィールドに、バインドするオブジェクトパラメーターに対して適切なデータが含まれていることを確認してください。

  1. デザインビューで、ページ上のオブジェクトを選択し、プロパティインスペクターを開きます(ウィンドウ/プロパティ)。
  2. 「パラメーター」ボタンをクリックします。
  3. 動的にするパラメーターがリストに表示されない場合は、「+」ボタンをクリックして「パラメーター」列にパラメーター名を入力します。
  4. パラメーターの「値」列をクリックし、稲妻アイコンをクリックして動的な値を指定します。

    データソースのリストが表示されます。

  5. リストからデータソースを選択し、「OK」をクリックします。

    データソースには、バインドするオブジェクトパラメーターに対して適切なデータが含まれている必要があります。リストにデータソースがまったく表示されない場合や、表示されたデータソースの中に要求を満たすものがない場合は、新しいデータソースを定義します。

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

新規ユーザーの場合