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

最終更新日 : 2024年4月25日

Dreamweaver でマスターページを作成し、詳細ページへのリンクを作成する方法を学習します。

メモ

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

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

マスターページと詳細ページは、レコードセットデータを整理して表示するために使用されるページセットです。これらのページは、サイトへの訪問者に概要と詳細の両方のビューを提供します。マスターページはすべてのレコードをリストし、各レコードに関する追加情報を表示する詳細ページへのリンクが含まれています。

マスターページ

詳細ページ

マスターページと詳細ページは、データオブジェクトを挿入してマスターページと詳細ページを 1 つの操作で作成するか、サーバービヘイビアーを使用してマスターページと詳細ページをよりカスタマイズされた方法で作成することができます。サーバービヘイビアーを使用してマスターページと詳細ページを作成する場合は、まずレコードをリストするマスターページを作成してから、リストから詳細ページへのリンクを追加します。

マスターページの作成

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

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

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

レコードセットに、マスターページの作成に必要なすべてのテーブル列が含まれていることを確認してください。レコードセットには、各レコードの一意キーを含むテーブル列(つまり、レコード ID 列)も含まれている必要があります。次の例では、Code 列に各レコードの一意キーが含まれています。

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

通常、マスターページのレコードセットはデータベーステーブルからいくつかの列を抽出しますが、詳細ページのレコードセットは同じテーブルからより多くの列を抽出して追加の詳細を提供します。

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

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

ページ上で動的テーブルを表示したい場所に挿入ポイントを配置します。挿入 > データオブジェクト > 動的データ > 動的テーブルを選択し、オプションを設定して OK をクリックします。

ユーザーにレコード ID を表示したくない場合は、動的テーブルから列を削除することができます。ページ上の任意の場所をクリックして、焦点をページに移動します。動的テーブルの列の上部近くにカーソルを移動して、列のセルが赤でアウトライン表示されるまで待ち、クリックして列を選択します。Delete キーを押してテーブルから列を削除します。

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

メモ

同じ手順を使用してページを更新するためのリンクを作成します。結果ページはマスターページに類似しており、更新ページは詳細ページに類似しています。

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

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

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

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

マスターページの動的テーブル内のリンクを選択します。
(ColdFusion)プロパティインスペクターの「リンク」ボックスで、URL の末尾に次の文字列を追加します:

?recordID=#recordsetName.fieldName#

疑問符は、その後に続くものが 1 つ以上の URL パラメーターであることをサーバーに伝えます。recordID という語は URL パラメーターの名前です(任意の名前を作成できます)。URL パラメーターの名前をメモしておいてください。後で詳細ページで使用するためです。

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

locationDetail.cfm?recordID=#rsLocations.CODE#

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

locationDetail.cfm?recordID=CBR

(PHP)プロパティインスペクターの「リンク」フィールドで、URL の末尾に次の文字列を追加します:

?recordID=<?php echo $row_recordsetName['fieldName']; ?>

疑問符は、その後に続くものが 1 つ以上の URL パラメーターであることをサーバーに伝えます。単語 recordID は URL パラメーターの名前です(お好みの名前を使用できます)。URLパラメーターの名前をメモしておいてください。後で詳細ページで使用します。

等号の後の表現は、パラメーターの値です。この場合、値はレコードセットからレコードIDを返すPHP表現によって生成されます。動的テーブルの各行に対して異なるIDが生成されます。PHP表現では、recordsetNameをレコードセット名に置き換え、fieldNameを各レコードを一意に識別するレコードセット内のフィールド名に置き換えてください。ほとんどの場合、フィールドはレコードID番号で構成されます。次の例では、フィールドは一意のロケーションコードで構成されています。

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

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

locationDetail.php?recordID=CBR

ページを保存します。

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

リンクとして使用する動的コンテンツを選択します。
Server Behaviorsパネル(ウィンドウ/Server Behaviors)でプラス(+)ボタンをクリックし、ポップアップメニューから「Go to Detail Page」を選択します。
「詳細ページ」ボックスで「参照」をクリックし、詳細ページを指定します。
RecordsetとColumnのポップアップメニューからレコードセットと列を選択して、詳細ページに渡す値を指定します。通常、値はレコード固有のもの(レコードの一意キーIDなど)です。
必要に応じて、URL ParametersまたはForm Parametersオプションを選択して、既存のページパラメーターを詳細ページに渡します。
「OK」をクリックします。

