Upload
atsushi-handa
View
439
Download
2
Embed Size (px)
Citation preview
ライブデモで学ぶ!
無料で使えるコーダー必見のエディタ
『 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