今回は、Dreamweaver のライブコード機能を使って、閲覧中のページのコードを確認する方法をご紹介します。

最近は、JavaScript の使用により、ソースコードとブラウザ内に表示されるコードが異なるケースが増えています。例えば jQuery Mobile は、ページを表示する際に、リンクタグをボタンに変換する等、様々な操作を HTML に対して行います。こんなときに、Dreamweaver のライブコー ド機能を使えば、変更の前後で HTML がどのように変わったのか、一目で確認することができます。
→サンプルコードのダウンロード

ライブコードの表示

サンプルを Dreamweaver で開き、分割ビューの表示にしたら、ドキュメントツールバーの 「ライブビュー」 ボタンをクリックして、jQuery Mobile のサイトを操作できる状態にします。このときコードビューの背景は白くなっていると思います。

次に、ドキュメントツールバーの「ライブコード」ボタンを押すと、コードビュー内のソースコードがライブコードに切り替わります。ライブコード表示時には背景が黄色くなります。

あるタグがライブ表示時にどのように変更されるのかを確認したい場合は、タグの一部を選択しておくと、ライブコード表示にした際に、変更された領域がハイライトされます。下の例では、a タグ内の一部を選択しておいたことで、周囲に div タグや span タグが追加された様子が表示されています。

ライブビューの操作によるコードの変化を即座に通知

ライブビュー内で、マウスをボタンの上に移動してみて下さい。それに応じてボタンの色が少し濃い色に変化するのが分かると思います。この変化も HTML の構造を操作することで実現されています。

このように、操作の結果としてライブコードが変化した場合には、コードビュー内の該当箇所がハイライト表示されます。下の例では、マウスを 「本サイトについて」 から 「互換化とは」 に移動させた結果として、「本サイトについて」 のボタンは hover から up に、逆に 「互換化とは」 のボタンは up から hover に変わったことが示されています。

インスペクトモード

上の操作だけでは、コード内のどこが変わっているのか、確認が難しかったかもしれません。そのような場合にインスペクトモードを利用すると、ライブビュー上では、マウスの置かれた領域の背景が別の色で表示され、コードビュー内では、ライブビュー内で変更のあった領域に相当する HTML のライブコードがハイライト表示されるようになります。

インスペクトモードを利用するには、ドキュメントバーの 「インスペクト」 ボタンをクリックします。

ライブコードビューのカラーリング

ライブコード表示にすると、コードビューの背景が黄色に変わります。この背景色は好みの色に変更することが可能です。

変更するには、環境設定パネルを開き、「コードカラーリング」 カテゴリーを選択して、「ライブコードの背景」の値を変更します。初期状態では 「#FF7」 が指定されています。もう少し薄い色の 「#FFD」 に変えてみたのが下の例です。

ライブコードは、公開中のサイトに対しても有効です。試しに、ライブコードをオンにして、本サイトの jQuery Mobile 版である http://adobe-html5.jp/sp/ をドキュメントバーのアドレスの欄に入力してみて下さい。