Dreamweaver CC 2019 に Emmet をインストール

CATEGORY: HTML/CSS | TAG: Emmet

2019年8月5日

Dreamweaver CC 2019 には Emmet が既に入っていますが、拡張機能として追加する方法の覚書です（以下は Mac版についてです）。

Dreamweaver 標準で搭載されている Emmet では Wrap with abbreviation などの一部機能が使えないために別途インストールしました。

Adobe の Extension Manager が現在では使用できないので、無料の DMXzone Extension Manager for Dreamweaver　を使います。

Emmet をインストール

Emmet（Emmet.zxp）を「Emmet for Dreamweaver」からダウンロードをします。

DMXzone Extension Manager for Dreamweaver をダウンロードします。
ダウンロードするには、メールアドレスを登録（アカウントを作成）する必要があります。

DMXzone Extension Manager for Dreamweaver　で「Download for Mac OSX」をクリックして、「Register for an account」をクリックしてアカウントを作成します。

登録したメールアドレスにメールが来るのでユーザー登録して、DMXzone Extension Manager for Dreamweaver　で「Download for Mac OSX」をクリックしてダウンロードします。

ダウンロードしたファイルをダブルクリックして、Application　フォルダにドラッグしてインストールします。

インストールした DMXzone Extension Manager　を起動して、フォルダのアイコンをクリックしてダウンロードした Emmet（Emmet.zxp）を選択して拡張機能を追加します（MXzone Extension Managerに Emmet.zxp　をドラッグしても大丈夫です）。

Dreamweaver を再起動して上部メニュー「ウィンドウ」→「拡張機能」で Emmet　がインストールされたかを確認できます。

Dreamweaver のショートカットに追加

個人的に良く使う機能「Wrap with abbreviation」をショートカットに追加した際の手順のメモです。

Dreamweaver のメニューから「キーボードショートカット」を選択します。

「現在のセット」が「Dreamweaver Standard」で「＋」をクリックしてショートカットを追加しようとすると、「デフォルトセットは変更できません。・・・」のようなポップアップ警告が表示されるので「OK」をクリックします。

セットの複製のウィンドウが表示されるので、適当なセットの名前を付け、複製した独自のセットでショートカットを編集（追加）します。

Emmet　を展開するには左横の矢印をクリックしてコマンドを表示させます。
ショートカットを登録したいコマンドを選択し、「＋」をクリックして、ショートカットのキーを押さえて登録します。

Creative Cloud desktop application

今回 Emmet を別途インストールする方法を調べた際、拡張機能のインストールには「Creative Cloud desktop application」を使うようなことが Adobe　のページ（Install add-ons and extensions for Adobe apps）に書かれていたので、最初はそれを試しましたが、うまくインストールはできませんでした。

以下はうまくいかなかった例です。

上記ページに記述されているようにターミナルからコマンドを入力して、インストール後、確認するとインストールされているようなレスポンスがあるのですが、実際にはインストールはできていませんでした。

iMac:~ xxx$ cd ~/Desktop
iMac:Desktop xxx$ ./Contents/MacOS/ExManCmd --install Emmet.zxp
Installing extension with file path = Emmet.zxp
Installation Successful for extension with file path = Emmet.zxp
iMac:Desktop xxx$ ./Contents/MacOS/ExManCmd --list all
1 extension installed for Adobe Dreamweaver (ver 19.2.0)
 Status                        Extension Name                         Version
=========  =======================================================  ==========
 Enabled    Emmet                                                        1.0.0

0 extension installed for Photoshop CC (ver 20.0.5)
 Status                        Extension Name                         Version
=========  =======================================================  ==========

0 extension installed for Others
 Status                        Extension Name                         Version
=========  =======================================================  ==========

Web Design Leaves