- 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 サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
Web アプリケーションの開発のパネルの表示
挿入パネルのカテゴリポップアップメニューから「データ」カテゴリを選択すると、 ページに動的コンテンツとサーバービヘイビアーの追加を可能にするボタンのセットが 表示されます。
表示されるボタンの数と種類は、ドキュメントウィンドウで開いている ドキュメントの種類によって異なります。ボタンの上にマウスを移動すると、 そのボタンの機能を説明するツールヒントが 表示されます。
挿入パネルには、以下のアイテムをページに 追加するボタンがあります。
レコードセット
動的テキストまたは動的テーブル
レコードナビゲーションバー
コードビューに切り替える(表示/コード)と、挿入パネルのカテゴリーに、ページにコードを挿入できる追加のパネルが表示されることがあります。例えば、コードビューで ColdFusion ページを表示すると、挿入パネルの「CFML」カテゴリーで、CFML パネルが選択できる状態になります。
以下のパネルから、動的ページを作成するための様々な機能にアクセスすることができます。
バインディングパネル(ウィンドウ/バインディング):ページの動的コンテンツのソースを定義し、そのコンテンツをページに追加するときに使用します。
サーバービヘイビアーパネル(ウィンドウ/サーバービヘイビアー):動的ページにサーバーサイドロジックを追加するときに使用します。
データベースパネル(ウィンドウ/データベース): データベースの検証やデータベース接続の作成を行うときに使用します。
コンポーネントパネル(ウィンドウ/コンポーネント):ColdFusion コンポーネントのコードを確認、追加、または修正するときに使用します。
コンポーネントパネルは ColdFusion ページを開いた場合にのみ有効になります。
サーバービヘイビアーは、デザインタイムに動的ページに挿入され、ランタイムにサーバー上で実行される一連の命令です。
開発ワークスペースの設定のチュートリアルについては、www.adobe.com/go/vid0144_jp を参照してください。
Dreamweaver でのデータベースの表示
データベースに接続すると、Dreamweaver 内で その構造およびデータを表示できます。
-
ウィンドウ/データベースを選択して、 データベースパネルを開きます。
データベースパネルには、接続が作成されている すべてのデータベースが表示されます。ColdFusion サイトを開発している場合は、 ColdFusion Administrator でデータソースが定義されているすべての データベースがパネルに表示されます。
注意:Dreamweaver は、現在のサイトに対して 定義した ColdFusion サーバーを確認します。
パネルにデータベースが表示されない場合は、 データベース接続を作成する必要があります。
-
データベース内のテーブル、 ストアードプロシージャ、およびビューを表示するには、 リスト内の接続の横にある「+」記号をクリックします。
-
テーブル内の列を表示するには、テーブル名をクリックします。
列アイコンは、データタイプを反映し、 テーブルのプライマリキーを示します。
-
テーブル内のデータを表示するには、 リスト内のテーブル名を右クリック(Windows)するか、 Control キーを押しながらクリック(Macintosh)し、ポップアップメニューから「データの表示」を選択します。
ブラウザーでの動的ページのプレビュー
Web アプリケーションのデベロッパーは通常、 ページを Web ブラウザーで頻繁にチェックすることによって、デバッグを実行します。動的ページは、最初に手動でサーバーにアップロードすることなく、 ブラウザーですばやく表示できます (F12 キーを押します)。
動的ページをプレビューするには、 サイト定義ダイアログボックスの「テストサーバー」カテゴリにすべての情報を入力する必要があります。
Dreamweaver が 元のファイルの代わりに一時ファイルを使用するように指定することができます。このオプションを使用すると、Dreamweaver によって ページがブラウザーに表示される前に web サーバー上でページの一時的なコピーが実行されます(この一時的なコピーは、ページがブラウザーに 表示されたら、Dreamweaver によってサーバーから削除されます)。このオプションを設定するには、 編集/環境設定/ブラウザーでプレビューを選択します。
「ブラウザーでプレビュー」オプションを使用しても、 結果ページや詳細ページなどの関連ページ、画像ファイルなどの依存ファイル、 およびサーバーサイドインクルードはアップロードされません。欠落しているファイルをアップロードするには、 ウィンドウ/ファイルを選択してファイルパネルを開き、 ローカルフォルダー内でファイルを選択します。次に、ツールバーの青色の 上向き矢印をクリックして Web サーバーフォルダーにファイルをコピーします。
Dreamweaver で表示される データベース情報の制限
Oracle などの大規模なデータベースシステムを使用している場合は、 Dreamweaver によってデザインタイムに取得および表示される データベース項目の数を制限する必要があります。Oracle データベースには、 Dreamweaver がデザインタイムに処理できない項目が 含まれている場合があります。Oracle でスキーマを作成し、 デザインタイムに不必要なデータを除外するために そのスキーマを Dreamweaver で使用できます。
Microsoft Access では、 スキーマやカタログは作成できません。
それ以外にも、Dreamweaver によって デザインタイムに取得される情報の量を制限することで 作業の効率が向上する場合があります。データベースには、数十、数百のテーブルが含まれていることがあります。 そのような場合、作業中に一部のテーブルだけを表示した方がよいこともあります。スキーマまたはカタログで、 デザインタイムに取得されるデータベース項目の数を 制限できます。
Dreamweaver でスキーマやカタログを適用するには、 データベースシステム内で事前にスキーマまたはカタログを作成しておく必要があります。詳しくは、データベースシステムのマニュアルを参照するか、 システム管理者に問い合わせてください。
ColdFusion アプリケーションを開発している場合は、 Dreamweaver または Microsoft Access を使用してスキーマまたは カタログを適用することはできません。
-
Dreamweaver で動的ページを開き、 データベースパネルを開きます(ウィンドウ/データベース)。
データベース接続が存在する場合は、 リスト内の接続を右クリック(Windows)するか、Control キーを押しながらクリック(Macintosh)し、 ポップアップメニューから「接続の編集」を選択します。
接続が存在しない場合は、 パネルの上部にある「+」ボタンをクリックして作成します。
-
接続のダイアログボックスで「詳細設定」をクリックします。
-
スキーマまたはカタログを指定し、「OK」をクリックします。
ColdFusion のストアードプロシージャ および ASP コマンド用にプロパティインスペクターを設定
選択したストアードプロシージャを修正します。選択可能なオプションは、 サーバーテクノロジーによって異なります。
-
オプションを編集します。プロパティインスペクターで 新しいオプションを選択すると、Dreamweaver によって ページが更新されます。
入力フィールドのオプション
このプロパティインスペクターは、 Dreamweaver で認識できない入力タイプが検出されると表示されます。通常、これはタイプミスやその他のデータ入力エラーによって起こります。
例えば、プロパティインスペクターでスペルミスを 修正するなどして、フィールドタイプを Dreamweaver で認識できる値に変更すると、 プロパティインスペクターが更新され、 該当するタイプのプロパティが表示されます。プロパティインスペクターで、 以下のオプションを設定します。
入力フィールド
フィールドに名前を割り当てます。このボックスへの入力は必須で、 固有の名前が必要です。
タイプ
フィールドの入力タイプを設定します。このボックスの内容には、 現在 HTML ソースコードに表示されている 入力タイプの値が反映されます。
値
フィールドの値を設定します。
パラメーター
選択すると、パラメーターダイアログボックスが開くので、 フィールドの現在属性の表示、および属性の追加または削除が可能になります。