マニュアル キャンセル

Dreamweaver でのマスターページと詳細ページの作成

 

 

注意:

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

マスターページと詳細ページについて

マスターページと詳細ページは、レコードセットデータの整理と表示に使用される一連のページです。これらのページに、サイトの概要情報と詳細情報の両方を表示できます。マスターページには、すべてのレコードの一覧が表示され、各レコードの追加情報を表示する詳細ページへのリンクも掲載されます。

マスターページ

詳細ページ

マスターページと詳細ページを作成するには、データオブジェクトを挿入してマスターページと詳細ページを一度に作成する方法か、サーバービヘイビアーを使用してマスターページと詳細ページをカスタマイズしながら作成していく方法があります。サーバービヘイビアーを使用してマスターページと詳細ページを作成する場合は、まずマスターページを作成してレコードの一覧を用意し、この一覧から詳細ページへのリンクを追加します。

マスターページの作成

作業を開始する前に、サイトのデータベース接続を定義してください。

  1. 空のページを作成するには、ファイル/新規/空白ページを選択し、ページタイプを選択して「作成」をクリックします。このページがマスターページになります。
  2. レコードセットを定義します。

    バインディングパネル(ウィンドウ/バインディング)で、+ ボタンをクリックして「レコードセット」を選択します。SQL ステートメントを自分で記述する場合は、「詳細設定」をクリックします。

    レコードセットには、マスターページの作成に必要なテーブル列をすべて含めてください。また、レコードセットには、各レコードのユニークキーを含むテーブル列、つまりレコード ID 列も含まれている必要があります。次の例では、CODE 列に、各レコードに固有のキーが含まれます。

    マスターページの選択したレコードセットの列

    通常、マスターページのレコードセットは、データベーステーブルから数列を抽出します。一方、詳細ページのレコードセットは、詳細な情報を提供するため、同じテーブルからそれより多くの列を抽出します。

    レコードセットは、実行時にユーザー側で定義することができます。詳しくは、検索ページと結果ページの作成を参照してください。

  3. レコードを表示するための動的テーブルを挿入します。

    動的テーブルを表示するページ上の位置に挿入ポイントを配置します。挿入/データオブジェクト/動的データ/動的テーブルを選択し、オプションを設定して「OK」をクリックします。

    サイト上にレコード ID を表示しない場合は、動的テーブルからその列を削除します。ページ内の任意の場所をクリックして、フォーカスをページに移動します。動的テーブル内の列の上部にカーソルを移動して、列のセルの外枠が赤くなったら、クリックしてその列を選択します。Delete キーを押して、テーブルからその列を削除します。

マスターページを作成し、レコードセットを追加した後で、詳細ページを開くためのリンクを作成します。その後で、ユーザーが選択したレコードの ID を渡すようにリンクを修正します。詳細ページでは、この ID を使用して、要求されたレコードをデータベース内で検索し、その結果を表示します。

注意:

ページを更新するリンクも同じ手順で作成します。結果ページはマスターページに、更新ページは詳細ページに似ています。

