現在地

Dreamweaver CC 2017でEmmetを使い倒す

作成者:assi 作成日:火, 03/28/2017 - 14:40

Dreamweaver CC 2017(以下Dw)ではEmmetが標準搭載されているほか、自分でDw用の拡張機能(いわゆるフル版のEmmet)として追加することも可能です。
この2つのEmmetの違いは何か、どのようにして使い分ければよいのか、順を追って解説していきます。
なお呼び方としては

  • 最初からインストールされているEmmet→標準のEmmet
  • 自分で追加する、Dwの拡張機能のEmmet→拡張機能のEmmet

とします。
ちなみに公式でアナウンスはされていませんが、標準のEmmetはBracketsにて拡張機能として提供されているものと予測されます。

検証環境:

  • メイン:Mac OS X El Capitan(10.11.6)
  • サブ:Windows 10 Home バージョン1511(OSビルド10586.753)
  • Dreamweaver CC 2017 9346ビルド(Mac・Winとも)

目次

style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-1711493402429966"
data-ad-slot="5065549738">

結論

「順を追って」と言いながら先に結論を言ってしまうと
「拡張機能のEmmetをインストールし、キーボードショートカットをカスタマイズする」

のが現状でのベストと考えています。なぜというと

  • 「標準のEmmetはほぼ全機能が使用できるが、元々Bracketsに使用されているものであるためDw用の調整が十分ではない」
  • 「拡張機能のEmmetは標準のEmmetに比べ使えない機能があるものの、それらは無視できるレベルであり、Dw用の調整がきちんとされている(元々Dw用なので当然ですが)」

という理由からです。
ちなみに「標準のEmmetにあり、拡張機能のEmmetに無い機能」とは

  • Update Tag
  • Insert Formatted Line Break
  • Interactive Expand Abbreviation

です。これらの機能はEmmet公式ドキュメントにも記載されていません(Update Tagはとても便利な機能なため、もっと知られてもいいと思うのですが…)。

また

  • Update Image Size
  • Encode/Decode Image to data:URL

については、標準・拡張機能ともに機能がありません。

拡張機能のEmmetを使用する

まずは現実的な解である、拡張機能のEmmetを使用する方法を解説します。

インストール

CC 2015以降、Adobeアプリに拡張機能をインストールするための公式アプリ「Extension Manager」がサポート終了となったため、ZXPInstaller、またはDMXzone Extension Managerを利用します。このあたりはCSS Nite LP51「Reboot Dreamweaver」の受け売りですので、参加者の方はフォローアップページを併せてご覧いただくとわかりやすいかもしれません。
いずれの場合も、インストールの際はDwを閉じた状態で行ってください。

Emmet本体のダウンロード

ZXPInstallerにしろDMXzone Extension Managerにしろ、まずはEmmetの本体ファイルをダウンロードする必要があります。
GitHubのリポジトリページへアクセスし、「Download Emmet.zxp」の部分をクリックします。
そうすると自動的にEmmet.zxpのダウンロードが開始されます。
Emmet本体のダウンロードリンク箇所

ZXPInstallerによるインストール

ZXPInstallerの場合は簡単で、ZXPInstallerを起動し先ほどダウンロードしたEmmet.zxpをZXPInstallerにドロップするだけです。インストールが無事完了すると、中央のアイコンが緑色に変わります。
ZXPInstaller起動時の画面、Emmetのインストール完了後の画面

その後Dwを開いてウィンドウ→拡張機能→Emmetの項目があれば無事適用されています。
Emmetが正常にインストールされた状態

ただし条件はわからないのですが、環境によりインストールが失敗することがあります。その場合は、次のDMXzone Extension Managerによるインストールをお試しください。
インストール失敗時の画面

DMXzone Extension Managerによるインストール

DMXzone Extension Managerをダウンロードするには、まずアカウントの登録が必要となります。ダウンロードボタンを押下するとログインポップアップが出ますので、そちらからアカウント登録を行ってください。
DMXzoneアカウント作成画面

アプリのインストールが完了し起動、アプリ内で再度ログインすると、このような画面になります。
DMXzone Extension Manager起動時の画面

Dwが複数インストールされている場合は上部のchevronをクリックし、「Dreamweaver CC 2017」に切り替えます。
Dreamweaver CC 2017への切り替え

その後右上のフォルダアイコンをクリックし、ダイアログから先ほどダウンロードしたEmmet.zxpを選択します。
Emmetのインストール

右上のローダーの回転が止まり、タブを「Installed」に切り替えEmmetが表示されていればインストールは成功です。
Emmetのインストール完了後の画面

念のためDwを開いてウィンドウ→拡張機能→Emmetの項目があることも確認してください。
Emmetが正常にインストールされた状態

キーボードショートカットの変更

