開発部だより 第90回
最近、ちょっとDreamweaverで感動した機能があったので、ご紹介しようかと！
Dreamweaverの「ライブビューとライブコード」機能
です。まあ自分が、Dreamweaverを主にColdFusionのコードエディターとしてしか使用していなかったせいもあるのですが、いや〜久しぶりに、CSSでのデザインにはまってしまいましたよ（苦笑）
普段は、社内にデザイン部があるので、Webサイトや制作するページのデザインなどのコンセプトやイメージを伝えてデザインを行なってもらっているんですが、今回は、実行時に動的にページが作成され、ブラウザからはソースが隠されてしまっていたので頼めなかったんですよ。
自分でやり始めたのですが、最近はFlexでのプログラムがメインでしたので、既存のHTML（JavaScriptで動的に作成）を改編するのって、デザインが大変
なぜって、動的に生成されるページが、ブラウザでソースを表示しても、その部分が表示されずどんなタグ構成になっているか分らないんです。
内部のタグ構成が複雑な為、CSSを適用しても、意図したとおりに表示されなかったりするんですよね〜
上手くいったと思って、IE以外で表示テストをすると、動的に作成したコンテンツ領域の背景が透けてしまっていたり・・・
IEのバージョンによって、表示の仕方も異なるので、大変でした。
そんな時に、役にたったのが、Dreamweaver CS4（まだ、最新版は使っていないので）の「ライブビュー」機能！
これは、Dreamweaver CS4から搭載された機能で、Dreamweaver上で、JavaScriptの動作やSCCの適用状態をブラウザなしで確認できる機能なのですが、「ライブビュー」中に「ライブコード」を表示すると、ボタンの動作など操作でスクリプトが実行されてリアルタイムにソースコードが変わるのが見えるんです。
JavaScriptで生成されるコードが見えるので、どんなタグ構造になっているのか、動作をさせて確認ができるので、大変助かりました。
余談ですが、IEのバージョン毎にタグやCSSを切り替える場合は、「Internet Explorerの条件分岐コメント」を使うといいですよ。
検索キーは、「IE 条件分岐コメント」。
覚えておくと便利ですよ。
ではでは、たっくんでした