選択したテキストの周りに特別なリンクが設定されます。 ユーザーがリンクをクリックすると、Go To Detail Pageサーバービヘイビアーがレコード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 つ含まれていることを確認してください。共通列は通常レコード ID 列ですが、関連するテーブルの結合フィールドの場合もあります。

テーブルの列の一部のみをレコードセットに含めるには、「選択済み」をクリックし、リスト内で Control キーを押しながらクリック(Windows)または Command キーを押しながらクリック(Macintosh)して、目的の列を選択します。

マスターページから渡された URL パラメーターで指定されたレコードを検索して表示するように、フィルターセクションを完成させます:
  • フィルターエリアの最初のポップアップメニューから、マスターページから渡された URL パラメーターの値と一致する値を含むレコードセット内の列を選択します。たとえば、URL パラメーターにレコード ID 番号が含まれている場合は、レコード ID 番号を含む列を選択します。前のセクションで説明した例では、CODE と呼ばれるレコードセット列に、マスターページから渡された URL パラメーターの値と一致する値が含まれています。

  • 最初のメニューの横にあるポップアップメニューから、等号を選択します(既に選択されているはずです)。

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

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

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

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

特定のレコードを検索してページに表示する(ASP)

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

以下の前提条件を満たすページを作成します。
サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー)のプラス(+)ボタンをクリックし、レコードセットページング/特定のレコードに移動を選択して、URLパラメーターで指定されたレコードを検索するサーバービヘイビアーを追加します。
「Move To Record In」ポップアップメニューで、ページに定義したレコードセットを選択します。
「Where Column」ポップアップメニューで、他のページから渡される値を含む列を選択します。

例えば、他のページがレコードID番号を渡す場合は、レコードID番号を含む列を選択します。

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

例えば、他のページが詳細ページを開くために使用したURLがid=43の場合、「Matches URL Parameter」ボックスにidと入力します。

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

次回ブラウザーによってページがリクエストされた時、サーバービヘイビアーは他のページから渡されたURLパラメーター内のレコードIDを読み取り、レコードセット内の指定されたレコードに移動します。

マスターページと詳細ページを1回の操作で作成する

webアプリケーションを開発する際、マスター詳細ページセットデータオブジェクトを使用して、マスターページと詳細ページを素早く作成できます。

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

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

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

レコードセットに、マスターページに必要なすべての列だけでなく、詳細ページに必要なすべての列も含まれていることを確認してください。通常、マスターページのレコードセットはデータベーステーブルからいくつかの列を抽出し、詳細ページのレコードセットは同じテーブルからより多くの列を抽出して追加の詳細を提供します。

マスターページをデザインビューで開き、挿入/データオブジェクト/マスター詳細ページセットを選択します。
「Recordset」ポップアップメニューで、マスターページに表示するレコードを含むレコードセットが選択されていることを確認します。
「Master Page Fields」エリアで、マスターページに表示するレコードセット列を選択します。

初期設定では、レコードセットのすべての列が選択されます。 レコードセットにrecordIDなどの一意キー列が含まれている場合は、それを選択してマイナス(-)ボタンをクリックし、ページに表示されないようにします。

マスターページで列が表示される順序を変更するには、リストで列を選択し、上または下の矢印をクリックします。

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

「Link To Detail From」ポップアップメニューで、詳細ページへのリンクとしても機能する値を表示するレコードセット内の列を選択します。

例えば、マスターページの各製品名に詳細ページへのリンクを設定したい場合は、製品名を含むレコードセット列を選択します。

一意キーを渡すポップアップメニューで、レコードを識別する値を含むレコードセット内の列を選択します。

通常は、レコードの ID 番号の列を選択します。 この値は詳細ページに渡され、ユーザーが選択したレコードを識別できるようになります。

一意キー列が数値でない場合は、「数値」オプションの選択を解除します。
メモ

このオプションはデフォルトで選択されています。すべてのサーバーモデルには表示されません。

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

デフォルトでは、マスターページのレコードセット内のすべての列が選択されています。レコードセットにrecordIDなどの一意キー列が含まれている場合は、それを選択してマイナス(-)ボタンをクリックし、詳細ページに表示されないようにします。

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

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

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

データオブジェクトは詳細ページを作成し(まだ作成していない場合)、マスターページと詳細ページの両方に動的コンテンツとサーバービヘイビアーを追加します。

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

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

データオブジェクトでマスターページと詳細ページを作成した後、サーバービヘイビアーパネル(ウィンドウ>サーバービヘイビアー)を使用して、データオブジェクトがページに挿入するさまざまな構成要素を変更します。