Emmetの導入方法は前回を参照
昨日書いた「コーディングの面倒を軽減！Emmetを使おう」、ちょこちょこ反応があって思いのほか役に立っているようなので、今日はもうちょっと色々なEmmetの機能を紹介しようと思います。
Emmetで展開される内容を変更する
Emmetで「Expand Abbreviation」するとHTMLやCSSが展開されて、短い記述で一気にコーディングできるようになるのは前回紹介した通りです。
ところで、html:5と書いて展開すると次のようなHTMLソースが展開されましたよね。
[html]
<html>要素の部分を見てみると、lang属性の値がenになっていますよね。
このままだと、ブラウザや検索エンジンから英語のサイトであると認識されてしまう恐れがありますので、jaに書き換えないといけません。
でも、いちいち手入力で変更するのは面倒ですし、うっかり忘れる可能性もありますよね。そこで、展開される時にjaで展開されるように変更してしまいましょう。
Emmetで使う省略形と展開される内容の対応は、スニペットというファイルに記述されています。
今回もDreamweaverとSublimeTextの例だけですが、変更方法をご紹介します。
Dreamweaver
Dreamweaverのスニペットは、次のファイルパスの場所にあります。
(ユーザー名)と(Dreamweaverのバージョン)はそれぞれ置き換えて探してください。
C:Users(ユーザー名)AppDataRoamingAdobe(Dreamweaverのバージョン)ja_JPConfigurationCommandsEmmetsnippets.js
/Users/(ユーザー名)/Library/Application Support/Adobe/Dreamweaver CC/ja_JP/Configuration/Commands/Emmet/snippets.js
Macのほうは初期状態ではLibrary（またはライブラリ）ディレクトリが非表示になっているので、見つからない人もいるかと思います。その際はAdobeのヘルプページ「非表示のユーザーライブラリフォルダーにアクセスする方法（Mac OSX 10.7以降）」を参考にしてください。
snippets.jsファイルをDreamweaver以外のテキストエディタで開き、上部の"variables"と書いてある部分を、次のように書き換え、Dreamweaverを再起動します。
"variables": {
"lang": "ja",
"locale": "ja-JP",
"charset": "UTF-8",
"indentation": "t",
"newline": "n"
},
「Dreamweaver以外のテキストエディタで～」というのは各所でよく見る内容なのですが、ぼくはDreamweaverで編集しても何ともありませんでした。（何かあっても保証はできませんので、やっぱり他のエディタ使うほうが良いと思いますが）
他のエディタで編集した場合、Dreamweaverと他のエディタが同時に起動しているとEmmetが動作しなくなる場合がありますので、Dreamweaver以外のエディタは編集が済んだら終了しておいてください。（特にNotePad++と相性が悪いみたいです）
SublimeText
メニューの「Preferences」内で「Package Settings」「Emmet」「Settings - User」と辿っていってください。
Settings - UserをクリックするとEmmet.sublime-settingsが開きますので、次のように書き込んで保存してください。
{
"snippets": {
"variables": {
"lang": "ja"
}
}
}
スニペットでさらに便利に
よく使うパターンのコードはEmmetで出力されるようにスニペットを編集しておくと便利です。
例として、jQueryを読み込む<script>タグが出力されるファイルをスニペットに登録してみましょう。
snippets.jsの中で「"html":」と書かれている部分を検索するなどして探し出してください。そこのすぐ近くに「"snippets":」と書いている部分があるので、その中の「"cc:noie":」で始まっている部分が次のようになるように追加します。
「"cc:noie":」の行の末尾に「,（コンマ）」を追加するのを忘れないように注意。編集して保存したらDreamweaverを再起動してください。
Dreamweaver
"cc:noie": "<!--[if !IE]><!-->nt${child}|n<!--<![endif]-->",
"jq": "<script src=\"https://code.jquery.com/jquery-1.11.0.min.js\"></script>"
SublimeText
先ほど編集していたEmmet.sublime-settingsファイルの中を次のように書き換えます。
{
"snippets": {
"variables": {
"lang": "ja",
"charset": "utf-8"
},
"html": {
"snippets": {
"jq": "<script src=\"https: //code.jquery.com/jquery-1.11.0.min.js\"></script>"
}
},
"css": {}
}
}
今回はHTMLのスニペットだけなので本当は必要ないんですが、後から任意でCSSのスニペットも追加できるよう、「"css":」の記述も入れてあります。
jqで展開してみる
<head>要素の中で「jq」と書き、Emmetで展開（Expand Abbreviation）してみてください。次のように展開されるはずです。
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
他にも便利な機能が色々
Emmetには、他にも便利な機能が色々とあります。
キーボードショートカットはそれぞれで設定するかと思いますので、ここではその名前と機能だけを紹介しておきます。
標準の状態でのキーの組み合わせは、Dreamweaverであれば各機能名の横に表示され、SublimeTextではSublimeText用EmmetのGitHubページ内の「Available actions」に記載されています。
日本語キーボードで押せないキーもあるので、その場合は本文の「日本語キーボードで押せないものがある」の項を参照してください。
- Go To Matching Pair
- 各要素の対となるタグ(開始タグ/終了タグ)へ移動します。
- Match Pair Tag (outward)
- 要素内の文字をすべて選択します。繰り返し実行することで順に親要素へと広がっていきます。
- Remove Tag
- 要素の開始タグと終了タグをまとめて削除します。
- Wrap With Abbreviation
- 選択している範囲の文字をマークアップできます。
- Toggle Comment
- 選択範囲をコメントアウトしたり解除したりできます。
- Go to Edit Point
- 空要素や値のない属性（><や""の部分）を探してカーソルを飛ばします。 Dreamweaverでは「Next Edit Point」と「Previous Edit Point」で表示されています。
- Select Item
- 開始タグを中心に、属性値や属性などを探して選択します。繰り返し実行することで順に移動します。
Dreamweaverでは「Select Next Item」と「Select Previous Item」で表示されています。</dd> <dt>Merge Lines</dt> <dd>選択した範囲の改行やインデントを削除し、ソースを１行にまとめます。</dd> <dt>Encode/Decode Image to data:URL</dt> <dd>Dreamweaverにはありませんが、画像データをbase64エンコード/デコードできます。</dd>
日本語キーボードで押せないものがある
Emmetの初期設定では日本語キーボードで押せないものがあり、その場合はキーボードショートカットの設定を変更する必要があります。
Dreamweaverは、Windowsなら「編集 > キーボードショートカット」、MacOSXなら「りんごマーク > キーボードショートカット」で設定できます。
SublimeTextの場合は、「Preferences > Package Settings > Emmet > Key Bindings - User」を開き、次のように書いてください。
[{
"keys": [
"shift+ctrl+r"
],
"command": "rename_tag",
"context": [{
"key": "emmet_action_enabled.rename_tag"
}]
}]
"keys":[]の内容を書き換えてキーの組み合わせを設定します。
他の機能のキーボードショートカットを設定変更したい場合、「Preferences > Package Settings > Emmet > Key Bindings - Default」からコピーしながら設定してください。