マニュアルキャンセル

検索ページと結果ページの作成

検索

最終更新日 : 2021年4月28日

Dreamweaver

アプリを開く

注意：

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

検索ページと結果ページについて

Dreamweaver で一連のページを作成し、これらのページでビジターがデータベースを検索して結果を表示できるようにすることが可能です。

ほとんどの場合、Web アプリケーションにこの検索機能を追加するには、少なくとも 2 つのページが必要です。1 つは、ビジターが検索パラメーターを入力する HTML フォームがあるページです。このページは、実際の検索を行うものではありませんが、「検索ページ」と呼ばれます。

もう 1 つは、実際の検索処理のほとんどを実行する結果ページです。結果ページでは、以下のタスクを行います。

検索ページから渡された検索パラメーターの読み取り
データベースへの接続とレコードの検索
検索されたレコードを含むレコードセットの作成
レコードセットの内容の表示
必要に応じて、詳細ページを追加することができます。詳細ページには、結果ページの特定のレコードに関する詳細情報が表示されます。
検索パラメーターが 1 つだけの場合、Dreamweaver で Web アプリケーションに検索機能を追加するときに、SQL クエリーおよび変数を設定する必要はありません。このような場合、ページをデザインし、ダイアログボックスに入力するだけで検索機能を追加できます。検索パラメーターが複数の場合は、SQL ステートメントを記述し、複数の変数を定義する必要があります。
Dreamweaver によって SQL クエリーがページに挿入されます。サーバーでページが実行されると、データベーステーブル内の各レコードがチェックされます。レコード内の指定されたフィールドが SQL クエリーの条件に一致すると、そのレコードはレコードセットに追加されます。実行された SQL クエリーによって、検索結果のみを含むレコードセットが作成されます。
例えば、販売担当者が、担当地域内の一定レベル以上の収入がある顧客の情報を調べるとします。検索ページのフォームに、地域と最低収入レベルを入力し、「送信」ボタンをクリックしてサーバーに 2 つの値を送ります。サーバーでは、これらの値は結果ページの SQL ステートメントに渡され、特定の地域に住む、指定したレベル以上の収入がある顧客のみを含むレコードセットが作成されます。

検索ページの作成

通常、Web の検索ページには、ビジターが検索パラメーターを入力するフォームフィールドがあります。検索ページには、少なくとも「送信」ボタン付きの HTML フォームが必要です。

検索ページに HTML フォームを追加するには、以下の手順を実行します。

検索ページまたは新規ページを開き、挿入／フォーム／フォームを選択します。

ページに空白のフォームが作成されます。フォームの境界線を表示するには、表示／ビジュアルエイド／不可視エレメントを選択する必要があります。フォームの境界線は細い赤線で表示されます。
挿入／フォームを選択し、検索パラメーターを入力するためのフォームオブジェクトを追加します。

フォームオブジェクトには、テキストフィールド、メニュー、オプションおよびラジオボタンがあります。追加できるフォームオブジェクトの数に制限はありません。数が多いほどビジターが検索条件を詳しく指定できるようになります。ただし、検索ページの検索パラメーター数が多くなると、SQL ステートメントも複雑になります。
挿入／フォーム／ボタンを選択して、フォームに「送信」ボタンを追加します。
（オプション）「送信」ボタンのラベルを変更するには、ボタンを選択し、ウィンドウ／プロパティを選択してプロパティインスペクターを開き、「値」ボックスに新しい値を入力します。

次に、ビジターが「送信」ボタンをクリックしたときにフォームからどこに検索パラメーターを送信するかを指定します。
次の図に示すように、ドキュメントウィンドウの下部のタグセレクターで <form> タグを選択し、フォームを選択します。
フォームのプロパティインスペクターの「アクション」ボックスに、データベース検索を行う結果ページのファイル名を入力します。
メソッドポップアップメニューで、フォームからサーバーにデータを送る際に使用するメソッドを次の中から 1 つ選択します。
- GET では、フォームデータはクエリーストリングとして URL に付加され、送信されます。URL の文字数には制限（最長 8192 文字）があるため、フォームデータが長くなる場合は GET メソッドは使用しないでください。
- POST では、フォームデータはメッセージの本文として送信されます。
- Default では、ブラウザーの初期設定のメソッド（通常は GET）が使用されます。
  これで検索ページが完成しました。

