Notepad++でZenCodingを使ってみる

 in Webサイト制作 / 開発環境 by

Notepad++でZenCodingを使ってみようと思います

作業内容

  • Notepad++をダウンロード・インストール
  • Notepad++にZenCodingをインストール

Notepad++のダウンロードサイトからNotepad++をダウンロード

notepad_01

「ダウンロード」をクリック

notepad_02

「DL」もしくは「npp.5.9.Installer.exe」をクリックし ファイルをダウンロード

「Notepad++」は「Windows 7」では使えないのかな？

notepad_03

「npp.5.9.Installer.exe」を実行し インストール作業へ

notepad_04

「OK」をクリック

notepad_05

「次へ」をクリック

notepad_06

「同意する」をクリック

notepad_07

「Notepad++」の「インストール先フォルダ」を選んで 「次へ」をクリック

notepad_08

インストールするコンポーネントを選択し 「インストール」をクリック
※よくわからなかったので そのまま「インストール」をクリックしました

notepad_09

「完了」をクリックし インストール完了です

notepad_10

これが「Notepad++」を画面です

ZenCodingをNotepad++で使えるようにする

code.google.comからNotepad++用のZenCodingのファイルをダウンロードnotepad_11

「Zen.Coding-Notepad++.v0.7.zip」をクリック
ダウンロードした「Zen.Coding-Notepad++.v0.7.zip」を解凍

notepad_12

解凍した「Zen.Coding-Notepad++.v0.7」フォルダ内の「NppScripting」フォルダと「NppScripting.dll」を
「Notepad++」の「plugins」フォルダにコピー

Windows XPの場合「C:Program FilesNotepad++plugins」です

「Notepad++」を起動し直します

「Notepad++」はインストール時にショートカットが作成されないのかな
「C:Program FilesNotepad++」の「notepad++.exe」をクリックして起動して下さい
ついでに「右クリック」でショートカットを作成しておくといいかも

notepad_13

ツールバーに「Zen Coding」が追加されています
これでNotepad++でZenCodingが使えるようになりました

Notepad++でZenCodingを使ってみた

試しに


header#main+nav#global

と記述し「Ctrl + E」


<header id="main"></header>
<nav id="global"></nav>

と変換されます

notepad_14→notepad_15

どうやらこれで使えそうですね

ZenCodingのコマンドを変えたいときは

「Ctrl + E」が使い慣れていない人は
「C:Program FilesNotepad++pluginsNppScriptingincludes」の「Zen Coding.js」を
編集すれば ショートカットキーを変更できそうです

僕は早速「Ctrl + ,」に変更しました

「Zen Coding.js」の7998行目
notepad_16


addMenuItem('Expand Abbreviation', 'expand_abbreviation', 'Ctrl+E');

を


addMenuItem('Expand Abbreviation', 'expand_abbreviation', 'Ctrl+,');

に変更

「Dreamweaver CS3」がデフォルトで「Ctrl + ,」だったので それに慣れてしまったようです

ZenCodingコマンドの例

更新予定…

参考ページ

日常茶飯事さん