Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

台風こわい、@cappeeです。

6月18日に Adobe Creative Cloud のソフトがメジャーアップデートし、 Dreamweaver や Photoshop、Illustrator などが「CC」 にバージョンアップしました。

今後はアプリのように「CC」内の機能をアップデートする形になるので、バージョン名はずっと「CC」のままということになります。

ということは、バージョンアップによる移行作業はこれが最後!です。きっと。

といってもある程度自動で設定を引き継いでくれていたので、 移行作業はとても楽でした。

サイト管理も引き継がれます!

これから移行するという方のために手動で私が行った作業をメモしておきます。

はじめに

以前投稿して好評だった「Dreamweaver CS6 でオススメの拡張まとめ」でご紹介した拡張も現時点では「CC」でほぼ使えません。

使えないというのもありますし、拡張を入れなくとも「Emmet(Zen-Codingから名称変更)」でカバーできるものが多く必要なくなった機能もあります。

今回は「Emmet」の機能導入と「CC」の各種設定について主にご紹介します。

Emmet(Zen-Coding)の拡張機能

なにわともあれ「Emmet」がないとコーディングが始まらないので真っ先に拡張を探しました。

「Emmet(エメット)」はバージョンアップに伴い「Zen-Coding」から名称変更しています。

インストール方法は、下記のGitHubの画面下の方にある「Installation」の「Emmet.zxp」から拡張ファイルをダウンロードします。

Emmet for Dreamweaver

emmet Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「Emmet.zxp」を開くと、「Acobe Extension Manager CC」が立ち上がりますのでそのまま画面に従って進めば導入が可能です。(まだの方は Acobe Extension Manager CC もインストールしておいてくださいね)

extension 300x224 Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「Acobe Extension Manager CC」に「Emmet」が追加されていればインストール完了です。

「Dreamweaver CC」を開いてコマンドに追加されているか確認します。

emmet1 300x149 Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

念のため「Ctrl+E」(Win)で展開できるか確認してみましょう。
(ちなみに私は押しづらいのでショートカットを「Ctrl+.」に変更しています。)

また、「Emmet」は自分なりに展開する文字列をカスタマイズすることができます。設定用のファイルは下記です。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\Commands\Emmet\snippets.js

私が行ったカスタマイズに関してはこちらをご覧ください。
Zen-Codingを自分なりにカスタマイズしてさらに効率化する方法

コードカラーリングの変更

私はコードカラーをカスタマイズしていますので、その設定ファイルを移行します。

カスタマイズ方法はこちらに記載しています。

[Dreamweaver]コードカラーリングをカスタマイズする

その「Colors.xml」ファイルを下記のフォルダに上書きすれば完了です。(一応バックアップも残しておいてください。)

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\CodeColoring

スニペットの移行

「CS6」など以前のバージョンで作成したスニペットは、「CC」にcsnファイルをコピペすることでそのまま移行することができます。

以前のバージョンのスニペット

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\Snippets

CCのスニペット

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CC\ja_JP\Configuration\Snippets

キーボードショートカットの移行

キーボードショートカットの設定ファイルである「Menus.xml」を以前のバージョンのから「CC」へコピペしてみました。

Dreamweaverで設定画面を開いたところメニュー名が文字化けしていたので、これに関しては手動で設定しなおした方が安全かもしれません。

[編集]→[キーボードショートカット]から編集してください。

環境設定

環境設定はほぼ以前のバージョンと同じでしたが、一部だけ変更しました。

自分なりの設定があると思うので、比較してみてください。

ちなみに「CS6」と「CC」は同時に開けません!(Extension Manager は開けました。)

ファイルタイプ/エディター

Dreamweaver Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「Dreamweaverに関連付けるファイルタイプ」を選択します。

また、「コードビューで開く」は以前のバージョンのものをコピペします。私は最近だと「.scss .rb」を追加しました。

同期の設定

同期がクラウド化されてから発揮される便利機能ですね。

Adobe Creative Cloud はPC2台までソフトのインストールが可能なので、環境設定とサイト設定を常に2台で同期することができます!

最初に「CC」を開いた時にも同期についてアラートがでたかと思いますが、環境設定でより細かい設定をします。

Dreamweaver1 Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

「自動同期を有効」にしておいた方が楽なのでチェックを入れます。

「同期する設定」は自分の利用状況に合わせてチェックをしてみてください。

いかがでしょうか?

これから楽しい「Creative Cloud」ライフの始まりです。

Pocket
article clipper Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

Zen-Codingを自分なりにカスタマイズしてさらに効率化する方法

朝型になりたい、@cappeeです。

Dreamweaverでコーディングを効率良く行うために私もみんな大好きZen-Codingを使っています。

でも使っているデザインソフトやコーディングルールによって「展開後のコードを変えたい!」という時もあります。ので、カスタマイズしてみたところ、結構効率化できたと思うのでその方法と実際に変更したサンプルをまとめたいと思います。

Zen-Codingのカスタマイズ

下記のファイルを開きます。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver (バージョン)\ja_JP\Configuration\Commands\ZenCoding\zen_settings.js

zen_settings.js ファイルには展開前と後のコードが一覧で記述されているので、自分の使いやすいように編集してください。

“展開前”: “展開後”
“bgc”: “background-color:#FFF;”

「|」を書くと展開後にそこにマウスのポインターが来ます。

CSSのカスタマイズサンプル

今回修正したのは主にCSSですが、変更した点をメモしておきたいと思います。

修正

主な変更理由ですが、デザインはFireworks CS6を使用しているので、カラーコードは#付きで1クリックでコピーできます。CSSファイルに貼り付ける時は#なしでカラーコードのところにマウスポインターが来るのがベストです。よく展開するプロパティにそのあたりを適用しました。

colorcode Zen Codingを自分なりにカスタマイズしてさらに効率化する方法

"bgc": "background-color:#FFF;",→"bgc": "background-color:|;",
 "bd+": "border:1px solid #000;",→"bd+": "border:1px solid |;",
 "bdt+": "border-top:1px solid #000;",→"bdt+": "border-top:1px solid |;",
 "bdb+": "border-bottom:1px solid #000;",→"bdb+": "border-bottom:1px solid |;",
 "bdl+": "border-left:1px solid #000;",→"bdl+": "border-left:1px solid |;",
 "bdr+": "border-right:1px solid #000;",→"bdr+": "border-right:1px solid |;",
 "c": "color:#000;",→"c": "color:|;",

追加

ブロック要素をセンタリングする際によくつかうので、追加しました。デフォルトの「:」を打つのも面倒なので、今度全部の「:」をとって使ってみようかなと企んでいます。

"m:0a": "margin:0 auto;",

まだまだカスタマイズできそうなので、色々と試してみたいと思います。

[参考サイト]
DreamweaverでZen Codingの展開後の文字をカスタマイズするには? 

Pocket
article clipper Zen Codingを自分なりにカスタマイズしてさらに効率化する方法