基本的な結果ページの作成

ビジターがフォームの「検索」ボタンをクリックすると、検索パラメーターがサーバー上の結果ページに送信されます。ブラウザーの検索ページではなく、サーバーの結果ページがデータベースからレコードを取得します。検索ページからサーバーに送信される検索パラメーターが 1 つだけの場合は、SQL クエリーおよび変数を使用せずに結果ページを作成することができます。基本レコードセットと、検索ページから送信された検索パラメーターに一致しないレコードを除外するフィルターを作成します。

注意：

検索条件が複数の場合は、詳細設定のレコードセットダイアログボックスを使用してレコードセットを定義する必要があります（詳しくは、高度な結果ページの作成を参照してください）。

検索結果を保持するレコードセットの作成

ドキュメントウィンドウで結果ページを開きます。

結果ページをまだ作成していない場合は、ファイル／新規／空白ページを選択して空の動的ページを作成します。
ウィンドウ／バインディングを選択してバインディングパネルを開きます。「+」ボタンをクリックしてポップアップメニューから「レコードセット」を選択し、新しいレコードセットを作成します。
基本設定のレコードセットダイアログボックスが表示されることを確認します。

注意：

詳細設定のダイアログボックスが表示された場合は、「基本設定」ボタンをクリックして、基本設定のダイアログボックスに切り替えてください。
レコードセットの名前を入力し、接続を選択します。

ビジターが検索するデータが存在するデータベースへの接続を選択してください。
テーブルポップアップメニューで、データベース内の検索対象テーブルを選択します。

注意：

単一パラメーター検索の場合は、単一テーブルでのみレコードを検索できます。複数のテーブルを同時に検索するには、詳細設定のレコードセットダイアログボックスを使用して SQL クエリーを定義する必要があります。
テーブルの特定の列だけをレコードセットに含めるには、「選択」をクリックし、Ctrl キー（Windows）または Command キー（Mac OS）を押しながらリスト内の目的の列をクリックします。

結果ページに表示する情報が格納されている列のみを含める必要があります。

レコードセットダイアログボックスは開いたままにしておきます。これは、次に検索ページから送られるパラメーターを取得し、パラメーターに一致しないレコードを除外するレコードセットフィルターを作成するときに使用するためです。

レコードセットフィルターの作成

「フィルター」領域の最初のポップアップメニューで、一致するデータを検索するデータベーステーブルの列を選択します。

例えば、検索ページから送られる値が都市名の場合は、都市名が保存されているテーブルの列を選択します。
最初のメニューの横にあるポップアップメニューで、等号記号（初期設定）を選択します。
検索ページのフォームで POST メソッドを使用する場合は、3 番目のポップアップメニューで「フォーム変数」を選択します。GET メソッドを使用する場合は、「URL パラメーター」を選択します。

検索ページでは、フォーム変数または URL パラメーターを使用して、結果ページに情報を渡します。
4 番目のボックスに、検索ページの検索パラメーターを入力するためのフォームオブジェクト名を入力します。

オブジェクト名はフォーム変数または URL パラメーターの名前にもなります。名前を調べるには、検索ページに切り替え、フォーム上のフォームオブジェクトをクリックして選択し、プロパティインスペクターでオブジェクト名を参照します。

例えば、特定の国への冒険旅行のみを含むレコードセットを作成するとします。テーブルに TRIPLOCATION という名前の列があるとします。また、検索ページの HTML フォームでは GET メソッドを使用しており、国のリストを表示する Location という名前のメニューオブジェクトがあるとします。この場合、「フィルター」領域の設定は次のようになります。
（オプション）「テスト」をクリックして、テスト値を入力します。次に、「OK」をクリックしてデータベースに接続し、レコードセットのインスタンスを作成します。

テスト値は、検索ページから返される値をシミュレートします。「OK」をクリックしてテストレコードセットを閉じます。
レコードセットを確認したら、「OK」をクリックします。

ページにサーバーサイドスクリプトが挿入されます。このスクリプトは、サーバーでの実行時にデータベーステーブル内の各レコードを調べます。レコード内の指定されたフィールドがフィルター条件に一致すると、そのレコードはレコードセットに追加されます。このスクリプトによって、検索結果のみを含むレコードセットが作成されます。

