データベースのレコードの表示

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

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

データベースのレコードについて

データベースレコードの表示は、データベースやその他のコンテンツソースに保存されている情報を取得し、その情報を web ページにレンダリングすることです。Dreamweaver では動的コンテンツを表示するための多くの方法を提供しており、動的コンテンツの表示を強化し、ユーザーがデータベースから返された情報をより簡単に検索およびナビゲーションできるようにする、いくつかの組み込みサーバービヘイビアを提供しています。

データベースやその他の動的コンテンツソースは、大量の情報の検索、並び替え、表示において、より多くの機能と柔軟性を提供します。Webサイト用のコンテンツを格納するためにデータベースを使用することは、大量の情報を格納し、その情報を意味のある方法で取得および表示する必要がある場合に有効です。Dreamweaver では、データベースに保存された情報を効果的に取得および表示するのに役立つ、いくつかのツールとあらかじめ用意されたビヘイビアを提供しています。

サーバービヘイビアとフォーマット要素

Dreamweaver では、動的データの表示を強化するために、以下のサーバービヘイビアとフォーマット要素を提供しています:

フォーマット

動的テキストに、さまざまなタイプの数値、通貨、日付/時刻、およびパーセンテージ値を適用できます。

例えば、レコードセット内のアイテムの価格が 10.989 と読み込まれた場合、Dreamweaver の「通貨 - 小数点以下 2 桁」フォーマットを選択することで、ページ上の価格を $10.99 として表示できます。このフォーマットは数値を小数点以下 2 桁で表示します。 数値に小数点以下が 2 桁を超える場合、データフォーマットは数値を最も近い値に丸めます。数値に小数点以下がない場合、データフォーマットは小数点と 2 つのゼロを追加します。

リピート領域

サーバービヘイビアでは、データベースクエリから返される複数のアイテムを表示し、ページごとに表示するレコード数を指定できます。

レコードセットナビゲーション

サーバービヘイビアでは、ユーザーがレコードセットによって返されるレコードの次または前のセットに移動できるナビゲーション要素を挿入できます。例えば、繰り返し領域サーバーオブジェクトを使用してページごとに 10 レコードを表示することを選択し、レコードセットが 40 レコードを返す場合、一度に 10 レコードずつナビゲーションできます。

レコードセットナビゲーションステータス

サーバービヘイビアでは、返されたレコードの総数に対して、レコードのセット内でユーザーがどこにいるかを示すカウンターを含めることができます。

領域の表示

サーバービヘイビアでは、現在表示されているレコードの関連性に基づいて、ページ上のアイテムの表示/非表示を選択できます。例えば、ユーザーがレコードセットの最後のレコードにナビゲーションした場合、次へリンクを非表示にして、前へレコードリンクのみを表示できます。

動的データにタイポグラフィックとページレイアウト要素を適用

Dreamweaver の強力な機能は、構造化されたページ内で動的データを表示し、HTML と CSS を使用してタイポグラフィの書式を設定できることです。Dreamweaver で動的データにフォーマットを適用するには、Dreamweaver フォーマットツールを使用して、動的データ用のテーブルとプレースホルダーをフォーマットします。データがデータソースから挿入されると、指定したフォント、段落、およびテーブルフォーマットが自動的に採用されます。

レコードセットナビゲーションリンクを使用すると、ユーザーは 1 つのレコードから次のレコードへ、または 1 つのレコードセットから次のレコードセットへ移動できます。例えば、一度に 5 つのレコードを表示するページを設計した後、次へ前へなどのリンクを追加して、ユーザーが次または前の 5 つのレコードを表示できるようにすることもできます。

レコードセット内を移動するために、4種類のナビゲーションリンクを作成できます。先頭、前へ、次へ、末尾です。単一ページには、すべてが単一のレコードセットで動作する限り、これらのリンクをいくつでも含めることができます。同じページにある2番目のレコードセットを移動するためのリンクを追加することはできません。

レコードセットナビゲーションリンクには、次の動的エレメントが必要です。

  • ナビゲート対象のレコードセット

  • レコードを表示するためのページの動的コンテンツ

  • クリック可能なナビゲーションバーとして機能するページ上のテキストまたは画像

  • レコードセットをナビゲートするためのMove To Recordサーバービヘイビアのセット

    Record Navigation Barサーバーオブジェクトを使用して最後の2つの要素を追加することも、デザインツールとServer Behaviorsパネルを使用して個別に追加することもできます。

レコードセットナビゲーションバーの作成

