便利すぎる Adobe Dreamweaver CC Beta の導入手順 と 機能検証

adobe Dreamweaver cc Beta のインストール

Dreamweaver CC のアップデートを行うと（2016年6月）、「adobe Dreamweaver Beta を試してみませんか？」のようなポップアップ通知が表示された。
一度は、ベータ版では業務に支障が出るかもしれないのでスルーしましたが、気になったので adobe Dreamweaver cc Beta を試してみることにしました。

では、最初に「インストール手順」と、「インストールしてしまうと、使い勝手が変わってしまうのではないか？」という不安があると思いますので、先にお伝えすると、
現行のDreamweaver CCとは別にDreamweaver CC beta がインストールされるので、現行のDreamweaverは今まで通り使うことができます。

インストールの手順

1. Adobe公式ウェブサイトのダウンロードページから自分のOSに対応するインストール用ファイル（Dreamweaver Beta Set-up.exe）をダウンロード。
2. インストール用ファイル（Dreamweaver Beta Set-up.exe）を実行すると、Set-up.exeとその他ファイルが展開されます。
3. Set-up.exeを実行します。Dreamweaver CC beta のインストールが開始されます。
4. インストール後の起動ファイルのディレクトリは、標準では、「Program files」→「adobe」→「Adobe Dreamweaver CC (2017 Beta)」→「Dreamweaver Beta.exe」
5. デスクトップやタスクバーなどにショートカットを作成しておくと便利。

インストールまでは上記の手順となります。

ベータ版について調べる

ベータ版の概要をアドビのウェブサイトで確認してみると、（URL：http://www.adobe.com/jp/products/dreamweaver/features.html）

と書いてありました。
また、Adobeの公式ブログからベータ版について詳しい情報を確認できました。

完全に生まれ変わる次世代 Dreamweaver ベータ版を先行公開 ー コードエディター刷新、ダークUI、Sass/LESS対応
（URL：https://blogs.adobe.com/creativestation/web-see-how-dreamweaver-is-transforming-for-the-future）

ダウンロード

インストールするために、次のURLからAdobe公式のウェブサイト内にあるDreamweaver Beta ダウンロードページへ移動します。
http://adobe.ly/dw_beta

上記のページをスクロールすると、下の方に対応するOSに合わせたダウンロードボタンが現れます。自分のOSを確認してダウンロードします。

インストール

ダウンロードすると、まずインストール用ファイル（Dreamweaver Beta Set-up.exe）があるので実行します。

Dreamweaver Beta Set-up.exe）があるので実行します。Set-up.exeとその他ファイルが展開されます。

Set-up.exeを実行すると、Dreamweaver CC Beta のインストールが開始されます。

起動ファイルのディレクトリは、「Program files」→「adobe」→「Adobe Dreamweaver CC (2017 Beta)」→「Dreamweaver Beta.exe」です。

adobe Dreamweaver Beta の機能と使い方

インターフェース デザインの変化

現行の Dreamweaver と比較してみます。

現在の Dreamweaver と比べてダークでスタイリッシュな印象です。Illustrator や Photoshop は、すでにこのようなダーク系のインターフェースになっているので、追いついてきた感じがします。

機能の確認

Adobeのコーディングに特化したソフトBracketsを移植して、大幅にコーティングしやすくなっているようです。
では、新規作成でHTMLファイルを開いてみます。

Emmet 高速記述法

標準でEmmetが使用出来るようです。Emmetは、主にHTMLやCSSを高速でコーディングできるショートカット記述法です。旧 Zen-Coding から名称が変わり、2012年9月ごろから「Emmet」という名前になっています。
p+TabキーでPタグをショートカットで記述できました。

続いて、複数の場合には、
p*3+TabキーでPタグが３つを記述。

次は、リスト+クラスの追加では
ul.nav>li*3+TabキーでPタグが３つを記述。

直感的かつ簡単に記述できるEmmetをいちいちプラグインで追加インストールしなくても使用出来るのは嬉しいです。

タグのハイライト

タグにカーソルを合わせると、タグの開始と終了タグをハイライトしてくれます。いちいち探して確認しなくてもいいので、閉じ忘れや追記などが捗ります。

マルチカーソル

Altキーを押しながら、下にドラッグすると、カーソルが伸びます。入力すると、同時に記入出来ます。

Ctrlキーを押しながら、クリックすると、カーソルが残ります。入力すると、同時に記入出来ます。

CSSのインライン編集

