Dreamweaver CC 2017を早速使ってみた感想。なかなか良いです！

★2016年11月28日　更新
こんにちは。Maromaroの三浦です。
11月の頭に満を持してリリースされた2017年版のAdobe Creative Cloudシリーズ。
中でもDreamweaver CC 2017はBracketsを基に大幅なリニューアルが施されているとのことで個人的にかなり気になる存在でした。
早速業務で使用し始めているので簡単な所感や気になった機能、移行についてなどをまとめていきたいと思います。
ちなみに筆者の業務での使用環境はWindows10です。

Dreamweaver CC 2017で何が変わったの？

SASS/LESSに対応

かねてから根強い要望があったであろうSASSやLESSに対応しました。コーディング画面でのネストなどタグも含めて綺麗に表示されます。
また、オートコンパイルにも対応していて、サイト設定からSASSファイルのフォルダとコンパイルしたCSSのフォルダーを指定すれば保存する度にコンパイルされたCSSが自動で保存されるようになります。

ただ筆者の業務環境では現在SASSのコメントアウトに「 // 」を使用しているのですがどうやらこれが原因でコンパイル時にエラーを吐き出してしまうようです。
しばらくの間SASSのコンパイルは今まで通り「Prepros」を利用することになりそうです。

リアルタイムプレビューの追加

Windowsだと [ F12 ] 、Macだと [ Command + F12 ] を押すか画面右下のブラウザっぽいアイコンを押すと起動します。これは修正内容が自動で反映されていくのでブラウザチェックの手間が省かれるようです。
ただ筆者の業務環境では綺麗にプレビューが表示されないようでした。SSIは対応していないんですかね～
何か設定が必要なのかもしれません。

CSSのクイック編集

編集したいclassやidを選択してWindowsだと [ ctrl + e ]、Macだと[ Command + e ] を入力することで対応した要素のCSSを編集できます。
今まで煩わしかったhtmlからcssのファイルの行き来がグッと減りそうです。

マルチカーソル

Windowsだと [ Ctrl ] 、Macだと [ Command ] を押しながら複数の要素をドラッグ or クリックしていくと一括で多数の入力、修正ができます。

検索機能が刷新された

今までフローティングウィンドウだった「検索/置換」機能がDreamweaver CC 2017ではウィンドウ内に統合されました。
ここの外観に関してはBracketsの検索機能と似たものになっています。
ですが、こちらは今までのDreamweaverの機能を踏襲しているのでBracketsのデフォルトの検索機能よりも大幅に強化されたものとなっています。

「現在のドキュメント」で検索を行うとヒットしたテキストがすべてハイライト表示される

「現在のドキュメント」から「すべて検索」ボタンがなくなりました。ですが、その代わりにヒットしたテキストがすべてハイライト表示されるので視覚的に探しやすくなっています。
ちなみに「フォルダー…」等では「すべて検索」が今まで通り使えので一斉置換の前の確認などはしっかりできますよ！

UIが綺麗になった

全体的にUIがリニューアルされています。
今まで灰色だったパネルの色を黒に変更できるので嬉しい人もいるかと思います。
もちろんコーディング画面も黒など選べます。
他にもアイコンなど細かい部分が綺麗にできているように思います。

ちなみにBracketsを基にできているというDreamweaver CC 2017ですが、UIはBracketsとはあまり似ていませんよ！

動作が軽い！

マシンスペックなど個人差はあるとは思いますが、Bracketsを基にしているおかげか今のところ動作が軽快です！起動も今までのDreamweaverに比べて早いんじゃないでしょうか。この辺りの改良が個人的に一番嬉しかったりします。

ところで今まで使っていた機能はあるの？

拡張機能「閉じタグコメントを挿入」は使えるの？

個人的にはHTMLコーディングで必須の拡張機能です。
そんな「閉じタグコメントを挿入」ですが、Dreamweaver CC 2017でも使えました！
（他の拡張機能の動作に関しては未確認なので自己責任でお願いします。）

Emmetの展開のショートカットは？

Dreamweaver 2015からDreamweaverにEmmetが内臓されるようになりました。
僕は2014の拡張機能でEmmetを使用していたのでEmmetの展開は [ ctrl ] + [E]でした。
ところが2017でこのショートカットキーを押すと「クイック編集」機能が出てしまいます。
どうやらDreamweaverにEmmetが内臓されるようになった2015からEmmetの展開が[ Tab ]に変更されていたようでした。
Emmetもちゃんと使えます！

ソースフォーマットはあるの？

ソースフォーマットは適用することでインデントや改行を整えてくれる便利な機能です。
Dreamweaver CC 2017でも場所は変わってしまいましたが、ちゃんとありました！
編集→コード→「ソースフォーマットを適用」
これで今まで通りソースフォーマットが適用されます。ショートカットを登録して利用したいですね！

Macでは不具合があるという話も聞きました。

MacでDreamweaver CC 2015から2017にアップデートした人の中で不具合があったという話を聞きました。

アップデート直後にコードビューが表示されない。

Macの場合アップデートを行った直後はコードビューが表示されないケースがあるそうです。
これは再起動で直るようです。

アップデートするのがこわい人は

一度Dreamweaver CC 2017にアップデートすると今まで利用していた過去のバージョンは消えてしまいます。
これで後戻りできなくなるのが怖くてアップデートを躊躇している人もいると思います。
ですが元のバージョンを復活させる方法があるので安心してアップデートできますよ！

Adobe Creative Cloudのアプリを開いて
「Apps」タブ→「製品の一覧」の右側の「以前のバージョン」をクリック
一番下にある「以前のバージョンを表示」をクリック

「製品の一覧」からDreamweaver「インストール」で任意のバージョンを選んでインストールすれば、複数バージョンをPC内に共存させることができます。
（設定ファイルは残っているようなので以前の設定のまま使えると思います）
筆者はこのやり方で必要な時は2014を利用しています。複数バージョンの同時起動はできないので要注意です。
大丈夫だとは思いますがアップデート、インストール等は自己責任でお願いしますね。

まとめ

Dreamweaver CC 2015は強制終了があまりに多すぎるため、2014を使う機会が多かった筆者ですが2017は今のところなかなか快適に利用できています。新機能も面白いし動作も軽いしデザインもいいので、2015より断然使えるんじゃないでしょうか。
細かい所で気になるところはあったりするので今後のアップデートにも期待したいですね。