Notepad++にEmmetをインストールして使うまでの手順(2019年4月版)

EmmetはWEBデザイナー・HTMLコーダー必須のコーディング効率化ツール

HTMLにおけるコーディングの速度を劇的にアップしてくれるEmmetという効率化ツールがあります。複数階層やタグの繰り返し等の構造を記号を用いて省略する記述法で、一部のエディターにしか実装されていません。

HTMLエディタではBracketsやSublime Text、Adobe Dreamweaverとメジャーなソフトは一通り対応していますが、テキストエディタに関してはNotepad++くらいしか候補がありません(参照:Emmet@JAPAN

HTMLエディタをわざわざ開くまでもないタグ打ちの時にEmmetを使いたいなと思い早速インストールを試みたのですが、Notepad++の仕様変更によりEmmet実装までかなり手間取り、ネット上にも古い情報しか載っていなかったのでここに書き残そうと思います。

Notepad++にEmmetをインストールして使えるようになるまで

Notepad++公式サイトよりソフトをダウンロードします。特に理由が無ければインストーラーver.でよいと思います。

Notepad++公式サイト
ダウンロードページ

次にインストーラーを起動してインストールします。特にチェックを外すべきコンポーネントはないと思います。他は『Localization』の項目から『Japanese』を選んでおくのが無難そうです。

『Plugin manager』と『Python Script』インストール

インストールしてNotepad++を起動します。起動したらまず『プラグイン』メニューから『プラグイン管理』をクリックします。クリックするとプラグインを選択してインストールするウィンドウが出るので、『Plugin manager』を探してチェックを入れて『インストール』ボタンをクリックします。

インストール後に再起動されますので、再起動したらまた『プラグイン』メニューをクリックして、先程追加した『Plugin manager』にポインタを乗せて『Show Plugin manager』をクリックします。

クリックすると『プラグイン管理』と同じようなウィンドウが出るので、そこから『Python Script』を探して先程と同じ要領でチェックを入れてインストールボタンを押します。

『Python Script』をインストールせずにEmmetを先にインストールすると『Python Script』を入れてくださいみたいなダイアログが出ます。

『PythonScript』フォルダの移動

話を戻して『Plugin manager』でインストールしたファイルは何故か[C:\Users\ユーザー名\AppData\Roaming\Notepad++\plugins]の中に格納され、しかもこのままではNotepad++上で使えません。何をされたのか意味がよく分かりませんが使えるようにします。

上記のフォルダの中に『PythonScript』フォルダと『PythonScript.dll』ファイルがあると思いますので、DLLファイルをフォルダの中に入れてください。そしてその統合した『PythonScript』フォルダを[C:\Program Files\Notepad++\plugins]の中に入れます。

これで『Python Script』プラグインが使えるようになります。どうやら最近のアプデによりプラグインファイルの構造が変化したようです。

以前のバージョンでは、Notepad++をインストールしたフォルダ内の plugin フォルダ直下にプラグインのDLLが置かれていたが、バージョン 7.6 以降では plugin フォルダの下にプラグインごとに個別のフォルダ内にDLLが置かれるようになった。

Notepad++ 7.6以降で外部プラグインが使えなくなる

Notepad++にEmmetをインストール

ついにEmmetのインストールです、Emmet for Notepad++のサイトからEmmetNPPをダウンロードしてzipファイルを展開します。

展開したフォルダの中に『EmmetNPP』フォルダと『EmmetNPP.dll』ファイルがあると思います、先程と同じ要領でDLLファイルをフォルダの中に入れて、『EmmetNPP』フォルダを[C:\Program Files\Notepad++\plugins]の中に入れます。その後にNotepad++を再起動するとプラグインメニューにEmmetが追加されているはずです。

Emmetのショートカットキーを設定

あと1つ問題があり、Emmetの記述を展開するためのショートカットキーがNotepad++本体の機能と競合しているので、競合を解除する必要があります。『設定』メニューより『ショートカット管理』をクリック。『メインメニュー』タブの44,45行『現在行の上/下に空白を挿入』か、『プラグイン』タブの『Expand abbreviation』『Wrap with abbreviation』のどちらかのキーを競合しないものに再設定してください。

Emmetでコーディングが楽しくなります

Emmetを使ってコーディングをしていると賢くなった気分になります。一部のみ覚えるだけでも相当な効率化になるので、まだ使っていないコーダーさんは是非使ってください。Emmetのチートシートはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です