コードヒントとコード補完機能

Dreamweaver のインテリジェントなコード補完またはコード ヒント機能を使用すると、入力ミスやその他のよくある間違いを減らしてコードをすばやく挿入および編集できます。

この機能を使用して、次の項目を確認することもできます。

• タグに対して使用可能な属性
• 関数に対して使用可能なパラメーター
• オブジェクトに対して使用可能なメソッド

Dreamweaver では、次の言語およびテクノロジに関するコードヒントがサポートされています。

• HTML
• CSS
• JavaScript 
• PHP

コードヒントとコード補完機能がこれらの言語でどのように機能するかについて説明します。

コードヒントを使用可能にする

コードヒントを使用可能にするには、編集／環境設定／コードヒントを選択し、「コードヒントを使用可能にする」を選択します。コードヒントを使用不可にするには、「コードヒントを使用可能にする」の選択を解除します。

中括弧と引用符の自動挿入を有効にするにはそれぞれ、「括弧を自動挿入」および「引用符を自動挿入」を選択します。

コードヒントで説明を有効にするには、「ツールヒントを有効にする」を選択します。その後、コードヒントに説明が表示されます。

HTML コードヒント

HTML では次のタイプのコードヒントを使用できます。

• タグのヒント
• 属性名のヒント
• 属性値のヒント

タグのヒント

キーボードの < キーを押してコードの入力を開始します。入力を始めると、有効な HTML タグが表示されます。入力しようとしているストリングがメニューに表示されている場合は、そのストリングまでスクロールして Enter キーまたは Return キーを押すと、入力が完了します。

例えば、「<」を入力すると、ポップアップメニューにタグ名のリストが表示されます。タグ名の残り部分を入力する代わりに、メニューからタグを選択してテキストに追加することができます。

これらの HTML タグのヒントには、タグの簡単な説明（ある場合）も含まれています。

属性名のヒント

Dreamweaver でのコーディングの際には、タグの適切な属性が表示されます。使用できる有効な属性名を表示するには、タグ名を入力してスペースバーを押します。

属性値のヒント

属性値のヒントテキストは静的または動的のどちらでもかまいません（例えば、コードヒントには、関連ファイルの内容に基づいて値が表示されます）。

ほとんどの属性値のヒントは静的です。target 属性値の例を次に示します。この値自体が静的なので、ヒントも静的になります。 

Dreamweaver では、必要とする属性値（id、target、src、href、class など）の動的なコードヒントが表示されます。

動的に表示されるコードヒントの例を次にいくつか示します。 

src の動的なコードヒント

この例では、「src」と入力すると有効な属性値が表示され、「images」を選択すると、画像フォルダー内にある実際の有効な画像が Dreamweaver に表示されます。次に、下にスクロールして目的の画像を選択します。

CC ライブラリのアセットがある場合は、「src」と入力したときにそのアセットも表示されます。これらの CC ライブラリアセットはクラウドアイコンで示されます。

CC ライブラリアセットを選択すると、画像サイズをリサンプリングして画像の形式を変更するためのポップアップメニューが表示されます。

href の動的なコードヒント

「href」と入力すると、Dreamweaver ではフォルダー内のファイルのリストが表示されます。また、リンク先となるファイルを参照して選択するためのオプションも表示されます。

id および style の動的なコードヒント

CSS ファイルで ID を定義済みの場合は、HTML ファイルで「id」と入力すると、使用可能なすべての ID が表示されます。

同様に、CSS スタイルを定義済みの場合は、HTML ファイルで「style」と入力すると、使用可能なすべてのスタイルが表示されます。

CSS コードヒント

コードヒントは、次のように様々なタイプの CSS に使用できます。

• @ルール
• プロパティ
• 擬似セレクターおよび擬似エレメント
• ショートハンド

コードヒントとは異なり、ヒントは CSS プロパティに使用することもできます。

CSS @ルールのコードヒント

Dreamweaver では、次に示すように、すべてのアットルールのコードヒントが CSS ルールの説明と共に表示されます。

CSS プロパティのヒント

CSS プロパティの入力時にコロンを入力すると、有効な値の選択に役立つコードヒントが表示されます。

次のコード例では、「font-family:」と入力すると、有効なフォントセットが表示されます。

いずれかのフォントセットを選択するか、これらのヒント内からフォントを管理ダイアログを開いて、優先するフォントを設定できます。

便利なコードヒントのもう 1 つの例として、CSS でカラーを使用する場合が挙げられます。カラーに関連するプロパティ（境界線の色や背景色など）の入力時にコロンを入力すると、コードヒントにカラーのリストが表示されます。このリストからカラーを選択するか、コードヒント内からカラーピッカーを開いて、優先するカラーを設定できます。

CC ライブラリのカラースウォッチがある場合は、コードヒントにそのスウォッチも表示されます。

擬似セレクターおよび擬似エレメントのヒント

CSS 擬似セレクターをセレクターに追加し、エレメントの特定の状態を定義することができます。たとえば、:hover を使用すると、セレクターによって指定されたエレメントの上にユーザーがマウスを置くとスタイルが適用されます。

「:」と入力すると、カーソルが適切なコンテキストにある場合は、Dreamweaver に有効な疑似セレクターのリストが表示されます。

