Web制作環境を整える その6 – Emmet を使い倒す

Emmet を使い倒す

前回までは、Emmet でのマークアップとCSSコーディング表記を学んできましたが、Sublime Text3での Emmet プラグインが提供してくれるのは、展開処理だけではありません。コーディング作業に便利な機能が他にもありますので紹介します。

Emmet公式ページでは、動作の様子をアニメーションで見ることが出来ますのでわかりやすいです。各機能の説明にリンクを張ってありますので参照してください。

Emmet のコマンド

Balance

カーソル位置からタグの境界を判別し、選択状態にします。Balance(inward) で内側に向かって縮小、Balance(outward) で外側に向かって拡張します。

  • 選択範囲を縮小 – Ctrl + Shift + 0
  • 選択範囲を拡大 – Ctrl + ,

Demo: Balance

対応する開始/終了タグへ移動

対応する開始/終了タグへ移動します。Vintage を使っているなら % で代用できます。

  • 開始/終了タグへ移動 – Ctrl + Alt + j

Demo: Go to Matching Pair

タグで囲む

選択されたテキストをタグで囲みます。Surround にも似た機能がありますが、こちらは何で囲むかの指定に Emmet の省略表記が使用できます。ショートカットキーは Ctrl + Shift + g となっていますが、Vintage では Ctrl + Alt + Enter で利用できます。

  • タグで囲む – Ctrl + Alt + Enter

Demo: Wrap with Abbreviation

入力箇所へのカーソル移動

入力が必要になると思われる箇所へ、自動的にカーソルを移動してくれる機能です。タグの間や空の属性値への移動をかなり賢く行ってくれます。マークアップ作業で特に役立ちますよ。

  • 次の編集箇所へ – Ctrl + Alt + Right
  • 前の編集箇所へ – Ctrl + Alt + Left

Demo: Go to Edit Point

自動テキスト選択

上記のカーソル移動と似たような動作で、変更が必要になりそうな範囲を自動的に判断して選択状態にします。Vintage でキーボードショートカットを使う場合は、挿入モードで使用できます。ノーマルモードで使用したい場合は キーマップを変更する必要があるでしょう。

Sublime Text の複数選択機能と併せて使うと面白いかもしれません。

  • 次のアイテムを選択 – Ctrl + Shift + .
  • 前のアイテムを選択 – Ctrl + Shift + ,

Demo: Select Item

コメントアウト(トグル)

コメントアウトへの変換/解除を行います。 Vintage のコメントアウト(Ctrl + /)と違って、テキスト選択ならばインラインコメントに、タグ上ならばブロック単位でコメントへ、といったように自動で判断してコメントアウトしてくれます。

  • コメントアウト – Ctrl + Shift + /

Demo: Toggle Comment

タグの分割・結合

カーソル上のタグを分割・結合します。HTMLマークアップではあまり使用する事はないでしょうが、XML/XSL では役に立つでしょう。
<tag /> のような単独タグを <tag></tag> の形へ変換、またはその逆を行います。

  • タグの分割・結合 – Ctrl + Shift + @

Demo: Split/Join Tag

タグの削除

カーソル位置から判断して囲んでいるタグを削除します。削除後のインデント調整までしてくれて気が利いています。

  • タグの削除 – Ctrl + Shift + :

Demo: Remove Tag

タグの変更

カーソル位置から判断して囲んでいるタグを選択状態にします。対応する終了タグまで同時に選択された状態になります。
デフォルトのキーボードショートカットでは、英語キーボード用の設定になっているので、[Preference] – [Key Binding – User] を編集して別のキーに割り当てをする必要があります。

  • タグの変更 – Ctrl + Shift + ](上記の例の場合)

画像サイズの自動挿入

HTMLのimgタグのsrc属性から画像のサイズを取得し、width, height属性の値を追加/更新します。imgタグの上にカーソルを置いた状態で実行してください。
Vintage でキーボードショートカットを使う場合は、挿入モードで使用できます。ノーマルモードで使用したい場合は、キーマップを変更する必要があるでしょう。

CSSシンタックスでの動作は、url() の指定から画像サイズを取得し、width, heightプロパティを追加/更新します。

  • 画像サイズの自動挿入 – Ctrl + u(挿入モードで)

Demo: Update Image Size

算術演算

簡単な計算式を記述して、その結果へ変換することができます。\(バックスラッシュ)を使えば、四捨五入もできます。 CSSでの値の入力には役に立ってくれるでしょう。
Vintage でキーボードショートカットを使う場合は、挿入モードで使用できます。ノーマルモードで使用したい場合は、キーマップを変更する必要があるでしょう。

  • 算術演算 – Ctrl + Shift + y