ID名、class名にカーソルを合わせてwindowsならCtrl+Eキー、
macなら⌘+Eキーを押すと、インラインにCSSを呼び出し編集することが出来ます。

adobe Dreamweaver Beta で sass の利用

sassを使うメリットについて書いていきます。ちなみに、sass と言っていますが、拡張子には .sass と .scss があり、それぞれ文法が違います。そして、.scssが主流になっています。
理由は、.scssの方がcssの記述に似ており、覚えれば.sassの方がさらにシンプルな文法になっていますが、cssに慣れててしまったWEBデザイナー（私も含め）には.scssの方が取っつきやすいようです。
では、sassを使うメリットに戻ります。

• ネスト（入れ子）：セレクタを入れ子に出来るので、位置関係を把握しやすく、同じ記述を省略できる。
• コメントアウト：CSSのコメントは、 /* */ で囲みますが、Sassだとプラスでjavascriptやphpと同じように、// による1行のコメントが出来るようになります。
• 親セレクタの参照： &(アンパサンド)を使うと、親セレクタをくっ付けて記述できます。
• 変数：変数が使えるので、定義しておくと、使いまわすことで省略できる。
• 継承：@extendで他のIDやClassで定義した{プロパティ:値;}を使うことが出来る。
• ミックスイン：@mixinで{プロパティ:値;}を定義し、@includeで呼び出す。１箇所(@mixin)で複数箇所(@include)を一括編集出来る為、メンテナンス・管理が捗ります。

ベータ版にて、sass の完全な統合が行われました。利用方法を確認していきます。
※以下の手順は、Dreamweaver CC Beta でsassを使う場合には必要ありません。

以上のようにsassの導入には手順が多かったのですが、adobe Dreamweaver CC Beta にはコンパイル機能が備わっており、rubyのインストールも必要なし。adobe Dreamweaver CC Betaをインストールするだけでsassの開発環境が整います。

簡単なadobe Dreamweaver Beta側の設定を見ていきましょう。

起動し、上メニューのサイトを選択し、新規サイトからサイト管理に追加します。
CSSプリプロセッサ―を開き、「enable compilation（コンパイルを有効）」にチェック。

sass/scss: Output file style（出力形式）のをドロップダウンから選択で完了です。
Output file style の一覧

nested（入れ子）

.box {
  color: #23599b; }
  .box a {
    text-align: center;
    display: block; }
    .box a:hover {
      font-weight: bold; }

compact（コンパクト）

.box { color: #23599b; }
.box a { text-align: center; display: block; }
.box a:hover { font-weight: bold; }

compressed（圧縮）

.box{color:#23599b}.box a{text-align:center;display:block}.box a:hover{font-weight:bold}

expanded（展開）

.box {
  color: #23599b;
}
.box a {
  text-align: center;
  display: block;
}
.box a:hover {
  font-weight: bold;
}

一番、expandedが見慣れた形でしょうか？nestedも階層が分かりやすくて、いい感じです。.scssファイルを変更して保存し直せば、すぐに切り替えが可能なので、試してみたり、状況に応じて使い分けてもいいですね。

では、style.scssファイルを編集し、保存してみます。
style.cssが生成されました。

まとめ

• Emmet
• タグのハイライト
• マルチカーソル
• CSSのインライン編集
• sass

BracketsとDreamweaverが上手く融合していて使いやすいです。今までは、コーディングにおいて「sublime text」や「Atom」に遅れをとっていた感じですが、新機能が導入されるとDreamweaverだけで完結してしまいそうです。

私は、sublime textとDreamweaverを使い分けています。
sublime textには、選択したテキストと同じテキストをハイライトして
Ctrl+Dキーで複数選択（マルチセレクト）する機能があり、
Dreamweaver ベータ版もハイライトはしてくれるのですが、選択が出来ないっぽいです。検索置換すればいいだけの話なのですが。

sublime textの一番の強みは、処理速度と強力な検索機能です。そのうち、Dreamweaverがメインエディタでsublime textは検索ツールとして使う感じになってしまうかもしれません。

ファイル名が Adobe Dreamweaver CC (2017 Beta) とあるように、ベータ版の検証が完了すると来年の2017年には、新機能が採用されるのでしょうか？大型アップデートですね。今のうちに、新しい機能に慣れておくとスムーズに移行出来そうなので、ベータ版をインストールしてみてはいかがですか？

 - WEBデザイン, エディタ Dreamweaver, エディタ, 使い方, 新機能