CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」フォローアップ(2)Dreamweaverのコードエディター機能を進化させたBrackets

2017年5月13日(土)大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、鷹野 雅弘(スイッチ)の『Dreamweaverのコードエディター機能を進化させたBrackets』セッションのスライドなどを公開します。

メッセージとフォローアップ

アンケートにいただいた質問やコメントへの返答

Emmetでできることを全部知りたいです。特殊文字の変換の仕方があれば教えてください。

「p*4>lorem」でLorem Ipsumが入ったりしますが、特殊文字(©とか?)はないと思います。

BracketsはAtomでも使えますか?

おそらく「EmmetはAtomでも使えますか?」ですね。こちらからプラグインをダウンロードできます。

その他のエディタのプラグインも、こちらにまとまっています。

「Generic…」の続きがメモれなかった。

Dreamweaverもパッケージをインストールしてカスタマイズするやり方になっていることに驚きました。

10年以上前からDMXzoneはありますよ。つまり、拡張機能でカスタマイズするという文化は存在していました。以前は、アドビのサイト内でも拡張機能が紹介されていました。

Emmetフル版のインストール

公式サイトから拡張機能をダウンロードして、Dreamweaverにインストールします。

CC 2015以降、拡張機能をインストールするためのアプリケーション Extension Manager がサポート終了となってしまったため、DMXzone Extension Manager、または、オープンソースのZXPInstallerを利用します。

EmmetをDreamweaverにインストールしたときの全機能

Dreamweaverのキーボードショートカット設定にて割り当て可能です。

コマンド意味
NumbersIncrement Number by 11増やす
Decrement Number by 11減らす
Increment Number by 0.10.1増やす
Decrement Number by 0.10.1減らす
Increment Number by 1010増やす
Decrement Number by 1010減らす
Evaluate Math Expression四則演算
CSSReflect CSS Valueベンダープリフィックスの値を一致させる
HTMLMatch Pair Tag (outward)親要素を選択(Dreamweaverの
親要素を選択と同様)
Match Pair Tag (inward)子要素を選択
Go To Matching Pair開始タグと終了タグを行き来する
Remove Tagタグを削除
Split/Join Tag Declaration閉じタグを省略する
Expand Abbreviation省略語を展開する
Wrap with Abbreviation選択したテキストに省略語でマークアップする
Toggle Commentカーソルの位置の要素をコメントアウト
(HTML/CSS)
Previous Edit Point前の編集ポイントへ移動
Next Edit Point次の編集ポイントへ移動
Select Next Item次のDOMに移動
Select Previous Item直前のDOMの項目に移動
Merge Lines改行を削除する
Emmet Preferences環境設定(無効)

ご参考

2016年に開催されたCSS Nite関連の38イベントからベスト・セッションを選出しました。

毎年年末に開催している「Shift」シリーズの第11弾として、2017年のWeb制作シーンを振り返ります。現在、Facebookにて参加表明を受付中