Demo: Evaluate Math Expression

インクリメント・デクリメント

数値のインクリメント(1増加)とデクリメント(1減少)ができます。Vintageous によって同様の処理ができますが、Emmet では増加/減少させる数を0.1ずつと10ずつが追加されています。
Vintage でキーボードショートカットを使う場合は、挿入モードで使用できます。ノーマルモードで使用したい場合は、キーマップを変更する必要があるでしょう。

  • 1ずつ増加 – kbd{Ctrl}+{ + }+kbd{Up}
  • 1ずつ減少 – kbd{Ctrl}+{ + }+kbd{Down}
  • 0.1ずつ増加 – kbd{Alt}+{ + }+kbd{Up}
  • 0.1ずつ減少 – kbd{Alt}+{ + }+kbd{Down}
  • 10ずつ増加 – kbd{Alt}+{ + }+kbd{Shift}+{ + }+kbd{Up}
  • 10ずつ減少 – kbd{Alt}+{ + }+kbd{Shift}+{ + }+kbd{Down}

Demo: Increment/Decrement Number

ベンダープレフィックス値の反映

CSSコーディング時に便利な機能です。カーソルが置かれた値で、ブロック内の他のベンダープレフィックスの値に反映させます。言葉では説明しずらいので、ぜひデモページを見てください。
Vintage で使用したい場合は、キーマップを変更する必要があるでしょう。コマンドパレットから次のコマンドを選択してください。

  • Emmet: Reflect CSS Value

Demo: Reflect CSS Value

画像をbase64エンコードで埋め込み

HTMLやCSSでは、base64エンコードしたテキストで画像を埋め込むことが可能です。埋め込みの利点は、HTTPリクエストの数を減らしてサーバの負荷を軽くできること等があります。(デメリットもあるので注意が必要です。)
base64エンコードに変換するには別のツールが必要でしたが、Emmet ならURLパスからbase64エンコードに変換してくれます。ただし、変換できるのはプロジェクト管理内でパスが正しく指定されている画像のみです。
Vintage で使用したい場合は、キーマップを変更する必要があるでしょう。コマンドパレットから次のコマンドを選択してください。

  • Emmet: Encode/Decode Image to data:URL

Demo: Encode/Decode Image to data:URL

Emmetの便利なスニペット

Emmet で展開可能なスニペットは、HTMLタグやCSSプロパティだけではありません。HTMLまたはPHPシンタックスで「!」の一文字を入力し、展開してみてください。

このように、HTML5の雛形が生成されました。

今度は「lorem」と入力し、展開してみましょう。

謎の文章が生成されましたか?
これは lorem ipsum(ロレム・イプサム、略してリプサム)といわれるダミーテキストで、レイアウト確認やプレゼンテーション用の意味の全くない文字の羅列です。

こんな風に、単純な文章をスニペットから生成する事も可能です。

Emmetのスニペットを修正する

先ほどのHTML5の雛形を見ると、言語が英語に設定されていますね。metaももう少し追加したいので、修正をする事にしましょう。

Sublime Text 3 では、デフォルトの設定はロックされて変更できないようになっているので、ユーザ設定で上書きする方法をとります。
[Preference] – [Package Settings] – [Emmet] – [Settings – User] を開いてください。初めて開いた場合は、まっさらな状態です。そこに以下のように入力し、保存しました。

Emmetでは 言語や文字コードといった情報を変数で指定してありますので、その変更をしています。こうする事で、HTML5の雛形でも、XHTMLの雛形でもすべて lang=”ja” と出力されます。

次に、meta に、キーワードとディスクリプションを追加します。
キーワード、ディスクリプションをそれぞれ meta:key, meta:des という名前で、スニペット登録します。
次に、HTML5の雛形である doc と HTML4やXHTMLで用いられる doc4 の2つのスニペットを、先ほどのメタを加える形で上書き登録しました。

設定を保存後、先ほどと同じく「!」を展開してみます。

自分用のテンプレートがある人は、それを出力するように置き換えてもいいですね。

Emmet 展開のショートカットキーを変えました

デフォルトでは Ctrl + eTab が展開に割り当てられていますが、私はTab を Sublime Text 標準のスニペットと共存させるために無効にしてあります。展開のたびに毎回 Ctrl + e では疲れるので、キー割り当てを Shift + Enter へ変更しました。

ノーマルモードでは動作しないようにしているのがポイントです。

書き漏らした事とか小技とか

Emmet の記法では + は隣接要素として使いますが、別の使い方もあります。

また、|(パイプ)記号に c で閉じタグの後にID名、クラス名を示すコメント行を追加する事も出来ます。

フォームの input 要素なんかはこんな風に書けます