Recordset Navigation Barサーバービヘイビアを使用して、単一の操作でレコードセットナビゲーションバーを作成できます。サーバーオブジェクトは、以下の構成要素をページに追加します:

  • テキストまたはイメージのリンクを含む HTML テーブル

  • 「(移動先)に移動」サーバービヘイビアーのセット

  • 「領域の表示」サーバービヘイビアーのセット

    テキストを使用したレコードセットナビゲーションバーは、次のようになります。

テキストを使用したレコードセットナビゲーションバー

レコードセットナビゲーションバー

ページにナビゲーションバーを配置する前に、このページに、ナビゲート対象のレコードセットおよびレコードを表示するページレイアウトが含まれていることを確認します。

ページにナビゲーションバーを配置した後は、デザインツールを使用してバーを自由にカスタマイズできます。 サーバービヘイビアーパネル内の「(移動先)に移動」サーバービヘイビアーおよび「領域の表示」サーバービヘイビアーをダブルクリックして、これらのサーバービヘイビアーを編集することもできます。

Dreamweaver によってテキストリンクまたはイメージリンクを含むテーブルが作成されます。ユーザーはこのリンクをクリックして選択したレコードセット内をナビゲートできます。 レコードセットの先頭のレコードが表示されると、先頭のレコードへ移動および前のレコードへ移動のリンクまたはイメージは非表示になります。 レコードセットの最終のレコードが表示されると、次のレコードへ移動および最終のレコードへ移動のリンクまたはイメージは非表示になります。

ナビゲーションバーのレイアウトは、デザインツールとサーバービヘイビアーパネルでカスタマイズできます。

デザインビューで、ナビゲーションバーを表示させたいページ上の場所に挿入ポイントを配置します。
Recordset Navigation Barダイアログボックスを表示します(挿入 > データオブジェクト > Recordset Paging > Recordset Navigation Bar)。
Recordsetポップアップメニューからナビゲートしたいレコードセットを選択します。
Display Usingセクションから、ページ上にナビゲーションリンクを表示する形式を選択し、OKをクリックします。

テキスト

テキストリンクをページ上に配置します。

イメージ

グラフィックイメージをリンクとして含めます。 Dreamweaverは独自の画像ファイルを使用します。ページにバーを配置した後、これらの画像を自分の画像ファイルに置き換えることができます。

カスタムレコードセットナビゲーションバー

Recordset Navigation Barサーバーオブジェクトによって作成されるシンプルなテーブルよりも、複雑なレイアウトと書式設定スタイルを使用する独自のレコードセットナビゲーションバーを作成できます。

ユーザー独自のレコードセットナビゲーションバーを作成するには:

  • テキストまたはイメージにナビゲーションリンクを作成します。

  • デザインビューのページ内にリンクを配置します。

  • 個々のサーバービヘイビアーを各ナビゲーションリンクに割り当てます。

このセクションでは、ナビゲーションリンクに個々のサーバービヘイビアを割り当てる方法について説明します。

デザインビューで、レコードナビゲーションリンクとして使用したいページ上の文字列または画像を選択します。
Server Behaviorsパネル(ウィンドウ > Server Behaviors)を開き、プラス(+)ボタンをクリックします。
ポップアップメニューからRecordset Pagingを選択し、リストされたサーバービヘイビアから、そのリンクに適したサーバービヘイビアを選択します。

レコードセットに大量のレコードが含まれている場合、ユーザーがリンクをクリックしたときにMove To Last Recordサーバービヘイビアの実行に長時間かかることがあります。

Recordsetポップアップメニューで、レコードを含むレコードセットを選択し、OKをクリックします。

サーバービヘイビアーがナビゲーションリンクに割り当てられます。

Move To(サーバービヘイビア)ダイアログボックスオプションを設定する

ユーザーがレコードセット内のレコードをナビゲートできるリンクを追加します。

ページ上で何も選択していない場合は、ポップアップメニューからリンクを選択します。
ページ送りするレコードを含むレコードセットを選択し、OKをクリックします。
メモ

レコードセットに大量のレコードが含まれている場合、ユーザーがリンクをクリックしたときに「最後のレコードに移動」サーバービヘイビアの実行に長時間かかることがあります。

カスタムナビゲーションバーを作成する場合は、まず Dreamweaverページデザイン ツールを使用してビジュアル表現を作成します。文字列や画像にリンクを作成する必要はありません。Dreamweaverが自動的に作成します。

