DreamweaverがCC 2015で神進化!もういらない子なんて言わせない!

dreamweaver 2015 dw cc

こんにちは!YOUKNOWです。
本日社内で話題になってた、CC 2015シリーズの中から、Dreamweaver(DW)のご紹介です。

いままでなんとなく他のエディタに比べると、遅れてた感が否めないdreamweaverさんですが、今回のアップデートで最前線に舞い戻りそうです。
今までの機能や新機能等、便利になりそうだなと思った所をピックアップしてご紹介しています!

しかしadobeさんはbracketsも出しているけれど、両方頑張る感じなのかな..?

Dreamweaver CC 2015での進化点

あらゆる端末で同時にプレビューする、デバイスプレビュー機能

リアルタイムプレビュー

デバイスプレビュー機能

PCと表示を確認したい端末を同じwifiネットワーク内に入れ、Dreamweaverが表示するQRコードを読み込ませるか、指定のURLを手動で入力して接続する方法があります。

また、表示する端末の横幅等のメタデータを簡単に表示してくれます。
もちろん、コーディングした結果はリアルタイムですべての端末でプレビューが可能です。

レスポンシブサイト作成アシスト機能

メデイアクエリ

Bootstrap標準搭載

Bootstrapが標準搭載されており、新規にレスポンシブサイトを作成する際に、選ぶことができる。

メディアクエリブレークポイントを可視化するビジュアルメディアクエリー機能

メディアクエリのブレークポイントも簡単に設定することが出来、DreamWeaver内のプレビューも簡単に表示できる。

進化したPSDの書き出しを楽にするExtract機能

Extract書き出し

@2x @3x等、Retinaの書き出しも全て行える

Extractの環境設定で、画像の書き出しする拡張子や解像度、ファイル名の設定が出来ます。
例えば書きだした画像の名前の後ろに@2x等の名前を追加することが出来たり、一度に@2x @3xの画像を書き出すことが出来ます。

コーディングの効率化

Emmet標準搭載

emmet
Emmetが標準搭載されており、HTMLやCSSのコーディングが、Emmetを使う以前より大体3倍くらい早くなります。
例えば、ul>li*5と記述しTABボタンを押すと

といった風に展開されます。

リアルタイムにエラーを教えてくれる リアルタイムLint機能

HTMLやCSSやJavaScriptをリアルタイムで監視して、エラーを教えてくれます。
これ、かなり便利な機能だと思います。

コードビュー内で、画像や色のプレビューが可能に

color-preview_1434114613107
指定画像をプレビューすることが出来ます。
画像へのパスが間違っていた場合は、ひと目でわかるようになりました。

また指定した色コードを視覚的に表現するようになりました。

ライブビューの強化

ライブビューでテーブルを編集可能に

ライブビューでテーブルの編集が強化されました。

ライブビュー内でjQUeryUIエレメントがサポートされます

and more…

僕がかいつまんで紹介したものの他に、細かい所に修正が入っております。
公式ページに細かい所もまとめておられますので、そちらもご一緒にご覧ください。

合わせてDreamWeaverとは関係ありませんが、ご一緒にどうでしょうか!