Coda 2 で Zen-Coding 改め Emmet を使う

Coda + Zen-Coding は数年前に何度かチャレンジしていたのですが、キーボードショートカットが変更できなかったり(デフォルトだと control + E で Cocoa アプリのキーバインド・行末に移動とかぶる)、なぜか CSS では使えなかったり、プラグインが重すぎて(もしくは Mac mini ちゃんの性能の問題か?)むっきーとなるレベルだったりして最近は使っていませんでした。

Zen-Coding が Emmet になってパワーアップしたという話題はかなり前にチラ見していたけど使ってみるぞー!!という気持ちにはならず…しかし!今まさに!使いたくなったのでインストールしました。以下参考にさせていただいたページ。

Emmet plugin for Coda editor をダウンロード

  1. Download plugin.
  2. Unpack it
  3. Rename extracted folder to Emmet.codaplugin.
  4. Double-click on Emmet.codaplugin to install.

emmetio/Emmet.codaplugin

ダウンロードして解凍して出てきたフォルダ(の中のファイルを編集する必要があるので先に ↓ をやりましょう)の名前を Emmet.codaplugin に変更してダブルクリックでインストール!

設定変更

解凍したフォルダ/Contents/Resources/snippets.json を開いて 3 行目と 4 行目辺りを編集。

"lang": "en" → "lang": "ja"
"locale": "en-US" → "locale": "ja-JP"

キーボードショートカット変更

  1. Go to OSX’ System Preferences > Keyboard > Keyboard Shortcuts > Application Shortcuts.
  2. Click on “plus” sign to add a new application shortcut.
  3. Pick “Coda” app, enter menu item name with the action you want to change and type a new keyboard shortcut.

emmetio/Emmet.codaplugin

システム環境設定のキーボード → ショートカット タブ → 左側メニュー アプリケーション を開き、真ん中くらいにある [+] をクリックして以下のように設定。

アプリケーション
Coda 2.app
メニュータイトル
Expand Abbreviation 等、変更したいメニュー名
キーボードショートカット
枠内をクリックしてから希望の組み合わせでキーを押す

こんな機能いつからあったんだ、まーべりっくさんの新機能か!?と思ったら、10.4 Tiger から存在する機能らしい。私が始めて Mac 買ったときから既に使えてたんですね…。

使い方

チートシートがあるので使いこなせ(る気になれ)ますね。

コメントを残す

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