詳細ページを開きレコード ID を渡す(ColdFusion、PHP)

  1. 動的テーブル内で、リンクとして表示するテキストのコンテンツプレースホルダーを選択します。
    選択したプレースホルダーへのリンクの適用

  2. プロパティインスペクターの「リンク」ボックスの横にあるフォルダーアイコンをクリックします。
  3. 詳細ページに移動して、選択します。詳細ページがプロパティインスペクターの「リンク」ボックス内に表示されます。

    動的テーブルで、選択したテキストがリンクされた状態で表示されます。サーバーでページが実行されると、リンクが各テーブル行内のテキストに適用されます。

  4. マスターページの動的テーブル内のリンクを選択します。
  5. (ColdFusion)プロパティインスペクターの「リンク」ボックスで、URL の末尾に次のストリングを追加します。
    ?recordID=#recordsetName.fieldName#
    ?recordID=#recordsetName.fieldName#
    ?recordID=#recordsetName.fieldName#

    疑問符は、後に URL パラメーターが続いていることをサーバーに示します。recordID という単語は、URL パラメーターの名前です(好きな名前を指定できます)。この URL パラメーターの名前は後で詳細ページで使用するため、覚えておく必要があります。

    等号の後の式は、パラメーターの値です。この例では、レコードセットからのレコード ID を返す ColdFusion の式で生成された値です。動的テーブル内の行ごとに異なる ID が生成されます。ColdFusion の式の中の recordsetName を、使用するレコードセットの名前で置き換え、fieldName を、各レコードを一意に識別するレコードセット内のフィールドの名前で置き換えます。ほとんどの場合、フィールドはレコード ID 番号で構成されます。次の例では、フィールドは一意の場所コードで構成されています。

    locationDetail.cfm?recordID=#rsLocations.CODE#
    locationDetail.cfm?recordID=#rsLocations.CODE#
    locationDetail.cfm?recordID=#rsLocations.CODE#

    ページを実行すると、コードセットの CODE フィールドの値が、動的テーブル内の対応する行に挿入されます。例えば、オーストラリア、キャンベラのレンタル営業所の場所コードが CBR の場合、動的テーブル内のキャンベラ営業所の行では次の URL が使用されます。

    locationDetail.cfm?recordID=CBR
    locationDetail.cfm?recordID=CBR
    locationDetail.cfm?recordID=CBR
  6. (PHP)プロパティインスペクターの「リンク」フィールドで、URL の末尾に次のストリングを追加します。
    ?recordID=<?php echo $row_recordsetName['fieldName']; ?>
    ?recordID=<?php echo $row_recordsetName['fieldName']; ?>
    ?recordID=<?php echo $row_recordsetName['fieldName']; ?>

    疑問符は、後に URL パラメーターが続いていることをサーバーに示します。recordID という単語は、URL パラメーターの名前です。ここには好きな名前を指定できます。この URL パラメーターの名前は後で詳細ページで使用するため、覚えておく必要があります。

    等号の後の式は、パラメーターの値です。この例では、レコードセットからのレコード ID を返す PHP の式で生成された値です。動的テーブル内の行ごとに異なる ID が生成されます。PHP の式の中の recordsetName を、使用するレコードセットの名前で置き換え、fieldName を、各レコードを一意に識別するレコードセット内のフィールドの名前で置き換えます。ほとんどの場合、フィールドはレコード ID 番号で構成されます。次の例では、フィールドは一意の場所コードで構成されています。

    locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
    locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
    locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>

    ページを実行すると、コードセットの CODE フィールドの値が、動的テーブル内の対応する行に挿入されます。例えば、オーストラリア、キャンベラのレンタル営業所の場所コードが CBR の場合、動的テーブル内のキャンベラ営業所の行では次の URL が使用されます。

    locationDetail.php?recordID=CBR
    locationDetail.php?recordID=CBR
    locationDetail.php?recordID=CBR
  7. ページを保存します。

詳細ページを開きレコード ID を渡す(ASP)

  1. リンク機能を割り当てる動的コンテンツを選択します。
  2. サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で「+」ボタンをクリックし、ポップアップメニューから「詳細ページへ移動」を選択します。
  3. 「詳細ページ」ボックスで「参照」をクリックし、詳細ページを指定します。
  4. レコードセットおよび列ポップアップメニューでレコードセットと列を選択し、詳細ページに渡す値を指定します。通常、レコードのユニークキー ID など、レコードに固有の値を指定します。
  5. 必要に応じて、「URL パラメーター」または「フォームパラメーター」オプションを選択して、既存のページのパラメーターを詳細ページに渡します。
  6. 「OK」をクリックします。

    選択したテキストの周りに特別なリンクが設定されます。ビジターがリンクをクリックすると、「詳細ページへ移動」サーバービヘイビアーによって、レコード ID を含む URL パラメーターが詳細ページに渡されます。例えば、URL パラメーターが id で、リンク先の詳細ページが customerdetail.asp の場合、ビジターがリンクをクリックしたときの URL は以下のようになります。

    http://www.mysite.com/customerdetail.asp?id=43

    URL の最初の部分 http://www.mysite.com/customerdetail.asp は詳細ページを開きます。次の部分 ?id=43 は URL パラメーターです。これは、詳細ページにどのレコードを検索して表示するかを示しています。id は URL パラメーターの名前であり、43 はその値です。この例では、URL パラメーターにはレコードの ID 番号 43 が含まれています。