「::」と入力すると、カーソルが適切なコンテキストにある場合は、Dreamweaver に有効な疑似エレメント（エレメントの指定された部分のスタイル設定に使用されます）のリストが表示されます。

CSS ショートハンドのヒント

ショートハンドプロパティは、他の複数の CSS プロパティの値を同時に設定できる CSS プロパティです。CSS ショートハンドプロパティの例には、背景やフォントのプロパティなどがあります。

下の例に示されているように、CSS ショートハンドプロパティ（たとえば、background など）を入力した場合、スペースを入力すると Dreamweaver に次のように表示されます。

• 関連性順に適切なプロパティ値
• 使用する必要がある必須の値（たとえば、font を使用する場合、font-size と font-family が必須です）
• そのプロパティのブラウザー展開

CSS ショートハンドプロパティが入力されると、コードヒントにも入力したプロパティの値が表示されます。

CSS コードヒント

一部の CSS プロパティ（box-shadow または text-shadow など）では、どの値がそのプロパティに従う必要があるかを示すヒントと、アスタリスクを使用してどの値が必須の値であるかを示すヒントが Dreamweaver に表示されます。 

また、ブラウザーが CSS をどのように解釈するかを確認することもできます。

JavaScript のコードヒント

JavaScript ファイルでは、変数および関数パラメーターのコードヒントが Dreamweaver によって提供されます。 

次の例では、コードスニペットにタイプが表示されます。

JavaScript に対して表示されるコードヒントリストの内容は、JavaScript ファイルに対しておこなった操作に応じて自動的に更新されます。例えば、プライマリ HTML ファイルに対する作業の途中で、JavaScript ファイルに切り替えて変更を加えたとします。プライマリ HTML ファイルに戻ると、JavaScript ファイルに加えた変更はコードヒントリストに反映されています。 

ライブオブジェクトの検査

Dreamweaver は、JavaScript の型のコードヒントの自動更新もおこないます。

たとえば、変数を数値と定義した場合、Dreamweaver にその情報が保持されます。コード内でその変数を後で参照すると、その型が示されます。

変数の型（文字列に変更したとします）を変更した場合、Dreamweaver のコードヒントはその変数が文字列であることを自動的に示します。

動的文書の追加

特定の関数にコメントを追加した場合、その関数のヒントが表示されると、Dreamweaver にその関数のドキュメントも表示されます。 

PHP コードヒント

Dreamweaver は、PHP 5.6 および 7.1 バージョンのコードヒントをサポートしています。これらの PHP のコードヒントはサイト固有であり、主要なすべての関数、クラスおよび定数を網羅します。

PHP バージョン 5.6 および 7.1 について詳しくは、PHP マニュアルを参照してください。

サイト固有のコードヒントについて詳しくは、サイト固有のコードヒントを参照してください。

便利な PHP のコードヒント機能には、変数の自動補完機能があります。

ドル記号（$）を入力すると、現在のスクリプト内のすべての変数のリストが表示されます。目的の変数を選択して、Enter/Return キーを押します。関連ファイルの変数も表示されるので、同じ変数が別の目的で再利用されるリスクを排除できます。

PHP 7.1 が初期値として設定されている場合は PHP 7.1 固有のコードヒントが表示されます。

PHP コードヒントのディレイ設定の編集

.php ファイルでのコード入力のパフォーマンスを向上させるために、Dreamweaver 2017.5 以降には、PHP コードヒントのディレイが追加されています。PHP コードを入力すると、400 ミリ秒後にヒントが表示されます。PHP コードのディレイ設定を変更する場合は、この手順に従います。

サイト固有のコードヒント

Dreamweaver では、Joomla、Drupal、Wordpress または他のフレームワークを使用して、コードビューで作成しながら PHP のコードヒントを表示できます。コードヒントを表示するには、サイト固有のコードヒントダイアログボックスを使用して先に設定ファイルを作成する必要があります。設定では、サイト固有のコードヒントを検索する場所を Dreamweaver に指示します。

サイト固有のコードヒントの使用方法に関するビデオチュートリアルについては、www.adobe.com/go/learn_dw_comm13_jp を参照してください。

設定ファイルの作成

Dreamweaver でコードヒントを表示するために必要な設定ファイルを作成するには、サイト固有のコードヒントダイアログボックスを使用します。

デフォルトでは、Dreamweaver は設定ファイルを Adobe Dreamweaver CS5¥configuration¥Shared¥Dinamico¥Presets ディレクトリに保存します。

サイト構造の保存

サイト固有のコードヒントダイアログボックスで作成したカスタマイズ済みのサイト構造を保存できます。

サイト構造の名前の変更

サイト構造の名前を変更するときは、3 つのデフォルトのサイトフレームワーク構造の名前または「custom」という単語は使用できないことに注意してください。

サイト構造へのファイルまたはフォルダーの追加

フレームワークに関連付けられている任意のファイルまたはフォルダーを追加できます。ファイルまたはフォルダーを追加したら、スキャンするファイルのファイル拡張子を指定できます。 

サイトでのファイル拡張子のスキャン

サイト構造に含まれるファイル拡張子を表示および編集するには、拡張子を検索ダイアログボックスを使用します。