DreamweaverCS4のベータ版でLiveView機能を試してみた

DreamweaverCS4のベータ版が出たので、一番気になっていたLiveViewの機能を早速試してみました。LiveViewというは、CS4の新機能で、safariにも搭載されているレンダリングエンジン、webkitでレンダリングしてプレビューできる機能です。

今回はLiveViewを有効にしたときに「clearfixが有効になるか」と「javascriptが動くか」というのを見てみました。ソースは下記のとおり。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>たいとる</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<h1 id="head">test.com</h1>
<p class="clearfix">
    <img src="image/test.gif" alt="test" />
    本文本文本文本文本文本文本文本文本文本文本文本文本文本文
</p>
<ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>
</body>
</html>

p img {
    float: left;
}

.clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

window.onload = function(){
    var h = document.getElementById("head");
    h.style.color = "#F00";
}

まず、以下は通常のデザインビューです。

通常のデザインビュー

で、以下がLiveViewを有効にしたときのプレビューです。

LiveViewで見たプレビュー画面

clearfixとjavascriptによるスタイルの変更が効いているのがわかります。本当はclearfixはLiveViewで見なくてもレンダリングしてくれるとありがいんですけどね。

また、LiveCodeというのもあって、javascriptでDOM操作した後のHTMLのコードの変化がわかるという機能です。

LiveCodeの表示画面

h1のところが以下のように変化しています。

<h1 id="head" style="color: rgb(255, 0, 0); ">test.com</h1>

この例ではonloadでstyleを変更しただけでしたが、例えばドラッグしてボックスを移動した際などはそれに合わせてコードも変わっていくのが見れるようです。