要求したレコードの検索と詳細ページへの表示

マスターページで要求されたレコードを表示するためには、単一のレコードを保持するレコードセットを定義し、そのレコードセットの列を詳細ページにバインドする必要があります。

  1. 詳細ページに切り替えます。詳細ページをまだ作成していない場合は、空のページを作成します(ファイル/新規)。
  2. バインディングパネル(ウィンドウ/バインディング)で「+」ボタンをクリックし、ポップアップメニューから「レコードセット(クエリー)または「データセット(クエリー)」を選択します。

    基本設定のレコードセットダイアログボックスまたはデータセットダイアログボックスが表示されます。詳細設定のダイアログボックスが表示された場合は、「基本設定」をクリックします。

  3. レコードセットの名前を指定し、データソースと、レコードセットにデータを提供するデータベーステーブルを選択します。
  4. 「列」領域で、レコードセットに含めるテーブル列を選択します。

    レコードセットは、マスターページのレコードセットと同一でも、異なっていてもかまいません。通常、詳細ページのレコードセットには、詳細な情報を表示するためにより多くの列が含まれます。

    レコードセットが異なる場合、詳細ページのレコードセットにマスターページ上のレコードセットと共通の列が少なくとも 1 つ含まれていることを確認してください。通常はレコード ID 列が共通ですが、関連テーブルの結合フィールドでもかまいません。

    テーブルの特定の列だけをレコードセットに含めるには、「選択」をクリックし、Ctrl キー(Windows)または Command キー(Mac OS)を押しながらリスト内の目的の列をクリックします。

  5. マスターページから渡される URL パラメーターで指定されたレコードを取得して表示するために、「フィルター」領域で以下の設定を行います。
    • 「フィルター」領域の最初のポップアップメニューで、マスターページから渡される URL パラメーターの値と一致する値を含む、レコードセット内の列を選択します。例えば、URL パラメーターにレコード ID 番号が含まれている場合は、レコード ID 番号が格納されている列を選択します。前の項で説明した例では、CODE という名前のレコードセット列に、マスターページによって渡された URL パラメーターの値と一致する値が含まれます。

    • 最初のメニューの横にあるポップアップメニューで、等号記号(初期設定)を選択します。

    • 3 番目のポップアップメニューから「URL パラメーター」を選択します。マスターページでは URL パラメーターを使用して、情報を詳細ページに渡します。

    • 4 番目のボックスに、マスターページから渡される URL パラメーターの名前を入力します。

  6. 「OK」をクリックします。レコードセットがバインディングパネルに表示されます。
  7. バインディングパネル(ウィンドウ/バインディング)で列を選択し、これをページにドラッグしてレコードセットの列と詳細ページをバインドします。

    マスターページおよび詳細ページの両方をサーバーにアップロードすると、ブラウザーでマスターページを開くことができます。マスターページの詳細リンクをクリックすると、詳細ページが開き、選択されているレコードに関する詳細情報が表示されます。

特定のレコードの検索とページでの表示(ASP)

ページにレコードセットを表示できるように、レコードセット内の特定のレコードを検索するサーバービヘイビアーを追加できます。このサーバービヘイビアーは、ASP サーバーモデルを使用する場合のみ使用できます。

  1. 以下の前提条件を満たすページを作成します。
  2. URL パラメーターによって指定されたレコードを検索するサーバービヘイビアーを追加するには、サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で「+」ボタンをクリックし、レコードセットページング/特定のレコードへ移動を選択します。
  3. レコード移動先ポップアップメニューで、そのページ用に定義したレコードセットを選択します。
  4. 列の場所ポップアップメニューで、他のページから渡される値が格納されている列を選択します。

    例えば、他のページからレコード ID 番号が渡される場合は、レコード ID 番号が格納されている列を選択します。

  5. 「URL パラメーターとの一致」ボックスに、他のページから渡される URL パラメーターの名前を入力します。

    例えば、他のページで詳細ページを開くために使用する URL が id=43 の場合は、「URL パラメーターとの一致」ボックスに「id」と入力します。

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

    次にこのページがブラウザーから要求されたときは、サーバービヘイビアーは他のページから渡された URL パラメーター内のレコード ID を読み込み、レコードセット内の指定されたレコードに移動します。

