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から各種設定や拡張機能を移行する

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

  1. Pingback: コーディングを早くする「Emmet」 | WEBに関するあれこれ解決!

  2. Pingback: 「dreamweaver」「 Edge Code CC」にプラグインを入れて効率化 | WEBに関するあれこれ解決!

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>