DreamweaverやBracketsでEmmetのlang=”en”を”ja”に変更する方法
舶来モノだよ、Emmetは
Emmetを標準サポートするようになった最新のDreamweaverですが、htmlタグのlangがデフォルトでは”en”になってしまいます。これはEmmetのデフォルト設定が、「”lang”: “en”」になっているためです。舶来モノですな。
なお、Bracketsも拡張機能でEmmetを簡単に使えるようになりますので、あわせて変更方法を紹介しておきます。ちなみに、「Emmetがよく分からないー」という方は、HTML/CSSを爆速コーディング Emmet入門をご覧下さい。それでは、まず状況を確認してみましょう。
何も記述されていないHTMLファイルで
!
と入力して、tabキーを押すと
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
という感じで、HTMLの面倒なベースタグをEmmetさんが全部入れてくれるわけなんですが、2行目のhtmlタグを見ると「lang=”en”」となっているのが分かります。
なお、最新のDreamweaverは、新規でHTMLファイルを作成するとドキュメントタイプがデフォルトでHTML5となり、
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>
<body>
</body>
</html>
というところまで記述した状態でHTMLファイルを用意してくれるので、あまりこの問題に遭遇する人はいないかもしれません。BracketsでEmmetを使う方は、この状況はあまり気持ち良くはないでしょうから、以下の方法を参考に修正してみてください。
和モノにしようか、Emmetを
和モノと言っても今回はlang設定をjaにするだけですが、ダミーテキスト「lorem」を日本語化する方法もウェブで検索すると出て来ますね。これはまた別の機会に試してみようかと思います。とりあえず、jaにしてみましょう。
Emmetの設定ファイルを開く
まずは、Emmetが提供している設定ファイルを探しましょう。DreamweaverとBracketsの各OSでのファイルの在処は以下の通りです。
※Bracketsは、ファイルメニューの拡張機能マネージャーからEmmetをインストールしてある前提です
Dreamweaver (Win)
C:¥Program Files¥Adobe¥Adobe Dreamweaver CC 2015¥configuration¥Shared¥Emmet¥Emmet¥snippets.js
Dreamweaver (Mac)
/Applications/Adobe Dreamweaver CC 2015/configuration/Shared/Emmet/Emmet/snippets.js
Brackets (Win)
メニューの「ヘルプ」>「拡張機能のフォルダーを開く」（extensionsフォルダーが開きます）
extensions¥user¥brackets-emmet¥node_modules¥emmet¥lib¥snippets.json
（C:¥Users¥ユーザ名¥AppData¥Roaming¥Brackets¥extensions¥user¥brackets-emmet¥node_modules¥emmet¥lib¥snippets.json）
Brackets (Mac)
メニューの「ヘルプ」>「拡張機能のフォルダーを開く」（extensionsフォルダーが開きます）
extensions/user/brackets-emmet/node_modules/emmet/lib/snippets.json
（/Users/ユーザ名/Library/Application Support/Brackets/extensions/user/brackets-emmet/node_modules/emmet/lib/snippets.json）
Emmetの設定ファイルを編集する
編集する前にバックアップを取る事を忘れずに！
Dreamweaverの場合
snippets.jsの3行目と4行目を編集していきます。
emmet.require('bootstrap').loadSystemSnippets({
"variables": {
"lang": "en",
"locale": "en-US",
"charset": "UTF-8",
"indentation": "\t",
"newline": "\n"
},
編集して以下のように和モノにします。
emmet.require('bootstrap').loadSystemSnippets({
"variables": {
"lang": "ja",
"locale": "ja-JP",
"charset": "UTF-8",
"indentation": "\t",
"newline": "\n"
},
Bracketsの場合
snippets.jsonの3行目と4行目を編集して以下のように和モノにします。
{
"variables": {
"lang": "ja",
"locale": "ja-JP",
"charset": "UTF-8",
"indentation": "\t",
"newline": "\n"
},
Dreamweaver、またはBracketsを再起動して完了
おつかれさまでした。以上でlang設定は変更できました。
最後に
さて、ひとつ注意が必要なのは、アップデート時にこの設定が上書きされてしまう可能性があるということです。おそらく、Dreamweaverユーザーは、Emmetの「!」をあまり使わないと思うので影響はほとんどないと思いますが、BracketsのEmmet機能拡張が更新された際に、ほいほいアップデートするとあっさり上書きされてしまうと思います。なお、Brackets自体をアップデートする場合は影響はないと思われます。
おまけ
和モノな雲の作り方の参考にしたページ