刷新されたDreamweaver CC 2017は中々いいかも…
AdobeMAXTVを観る機会があり、HTMLやCSSのコードを書くのが好きな私は下記の理由からDreamweaverに注目していました。元々Dreamweaverに良いイメージがなく、昔使っていたCS2もコーディングを再開した一昨年から試したCS6もCC2015も「重い、見辛い、何となく面倒」と遠慮していたのですが…幾つかの“恋に落ちそうなエディタ”を経てメインとなった、Adobeが無料提供しているBracketsで培ったノウハウが生かされているというアナウンスのもと、早速試してみました。
Dreamweaver CC 2017インストール
すでにサブスクリプションを持っている（CreativeCloudを契約されている方）はそのままインストール、未契約の方はとりあえず無料体験版をインストールしましょう。
正規版にするにはDreamweaver単体プランか、全てのCreativeCloudアプリケーションが利用可能なコンプリートプランの契約が必要です。
単体プランは月額2,180円、コンプリートプランは月額4,980円かかりますので、体験版を試した後契約するかどうかを決めるといいでしょう。
ちなみに教職員や学生向けのアカデミック版があり、そちらはコンプリートプランを月額1,980円で利用できます。職業訓練生でも条件を満たせば1年限定でアカデミック版を利用できます。
初期設定
それではDreamweaverを立ち上げてみましょう。
このように使用経験の有無を尋ねてきます。
ワークスペース
使用経験の有無を選択後、下の画面に遷移します。
ワークスペースはデベロッパーモードと標準モードで選べるようになっています。
デベロッパーモード
デベロッパーモードはコードをゴリゴリ書いていきたい/書いていける人向けですね。かなり大きなサイズのファイルを扱ってみましたが、サクサクと作業が進みました。いろいろなファイルタイプをサポートしているというのも大きいかもしれません。
標準モード
標準モードはあまりHTML書いたことがない/文字よりも視覚的な操作が得意な人向けです。上部にライブビューと呼ばれている画面があります。これはブラウザに実際に表示されている状態がここに表示されています。右カラムの上部には画像やテーブル、リストなどの要素を挿入するためのパネルがあり、タグに自信がない方でもWebサイトを構築できるようになっています。
インターフェースのカラー
インターフェイスの色はパネル部分4種類とコード表示部分2種類用意されていて、変更が可能です。
もちろん、あとで[設定]→[インターフェース]から変更できます。
CC2015までは設定にコードカラーリングの項目が存在し、多くのバリエーションがありましたが、今回はシンプルになったようですね。
ここが変わった、Dreamweaver CC 2017の新機能
無償のエディターとしてBracketsがAdobeから提供されています。そちらで培われてきた便利な機能がDreamweaverにもフィードバックされました。早速見ていきましょう。
CSSクイック編集
私がBracketsを使ってきた大きな理由の一つがこのクイック編集です。CSSを書き終えた時、HTMLとCSSファイルをいったりきたりしながらの修正が面倒だ！とものぐさな私はいつも思っていたので、Webコーディングがメインの方は、この機能だけでも使う価値があると考えています。
変更したい要素（あるいはクラス名）をクリックし、Ctrl+e(Windows) / ⌘+e(Mac)を押すと、スタイルを当てられた要素やクラスのCSSが現われ、ここから編集可能です。なんて手軽で便利なんでしょう！
HTMLを上から順にスタイルを当てていく時にも使えますが、修正に関して特に効果が高いです。
リアルタイムプレビュー
他のエディタにもこれと上記のクイック編集を兼ねたようなプラグインがあるのですが、Bracketsにはデフォルトでリアルタイムプレビューも搭載されていました。この機能もDreamweaverに登場です。
Dreamweaverにも付いている「ライブビュー」も視覚的なのですが、表示がずれたり「リアルタイム」ではないのが不満で使わなかった経緯があります。ファイルを保存しなくてもすぐ反映されて差戻しやさらなる変更も可能というのは大きいと感じています。
表示するには丸で囲ったプレビューボタンをクリックしてリストの中から選択するか、F12(Windows) / option+F12のショートカットでブラウザが立ち上がります。
詳しい設定方法はこちらの「ブラウザーでページをプレビュー」に掲載されています。
Sassのコンパイル
SassなどのCSSプリプロセッサにはCC2015も対応していましたような気がしますが（確認していないです）、2017はバッチリ対応しています。事前に設定をしておけばコンパイルのためにWebデザイナの方の多くが苦手としている黒い画面とにらめっこしなくてもいいのです！
CSSプリプロセッサの利用にはサイト定義が必要です（私はこの仕組みも苦手でした）。メニューの「サイト」→「新規サイト」とアクセスし、サイト名とフォルダ定義しておきます。
サイト名は適当でもOKです（Webサイトには表示されないため）。
次に同じくサイト設定の「CSSプリプロセッサ」の項目の一般に移ります。
“ファイルの保存時に自動コンパイルを有効にする”にチェックが入っていればOKです。オプションは適宜ということで（LESSはよくわかっていないので ^^;）…
さらにその下の項目、「ソースと出力」。
ソースフォルダと出力先フォルダを定義します。ソースフォルダは.scssや.lessファイルが格納されるフォルダを指定します。
これで準備が整いました。
.scssファイルに正確に記述して保存すると自動でコンパイルされます。「こりゃいいやー！Gulpしかやってないけれどコンパイルって導入部分が面倒くさいよねー」と私の頭の中のものぐさ君が申しております。
しかし、使っているフレームワークがCompass…2016年暮れも押し迫ったこの時期に少し古い気がしないでもないです…ブツブツ。
捗るコーディングの機能
最近のエディターにはほとんどと言っていいほど便利な機能がこれでもかと搭載されています。他のエディターにも搭載されているものですが、ここに挙げたものは「メモ帳にタグの手打ちから卒業するにはもってこい」以上によく使う機能になります。
Emmet
プラグインも初期設定も不要、一部で爆速と謳われているEmmetが使えます。Emmetタグを入力してTabキーで展開します。あまりにも簡単で一時期HTMLタグの元の綴りが思い出せないという病気に私はかかりましたが、幸い元気でやっています。
Adobe以外のエディターでのショートカットキーはCtrl+e(Windows) / ⌘+e(Mac)だったりしますので、頭の片隅にでも置いておくといいでしょう。
また、Emmetの構文はチートシートがあります。これを見ながら爆速コーディングライフを！
僭越ながら私もEmmetについて記事を書いてみました。よかったら参考にどうぞ。
Emmetで爆速コーディングを始めよう！- HTML編
Emmetで爆速コーディングを始めよう！- CSS編
マルチカーソル
option / Altキーを押しながら必要な行数分ドラッグして入力を開始すると、同じテキストが反映されます。矩形選択とも言いますが、意外にもよく使います。
スニペット
よく使われる常套句のようなものや、個人的によく使うコードを登録できます。Dreamweaverはかなりプリセットが充実しています。
左側のスニペットパネルを表示したら、使う項目をダブルクリックして呼び出せます。また、“favicon”や“mailto”などのトリガーキーを定義しておくと、トリガーキー入力後にTabキーを押すだけでコードが何度も再利用できます。
ちょこちょこ「こうだったらもっといいかも」「ここはこうしてほしい」というところは置いといて、Sassなど行数が多くなってくると重たさを顕著に感じるBracketsからの移行も視野に入ってきそうです。とあるイベントでの言葉を借りると「Adobeが本気を出してきた」2016年であり、私がど素人なせいもあり、他のアプリケーションもまるで魔法を見ているかのようでした。
“寄らば大樹の陰”からやや外れた道を進んできていますが、「大樹の陰もたまにはいいかな〜」と幻惑されているねこま（@necomacustom）でした。