- Dreamweaver ユーザーガイド
- はじめに
- Dreamweaver と Creative Cloud
- Dreamweaver のワークスペースとビュー
- サイトの設定
- ファイルの管理
- レイアウトとデザイン
- CSS
- ページコンテンツとアセット
- ページプロパティの設定
- CSS 見出しプロパティおよび CSS リンクプロパティの設定
- テキストの操作
- テキスト、タグ、属性の検索と置換
- DOM パネル
- ライブビューでの編集
- Dreamweaver でのドキュメントのエンコード
- ドキュメントウィンドウでのエレメントの選択および表示
- プロパティインスペクターでのテキストプロパティの設定
- web ページのスペルチェック
- Dreamweaver での区切り線の使用
- Dreamweaver でのフォントの組み合わせの追加と変更
- アセットを使用した作業
- Dreamweaver での日付の挿入と更新
- Dreamweaver でのお気に入りアセットの作成と管理
- Dreamweaver でのイメージの挿入と編集
- メディアオブジェクトの追加
- Dreamweaver でのビデオの追加
- HTML5 ビデオの挿入
- SWF ファイルの挿入
- オーディオエフェクトの追加
- Dreamweaver での HTML5 オーディオの挿入
- ライブラリ項目の操作
- Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
- リンクおよびナビゲーション
- jQuery Widget と効果
- web サイトのコーディング
- Dreamweaver でのコーディングについて
- Dreamweaver のコーディング環境
- コーディングの環境設定
- コードカラーリングのカスタマイズ
- コードの記述と編集
- コードヒントとコード補完機能
- コードの折りたたみと展開
- スニペットでコードを再利用する
- 構文チェックコード
- コードの最適化
- デザインビューでのコードの編集
- ページのヘッドコンテンツの操作
- Dreamweaver でのサーバーサイドインクルードの挿入
- Dreamweaver でのタグライブラリの使用
- Dreamweaver へのカスタムタグの読み込み
- JavaScript ビヘイビアーの使用(基本操作)
- JavaScript に組み込まれているビヘイビアーの適用
- XML および XSLT について
- Dreamweaver でのサーバーサイド XSL 変換の実行
- Dreamweaver でのクライアントサイド XSL 変換の実行
- Dreamweaver での XSLT の文字エンティティの追加
- コードのフォーマット
- 製品間ワークフロー
- テンプレート
- Dreamweaver テンプレートについて
- テンプレートおよびテンプレートから作成されたドキュメントの認識
- Dreamweaver テンプレートの作成
- テンプレート編集可能領域の作成
- Dreamweaver でのリピート領域およびテーブルの作成
- テンプレートの任意の領域の使用
- Dreamweaver での編集可能なタグ属性の定義
- Dreamweaver でネストされたテンプレートを作成する方法
- テンプレートの編集、更新、削除
- Dreamweaver での xml コンテンツの書き出しおよび読み込み
- 既存のドキュメントでのテンプレートの適用または削除
- Dreamweaver テンプレートでのコンテンツの編集
- Dreamweaver でのテンプレートタグのシンタックスルール
- テンプレート領域のハイライト表示の環境設定
- Dreamweaver でテンプレートを使用する利点
- モバイルとマルチスクリーン
- 動的サイト、ページおよび web フォーム
- web アプリケーションについて
- アプリケーション開発のためのコンピューター設定
- データベース接続のトラブルシューティング
- Dreamweaver での接続スクリプトの削除
- 動的ページのデザイン
- 動的コンテンツソースの概要
- 動的コンテンツのソースの定義
- ページへの動的コンテンツの追加
- Dreamweaver での動的コンテンツの変更
- データベースのレコードの表示
- Dreamweaver でのライブデータの入力とトラブルシューティング
- Dreamweaver でのカスタムサーバービヘイビアーの追加
- Dreamweaver を使用したフォームの作成
- フォームを使用したユーザーからの情報の収集
- Dreamweaver での ColdFusion フォームの作成と有効化
- web フォームの作成
- フォームエレメントの HTML5 サポート強化
- Dreamweaver を使用したフォームの開発
- アプリケーションのビジュアル開発
- web サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
Dreamweaver 以降では、ユーザーインターフェイスが簡素化されています。そのため、この記事で説明されているオプションの一部が Dreamweaver 以降には存在しない場合があります。詳しくは、こちらの記事を参照してください。
動的コンテンツのソースについて
動的コンテンツソースは、Web ページで使用する動的コンテンツの取得元および表示元となる情報の保存場所です。動的コンテンツのソースには、データベースに保存された情報だけでなく、HTML フォームを使用して送信された値、サーバーオブジェクトに含まれる値、およびその他のコンテンツソースを定義できます。
Dreamweaver では、簡単にデータベースに接続でき、動的コンテンツの抽出元になるレコードセットを作成できます。レコードセットは、データベースクエリーの結果です。クエリーによって、要求する特定の情報が抽出され、指定したページ内に表示されます。レコードセットは、データベースに含まれる情報と表示するコンテンツに基づいて定義されます。
レコードセットは、テクノロジベンダーによって違う名前で呼ばれています。ASP と ColdFusion では、レコードセットは「クエリー」と定義されています。ユーザー入力やサーバー変数など、他のデータソースを使用している場合、Dreamweaver で定義されるデータソースの名前は、そのデータソースの名前と同じです。
動的 Web サイトには、動的コンテンツを取得および表示する元となるデータソースが必要です。Dreamweaver では、データベース、リクエスト変数、URL 変数、サーバー変数、フォーム変数、ストアードプロシージャ、およびその他の動的コンテンツのソースを使用できます。データソースに応じて、要求を満たす新しいコンテンツを取得するか、またはユーザーの要求を満たすようにページの内容を変更することができます。
Dreamweaver で定義したコンテンツソースはすべて、バインディングパネル内のコンテンツソースのリストに追加されます。これで、現在選択しているページにコンテンツソースを挿入できます。
レコードセットについて
Web ページからデータベースに保存されているデータに直接アクセスすることはできません。その代わりに、レコードセットを使用してデータを操作します。レコードセットとは、データベースクエリーを使用してデータベースから抽出した情報(レコード)のサブセットです。クエリーは、データベースから特定の情報を検索して抽出するための検索ステートメントです。
動的 Web ページのコンテンツソースとしてデータベースを使用する場合は、まず、取得したデータを格納するレコードセットを作成します。レコードセットは、コンテンツを格納するデータベースと動的 Web ページを生成するアプリケーションサーバーの間を媒介します。レコードセットは、一時的にアプリケーションサーバーのメモリに格納され、データ検索を高速化します。不要になったレコードセットは、サーバーによって破棄されます。
クエリーを使用すると、特定の列やレコードのみ、または列とレコードの両方を含むレコードセットを作成できます。データベーステーブルのすべてのレコードと列が含まれるレコードセットを作成することもできます。ただし、アプリケーションでデータベース内の全データを使用することはほとんどないので、レコードセットはできる限り小さくしてください。Web サーバーではレコードセットが一時的にメモリに保存されるため、レコードセットが小さいほど使用されるメモリ量が少なくなり、サーバーパフォーマンスの向上につながります。
データベースクエリーは、SQL(Structured Query Language)で記述します。SQL は簡単な言語で、データベースへのデータの追加、データベースからのデータの取得や削除を行うことができます。Dreamweaver に組み込まれた SQL ビルダーを使用すると、SQL の知識がなくても簡単なクエリーを作成できます。ただし、複雑な SQL クエリーを作成する場合は、SQL の基本的な知識があると、より高度なクエリーを作成して柔軟性の高い動的ページをデザインできます。
Dreamweaver で使用するレコードセットを定義する前に、データベースへの接続を作成する必要があります。データが存在しない場合は、データベースにデータを入力します。サイトのデータベース接続をまだ定義していない場合は、開発するサーバーテクノロジのデータベース接続に関する章を参照し、データベース接続の作成に関する手順に従ってください。
URL パラメーターとフォームパラメーターについて
URL パラメーターには、ユーザーによって入力された取得情報が格納されます。URL パラメーターを定義するには、データを送信するために GET メソッドを使用するフォームまたはハイパーテキストリンクを作成します。この情報は、要求したページの URL に追加され、サーバーに送信されます。URL 変数を使用する場合、クエリーストリングには、フォームフィールドに関連する 1 つまたは複数の名前と値のペアが含まれます。これらの名前と値のペアは URL に追加されます。
フォームパラメーターには、Web ページの HTTP 要求に含まれる取得情報が格納されます。POST メソッドを使用するフォームを作成した場合、フォームによって送信されたデータはサーバーに渡されます。作業を始める前に、フォームパラメーターがサーバーに送信されたことを確認してください。
セッション変数について
セッション変数を使用すると、ユーザーのアクセス(セッション)中に保持される情報を格納および表示することができます。サーバーは、各ユーザーに対して個別にセッションオブジェクトを作成し、指定期間中またはオブジェクトが明示的に終了されるまでこれを保持します。
セッション変数は、ユーザーのセッション期間全体にわたって持続し、ユーザーが Web サイト内のページを移動しても保持されるため、ユーザーの設定を格納するには最適です。また、セッション変数を使用すると、ページの HTML コードへの値の挿入、ローカル変数への値の割り当て、または条件式を評価するための値の提供が可能です。
ページのセッション変数を定義する前に、これらをソースコードで定義する必要があります。Web アプリケーションのソースコードでセッション変数を定義すると、Dreamweaver からセッション変数の値を取得し、Web ページで使用することができます。
セッション変数のしくみ
ユーザーが訪問している間は、セッション変数に情報(通常はユーザーから送信されたフォームパラメーターまたは URL パラメーター)を格納しておき、その情報を Web アプリケーションのすべてのページで使用できるようにします。例えば、電子メール、株価、天気予報、およびニュースを利用できる Web ポータルにユーザーがログオンすると、Web アプリケーションはログイン情報をセッション変数に格納し、サイトのページ全体でこの変数を使用してユーザーを識別します。これにより、ユーザーがサイト内を移動する間、ユーザーが選択した種類のコンテンツのみが表示されるようにすることができます。セッション変数は、安全機構として利用することもできます。つまり、アカウントで何も動作が行われない時間が一定の長さに達した場合は、そのユーザーのセッションを終了します。これにより、ユーザーが Web サイトからのログオフを忘れた場合も、サーバーメモリと処理リソースが解放されます。
セッション変数に情報が格納されているのは、ユーザーのセッションが終了するまでです。セッションは、ユーザーがアプリケーション内でページを開いたときに開始されます。セッションが終了するのは、一定の時間が経過してもユーザーが別のページを開かなかったとき、またはユーザーが明示的にセッションを終了したとき(通常は "ログオフ" リンクをクリック)です。セッションが存在している間は、セッションはユーザーに固有のもので、各ユーザーがそれぞれ別のセッションを持ちます。
セッション変数を使用して、Web アプリケーションのすべてのページでアクセスできる情報を格納します。格納する情報は、ユーザーの名前、初期設定のフォントサイズ、ユーザーのログインが正常に実行されたかどうかを示すフラグなど様々です。セッション変数のもう 1 つの一般的な用途は、ユーザーがオンラインクイズでこれまでに正解した問題数や、オンラインカタログでこれまでに選択した商品など、現在の記録を保持することです。
セッション変数が機能するのは、ユーザーのブラウザーが Cookie を受け入れるように設定されている場合のみです。セッションの開始直後に、サーバーはユーザーを一意に識別するセッション ID 番号を作成し、この ID 番号が含まれている Cookie をユーザーのブラウザーに送信します。ユーザーがサーバー上の別のページを要求した場合、サーバーはブラウザー内の Cookie を読み取ってユーザーを識別し、サーバーのメモリに格納されているユーザーのセッション変数を取得します。
セッション変数の情報の収集、保存、取得
セッション変数を作成する前に、格納する情報を取得し、サーバーに送信して保存する必要があります。URL パラメーターを含む HTML フォームまたはハイパーテキストリンクを使用すると、情報を収集し、サーバーに送信することができます。また、ユーザーのコンピューターに保存されている Cookie、ページ要求と共にユーザーのブラウザーから送信された HTTP ヘッダー、またはデータベースから情報を取得することもできます。
セッション変数に URL パラメーターを保存する一般的な例は、ハードコーディングされた URL パラメーターを使用しているある商品カタログです。このパラメーターはリンクを使用して作成され、このパラメーターによってサーバーに送信された商品情報がセッション変数に格納されます。ユーザーが買い物を続けている間、ユーザーが "Add to shopping cart" リンクをクリックすると、商品番号がセッション変数に格納されます。ユーザーが精算のページに進むと、セッション変数に格納されている商品番号が取得されます。
フォームベースの調査は、フォームパラメーターをセッション変数に格納するページの一般的な例です。フォームによって選択された情報は、サーバーに送信されます。サーバーでは、アプリケーションのページによって、調査が記録され、回答がセッション変数に格納されます。セッション変数は、調査から収集した回答を集計するアプリケーションに送られます。または、後の使用に備えてデータベースに情報が格納されます。
サーバーに情報が送信された後でセッション変数に情報を格納するには、URL パラメーターまたはフォームパラメーターによって指定されたページに、サーバーモデルに応じたコードを追加します。このページは、「宛先」ページと呼ばれ、HTML フォームの action 属性または開始ページのハイパーテキストリンクの href 属性で指定します。
セッション変数に値を格納した後に、Dreamweaver を使用してセッション変数から値を取得し、Web アプリケーションで使用することができます。Dreamweaver でセッション変数を定義した後で、ページ内にその値を挿入できます。
それぞれの HTML のシンタックスは以下のとおりです。
<form action="destination.html" method="get" name="myform"> </form> <param name="href"value="destination.html">
使用するサーバーテクノロジと、情報を取得するために使用するメソッドの両方により、セッション変数へ情報を格納するためのコードが決まります。各サーバーテクノロジの基本的なシンタックスは以下のとおりです。
ColdFusion
<CFSET session.variable_name = value>
ASP
<% Session("variable_name") = value %>
value 式は、Request.Form(“lastname”) などのサーバー式です。例えば、product という URL パラメーター(または HTML フォームと GET メソッドおよび product というテキストフィールド)を使用して情報を収集する場合は、以下のステートメントによって prodID というセッション変数に情報を格納します。
ColdFusion
<CFSET session.prodID = url.product>
ASP
<% Session("prodID") = Request.QueryString("product") %>
HTML フォームと post メソッドおよび txtProduct というテキストフィールドを使用して情報を収集する場合、以下のステートメントによってセッション変数に情報を格納します。
ColdFusion
<CFSET session.prodID = form.txtProduct>
ASP
<% Session("prodID") = Request.Form("txtProduct") %>
セッション変数に格納する情報の例
多くの高齢者がアクセスするサイトをデザインしているとします。ユーザーがサイトのテキストサイズをカスタマイズできるように、Dreamweaver で「ようこそ」画面に 2 つのリンクを追加します。リンクの 1 つをクリックすると大きくて読みやすいテキストが表示され、もう 1 つをクリックすると通常サイズのテキストが表示されます。
各リンクには fontsize という URL パラメーターが含まれており、このパラメーターによってユーザーが設定したテキストサイズがサーバーに送信されます。次に示すのは Adobe ColdFusion® の例です。
<a href="resort.cfm?fontsize=large">Larger Text</a><br> <a href="resort.cfm?fontsize=small">Normal Text</a>
テキストに関するユーザーの環境設定をセッション変数に格納し、この変数を使用してユーザーが要求する各ページのフォントサイズを設定します。
宛先ページの先頭付近に以下のコードを入力し、ユーザーのフォントサイズの環境設定を格納する font_pref というセッションを作成します。
ColdFusion
<CFSET session.font_pref = url.fontsize>
ASP
<% Session("font_pref") = Request.QueryString("fontsize") %>
ユーザーがハイパーテキストリンクをクリックすると、テキストに関するユーザーの環境設定が、URL パラメーターによってそのページから宛先ページに送信されます。宛先ページのコードは、この URL パラメーターを font_pref セッション変数に格納します。ユーザーのセッション中は、アプリケーションのすべてのページがこの値を取得し、選択されたフォントサイズで表示します。
ASP と ColdFusion のアプリケーション変数
ASP および ColdFusion では、アプリケーション変数を使用して、アプリケーションの存続期間中にわたり保持される全ユーザー共通の情報を格納および表示できます。アプリケーションの存続期間とは、最初のユーザーがアプリケーションのページを要求してから Web サーバーが停止するまでの期間です。アプリケーションは、仮想ディレクトリおよびその従属ディレクトリ内のすべてのファイルとして定義されています。
アプリケーション変数はアプリケーションの存続期間にわたって持続し、全ユーザーに共通なので、現在の時刻や日付など全ユーザーに提示する必要がある情報を格納するには最適です。アプリケーション変数の値は、アプリケーションのコードで定義します。
ASP サーバー変数
動的コンテンツのソースとして Request.Cookie、Request.QueryString、Request.Form、Request.ServerVariables、および Request.ClientCertificates の ASP サーバー変数を定義することができます。
ColdFusion サーバー変数
ColdFusion では、以下のサーバー変数を定義できます。
クライアント変数
特定のクライアントにデータを関連付けます。クライアント変数は、ユーザーがアプリケーション内の各ページおよびセッションを移動するときに、アプリケーションの状態を維持します。"状態の維持" とは、ページ間またはセッション間で情報を保持することです。これによって、ユーザーおよびユーザーの以前の選択や設定をアプリケーションに記憶します。
Cookie 変数
ブラウザーによってサーバーに渡された Cookie にアクセスします。
CGI 変数
ColdFusion を実行しているサーバーに関する情報、ページを要求しているブラウザーに関する情報、およびその他の処理環境に関する情報を提供します。
サーバー変数
すべてのクライアントとサーバー上のすべてのアプリケーションからアクセスできます。サーバー変数は、サーバーが停止するまで保持されます。
ローカル変数
ColdFusion ページ内で CFSET タグまたは CFPARAM タグで作成されます。