Aptana Studio3にEmmet(旧Zen-coding)をインストールする方法 Aptana Studio3にEmmet(旧Zen-coding)をインストールする方法

Aptana Studio3にEmmet(旧Zen-coding)をインストールする方法

わけあって、Aptana Studioを再インストールすることになり、各種設定をもう一回やりました。
で、Zen-codingをインストールしようと、http://zen-coding.ru/eclipse/updates/で新規ソフト追加しようとしたところ、「そんなのないよ」の返事。

・・・え?

調べてみたところ、どうやらZen-codingは名前が変わってEmmetというのに変わっているようでした。名前が変わってアドレスも変わったので、それまでどおりのインストール方法だとインストールできないという事態になりました。

備忘録も兼ねて、メモを残しておきます。

Aptana StudioにEmmet導入!

20140531emmet

1) 「追加」をクリックします。
2) 「名前」にEmmetと入力します。(任意なので何でもいいような気もしますが)
3) 「ロケーション」にhttp://emmet.io/eclipse/updates/と入力します。
4) 「OK」をクリックします。
5) リストが出てくるので、「すべて選択」をクリックします。
6) 「次へ」をクリックします。
7) 「~~同意します」を選択します。
8) 「完了」をクリックします。

ここまでやると、Emmetのインストールが始まります。インストールが無事終わったら、Aptanaを再起動してあげます。

そうすると、ツールバーにEmmetが登場します。

20140531Emmet02

あとは、Ctrl + Eでパパっと入力できるようになります。

Emmet(旧Zen-Coding)って何だ?!

Emmet(旧Zen-Coding)は知っていると得をする――というよりは、知っているとHTMLやCSSのコーディングで楽ができるツールです。特別なアプリがあるのではなく、プラグインで導入するというツールです。今回、上で紹介したのは、Aptanaに導入する方法です。他のは他であると思うので、気になる人は探してみてください。

Emmetが導入されている状態で、

と入力してからCtrl + Eを押すと、

こんなふうに展開されます。

てな感じで、入力規則さえわかってれば、パパっとコーディングできるようになります。

Emmetの入力規則を確認してみる

せっかくなので、公式サイトにある入力規則を見ながら確認していきます。いわゆる日本語に直しました。っていうだけのものですが(笑)

1. 基本形はHTMLタグの<>を取ったもの

基本形はHTMLタグの<>を取ったものになります。だから、divだとか、aだとか、ulだとかです。

divは<div></div>に、aは<a href=””></a>に変換されます。

2. 親子関係をつくる「>」

タグとタグの間に>入れると、>の右側が子要素に変わります。

で、Ctrl + Eを押すと、

こんな感じになります。

3. 兄弟関係をつくる「+」

和訳するとこんなんだけど、単純に縦並べにするのが、「+」です。

で、Ctrl + Eを押すと、

こんな感じになります。

4. 一つ前の要素に戻す「^」

「^」を使うと、一つ前の要素に組み込むことができます。

で、Ctrl + Eを押すと、

こんな感じになります。

5. 同じものを増やす「*」

「*」を使うと、同じタグを増やすことができます。掛け算ですね。

で、Ctrl + Eを押すと、

こんな感じになります。

6. ()でくくればグループでまとめられます

グループにしたい部分は()でくくります。

で、Ctrl + Eを押すと、

こんな感じになります。

同じものを増やす「*」と合わせて使えば、グループにしたものを増やすこともできちゃいます。

で、Ctrl + Eを押すと、

こんな感じになります。

7. IDには「#」、classには「.」をつけます

CSSを書くときのように、「#」をつけるとID名に、「.」をつけるとclass名になります。

で、Ctrl + Eを押すと、

こんな感じに複数のclassをつけることもできます。

8. タグの中身もつけられます

[]でくくった中にタグの要素を入れることもできます。

で、Ctrl + Eを押すと、

9. ナンバリングができる「$*」

class名を振るときに便利なのが、「$*」です。これを使うと同じclass名でナンバリングができます。

で、Ctrl + Eを押すと、

「$」の数が桁の数になりますので、「$$$*」といれると3桁でナンバリングです。

他にも、「$@-*」だと逆順になったり、「$@任意の数*」で任意の数からナンバリングを始めたり、「$@-任意の数*」で任意の数を最後に逆順にしたりもできます。

10. テキスト表示をする{}

{}でくくられた内容は、テキストとして表示されます。

で、Ctrl + Eを押すと、

最後にまとめ

記号 入力規則 サンプル
div, a, ulなど タグは<>をつけない div, a, ulなど
> 子要素にする div>ul>li
+ 縦にタグを並べる header+div+footer
^ 一つ前の要素に組み込む div+div>p>span+em^bq
* 同じものを増やす ul>li*5
() グループにする div>(header+ul>li*3>a)+footer>p
#ID名, .class名 IDとclassを指定する div#header+div.text
[] HTMLの中身を指定する td[title=”こんにちは” colspan=5]
$* ナンバリングする ul>li.item$*5
{} テキストにする a{ここをクリック}
2,807 views/total