DreamweaverにBracketsが入ることで何が変わるのか

連載

Bracketsと次世代Dreamweaver

先日アドビから発表されたDreamweaverベータ版には、エディターのコードビューの箇所に、同じくアドビが開発しているオープンソースのコードエディター「Brackets」が組み込まれています。これがどういうことなのか、この記事ではBrackets自体のことも交えて解説します。

Bracketsとは

皆さんご存知のWebオーサリングツールであるDreamweaverは、様々な機能が詰まった統合制作環境であるため、ちょっとしたWebサイト制作の作業にはちょっと重たく感じる場合もあります。そうした小さなプロジェクト向きの軽快なHTML/CSS/JSエディターとしてBracketsは生まれました。

//brackets.io/

Brackets トップページ

Bracketsはそれ自体がHTML/CSS/JSで記述されています。そのため例えばChromeのような開発者ツールを使ってスタイルを上書きしたり、実行されているスクリプトを確認することもできます。

また、Bracketsは軽快な動作実現のためにコア機能が最低限のものになっており、純粋なエディターとしての機能以外の多くは拡張機能として提供されています。拡張機能はBracketsのユーザーが開発することもでき、それをBracketsの拡張機能マネージャーからダウンロードできるようになっています。ユーザーが欲しい機能をダウンロードして追加することで、自分好みのエディターを作り上げることができるわけです。HTMLやCSSだけではなく、多くのプログラミング言語や、XML、SVG、Markdownといった形式にも、拡張機能で対応できます。

他にもブラウザーによるリアルタイムプレビューがとても簡単にできることや、他のアドビソフトとの連携拡張機能が強いなど、他の最近のエディターと比較しても遜色ない特徴を持っています。

Brackets in Dreamweaver!

さて、ではこのBracketsがDreamweaverに組み込まれるというのはどういうことなのでしょうか。もともとDreamweaverは機能が豊富な制作環境ではあるものの、いかんせん最近のWeb制作に求められる要件への対応という観点からは古臭い感じが否めませんでした。一方、Bracketsは最初からモダンな制作環境を意識して設計されていて、特にHTMLやCSS、JSなどを素早く書きやすく作られています。

ここで今回のDreamweaverベータ版で採り入れられたBracketsのコード編集機能の特徴をいくつか紹介します。（文中のショートカットキーはすべてMacの場合で、Windowsの場合をカッコの中に示しています）

マルチカーソル

マルチカーソルは、カーソルを複数扱って同時に複数の箇所を編集する機能です。通常エディターのカーソルはひとつで、一箇所に文字をタイプしていくわけですが、マルチカーソルを使うと、同じテキストを何箇所にも同時に書いたり、反対に同じだけ削除したりできます。

https://blog.adobe.com/media_e343e3ab053852b7ac7a964b18dabb7127d051f5.gif

マルチカーソルの操作

また、複数カーソル時に左右の方向キーを入力すると、各行ごとに選択範囲が拡がります。Shift＋Alt（Shift＋Cmd）を押している間は選択範囲は単語やスペース、句読点ごと、コードの場合は要素名、スペース、属性名といった形で選択範囲をよしなに拡げてくれるため、キレイにコードを書いていれば楽に選択できるでしょう。

方向キーではなくマウスカーソルによって選択範囲を拡げる場合は、Altを押しながらカーソルをドラッグすると選択範囲を行ベースでなく列ベースで拡げることができます。これは最近のエディターによく実装されている機能で、矩形選択と呼ばれています。この矩形選択は、更にCmd＋Altを押しながら複数の矩形箇所を選択できます。

https://blog.adobe.com/media_1220885a1a705913d9739ee650f608503a6e48f7.gif

矩形選択の操作

矩形選択された部分はマルチカーソル状態になっているため、そのまま選択範囲を削除したり、それぞれの行に記述できます。

クイックエディット

https://blogs.adobe.com/creativestation/files/2016/07/brackets-in-dw-image-05.gif

クイックエディットの操作

クイックエディットは、HTMLファイルやJSファイルのコード上に表示されるインラインエディターを使い、関連する他のファイルの編集が行える機能です。HTMLファイルでは、開始または終了タグ内の要素名、ID名、クラス名に、JSファイル上では関数名にカーソルが位置するとき起動します。

また、CSSファイルでも同じ操作でカラーコード（Hex値、RGBa値など）上やcubic-bezier()関数上では専用のインターフェイスによって値を再設定できます。現状ではcubic-bezier()関数の方は動きが悪いようです。

https://blogs.adobe.com/creativestation/files/2016/07/brackets-in-dw-image-06.gif

カラーコードの編集操作

該当する構文が記述されているのであればCSSファイル上でなくても（例えばHTMLファイル上のstyle属性値内での指定など）有効です。

クイックドキュメント

クイックドキュメントは、CSSプロパティの宣言上で使用するとそのプロパティの説明と有効な値を確認できる機能です。残念ながら表示されるドキュメントの内容は英語です。

その他有用なショートカット

その他便利なショートカットを一部紹介します（機能によってはまだ動作しないものもあります）。

行を複製と行を削除は今回のベータ版では動作が確認できていません。

クイックオープンは、キーボード操作だけでプロジェクトの任意のファイルや行に移動できる機能です。Dreamweaverベータ版ではまだ実装途中のようなので、ここはBracketsの動作の様子を紹介しておきます。

https://blogs.adobe.com/creativestation/files/2016/07/brackets-in-dw-image-07.gif

クイックオープンと行を移動の操作

行を移動はそれと同じインターフェイスを持つ、ページ内を移動する機能です。

まとめ

今回のベータ版では、Bracktsを組み込むことで、コードエディターとしての基本性能が大きく向上しました。

その他、主な特徴は完全に生まれ変わる次世代 Dreamweaver ベータ版を先行公開 ー コードエディター刷新、ダークUI、Sass/LESS対応に紹介されています。また、CSSプリプロセッサーの使い方は、Dreamweaverで覚える最新Web開発ワークフロー: Sass編に詳しく紹介されています。まだベータ版ではありますが、新しいDreamweaverの機能をぜひ試してみてください。（この記事で紹介できなかった細かな機能等も知りたい場合は英語のリリースノートでも詳しい追加機能を知ることができます）

この記事で紹介した以外にも、今後、Bracketsの本体や拡張機能にある機能が追加実装された新しいDreamweaverベータ版が公開されるかもしれません。これからのDreamweaverの進化を楽しみにしたいですね！