CLOSE
CLOSE

[K] これでHTMLコーディングが捗るかも!TextWranglerにzen-codingを導入してみました

Screenshot 2012 06 17 11 55 40

この一年で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. ファイルのダウンロード

Screenshot 2012 06 17 12 40 34

zen-coding公式サイトよりファイルをダウンロードします。

2. ファイルを適当な場所に移動する

Screenshot 2012 06 17 12 42 17

ダウンロードしたファイルを展開し、
ユーザ > ライブラリ > 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です。

ショートカットキーを使った利用方法に切り替える

Screenshot 2012 06 17 12 06 48

通常TextWranglerでzen-codingを使う場合、このようにスクリプトメニューからzen-codingを呼び出し、

Screenshot 2012 06 17 12 10 26

コマンドを入力するという手間がかかるのですが、ショートカットキーを設定して高速でzen-codingを呼び出す方法があったので切り替えてみました。

TextWranglerにZen-Codingを入れてみた。 | WebDesign Memo

ショートカットキーでzen-codingを高速化する方法

Screenshot 2012 06 17 12 13 58

メニューより
Window > Palettes > Scripts
を開きます。

Screenshot 2012 06 17 12 17 24 1

ウィンドウで「ZenCoding_1_1_1」を選択して右上の「Set Key」をクリック。

Screenshot 2012 06 17 12 17 30

好みのショートカットキーを設定できます。私は「⌘Return」にしました。

あとはTextWrangler上で

Screenshot 2012 06 17 12 23 43

zen-codingのコマンドを何か入力して、入力後にショートカットキーを叩けば

Screenshot 2012 06 17 12 26 26

zen-codingでフォーマットが自動入力されます。

おわりに

非常にカンタンにzen-codingを導入することができました。お気に入りのエディタで使えるのは嬉しいものですね。
zen-codingの使い方はまだまだサッパリなのでドットインストールを使ってちょこちょこ勉強しようと思います。
これであまりやらないHTMLのコーディングが捗りそう。

Zen-codingの基礎 – ドットインストール
Screenshot 2012 06 17 12 35 00

ドットインストールといえば先週書いた応援キャンペーンのステッカーが届きました。
一枚をさっそくMOLESKINEに貼りました。今後も応援させていただきます。

TextWanglerでzen-codingを使ってみたい方はどうぞ。

TextWrangler 4.0.1 App
カテゴリ: 開発ツール
価格: 無料
NEW POSTS 最新記事を読む