SaCSS vol.56 こんなに素敵なBrackets！

2015.05.23 SaCSS vol.56

1

半田 惇志 @assialiholic（この背景のアイコンの人↓ ）

Web制作会社 イデアシーディー勤務

肩書はWebクリエイター

梶浦由記さん（Kalafina）とか、妖精帝國の音楽がすき。

あとBracketsがすき。ということで。

2

3

こんなに

素敵なBrackets!

4

•Bracketsとは

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

•エクステンション紹介

Bracketsとは

5

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

Webによる、Webのための次世代エディタ

Web開発に特化したエディタ。

オープンソースで開発されており、Brackets自身が

HTML・CSS・JavaScriptで出来ている。

6

プレーンエディタ ＜ Brackets ＜ IDE

単なるテキストエディタよりは高機能だが、IDEほど機能は多くなくまた動作も重くない。

とてもバランスが良く、シンプルなテキストエディタと高機能なIDEのちょうど良い中間あたりの使い心地。

7

Adobeサポート

Adobeによりプロジェクトが設立され、GitHubのリポジトリもAdobeにより管理されている。

Adobeのサービス、ソフトととても親和性が高い。

8

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

9

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

10

•ライブプレビュー

•クイックエディット

•ホバークイックビュー

•プロジェクトのルート化

•複数選択

ライブプレビュー

11

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

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

ライブプレビュー

12

ライブプレビュー

13

クイックエディット

14

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

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

クイックエディット - HTML

15

クイックエディット - HTML

16

クイックエディット - CSS

17

クイックエディット - CSS

18

クイックエディット - JavaScript

19

クイックエディット - JavaScript

20

ホバークイックビュー

21

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

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

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

22

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

23

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

24

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

25

プロジェクトのルート化

26

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

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

プロジェクトのルート化

27

プロジェクトのルート化

28

プロジェクトのルート化

29

複数選択

30

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

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

複数選択

31

複数選択

32

エクステンション紹介

33

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

34

• PSD Extract

•Adobe Edge Inspect CC

• Theseus for Brackets

PSD Extract

Brackets内にPSDを読み込んでしまうエクステンション。

各レイヤーの属性値やスタイルをCSSで直接取得出来る。

レイヤーをその場でスライスしHTMLに画像として反映させることも可能。

35

PSD Extract

36

PSD Extract

37

Adobe Edge Inspect CC

PCとスマホのブラウザを同期させるAdobe CCの開発ツール。

HTML・CSS・JavaScript の変更をリアルタイムで確認可能なほか、スマホのブラウザをPCからデバック可能。

無償利用可、Chromeエクステンションも有り。

38

Adobe Edge Inspect CC – in Brackets

39

Adobe Edge Inspect CC – in Brackets

40

Adobe Edge Inspect CC – in Chrome

41

Adobe Edge Inspect CC – in Chrome

42

Theseus for Brackets

JSをリアルタイムで監視、デバッグするAdobe製のJSデバッガ。

ライブプレビュー中の関数コールを追跡し、関数に渡された引数や保持しているオブジェクトを確認することが出来る。

43

Theseus for Brackets

44

Theseus for Brackets

45

まとめ

46

47

•Webに最適のエディタ

•初心者から、上級者まで

•頻繁なアップデート、日々進化 不具合はむしろ萌えポイント。

for more info

http://qiita.com/assialiholic/items/c8137321c7599a168b16

48

49

Let’sbegin withBrackets!

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

50 / 32

51