ナビゲーションバーを作成するページには、ナビゲートするための レコードセットが含まれている必要があります。シンプルなレコードセットナビゲーションバーは次のように表示され、 画像やその他のコンテンツ要素で作成されたリンクボタンが含まれます:

単純なレコードセットナビゲーションバー

ページにレコードセットを追加し、 ナビゲーションバーを作成した後、各ナビゲーション要素に 個別のサーバービヘイビアーを適用する必要があります。例えば、一般的なレコードセットナビゲーション バーには、適切なビヘイビアーと一致する 次のリンクの表現が含まれます:

ナビゲーションリンク

サーバービヘイビアー

先頭のページに戻る

先頭のページへ移動

前のページに戻る

前のページへ移動

次のページに進む

次のページへ移動

最終のページに進む

最終のページへ移動

レコードセット結果に基づいて 領域を表示および非表示にする

レコードセットが空かどうかに基づいて領域を表示 または非表示にすることも指定できます。レコードセット が空の場合(例えば、クエリに一致するレコードが見つからなかった場合)、 レコードが返されなかったことをユーザーに通知する メッセージを表示できます。これは特に、ユーザー入力の検索キーワードに依存してクエリを実行する検索ページを作成する場合に便利です。同様に、 データベースへの接続に問題がある場合や、ユーザーのユーザー名とパスワードが サーバーで認識されるものと一致しない場合に、エラーメッセージを 表示できます。

領域を表示サーバービヘイビアー は次のとおりです:

  • レコードセットが空の場合に表示

  • レコードセットが空でない場合に表示

  • 先頭のページの場合に表示

  • 先頭のページでない場合に表示

  • 最終のページの場合に表示

  • 最終のページでない場合に表示

デザインビューで、ページ上の 表示または非表示にする領域を選択します。
サーバービヘイビアーパネル(ウィンドウ/サーバー ビヘイビアー)で、プラス(+)ボタンをクリックします。
ポップアップメニューから「領域を表示」を選択し、リストされた サーバービヘイビアーのいずれかを選択して、「OK」をクリックします。

複数のレコードセット結果の表示

リピート領域サーバービヘイビアーを使用すると、 ページ内のレコードセットから複数のレコードを表示できます。任意の 動的データ選択をリピート領域に変換できます。ただし、 最も一般的な領域は、テーブル、テーブルの行、または一連の テーブルの行です。

デザインビューで、 動的コンテンツを含む領域を選択します。

選択できるのは、テーブル、テーブル の行、またはテキストの段落など、任意の要素です。

ページ上の 領域を正確に選択するには、ドキュメントウィンドウの左隅にある タグセレクターを使用できます。例えば、領域がテーブルの行の場合、ページ上の行内をクリックしてから、タグセレクターの最も右にある<tr>タグをクリックしてテーブルの行を選択します。

ウィンドウ/サーバービヘイビアーを選択して サーバービヘイビアーパネルを表示します。
プラス(+)ボタンをクリックし、「リピート 領域」を選択します。
ポップアップメニューから使用するレコードセットの名前を選択します。
ページあたりに表示するレコード数を選択し、「OK」をクリックします。

ドキュメントウィンドウで、リピート領域の周りに薄いタブ付きの灰色のアウトラインが表示されます。

プロパティインスペクターでリピート領域を変更

次のオプションのいずれかを変更して、選択したリピート領域を変更します:
  • リピート領域の名前

  • リピート領域にレコードを提供するレコードセット。

  • 表示するレコード数

    新しいオプションを選択すると、Dreamweaverがページを更新します。

PHP レコードセットの再利用

PHP レコードセットの再利用に関するチュートリアルについては、David Powers のチュートリアル、How Do I Reuse a PHP Recordset in More Than One Repeat Region?を参照してください。

動的テーブルの作成

次の例は、リピート領域サーバービヘイビアがテーブル行に適用され、ページあたり 9 つのレコードが表示されるよう指定される方法を示しています。行自体には、市、州、住所、郵便番号の 4 つの異なるレコードが表示されます。

テーブル行に適用された「リピート領域」サーバービヘイビアー

前の例のようなテーブルを作成するには、動的コンテンツを含むテーブルを作成し、動的コンテンツを含むテーブル行にリピート領域サーバービヘイビアを適用する必要があります。ページがアプリケーションサーバーによって処理されると、行はリピート領域サーバーオブジェクトで指定された回数だけ繰り返され、新しい行ごとに異なるレコードが挿入されます。