ショートカットの変更はメニューの

  • Dreamweaver CC→キーボードショートカット…(Mac)
  • 編集→キーボードショートカット…(Win)

から行います。
ダイアログが表示されるので、中部やや下くらいまでスクロールしEmmetの項目を展開します。
キーボードショートカット設定画面

  • Numbers
  • CSS
  • HTML

と中項目が並び、さらにその下に中項目に属さないアクションが一覧表示されています。
該当のものを選択し下部の入力欄(画像④)にフォーカスを当ててショートカットを入力、その右の「変更」をクリックするとショートカットが適用されます(各アクションの挙動は次のセクションで解説します)。

このとき

  • Dw標準のセット(Dreamweaver Standard)のまま設定しようとすると警告が出るため、ダイアログに従いセットを複製してください。
  • 「変更」をクリックして各アクションのショートカットを設定しても、最終的に右下の「OK」をクリックするまでは入力内容は保存されていません。あまり一気に設定しようとすると思わぬところで設定ダイアログが閉じてしまいやり直しになることもあるので、区切りのいいところで一度「OK」をクリックし保存することを推奨します。

Emmetの各アクション解説

  • 一応、標準のショートカットを記載しますが、標準のEmmetで遊びたいマニアックな人以外はあまり気にしないでください。
  • Windowsの場合はCmdCtrlと読み替えてください。

Numbers

Increment/Decrement Number by 1/01/10
数値を1ずつ/0.1ずつ/10ずつ増減させます
ショートカット:

  • 1 - 割り当てなし
  • 01 - Cmd+Alt+Shift+Up or Down
  • 10 - Cmd+Alt+Up or Down
    Increment/Decrement Number by 1/01/10

Evaluate Math Expression
四則演算を行います
ショートカット:Cmd+Shift+Y
Evaluate Math Expression

CSS

Reflect CSS Value
ベンダープレフィックスが付与されている同一プロパティの値を他行にも反映します。styleタグ内では動作しません。
ショートカット:Cmd+Alt+Shift+R
Reflect CSS Value

HTML

Match Pair Tag(Outward/Inward)
本来はBalanceという名前の機能です。選択範囲を徐々に拡大/縮小します。
ショートカット:

  • Outward - Cmd+Alt+B
  • Inward - Cmd+Alt+Shift+B
    Match Pair Tag(Outward/Inward)

Go to Matching Pair
対応する開始タグ/閉じタグにジャンプします
ショートカット:Cmd+Shift+T
Go to Matching Pair

Remove Tag
タグを削除します
ショートカット:Cmd+Shift+K
Remove Tag

Split/Join Tag
タグを分割/結合します
ショートカット:割り当てなし
Split/Join Tag

その他

Expand Abbreviation
HTML/CSSにおいて、Emmetの文法に基づきコードを展開します。これだけショートカットにCmd+Eが割り当てられていますが、Cmd+Eはクイック編集が既に割り当てられていますので動作しません。Tabで展開するか任意のショートカットを作成してください。
ショートカット:Tab or Cmd+Alt+Enter
Expand Abbreviation

Toggle Comment
コメントアウトを切り替えます。こちらはMacのみ、何も設定していなくともCmd+/で使用可能です。
ショートカット:Cmd+/(Macのみ)
Toggle Comment

Wrap with Abbreviation
選択範囲を任意のタグで括ります。「*」を付与すれば行ごとの処理も可能です。
ショートカット:割り当てなし
Wrap with Abbreviation

Previous/Next Edit Point
直近の編集可能ポイントにジャンプします。
ショートカット:Cmd+Alt+Left or Right
Previous/Next Edit Point

Select Next/Previous Item
直近のタグ名や属性にフォーカスした状態でジャンプします。
ショートカット:Cmd+Shift+, or .(Macのみ)
Select Next/Previous Item

Merge Lines
改行を削除します。
ショートカット:割り当てなし
Merge Lines

Emmet Preference
こちらはEmmetのアクションではなく、Emmetの挙動をカスタマイズする際に使用します。検証を行っていないため割愛します。

標準のEmmetを使用する(マニア向け)

標準のEmmetもほぼ全機能を搭載しているため、拡張機能のEmmetをインストールせずにこちらをそのまま使用することも可能です。ですが

  • 「機能は存在するのに、ショートカットが割り当てられていないものがある」
  • 「Dw用の調整がされておらず、おかしな挙動になる」

等あるため、あまり推奨はしません。

ただし逆を言えば拡張機能のEmmetは公式サポートが打ち切られていところに、サードパーティのアプリを介して無理矢理インストールしていることになります。今後この方針がずっと取れるかもわからないので、拡張機能のEmmetが使用不可となった場合に、標準のEmmetを使いこなす術は有用になるかもしれません(そのときにはきちんとDw用の調整がなされているといいですね……)。