1 回の操作によるマスターページと詳細ページの作成

Web アプリケーションの開発時に、「マスター詳細ページセット」データオブジェクトを使用すると、マスターページと詳細ページを簡単に作成できます。

  1. 空の動的ページを作成するには、ファイル/新規/空白ページを選択し、ページタイプのリストから動的ページを選択して「作成」をクリックします。

    このページがマスターページになります。

  2. そのページのレコードセットを定義します。

    マスターページに必要な列だけではなく、詳細ページに必要な列もすべてレコードセットに含めてください。通常、マスターページのレコードセットは、データベーステーブルから数列を抽出します。一方、詳細ページのレコードセットは、詳細な情報を提供するため、同じテーブルからそれより多くの列を抽出します。

  3. デザインビューでマスターページを開き、挿入/データオブジェクト/マスター詳細ページセットを選択します。
  4. レコードセットポップアップメニューで、マスターページに表示するレコードを含むレコードセットが選択されていることを確認します。
  5. 「マスターページフィールド」領域で、マスターページに表示するレコードセットの列を選択します。

    初期設定では、レコードセットのすべての列が選択されます。レコードセットに recordID などのユニークキー列が含まれている場合は、この列を選択し「-」ボタンをクリックしてページに表示されないようにします。

  6. マスターページに表示する列の順序を変更するには、リストで列をクリックし、上向きまたは下向きの矢印をクリックします。

    マスターページでは、レコードセットの列はテーブル内に横一列に配置されます。上向き矢印をクリックすると列は左に移動します。下向き矢印をクリックすると列は右に移動します。

  7. 詳細へのリンク元ポップアップメニューで、詳細ページへのリンクテキストとして表示する値を含むレコードセットの列を選択します。

    例えば、マスターページの各製品名を詳細ページにリンクさせるには、製品名を含むレコードセットの列を選択します。

  8. ユニークキーの引き渡しポップアップメニューで、レコードを識別する値を含むレコードセットの列を選択します。

    通常は、レコードの ID 番号の列を選択します。この値が詳細ページに渡され、ビジターが選択したレコードを識別します。

  9. ユニークキー列が数値でない場合は、「数値」チェックボックスをオフにします。
    注意:

    このオプションは初期設定で選択されており、サーバーモデルによっては表示されないものもあります。

  10. マスターページに表示するレコード数を指定します。
  11. 「詳細ページ名」ボックスで「参照」をクリックして作成済みの詳細ページファイルを指定するか、任意の名前を入力してデータオブジェクトに詳細ページファイルを作成させます。
  12. 「詳細ページフィールド」領域で、詳細ページに表示する列を選択します。

    初期設定では、マスターページのレコードセット内のすべての列が選択されます。レコードセットに recordID などのユニークキー列が含まれている場合は、この列を選択し「-」ボタンをクリックして、詳細ページに表示されないようにします。

  13. 詳細ページに表示する列の順序を変更するには、リストで列をクリックし、上向きまたは下向きの矢印をクリックします。

    詳細ページでは、レコードセットの列はテーブル内に縦一列に配置されます。上向き矢印をクリックすると列は上に移動します。下向き矢印をクリックすると列は下に移動します。

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

    詳細ページが作成されていない場合は、データオブジェクトにより詳細ページが作成され、マスターページと詳細ページに動的コンテンツとサーバービヘイビアーが追加されます。

  15. マスターページと詳細ページのレイアウトを目的に合わせてカスタマイズします。

    各ページのレイアウトは、Dreamweaver のページデザインツールで自在にカスタマイズできます。サーバービヘイビアーパネルでサーバービヘイビアーをダブルクリックして編集することもできます。

    データオブジェクトを用いてマスターページと詳細ページを作成した後、サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)で、データオブジェクトによってページに挿入された作成ブロックを修正できます。

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

新規ユーザーの場合