第0回 Sublime Text 2 勉強会 で Emmet について話してきた

Event SublimeText

第0回 Sublime Text 2 勉強会で、「はじめてのEmmet with Sublime Text2」というLTをやってきた。

第0回 Sublime Text 2 勉強会について

勉強会の詳細や、togetterはこちら。

なんと岡山でサテライト会場も。

とりあえず Sublime Text Japan Users Group にはいろうよ。

紹介されたプラグインはこちらにまとめが。すばらしい。

はじめてのEmmet with Sublime Text2

資料は上述のもの。

EmmetはZenCodingの次期バージョン。いろいろ便利になる。たとえば -text-shadow5-5-5-#aaa って入力して展開すると、こんな感じに展開される。ちょっとわくわくするでしょう。

  /* -text-shadow5-5-5-#aaa */
  -webkit-text-shadow: 5px 5px 5px #aaa;
  -moz-text-shadow: 5px 5px 5px #aaa;
  -ms-text-shadow: 5px 5px 5px #aaa;
  -o-text-shadow: 5px 5px 5px #aaa;
  text-shadow: 5px 5px 5px #aaa;

でもSublime Text2のEmmetプラグインは、まだまだ不安定なのでいろいろ気をつけて使う必要がある。うまく展開されないことも多々ある。ま、それでも試してみると楽しいと思う。

Emmetのリポジトリなどはこちら。

元になってる ZenCoding については、ここで書いたよ！ブラウザですぐに試せるよ！

Emmetについてなにか書こうかと思ったけど、すでに素晴らしいエントリがたくさんあるので割愛。

そもそものSublimeText2については、まずはこれを読めばオーケー。


スライドには書いたけど、Emmetプラグインのインストール方法はこんな感じ。


SublimeText2でEmmetを使ってみて、いくつか注意することがあった。
まず tab での展開は外したほうがいいかも。 他の動作を上書きしてしまう。困る。

"disable_tab_abbreviations": true

Emmetを使ってHTMLを書いていると、日本語の変換を確定すると入力した文字が消える。困る。

"disable_formatted_linebreak": true

まとめると「Preferences => Settings - User」でこんな感じに書けばオーケー。

{
  // tabでの展開の上書きしない for Emmet
  "disable_tab_abbreviations": true,
  // 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet
  "disable_formatted_linebreak": true
}

あとZenCodingプラグインと併用すると、動作がおかしくなるので、ZenCodingプラグインはアンインストールか無効かしましょう。
Package Control 使っていれば Package Control: Disable Package か Package Control: Remove Package で出来るはず。

他の方々の発表資料など


20121111100436
Sublime Text 2 プラグイン開発 - ゼロからPackageControlへ登録まで // Speaker Deck


sublimetext plugins intro
sublimetext plugins intro

Ustの録画


まとめ

やっぱりLTでライブコーディングするのはかなり忙しい。ちゃんと失敗したけど、ちゃんと準備していたのでなんとかなりました。準備大事。たぶん、なんとかなったはず。ちょっと時間をオーバーしたけど。
30人募集の勉強会に90人以上の応募があるとか、SublimeText2の人気はすごいなと。これからもいろいろな情報を交換していきたい。次回もぜひ参加したい。
あと、こもりさんが使っているパッケージの一覧が公開されてる。日本語の簡単な紹介がついててわかりやすい。一度見てみると、知らないパッケージがあったりして楽しいと思う。


とりあえず Sublime Text Japan Users Group にはいろうよ。大事なことなので二回言いました。