ライブデモで学ぶ！

無料で使えるコーダー必見のエディタ

『 Brackets 』魅力紹介！2015.09.12 SaCSS vol.69

1

氏名：半田 惇志 @assialiholic

会社： Web 制作会社 イデアシーディー

職種： Web クリエイター

持病：効率化をしないと気がすまない病

すきなこともの：ぶらぶらすること、素敵カフェ探し

2

それとやっぱり、 Brackets 。

3

4

5

生きるのが辛い。

6

7

•Brackets とは

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

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

Brackets とは

8

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

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

9

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

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

10

Adobe サポート

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

11

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

12

13

•ライブプレビュー

•クイックエディット

•ホバークイックビュー

ライブプレビュー

14

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

ライブプレビュー

15

ライブプレビュー

16

クイックエディット

17

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

クイックエディット - HTML

18

クイックエディット - HTML

19

クイックエディット - CSS

20

クイックエディット - CSS

21

クイックエディット - JavaScript

22

クイックエディット - JavaScript

23

ホバークイックビュー

24

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

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

25

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

26

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

27

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

28

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

29

30

HTML+CSS 系

HTML Block Selector　　開始・終了タグどちらかにフォーカスが当たっている状態で実行すると、

対応するタグまでの範囲を選択してくれます。 (Ctrl+Shift+T)

Brackets Css Color Preview　　色指定をしている行の左側に、実際の色を表示してくれます。

Brackets CSS Class Code hint　　プロジェクト内で使用している CSS セレクタを取得し、 HTML コーディ

ング中にコードヒントとして表示してくれます。

31

HTML+CSS 系

Brackets SASS　　 Brackets で Sass のリアルタイムライブプレビューを実現します。

　　 libSass を用いているため、 Ruby の Sass とはアウトプットスタイル等

の挙動が若干異なります。→解説記事

CSSFier　　 HTML コードをコピーして CSS に貼り付けるだけで、自動的に HTML を

CSS セレクタに変換してくれます。

　　読み方は「フィエル」がどうやら正しそうです。（すみません）

32

JavaScript 系

JavaScript Globals　　 JS コード内のグローバル変数を分かりやすく表示してくれます。

Rename JavaScript Identifier　　変更したい変数・関数名上で実行、名前を編集すると、他使用箇所にも自

動で編集内容を反映してくれます。 (Ctrl+R)

33

デザインデータ連携系

Swatcher　　スウォッチファイル (.aco) を読み込み、 SASS/LESS にインポートします。

カラーピッカーによるインポートも可能です。

Extract for Brackets (Preview)　　通称 PSD Extract 。 PSD を読み込み下部に表示させ、コーディングに必

要な様々な情報をその場で取得できます。

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

その他機能拡張系

Brackets Snippets (by edc)　　各種言語のスニペットを管理・展開出来るようにするエクステンションで

す。編集や新規作成も容易で、より効率的なコーディングを実現します。

→解説記事

Interactive Linter　　各種 lint/hint 系の結果をリアルタイムに表示してくれます。ただしシン

タックスエラーは指摘してくれますが、セマンティックエラーは指摘して

くれません。

Edge Inspect extension for Brackets and Edge code　　 Brackets と Adobe Edge Inspect CC を連携させるエクステンションで

す。

　　リアルタイムにスマートフォン・タブレットでの実機確認が可能になりま

す。

36

• Bracketsの機能紹介、使い方解説

• Brackets おすすめエクステンション集・

解説

• Bracketsショートカット集

for more info