標準ですので、Dwを立ち上げてすぐ、前セクションにて記したショートカットで使用することが可能です。
「ショートカットが割り当てられていないのに存在する機能は、どう使用すればよいのか?」は次セクションにて解説します。

キーボードショートカットの変更

標準のEmmetのキーボードショートカットは設定画面が存在せず、JSONファイルにて設定を行う形となります。DwにはBracketsエンジンが組み込まれており、標準のEmmetはBrackets版のEmmetですので、つまりはBracketsのキーボードショートカットの変更の仕方と同様です(結局この方法も公式でアナウンスされているものではありませんので、永続的に使用できる保証はありません)。

下記の内容のkeymap.jsonを作成し、該当のディレクトリに格納してください。先述した「機能は存在するが、ショートカットが割り当てられていないアクション」もここでショートカットを割り当てることにより、晴れて使用することが可能となります。記法のサンプルも併せて入れていますので、適宜ご調整ください。

keymap.jsonの格納場所
Dreamweaverをインストール後、一度起動すると該当フォルダが生成されます。

  • Windowsの場合
    • C:\Users\ユーザー名\AppData\Roaming\Adobe\Dreamweaver CC 2017\ja_JP\Configuration\Brackets\extensions\user
  • Macの場合
    • /Users/ユーザー名/Library/Application Support/Adobe/Dreamweaver CC 2017/ja_JP/Configuration/Brackets/extensions/user

割り当てがないアクションのみ

{
  "overrides": {
    "Ctrl-Cmd-Alt-Shift-R": "io.emmet.wrap_with_abbreviation",
    "Cmd-Alt-Shift-Enter": "io.emmet.split_join_tag",
    "Cmd-Alt-Shift-Up": "io.emmet.merge_lines",
    "Cmd-Alt-Shift-Right": "io.emmet.increment_number_by_1",
    "Cmd-Alt-Shift-Down": "io.emmet.decrement_number_by_1",
    "Cmd-Alt-Shift-Left": "io.emmet.update_tag",
    "Cmd-Alt-Shift-Tag": "io.emmet.insert_formatted_line_break",
    "Cmd-Alt-Shift-": "io.emmet.interactive_expand_abbreviation"
  }
}



全部入り

{
  "overrides": {
    "Ctrl-Cmd-Alt-Shift-R": "io.emmet.balance_outward",
    "Cmd-Alt-Shift-Enter": "io.emmet.balance_inward",
    "Cmd-Alt-Shift-Up": "io.emmet.matching_pair",
    "Cmd-Alt-Shift-Right": "io.emmet.wrap_with_abbreviation",
    "Cmd-Alt-Shift-Down": "io.emmet.prev_edit_point",
    "Cmd-Alt-Shift-Left": "io.emmet.next_edit_point",
    "Cmd-Alt-Shift-Tag": "io.emmet.select_previous_item",
    "Cmd-Alt-Shift-": "io.emmet.select_next_item",
    "Cmd-Alt-Shift-": "io.emmet.toggle_comment",
    "Cmd-Alt-Shift-": "io.emmet.split_join_tag",
    "Cmd-Alt-Shift-": "io.emmet.remove_tag",
    "Cmd-Alt-Shift-": "io.emmet.merge_lines",
    "Cmd-Alt-Shift-": "io.emmet.evaluate_math_expression",
    "Cmd-Alt-Shift-": "io.emmet.increment_number_by_1",
    "Cmd-Alt-Shift-": "io.emmet.decrement_number_by_1",
    "Cmd-Alt-Shift-": "io.emmet.increment_number_by_01",
    "Cmd-Alt-Shift-": "io.emmet.decrement_number_by_01",
    "Cmd-Alt-Shift-": "io.emmet.increment_number_by_10",
    "Cmd-Alt-Shift-": "io.emmet.decrement_number_by_10",
    "Cmd-Alt-Shift-": "io.emmet.reflect_css_value",
    "Cmd-Alt-Shift-": "io.emmet.update_tag",
    "Cmd-Alt-Shift-": "io.emmet.insert_formatted_line_break",
    "Cmd-Alt-Shift-": "io.emmet.interactive_expand_abbreviation"
  }
}

おまけ:標準のEmmetはどの部分が調整不足なのか?

Wrap with Abbreviation

  • アクション呼び出し時にダイアログにフォーカスが当たらない
  • タグの対応がおかしなことになる
    バグ:Wrap with Abbreviation

Toggle Comment

  • 何故かマルチカーソルまで実行される
    バグ:Toggle Comment

Update Tag

  • タグの対応がおかしなことになる
    バグ:Update Tag

本来は下記のような挙動になります。
正常動作:Update Tag

Interactive Expand Abbreviation

  • タグの対応がおかしなことになる
    バグ:Interactive Expand Abbreviation

本来は下記のような挙動になります。
正常動作:Interactive Expand Abbreviation

関連書籍



categories:

関連記事