コードヒントの使用



コードヒント機能を使用すると、コードを迅速に間違いなく挿入および編集することができます。 コードビューに文字を入力していくと、その入力内容を自動補完する候補のリストが表示されます。たとえば、タグ、属性または CSS プロパティ名の先頭の部分を入力すると、その入力対象に応じた選択肢が一覧表示されます。この機能により、コードを挿入したり編集したりする作業が簡単になります。また、タグに対して使用可能な属性、関数に対して使用可能なパラメータ、オブジェクトに対して使用可能なメソッドを調べることもできます。

コードヒントは、さまざまな種類のコードで使用できます。コードの文字入力を開始すると、該当するコードの種類に応じた適切な候補が一覧表示されます。たとえば、HTML タグ名に関するコードヒントのリストを表示するには、開始山形カッコ (<) を入力します。同じように、JavaScript のコードヒントを表示するには、オブジェクトの後にピリオド (ドット演算子) を入力します。

最良の結果を得るには (特に、関数とオブジェクトのコードヒントを使用する場合)、[コードヒント] 環境設定ダイアログボックスの [遅延] オプションを 0 秒に設定します。

コードヒント機能では、言語に組み込まれていないカスタムの JavaScript クラスも認識します。カスタムクラスは独自に作成したものでも、Prototype などのサードパーティ製ライブラリによって追加したものでもかまいません。

コードヒントのリストを閉じるには、BackSpace キー (Windows) または Delete キー (Macintosh) を押します。

コードヒントのビデオチュートリアルについては、www.adobe.com/go/lrvid4048_dw_jp を参照してください。

Dreamweaver の JavaScript サポートについて Dreamweaver エンジニアリングチームが説明する概要ビデオは、www.adobe.com/go/dw10javascript_jp を参照してください。

サポートされる言語およびテクノロジー

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

  • HTML

  • CSS

  • DOM (ドキュメントオブジェクトモデル)

  • JavaScript (カスタムクラスのヒントを含む)

  • Ajax

  • Spry

  • Adobe ColdFusion

  • JSP

  • PHP MySQL

  • ASP JavaScript

  • ASP VBScript

  • ASP.NET C#

  • ASP.NET VB

コードヒントメニューの表示

コードヒントメニューは、コードビューに文字を入力すると自動的に表示されますが、文字を入力せずに手動で表示することもできます。

  1. コードビュー ([ウィンドウ]-[コード]) で、挿入ポイントをタグ内に配置します。
  2. Ctrl + スペースキーを押します。

コードヒントによるコードビューでのコードの挿入

  1. コードの断片の先頭を入力します。たとえば、タグを挿入する場合は、開始山形カッコ (<) を入力します。属性を挿入する場合は、タグ名の直後に挿入ポイントを置き、スペースキーを押します。

    項目のリスト (タグ名や属性名など) が表示されます。

    リストを閉じるには、Esc キーを押します。
  2. リストをスクロールするには、スクロールバーまたは上矢印キーと下矢印キーを使用します。
  3. リストから項目を挿入するには、項目をダブルクリックするか、項目を選択して Enter キー (Windows) または Return キー (Macintosh) を押します。
    最近作成した CSS スタイルが CSS スタイルのコードヒントリストに表示されない場合は、コードヒントリストから [スタイルリストの更新] を選択してください。 デザインビューが表示されている場合、[スタイルリストの更新] を選択した後、デザインビュー上に無効なコードが一時的に表示されることがあります。この無効なコードをデザインビューから消すには、スタイルを挿入した後に F5 キーを押して表示内容を更新します。
  4. 終了タグを挿入するには、「</ (スラッシュ)」を入力します。
    注意： 初期設定では、終了タグが必要かどうかは Dreamweaver によって自動的に判定され、必要であれば自動的に挿入されます。この初期設定を変更すると、開始タグの最後の山形カッコ (>) を入力した後に Dreamweaver によって終了タグが挿入されるようにできます。また、終了タグをまったく挿入しないように初期設定を変更することもできます。[編集]-[環境設定]-[コードヒント] を選択し、[終了タグ] オプションのいずれかを選択します。

コードヒントによるタグの編集

  • ある属性を別の属性に置換するには、まず属性とその値を削除してから、前の説明に従って新しい属性とその値を追加します。

  • 値を変更するには、まず値を削除してから、前の説明に従って新しい値を追加します。

JavaScript コードヒントの更新

JavaScript に対して表示されるコードヒントリストの内容は、JavaScript ファイルに対して行った操作に応じて自動的に更新されます。たとえば、プライマリ HTML ファイルに対する作業の途中で、JavaScript ファイルに切り替えて変更を加えたとします。それから プライマリ HTML ファイルに戻ると、JavaScript ファイルに加えた変更はコードヒントに反映されています。ただし、自動更新が機能するのは JavaScript ファイルを Dreamweaver 上で編集した場合のみです。

Dreamweaver 以外で JavaScript ファイルを編集した後は、Ctrl + ピリオドを押すことで JavaScript のコードヒントを更新できます。

コードヒントとシンタックスエラー

Dreamweaver がコード内のシンタックスエラーを検出した場合、コードヒントが正常に機能しないことがあります。シンタックスエラーの情報は、ページの最上部にあるバーに表示されます。Dreamweaver がエラーを発見したコードの先頭行が [情報バーのシンタックスエラー警告] に表示されます。エラーを修正した後、それ以降に発生したエラーがあれば、それらが Dreamweaver 上に引き続き表示されます。

さらに、シンタックスエラーの発生した場所がわかりやすいよう、該当する行の行番号が赤くハイライト表示されます。このハイライトは、エラーがあるファイルのコードビューに表示されます。

Dreamweaver には、現在のページに関するシンタックスエラーだけでなく、関連するページのシンタックスエラーも表示されます。たとえば、作業対象の HTML ファイルで JavaScript ファイルをインクルードして使用する場合、インクルードする JavaScript ファイルにエラーがあると、そのファイルに関する警告も表示されます。エラーを含んだ関連ファイルは、ドキュメントの最上部に表示された名前をクリックして簡単に開くことができます。

[情報バーのシンタックスエラー警告] は、コーディングツールバーの [情報バーのシンタックスエラー警告] ボタンをクリックすることで無効にできます。

コードヒントの環境設定

コードヒントに関する環境設定の初期値は変更できます。たとえば、CSS プロパティ名や Spry コードヒントが表示されないようにするには、それらをコードヒントの環境設定でオフにします。また、コードヒント表示の遅延時間および終了タグに関する環境設定も指定できます。

コードヒントがオフの場合でも、Ctrl + スペースキーを押すと、コードビューにポップアップヒントが表示されます。
  1. [編集]-[環境設定] を選択します。
  2. 左の [カテゴリ] リストから [コードヒント] を選択します。
  3. 次のいずれかのオプションを設定します。
    終了タグ
    Dreamweaver による終了タグの挿入方法を指定します。 初期設定では、Dreamweaver により次の文字を入力した後に自動的に終了タグが挿入されます。</。この初期設定を変更して、開始タグの最後の山形カッコ (>) を入力した後に終了タグが挿入されるようにすることや、終了タグがまったく挿入されないようにすることもできます。

    コードヒントを使用可能にする
    コードビューでのコード入力時にヒントを表示します。 [遅延] スライダをドラッグして、該当するヒントが表示されるまでの時間 (秒) を設定します。

    メニュー
    入力時に表示するコードヒントの種類を設定します。 メニューに表示されるものをすべて使用することも、一部だけを使用することもできます。