オープンソースのエディタ、Bracketsで出来る数々の魅力的なことを紹介したスライドです！ （2015/9/12 札幌で開催されたSaCSS Vol.69にて使用）

1. ライブデモで学ぶ！
無料で使えるコーダー必見のエディタ
『Brackets』魅力紹介！
2015.09.12 SaCSS vol.69
1

2. 氏名：半田 惇志 @assialiholic
会社：Web制作会社 イデアシーディー
職種：Webクリエイター
持病：効率化をしないと気がすまない病
すきなこともの：ぶらぶらすること、素敵カフェ探し
2

3. それとやっぱり、Brackets。
3

4. 4

5. 5

6. 生きるのが辛い。
6

7. 7
• Bracketsとは
• デフォルト機能でできること
• ライブデモで紹介するエクステンション

8. Bracketsとは
8

9. Webによる、Webのための次世代エディタ
Web開発に特化したエディタ。
オープンソースで開発されており、Brackets自身が
HTML・CSS・JavaScriptで出来ている。
9

10. プレーンエディタ ＜ Brackets ＜ IDE
単なるテキストエディタよりは高機能だが、IDEほど機能は
多くなくまた動作も重くない。
とてもバランスが良く、シンプルなテキストエディタと高機
能なIDEのちょうど良い中間あたりの使い心地。
10

11. Adobeサポート
Adobeによりプロジェクトが設立され、GitHubのリポジトリ
もAdobeにより管理されている。
Adobeのサービス、ソフトととても親和性が高い。
11

12. デフォルト機能でできること
12

13. 13
• ライブプレビュー
• クイックエディット
• ホバークイックビュー

14. ライブプレビュー
14
ライブプレビュー > クイックエディット > ホバークイックビュー

15. ライブプレビュー
15

16. ライブプレビュー
16

17. クイックエディット
17
ライブプレビュー > クイックエディット > ホバークイックビュー

18. クイックエディット - HTML
18

19. クイックエディット - HTML
19

20. クイックエディット - CSS
20

21. クイックエディット - CSS
21

22. クイックエディット - JavaScript
22

23. クイックエディット - JavaScript
23

24. ホバークイックビュー
24
ライブプレビュー > クイックエディット > ホバークイックビュー

25. ホバークイックビュー - Imagas
25

26. ホバークイックビュー - Imagas
26

27. ホバークイックビュー - CSS
27

28. ホバークイックビュー - CSS
28

29. ライブデモで紹介するエクステンション
29

30. 30
HTML+CSS系
HTML Block Selector
開始・終了タグどちらかにフォーカスが当たっている状態で実行すると、
対応するタグまでの範囲を選択してくれます。(Ctrl+Shift+T)
Brackets Css Color Preview
色指定をしている行の左側に、実際の色を表示してくれます。
Brackets CSS Class Code hint
プロジェクト内で使用しているCSSセレクタを取得し、HTMLコーディング
中にコードヒントとして表示してくれます。

31. 31
HTML+CSS系
Brackets SASS
BracketsでSassのリアルタイムライブプレビューを実現します。
libSassを用いているため、RubyのSassとはアウトプットスタイル等の挙
動が若干異なります。→解説記事
CSSFier
HTMLコードをコピーしてCSSに貼り付けるだけで、自動的にHTMLをCSS
セレクタに変換してくれます。
読み方は「フィエル」がどうやら正しそうです。（すみません）

32. 32
JavaScript系
JavaScript Globals
JSコード内のグローバル変数を分かりやすく表示してくれます。
Rename JavaScript Identifier
変更したい変数・関数名上で実行、名前を編集すると、他使用箇所にも自
動で編集内容を反映してくれます。(Ctrl+R)

33. 33
デザインデータ連携系
Swatcher
スウォッチファイル(.aco)を読み込み、SASS/LESSにインポートします。
カラーピッカーによるインポートも可能です。
Extract for Brackets (Preview)
通称PSD Extract。 PSDを読み込み下部に表示させ、コーディングに必要
な様々な情報をその場で取得できます。

34. 34
その他機能拡張系
Brackets Editor Bookmarks
ソースコード内にブックマークを設定し、いつでもブックマーク箇所へジ
ャンプ出来るようにします。
ブックマークの追加・削除：⇧⌘K（Mac） Ctrl+Shift+K（Win）
次のブックマークへ：⌘PK（Mac） Ctrl+P（Win）
前のブックマークへ：⇧⌘PK（Mac）+Shift+P（Win）
Brackets Outline List
HTML/CSS、JavaScriptを始めとする各種ファイルの構造をアウトライン
表示してくれます。

35. 35
その他機能拡張系
Brackets Snippets (by edc)
各種言語のスニペットを管理・展開出来るようにするエクステンションで
す。編集や新規作成も容易で、より効率的なコーディングを実現します。
→解説記事
Interactive Linter
各種lint/hint系の結果をリアルタイムに表示してくれます。ただしシンタッ
クスエラーは指摘してくれますが、セマンティックエラーは指摘してくれ
ません。
Edge Inspect extension for Brackets and Edge code
BracketsとAdobe Edge Inspect CCを連携させるエクステンションです。
リアルタイムにスマートフォン・タブレットでの実機確認が可能になりま
す。

36. 36
• Bracketsの機能紹介、使い方解説
• Brackets おすすめエクステンション集・解説
• Bracketsショートカット集
for more info