以下のいずれかの操作を行って、動的テーブルを挿入します。
  • 挿入 > データオブジェクト > 動的データ > 動的テーブルを選択して、動的テーブルダイアログボックスを表示します。

  • 挿入パネルのデータカテゴリから、動的データボタンをクリックし、ポップアップメニューから動的テーブルアイコンを選択します。

レコードセットポップアップメニューからレコードセットを選択します。
1 ページあたりに表示するレコード数を選択します。
(オプション)テーブルのボーダー、セルの余白、セルの間隔の値を入力します。

動的テーブルダイアログボックスは、テーブルのボーダー、セルのパディング、セルの間隔に入力した値を保持します。

メモ

同じ外観の複数の動的テーブルを必要とするプロジェクトで作業している場合は、テーブルレイアウトの値を入力することで、ページ開発がさらに簡素化されます。テーブルを挿入した後、テーブルプロパティインスペクターを使用してこれらの値を調整することができます。

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

テーブルと、関連するレコードセットで定義された動的コンテンツのプレースホルダーがページに挿入されます。

レコードセットにおける動的コンテンツのテーブルとプレースホルダー

この例では、レコードセットには AUTHORID、FIRSTNAME、LASTNAME、BIO の 4 つの列が含まれています。テーブルの見出し行には、各列の名前が入力されます。見出しは任意の説明テキストを使用して編集するか、代表的な画像に置き換えることができます。

レコードカウンターの作成

レコードカウンターは、レコードのセットを移動する際にユーザーの参照点となります。通常、レコードカウンターは返されたレコードの総数と、現在表示されているレコードを表示します。例えば、レコードセットが40件のレコードを返し、ページあたり8件のレコードが表示される場合、最初のページのレコードカウンターは「40件中1‑8件を表示」と表示されます。

ページにレコードカウンターを作成する前に、 まずそのページ用のレコードセット、動的コンテンツを含む適切なページレイアウト、そしてレコードセットナビゲーションバーを作成する必要があります。

簡単なレコードカウンターの作成

レコードカウンターは、返されたレコードの総数に対する、指定されたレコードセット内でのユーザーの現在位置を表示します。このため、レコードカウンターは web ページのユーザビリティを大幅に向上させることができる便利な機能です。

Recordset Navigation Status サーバーオブジェクトを使用して、シンプルなレコードカウンターを作成します。このサーバーオブジェクトは、現在のレコードステータスを表示するテキストエントリをページに作成します。Dreamweaver のページデザインツールを使用して、レコードカウンターをカスタマイズできます。

レコードカウンターを挿入したい場所に挿入ポイントを置きます。
Insert > Data Objects > Display Record Count > Recordset Navigation Statusを選択し、 Recordsetポップアップメニューからレコードセットを選択して、OKをクリックします。

Recordset Navigation Status サーバーオブジェクトは、以下の例のようなテキストレコードカウンターを挿入します:

Live ビューで表示すると、カウンターは以下の例のように 表示されます:

レコードカウンターを作成してページに追加する

Insert Recordset Navigation Status ダイアログボックスで、トラッキングするレコードセットを選択し、OKをクリックします。

カスタムレコードカウンターの作成

個別レコードカウント動作を使用して、カスタムレコードカウンターを作成します。カスタムレコードカウンターを作成することで、 Recordset Navigation Statusサーバーオブジェクトによって挿入される単純な単一行テーブルを超えたレコードカウンターを作成できます。デザイン要素を様々な創造的な方法で 配置し、各要素に適切なサーバー動作を適用できます。

Record Countサーバー動作には以下があります:

  • 開始レコード番号を表示

  • 終了レコード番号を表示

  • 合計レコードを表示

ページにカスタムレコードカウンターを作成する前に、まずそのページ用のレコードセット、動的コンテンツを含む適切なページレイアウト、そしてレコードセットナビゲーションバーを作成する必要があります。

この例では、「Simple record counters」の例と同様のレコードカウンターを作成します。この例では、サンセリフフォントのテキストが、ページに挿入されるレコードカウントプレースホルダーを表しています。この例のレコードカウンターは次のように表示されます:

Displaying records StartRow through EndRow of RecordSet.RecordCount.

デザインビューで、カウンターのテキストを ページに入力します。次の例のように、任意のテキストを指定できます。

Displaying records thru of .

挿入ポイントを "全" と "件" の間に置きます。
Server Behaviorsパネルを開きます(Window > Server Behaviors)。
左上のプラス(+)ボタンをクリックし、「レコード数を表示」をクリックします。このサブメニューで、「レコード総数の表示」を選択します。「レコード総数の表示」ビヘイビアーがページに挿入され、挿入ポイントがあった場所にプレースホルダーが挿入されます。テキストストリングは、次のように表示されます。

