勉強会用資料の共有です。 自分が使用しているエディターの特徴や用途を紹介してます。 また、Emmet(zen-coding)やHTMLのコンパイル言語の軽い紹介をしました。

1. 第4回勉強会
制作環境まわりについて
（エディター紹介/Emmet導入）
Muraki Takuma

2. はじめに
本資料は制作環境まわり（エディター紹介/Emmet導入）を軽くまとめた資料
です。
本資料の構成は以下の通りです。
- 使用しているエディターについて
- Dreamweaver
- Sublime text
- Emmet(zen-coding)導入編
・Emmet(zen-coding)とは
・実践
・導入方法
- その他
- 余談

3. 使用しているエディターについて
Dreamweaver
-運用・量産向け
-フォルダ検索・置換
-プロジェクト管理
安定のエディター
Sublime text
-設計・構築・運用
-1ページ内置換
-多機能なプラグイン
みんな大好きエディター
Brakets
-adobe製
-多機能なプラグイン
-ライブリロード
進化し続けるエディター
Sakura Editor
-メモ帳
-軽い
さくらっぽいエディター

4. Dreamweaver
Good point
- フォルダごと置換/検索ができる。
- Class/ID/タグ/実態参照の補完機能。
- プロジェクト管理が優れてる。
- 様々な文字コードに対応。
Bad point
- 重い。RWDサイトを構築したらフリーズする。
- デフォルトでは、コンパイル言語に対応してない。
- 拡張機能でさらに重い。

5. Sublime text
Good point
- 山ほどあるプラグインで自分好みにカスタマイズできる！
- Ctrl(Cmd)+ D のマルチセレクションを体験するとやみつ
きになる。
- コンパイル言語をほぼ網羅できる！
- 軽い！
Bad point
- プラグインのいれすぎでバッティングすることも！
- 文字コードは、基本utf-8のみ
- FTPまわりがたまに調子悪い。（僕だけ？）

6. Emmet(zen-coding)導入編

7. Emmet(zen-coding)とは
“HTMLとCSSをショートカットや短縮記法でコードを書くことが
できるライブラリ。
例えば「div#page>div.logo+ul#navigation>li*5>a」
と記述して<例>Tabキーを押してEmmet(zen-coding)を実行す
ると以下のコードが書き出される”
※ Emmetはzen-codingが進化したもの
<例>Tabキー

8. 実践
実際にいじってどのような動作をするのか確認してみましょう。
■codepen
http://codepen.io/pen
■チートシート
http://docs.emmet.io/cheat-sheet/
■EmmetとZen-Codingの違いについて
http://kojika17.com/2012/09/zen-coding-next-emmet.html

9. 導入方法
Dreamweaver CCの場合
1. https://github.com/emmetio/dreamweaver
2. Installation > Emmet.zxpを選択
3. 再起動して完了！
詳しくは以下を参照
Zen-coding (Emmet) を使ってみる | Web Design Leaves
http://www.webdesignleaves.com/wp/htmlcss/271/
Sublime textの場合
1. Ctrl(Cmd)+shift+p [install] enter
2. [emmet] enter
Emmetを選択
3. 完了！

10. その他
その他対応しているエディター一覧

11. 余談話 (HTMLをビルド)
Sass（⇔CSS）やCoffeeScript（⇔JS）のようにHTMLもビルドすること
ができます。
一部紹介
Haml（はむる）
http://htmltohaml.com/
Slim（すりむ）
http://slim2html.raving.systems/
Jade（じぇいど）
http://jade-lang.com/
ブラウザ上で色々試せるので、是非いじってみてください。

12. 参考文献
http://designup.jp/html-emmet-307/
http://iwb.jp/dreamweaver-zencoding/
https://code.google.com/p/zen-coding/
（宣伝）ラインスタンプ発売しました。是非。
https://store.line.me/stickershop/product/1052001/ja