Dreamweaverで覚える最新Web開発ワークフロー: プレビュー機能を使ったWeb制作

Dreamweaverで覚える最新Web開発ワークフロー

次世代Dreamweaverではライブビューが更新され、新しくリアルタイムプレビューが追加されました。今回は、今月公開されたDreamweaver ベータ3に含まれるUIや機能から、プレビュー関連の便利な機能をご紹介します。

なお、先日のAdobe MAX Japan 2016のDreamweaverセッションでは、本記事で紹介する内容を含め、次世代Dreamweaverの主な機能をご紹介しました。セッション内容と最新のベータ3とは多少の違いがありますが、基本的な機能には差がありません。Adobe Max Japanのセッションの内容は、Adobe MAX Japan 2016 ビデオアーカイブでご覧いただけます。

http://www.adobe.com/jp/creativecloud/events/maxjp-video-archive.html#web
Adobe MAX Japan 2016 ビデオアーカイブ WEB

ライブビュー

ライブビューは、HTMLをブラウザで見ているかのようにレンダリングし、直接デザインを編集できるプレビューモードです。現在リリースされているDreamweaver CC 2015でも利用でき、テキストやクラス名・ID名をHTMLのソースコードを触ることなく、視覚的に編集できます。

またBootstrapのグリッドにも対応しており、要素をクリックした時に表示されるバウンディングボックスを使えば、マウスの操作だけでカラム幅を変更できます。
例えば、ビジュアルメディアクエリバーを767pxにした状態で、カラム要素のバウンディングボックスを編集すると、先頭に「col-xs-」のついたクラス名の数字の箇所が変わります。

https://blog.adobe.com/media_a771ad88d66f3b33ab4ee21fc4790432f9027004.gif

ライブビューでBootstrapのカラムを編集した時の例。クラス名が「col-xs-6」から「col-xs-5」に変化する

Dreamweaverのライブビューでは、従来プロパティパネルで行っていたHTML要素の変更や太文字の指定、それから中央寄せなどが、レンダリングされている要素に直接行えます。
編集したいテキストを選択すると三本線のアイコンが表示され、このメニューをクリックすると、HTML属性の編集パネル「クイックプロパティインスペクター」が表示されます。

https://blog.adobe.com/media_b6c2ac21c8f7c1b682eb2404c59d0f31ba0d0fa4.gif

要素を選択した右上にメニューのアイコンが表示されており、クリックするとHTMLを簡単に編集できる

テキスト用のクイックプロパティインスペクターでは、見出しやp要素の変更、strong要素やem要素を追加、リンクの追加などが利用できます。Bootstrapを使用していれば、中央寄せや全てを大文字にするなどのクラス名の追加もこのパネルで行えます。
また、img要素もクイックプロパティインスペクターを利用して、alt属性やwidthとheight属性の変更を行えます。Bootstrapを使用していれば、レスポンシブ画像の指定なども行えます。

ライブビューとDOMパネル

ライブビューは便利な機能ですが、高さを持たないHTML要素の選択や、HTML要素の入れ替え操作がしにくいといった欠点があります。
これらの欠点は、DOMパネルを使うことによって補うことができます。

DOMパネルは、HTMLのツリー構造を視覚的に表現したパネルです。DOMパネルでは、要素をドラッグして位置を変えれば要素の入れ替えが行え、コンテキストメニューを使えば、新しい要素の追加や削除そして複製まで、パネル内で編集できます。

https://blog.adobe.com/media_d0dc7a254ec8eb47fefea72f424db722ace31bb9.gif

DOMパネル。HTML要素をマウスだけで編集できる

DOMパネルでHTML要素を選択すると、ライブビューでも選択した状態になります。そのため高さを持たないHTML要素をDOMパネルで選択して、ライブビューで編集という使い方ができます。
また、ライブビューでは高さを持たないHTML要素に画像を挿入するのが難しいのですが、代わりにDOMパネルの該当する要素に画像をドラッグアンドドロップすれば、画像の挿入が行えます。
ライブビューを使用したweb制作は、DOMパネルを併用することで効率が良くなります。

新しく追加された「リアルタイムプレビュー」

Dreamweaver CC 2015では、ウィンドウの右下に「デバイスプレビュー」アイコンが配置されています。デバイスプレビューは、一時的にアドビのサーバーにファイルをアップして、生成されたQRコードかURLを指定することで、スマートフォンやパソコンから作成中のページを確認できる機能です。Dreamweaver内でHTMLテキストなどを編集すると、保存しなくても実機にその変更内容がすぐさま反映されます。デバイスプレビューを使えば、リアルタイムに変更内容を確認しながら制作ができます。

https://blog.adobe.com/media_2b4c4c171ba6a5b0af85b0935f31c81a840d60ff.gif

デバイスプレビューの様子。テキストを編集するとすぐに実機に反映される

次世代Dreamweaverでは、アイコン名が「リアルタイムプレビュー」という名称に変更され、「デバイスプレビュー」に加えて「ブラウザープレビュー」という新しい機能が搭載されています。
ブラウザープレビューは、開発しているパソコンのブラウザで、リアルタイムで編集中のページを閲覧できる機能です。デバイスプレビューと異なり、Dreamweaver自身がサーバーを立てて確認環境を構築するため、ネットワークがつながってなくても動作します。

https://blog.adobe.com/media_ebec4f128500e94b78764b66469c8c6511eca43a.gif

リアルタイムプレビューの表示。ツールバーから表示できます。

基本的なページ作成はライブビューでも問題なく作成できますが、ブラウザーごとの微調整は、ブラウザーを並べて作業することで効率が格段に上がります。
保存しなくても変更がリアルタイムでブラウザーに反映される機能は、開発に非常に便利です。ぜひお試しください。