レコード表示 ~ {Recordset1.RecordCount} 件中。

単語 records の後に挿入ポイントを置き、サーバービヘイビアー > プラス(+)ボタン > レコード数パネルから「開始レコード数を表示」を選択します。テキストストリングは、次のように表示されます。

レコード表示 {StartRow_Recordset1} ~ {Recordset1.RecordCount} 件中。

次に、単語 thruof の間に挿入ポイントを置き、サーバービヘイビアー > プラス(+)ボタン > レコード数パネルから「開始レコード数の表示」を選択します。テキストストリングは、次のように表示されます。

レコード表示 {StartRow_Recordset1} ~ {EndRow_Recordset1} / {Recordset1.RecordCount} 件。

ライブビューでページを表示して、カウンターが正しく機能することを確認します。カウンターは次の例のようになります:

レコード表示 1 ~ 8 / 40 件。

結果ページに次のレコードセットに移動するナビゲーションリンクがある場合、そのリンクをクリックすると、レコードカウンターが次のように更新されます:

レコード表示 9 ~ 16 / 40 件。

定義済みデータフォーマットの使用

Dreamweaver には、動的データ要素に適用できる定義済みデータ形式がいくつか含まれています。データ形式スタイルには、日付と時刻、通貨、数値、およびパーセンテージ形式が含まれます。

データフォーマットの動的コンテンツへの適用

ドキュメントウィンドウで動的コンテンツプレースホルダーを選択します。
「ウィンドウ」>「バインディング」を選択してバインディングパネルを表示します。
「フォーマット」列の下向き矢印ボタンをクリックします。

下向きの矢印が表示されていないときは、パネルを拡大してください。

「フォーマット」ポップアップメニューから、必要なデータフォーマットカテゴリを選択します。

データフォーマットが、フォーマットするデータの種類に適していることを確認します。たとえば、通貨フォーマットは、動的データが数値データで構成されている場合にのみ機能します。同じデータに複数のフォーマットを適用することはできません。

ライブビューでページをプレビューして、フォーマットが正しく適用されたかどうかを確認します。

データフォーマットのカスタマイズ

デザインビューで動的データが含まれているページを開きます。

カスタムフォーマットを作成する動的データを選択します。

選択された動的データを含むバインドデータ項目が、バインディングパネル(ウィンドウ/バインディング)でハイライト表示されます。 このパネルには選択した項目の「バインディング」列および「フォーマット」列が表示されます。 「フォーマット」列が表示されていないときは、バインディングパネルの幅を広げてください。

バインディングパネルで、「フォーマット」列の下向き矢印をクリックして、使用可能なデータフォーマットのポップアップメニューを展開します。

下向きの矢印が表示されていないときは、バインディングパネルの幅を広げてください。

ポップアップメニューから、「フォーマットリストの編集」を選択します。

ダイアログボックスに入力し、「OK」をクリックします。

a.リストからフォーマットを選択し、「編集」をクリックします。

b.通貨、数値、またはパーセントダイアログボックスで次のパラメーターのいずれかを変更し、「OK」をクリックします。

  • 小数点以下の表示桁数
  • 端数の場合に先頭にゼロを付けるかどうか
  • 負の値に対しカッコを使用するか、マイナス記号を使用するかどうか
  • 桁を区切るかどうか

c.データ形式を削除するには、リストでその形式をクリックし、マイナス(-)ボタンをクリックします。

データフォーマットの作成(ASP のみ)

デザインビューで動的データを含むページを開きます。

カスタムフォーマットを作成する動的データを選択します。

ウィンドウ/バインディングを選択してバインディングパネルを表示し、形式列の下向き矢印をクリックします。下向き矢印が表示されない場合は、パネルを展開します。
ポップアップメニューから、「フォーマットリストの編集」を選択します。
「+」ボタンをクリックし、フォーマットタイプを選択します。
フォーマットを定義し、「OK」をクリックします。
名前列に新しい形式の名前を入力し、「OK」をクリックします。
メモ

Dreamweaver は ASP ページのデータ形式の作成のみをサポートしますが、ColdFusion および PHP ユーザーは他の開発者が作成した形式をダウンロードしたり、サーバー形式を作成して Dreamweaver Exchange に投稿したりできます。Server Format API の詳細については、Dreamweaver 機能拡張(ヘルプ/Dreamweaver 機能拡張/サーバー形式)を参照してください。