マニュアル キャンセル

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

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト
  19. トラブルシューティング
    1. 修正された問題
    2. 既知の問題

 

 

注意:

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

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

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

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

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

  • 検索ページから渡された検索パラメーターの読み取り

  • データベースへの接続とレコードの検索

  • 検索されたレコードを含むレコードセットの作成

  • レコードセットの内容の表示

    必要に応じて、詳細ページを追加することができます。詳細ページには、結果ページの特定のレコードに関する詳細情報が表示されます。

    検索パラメーターが 1 つだけの場合、Dreamweaver で Web アプリケーションに検索機能を追加するときに、SQL クエリーおよび変数を設定する必要はありません。このような場合、ページをデザインし、ダイアログボックスに入力するだけで検索機能を追加できます。検索パラメーターが複数の場合は、SQL ステートメントを記述し、複数の変数を定義する必要があります。

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

    例えば、販売担当者が、担当地域内の一定レベル以上の収入がある顧客の情報を調べるとします。検索ページのフォームに、地域と最低収入レベルを入力し、「送信」ボタンをクリックしてサーバーに 2 つの値を送ります。サーバーでは、これらの値は結果ページの SQL ステートメントに渡され、特定の地域に住む、指定したレベル以上の収入がある顧客のみを含むレコードセットが作成されます。

検索ページの作成

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

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

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

    ページに空白のフォームが作成されます。フォームの境界線を表示するには、表示/ビジュアルエイド/不可視エレメントを選択する必要があります。フォームの境界線は細い赤線で表示されます。

  2. 挿入/フォームを選択し、検索パラメーターを入力するためのフォームオブジェクトを追加します。

    フォームオブジェクトには、テキストフィールド、メニュー、オプションおよびラジオボタンがあります。追加できるフォームオブジェクトの数に制限はありません。数が多いほどビジターが検索条件を詳しく指定できるようになります。ただし、検索ページの検索パラメーター数が多くなると、SQL ステートメントも複雑になります。

  3. 挿入/フォーム/ボタンを選択して、フォームに「送信」ボタンを追加します。
  4. (オプション)「送信」ボタンのラベルを変更するには、ボタンを選択し、ウィンドウ/プロパティを選択してプロパティインスペクターを開き、「値」ボックスに新しい値を入力します。

    次に、ビジターが「送信」ボタンをクリックしたときにフォームからどこに検索パラメーターを送信するかを指定します。

  5. 次の図に示すように、ドキュメントウィンドウの下部のタグセレクターで <form> タグを選択し、フォームを選択します。
    form タグ

  6. フォームのプロパティインスペクターの「アクション」ボックスに、データベース検索を行う結果ページのファイル名を入力します。
  7. メソッドポップアップメニューで、フォームからサーバーにデータを送る際に使用するメソッドを次の中から 1 つ選択します。
    • GET では、フォームデータはクエリーストリングとして URL に付加され、送信されます。URL の文字数には制限(最長 8192 文字)があるため、フォームデータが長くなる場合は GET メソッドは使用しないでください。

    • POST では、フォームデータはメッセージの本文として送信されます。

    • Default では、ブラウザーの初期設定のメソッド(通常は GET)が使用されます。

      これで検索ページが完成しました。

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

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

注意:

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

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

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

    結果ページをまだ作成していない場合は、ファイル/新規/空白ページを選択して空の動的ページを作成します。

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

    注意:

    詳細設定のダイアログボックスが表示された場合は、「基本設定」ボタンをクリックして、基本設定のダイアログボックスに切り替えてください。

  4. レコードセットの名前を入力し、接続を選択します。

    ビジターが検索するデータが存在するデータベースへの接続を選択してください。

  5. テーブルポップアップメニューで、データベース内の検索対象テーブルを選択します。
    注意:

    単一パラメーター検索の場合は、単一テーブルでのみレコードを検索できます。複数のテーブルを同時に検索するには、詳細設定のレコードセットダイアログボックスを使用して SQL クエリーを定義する必要があります。

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

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

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

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

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

    例えば、検索ページから送られる値が都市名の場合は、都市名が保存されているテーブルの列を選択します。

  2. 最初のメニューの横にあるポップアップメニューで、等号記号(初期設定)を選択します。
  3. 検索ページのフォームで POST メソッドを使用する場合は、3 番目のポップアップメニューで「フォーム変数」を選択します。GET メソッドを使用する場合は、「URL パラメーター」を選択します。

    検索ページでは、フォーム変数または URL パラメーターを使用して、結果ページに情報を渡します。

  4. 4 番目のボックスに、検索ページの検索パラメーターを入力するためのフォームオブジェクト名を入力します。

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

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

    フォームオブジェクトのパラメーター

  5. (オプション)「テスト」をクリックして、テスト値を入力します。次に、「OK」をクリックしてデータベースに接続し、レコードセットのインスタンスを作成します。

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

  6. レコードセットを確認したら、「OK」をクリックします。

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

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

高度な結果ページの作成

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

注意:

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

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

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

  3. レコードセットの名前を入力し、接続を選択します。

    ビジターが検索するデータが存在するデータベースへの接続を選択してください。

  4. SQL テキスト領域に Select ステートメントを入力します。

    ステートメントに、検索パラメーターを保持する変数を使用した WHERE 句があることを確認します。次の例では、変数は varLastNamevarDept です。

    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)を参照してください。

  5. SQL 変数に、検索パラメーターの値を指定します。「変数」領域で「+」ボタンをクリックして、変数名、初期設定値(ランタイム値が返されなかった場合に変数で使用する値)およびランタイム値(通常はリクエスト変数などブラウザーから送信された値を保持するサーバーオブジェクト)を入力します。

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

    ASP の例

    ColdFusion の場合、ランタイム値は #LastName##Department# になります。PHP の場合、ランタイム値は $_REQUEST["LastName"]$_REQUEST["Department"] になります。

  6. (オプション)「テスト」をクリックすると、初期設定の変数値を使用してレコードセットのインスタンスが作成されます。

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

  7. レコードセットを確認したら、「OK」をクリックします。

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

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

検索結果の表示

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

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

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

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

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

関連ページを開いて、既存のパラメーターをそのページに渡すリンクを作成できます。このサーバービヘイビアーは、ASP サーバーモデルを使用する場合のみ使用できます。

「詳細ページへ移動」サーバービヘイビアーを追加する前に、ページが別のページからフォームパラメーターまたは URL パラメーターを受け取ることを確認してください。このサーバービヘイビアーの役割は、パラメーターを 3 番目のページに渡すことです。例えば、結果ページから受け取った検索パラメーターを別のページに渡すことにより、ビジターが再度検索パラメーターを入力する手間を省くことができます。

また、ページ上で選択したテキストまたはイメージを関連ページへのリンクとして使用することもできます。または、何も選択せずにページ上にカーソルを置くと、自動的にリンクテキストが挿入されます。

  1. 「関連ページ」ボックスで「参照」をクリックし、関連ページファイルを指定します。

    現在のページにデータを送信する場合は、現在のページのファイル名を入力します。

  2. GET メソッドを使用する HTML フォームから直接受け取ったパラメーターや、ページの URL に含まれているパラメーターを渡す場合は、「URL パラメーター」オプションを選択します。
  3. POST メソッドを使用する HTML フォームから直接受け取ったパラメーターを渡す場合は、「フォームパラメーター」オプションを選択します。
  4. 「OK」をクリックします。

    新しいリンクをクリックすると、クエリーストリングを使用して関連ページにパラメーターが渡されます。

 Adobe

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

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン