オープンソースのエディタ、Bracketsの総括的な紹介スライドです！ （2015/5/23 札幌で開催されたSaCSS Vol.56にて使用）

1. 2015.05.23 SaCSS vol.56
1

2. 半田 惇志 @assialiholic（この背景のアイコンの人↓ ）
Web制作会社 イデアシーディー勤務
肩書はWebクリエイター
梶浦由記さん（Kalafina）とか、妖精帝國の音楽がすき。
あとBracketsがすき。
ということで。
2

3. 3
こんなに
素敵な
Brackets!

4. 4
• Bracketsとは
• デフォルト機能でできること
• エクステンション紹介

5. Bracketsとは
5
Bracketsとは > デフォルト機能でできること > エクステンション紹介

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

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

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

9. デフォルト機能でできること
9
Bracketsとは > デフォルト機能でできること > エクステンション紹介

10. 10
• ライブプレビュー
• クイックエディット
• ホバークイックビュー
• プロジェクトのルート化
• 複数選択

11. ライブプレビュー
11
Bracketsとは > デフォルト機能でできること > エクステンション紹介
ライブプレビュー > クイックエディット > ホバークイックビュー > プロジェクトのルート化 > 複数選択

12. ライブプレビュー
12

13. ライブプレビュー
13

14. クイックエディット
14
Bracketsとは > デフォルト機能でできること > エクステンション紹介
ライブプレビュー > クイックエディット > ホバークイックビュー > プロジェクトのルート化 > 複数選択

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

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

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

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

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

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

21. ホバークイックビュー
21
Bracketsとは > デフォルト機能でできること > エクステンション紹介
ライブプレビュー > クイックエディット > ホバークイックビュー > プロジェクトのルート化 > 複数選択

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

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

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

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

26. プロジェクトのルート化
26
Bracketsとは > デフォルト機能でできること > エクステンション紹介
ライブプレビュー > クイックエディット > ホバークイックビュー > プロジェクトのルート化 > 複数選択

27. プロジェクトのルート化
27

28. プロジェクトのルート化
28

29. プロジェクトのルート化
29

30. 複数選択
30
Bracketsとは > デフォルト機能でできること > エクステンション紹介
ライブプレビュー > クイックエディット > ホバークイックビュー > プロジェクトのルート化 > 複数選択

31. 複数選択
31

32. 複数選択
32

33. エクステンション紹介
33
Bracketsとは > デフォルト機能でできること > エクステンション紹介

34. 34
• PSD Extract
• Adobe Edge Inspect CC
• Theseus for Brackets

35. PSD Extract
Brackets内にPSDを読み込んでしまうエクステンション。
各レイヤーの属性値やスタイルをCSSで直接取得出来る。
レイヤーをその場でスライスしHTMLに画像として反映させ
ることも可能。
35

36. PSD Extract
36

37. PSD Extract
37

38. Adobe Edge Inspect CC
PCとスマホのブラウザを同期させるAdobe CCの開発ツール。
HTML・CSS・JavaScript の変更をリアルタイムで確認可能
なほか、スマホのブラウザをPCからデバック可能。
無償利用可、Chromeエクステンションも有り。
38

39. Adobe Edge Inspect CC – in Brackets
39

40. Adobe Edge Inspect CC – in Brackets
40

41. Adobe Edge Inspect CC – in Chrome
41

42. Adobe Edge Inspect CC – in Chrome
42

43. Theseus for Brackets
JSをリアルタイムで監視、デバッグするAdobe製のJSデバッ
ガ。
ライブプレビュー中の関数コールを追跡し、関数に渡された
引数や保持しているオブジェクトを確認することが出来る。
43

44. Theseus for Brackets
44

45. Theseus for Brackets
45

46. まとめ
46

47. 47
• Webに最適のエディタ
• 初心者から、上級者まで
• 頻繁なアップデート、日々進化
不具合はむしろ萌えポイント。

48. for more info
http://qiita.com/assialiholic/items/c8137321c7599a168b16
48

49. 49
Let’s
begin with
Brackets!

50. Bracketsで、快適なコーディングライフを。
50 / 32

51. 51