WPの

~ワードプレス関連~

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

      2016/11/20

~追記 2016/11/19
Adobe Dreamweaver CC Beta が Adobe Dreamweaver CC 2017 に反映されました。コチラの記事で、動作確認しています。
便利すぎるエディタ Adobe Dreamweaver CC 2017 ! ベータ版を採用し強力に進化

~追記 2016/10/15
Adobe Dreamweaver CC Beta var4.0のアップデート。コチラの記事で、追加機能とバグ修正について確認しています。
便利すぎる Adobe Dreamweaver CC Beta 4 のアップデート と 追加機能

~追記 2016/9/14
Adobe Dreamweaver CC Beta var3.0のアップデート。追加機能とバグ修正について確認。
便利すぎる Adobe Dreamweaver CC Beta 3 のアップデート と 追加機能

~追記 2016/8/9
Adobe Dreamweaver CC Beta var2.0のアップデート。追加機能とバグ修正について確認。
便利すぎる Adobe Dreamweaver CC Beta 2 のアップデート と 追加機能

adobe Dreamweaver cc Beta のインストール

icon51_128

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
Dreamweaverは、より高速で効率的で機能的なインターフェイスにより、設計者がコーディングを行う際により直感的に操作できることを目指しています。
と書いてありました。
また、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

Adobe公式 Dreamweaver Beta ダウンロードページ

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

Adobe公式 Dreamweaver Beta ダウンロードボタン

インストール

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

Dreamweaver cc Beta のインストール用ファイルをダウンロード直後

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

インストール用ファイルを展開中

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

Set-up.exeを実行

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

adobe Dreamweaver Beta の機能と使い方

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

Dreamweaver cc beta を起動時の画面

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

Dreamweaver cc を起動時の画面

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

機能の確認

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

Emmet 高速記述法

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

emmetによる記述 単一のタグ

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

emmetによる記述 複数のタグ

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

Emmetによる記述 リスト+クラス

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

タグのハイライト

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

閉じタグのハイライト

マルチカーソル

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

マルチカーソルによる同時記入 縦に行を横断して選択

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

マルチカーソルによる同時記入 任意に複数箇所を選択

CSSのインライン編集

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

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で呼び出す。1箇所(@mixin)で複数箇所(@include)を一括編集出来る為、メンテナンス・管理が捗ります。

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

sassを動かすには、rubyが必要なので、以下のURLからrubyをダウンロードして、インストールします。
URL:http://rubyinstaller.org/

rubyのダウンロード

ダウンロードした「rubyinstaller-〇〇.exe」を実行し、インストールします。

次に、コマンドプロンプトを開き、gem install sassと入力、または、コピペしてEnter。処理が終わるまで少し待機。

sass の導入には、作成した.scssファイルを.cssファイルに変換するためのコンパイル用のGUIソフト(Koalaなど)がインストールします。GUIソフトで.scssファイルを紐づけることで自動コンパイルが可能になります。

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

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

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

CSSプリプロセッサ―

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

nested(入れ子)

compact(コンパクト)

compressed(圧縮)

expanded(展開)

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

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

sass .scssの保存で自動コンパイル

まとめ

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

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

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

~追記 2016/7/8
Bracketsでは、Ctrl+Bキーで複数選択(マルチセレクト)出来たみたいですが、Dreamweaver ベータ版には、引き継がれておらずCtrl+Bキーを押すと、strongタグが出力されます。。
一応、フィードバックでBracketsのマルチセレクト(Ctrl+B)が使いたいとAdobeに報告しましたが、もし方法があるのならお恥ずかしいですが教えて頂けると嬉しいです。

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

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

~追記 2016/8/9
Adobe Dreamweaver CC Betaのアップデートが来ました。コチラの記事で、追加機能とバグ修正について確認しています。
便利すぎる Adobe Dreamweaver CC Beta 2 のアップデート と 追加機能

 - WEBデザイン, エディタ , , ,