Embed Size (px)
Citation preview
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