次の手順では、結果ページにレコードセットを表示します。詳しくは、検索結果の表示を参照してください。

高度な結果ページの作成

検索ページからサーバーに複数の検索パラメーターが送信される場合は、結果ページ用に SQL クエリーを記述し、検索パラメーターを SQL 変数に格納して使用する必要があります。

注意：

検索条件が 1 つしかない場合は、基本設定のレコードセットダイアログボックスを使用してレコードセットを定義できます（詳しくは、基本的な結果ページの作成を参照してください）。

Dreamweaver で結果ページを開き、ウィンドウ／バインディングを選択してバインディングパネルを開きます。「+」ボタンをクリックしてポップアップメニューから「レコードセット」を選択し、新しいレコードセットを作成します。
詳細設定のレコードセットダイアログボックスが表示されることを確認します。

詳細設定のダイアログボックスには、SQL ステートメントを入力するためのテキスト領域があります。基本設定のダイアログボックスが表示された場合は、「詳細設定」ボタンをクリックして、詳細設定のダイアログボックスに切り替えてください。
レコードセットの名前を入力し、接続を選択します。

ビジターが検索するデータが存在するデータベースへの接続を選択してください。
SQL テキスト領域に Select ステートメントを入力します。

ステートメントに、検索パラメーターを保持する変数を使用した WHERE 句があることを確認します。次の例では、変数は varLastName と varDept です。
```
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE ¬ 
WHERE LASTNAME LIKE 'varLastName' ¬ 
AND DEPARTMENT LIKE 'varDept'
```
キーボードからの入力を少なくするために、詳細設定のレコードセットダイアログボックスの下部にあるデータベース項目のツリーを使用することができます。手順については、SQL を使用した高度なレコードセットの定義を参照してください。

SQL シンタックスのヘルプについては、SQL 入門（www.adobe.com/go/learn_dw_sqlprimer_jp）を参照してください。
SQL 変数に、検索パラメーターの値を指定します。「変数」領域で「+」ボタンをクリックして、変数名、初期設定値（ランタイム値が返されなかった場合に変数で使用する値）およびランタイム値（通常はリクエスト変数などブラウザーから送信された値を保持するサーバーオブジェクト）を入力します。

次の ASP の例では、検索ページの HTML フォームは GET メソッドを使用し、「LastName」と「Department」という 2 つのテキストフィールドを持ちます。

ColdFusion の場合、ランタイム値は #LastName# と #Department# になります。PHP の場合、ランタイム値は $_REQUEST["LastName"] と $_REQUEST["Department"] になります。
（オプション）「テスト」をクリックすると、初期設定の変数値を使用してレコードセットのインスタンスが作成されます。

初期設定値は、検索ページから返される値をシミュレートします。「OK」をクリックしてテストレコードセットを閉じます。
レコードセットを確認したら、「OK」をクリックします。

SQL クエリーがページに挿入されます。

次の手順では、結果ページにレコードセットを表示します。

検索結果の表示

検索結果を保持するレコードセットを作成したら、結果ページに情報を表示する必要があります。レコードの表示は、バインディングパネルから結果ページに列を 1 つずつドラッグするだけで簡単に指定できます。前後のレコードセットに移動するためのナビゲーションリンクの追加や、ページに複数のレコードを表示するためのリピート領域の作成を行うことができます。また、詳細ページへのリンクを追加することもできます。

動的テーブルへの検索結果の表示以外にも、ページに動的コンテンツを表示する方法はあります。詳しくは、データベースのレコードの表示を参照してください。

動的テーブルを表示する結果ページ上の場所に挿入ポイントを置き、挿入／データオブジェクト／動的データ／動的テーブルを選択します。
動的テーブルダイアログボックスに必要な値を入力します。その際に、検索結果を保持するために定義したレコードセットを選択します。
「OK」をクリックします。検索結果を表示する動的テーブルが、結果ページに挿入されます。

結果ページの詳細ページの作成

検索/結果ページのグループに、結果ページの特定のレコードの詳細情報を表示するための詳細ページを追加することができます。この場合、結果ページはマスター/詳細ページセットでマスターページとしても動作します。

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

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る