この一年でHTMLを書くこともちょくちょく増えてきました。どうも@knk_nです。
Twitterで「zen-coding」というコトバを目にし、興味を持ったのでお気に入りのテキストエディタ「TextWrangler」に導入してみることに。
 |
無料だけどかゆいところに手が届く高機能なHTML&テキストエディタ「TextWrangler」 |
スポンサードリンク
項目別に読む
Zen-codingとは
zen-codingとはHTMLの記述を高速化・効率化するためのテキストエディタ用プラグイン。
例えば、zen-codingを導入したテキストエディタで
html:5
と記述し、ショートカットキー(詳しくは後述)を押すと
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <##> </body> </html>
このように自動でHTML5のフォーマットをごっそり記述してくれます。
なかなかおもしろい。
zen-codingに対応したテキストエディタ
zen-coding対応のテキストエディタには
- Aptana/Zend Studio/Eclipse (crossplatform)
- TextMate (Mac)
- Coda (Mac)
- Espresso (Mac)
- Komodo Edit/IDE (crossplatform)
- Notepad++ (Windows)
- PSPad (Windows)
- <textarea> (browser-based)
- editArea (browser-based)
- CodeMirror (browser-based)
- CodeMirror2 (browser-based)
via: zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
のように公式サポートしているもの、
- Dreamweaver (Windows, Mac)
- Sublime Text (Windows)
- Sublime Text 2 (crossplatform)
- UltraEdit (Windows)
- TopStyle (Windows)
- GEdit (crossplatform)
- BBEdit/TextWrangler (Mac)
- Visual Studio (Windows)
- EmEditor (Windows)
- Sakura Editor (Windows)
- EditPlus (windows)
- NetBeans (crossplatform)
- Chrome Extension
- Userscript for Greasemonkey
- Geany
- RJ TextEd
- AkelPad
- BlueFish
via: zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
のように公式のリソースを使ってサードパーティ側が作ったもの、
- IntelliJ IDEA/WebStorm/PHPStorm (crossplatform)
- Emacs (crossplatform)
- Vim (crossplatform)
- ReSharper
via: zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
のように非公式のリソースを使って作られているもの
に分かれているのですが、なんと我らがTextWranglerも対応エディタの中に入っているのです！
非常に驚いたので導入決定。
TextWranglerにzen-codingを導入する
1. ファイルのダウンロード
zen-coding公式サイトよりファイルをダウンロードします。
2. ファイルを適当な場所に移動する
ダウンロードしたファイルを展開し、
ユーザ > ライブラリ > Aplication Support > TextWrangler > Scripts
に移動します。
いちおうこれでTextWranglerでzen-codingが使えるようになります。
3. 日本語の設定
日本語にするには「zencoding_1_1_1」フォルダ内にある「zen_settings.py」を開き
# ${child} variable is reserved, don't use it
'variables': {
'lang': 'en',
'locale': 'en-US',
の部分を
# ${child} variable is reserved, don't use it
'variables': {
'lang': 'ja',
'locale': 'ja',
このように直せばOKです。
ショートカットキーを使った利用方法に切り替える
通常TextWranglerでzen-codingを使う場合、このようにスクリプトメニューからzen-codingを呼び出し、
コマンドを入力するという手間がかかるのですが、ショートカットキーを設定して高速でzen-codingを呼び出す方法があったので切り替えてみました。
| TextWranglerにZen-Codingを入れてみた。 | WebDesign Memo |
ショートカットキーでzen-codingを高速化する方法
メニューより
Window > Palettes > Scripts
を開きます。
ウィンドウで「ZenCoding_1_1_1」を選択して右上の「Set Key」をクリック。
好みのショートカットキーを設定できます。私は「⌘Return」にしました。
あとはTextWrangler上で
zen-codingのコマンドを何か入力して、入力後にショートカットキーを叩けば
zen-codingでフォーマットが自動入力されます。
おわりに
非常にカンタンにzen-codingを導入することができました。お気に入りのエディタで使えるのは嬉しいものですね。
zen-codingの使い方はまだまだサッパリなのでドットインストールを使ってちょこちょこ勉強しようと思います。
これであまりやらないHTMLのコーディングが捗りそう。
| Zen-codingの基礎 – ドットインストール |
ドットインストールといえば先週書いた応援キャンペーンのステッカーが届きました。
一枚をさっそくMOLESKINEに貼りました。今後も応援させていただきます。
TextWanglerでzen-codingを使ってみたい方はどうぞ。
