Dreamweaver CC 13.1 アップデートの公開

• Edge 標準カラーピッカー
• クラウド経由でキーボードショートカットやワークスペース設定を同期
• CSS デザイナーの機能拡張 （ライブハイライト、コンテキストの保持）
• コードビューの改善 （編集中の行／タグのハイライト表示、CSS セレクターのコードヒント、行の先頭または最後に移動するショートカットキー ）

CEF の統合

描画エンジンは Dreamweaver の根幹の機能の 1 つです。それを変更した結果多くの箇所に影響が出ています。

一言で言うと、ライブビューの動作が Chrome っぽくなりました。ここでは、主にライブビューの描画関連で変わった点の一覧をご紹介しておきます。

• 再現性の向上
  角丸やグラデーションもちゃんと表示される
• インスペクトモード
  マージンは黄色で、パディングは紫色で表示される
• ビデオ、オーディオ
  Teora, H.264, ogg 等をサポート
• ポップアップ
  ドロップダウンやカレンダーをポップアップ表示できる
• ズーム
  倍率指定はページ単位で有効 （従来はタブ単位）
• エラーメッセージ
  表示されるエラーメッセージが Chrome と同じ
  

可変グリッドの機能を使って作成されたページに関しては、ガイド表示をオフにしたときだけライブビューが CEF ベースになります。ガイド表示中は、従来通りの WebKit によるライブビューが表示されます。

その際、WebKit のライブビューでは、ライブコードもインスペクトも使用できません。おそらく次の更新では、可変グリッドも CEF ベースになることでしょう。

カラーピッカー

Edge Animate などをお使いの方には、「アレと同じになった」 と言われると分かりやすいかもしれません。CEF の統合に伴い、パネルの共有化も可能になったということだと思われます。CSS デザイナーからはもちろん、アセットパネルや環境設定パネルからも使えます。

RGBa, Hex, HSLa が切り替えられたり、Dreamweacer のウインドウの外からでもスポイトで色を拾えるようになったのは嬉しい点です。また、スウォッチも統合されていて、色の管理も行いやすくなっています。

カラーピッカーを閉じるには Esc キーを押します。

クラウド同期機能

キーボードとワークスペースの設定がクラウドに同期されるようになりました。Creative Cloud アカウントを共有する他のマシン上でも、OS が同じであれば、これらの設定が反映されます。

デフォルトでは、新しい同期の機能がオンになっているようですが、特に同期機能は必要ないという場合には、「環境設定」 → 「同期の設定」 から変更できます。

CSS デザイナー

CCSS デザイナーは DW CC 搭乗時に搭載されたばかりの新機能です。とりあえず （というかなぜ後から？） スタイルがその外のパネルと同じに変更されました。

機能的な変更としては、"ライブビュー" 表示中に、CSS デザイナーパネル内のセレクターを選択すると、HTML ページ内の、そのセレクターに関連する要素がハイライト表示されるようになりました。

これまでは、CSS の値を実際に変更した後に、どの要素が変わったかを 1 つ 1 つ調べて確認する、という手順でした。これと比べると、セレクターを選ぶだけで影響される要素が一挙に確認できるので、分かりやすく効率的になっています。

また、CSS デザイナーパネルの状況を保持する機能も搭載されました。従来の、セレクターを選択するたびにプロパティパネルがリセットされて長いリストをスクロールし直し、という作業からは解放されるなら嬉しい改善です。

コードビュー

コードビューには、編集中の項目を分かりやすくハイライト表示で示す機能がつきました。色は明るめの青です。ちょっと目立ちすぎな気がしないでもないですが。

コードビュー内で編集中の行、分割ビューならデザインビューで選択された要素に対応するコードの行番号がハイライト表示されます。ライブビュー、ライブコード、インスペクトモードでも有効です。

更に、文法エラーのある行の番号もハイライト表示されます。この場合の色は赤です。間違いだらけのファイルでは大変なことになりそうです。

タグ編集時には、行番号だけでなく、タグの範囲内のテキストもハイライト表示されます。閉じタグがあれば、両方ともにハイライト表示されます。

タグのハイライトに使われる色は薄いグレーです。が、嬉しいことに、こちらは変更が可能です。「環境設定」 → 「コードかラーリング」 から、設定できます。ハイライト機能自体の無効化も可能です。

その他、コードビュー関連では、CSS セレクターのコードヒントが表示されるようになりました。"." や "#" をタイプすると、編集中の HTML ファイルに関連付けられたスタイル定義から、クラスや ID の候補を表示します。LESS, SASS, SCSS も対象に含まれます。

待望のショートカットキーも追加されました。Ctrl/Cmd + 左右の矢印キーを使って、編集中の行の先頭と最後にカーソルを移動できます。

使用するキーは変更可能です。「編集」 → 「キーボードショートカット」 → 「コード編集」 と選択すると、該当する項目がリスト内に表示されます。

その他の変更

ここまでに実際に 13.1 の設定パネルを使ってみた人は 「OK」 ボタンが 「適用」 ボタンに変わっていたのに気付いたことと思います。これからは、複数の変更をしてからパネルを閉じることができます。

地味なところでは、PHP 5.4 対応や jQuery Mobile ライブラリの 1.8.3 への更新なども行われました。この辺りの対応の早さは CC になった利点の 1 つです。

Adobe Exchange が ZXP 限定から全てのフォーマットにも対応するようになるという話がありますが、その変更にも既に対応しているようです。その際に公開される予定の Extension Manager の更新版に既に対応しているとのことです。