SaCSS vol.69...
-
Upload
atsushi-handa -
Category
Technology
-
view
439 -
download
2
Transcript of SaCSS vol.69...
![Page 1: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/1.jpg)
ライブデモで学ぶ!
無料で使えるコーダー必見のエディタ
『 Brackets 』魅力紹介!2015.09.12 SaCSS vol.69
1
![Page 2: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/2.jpg)
氏名:半田 惇志 @assialiholic
会社: Web 制作会社 イデアシーディー
職種: Web クリエイター
持病:効率化をしないと気がすまない病
すきなこともの:ぶらぶらすること、素敵カフェ探し
2
![Page 3: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/3.jpg)
それとやっぱり、 Brackets 。
3
![Page 4: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/4.jpg)
4
![Page 5: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/5.jpg)
5
![Page 6: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/6.jpg)
生きるのが辛い。
6
![Page 7: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/7.jpg)
7
•Brackets とは
•デフォルト機能でできること
•ライブデモで紹介するエクステンション
![Page 8: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/8.jpg)
Brackets とは
8
![Page 9: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/9.jpg)
Web による、 Web のための次世代エディタ
Web 開発に特化したエディタ。オープンソースで開発されており、 Brackets 自身がHTML ・ CSS ・ JavaScript で出来ている。
9
![Page 10: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/10.jpg)
プレーンエディタ < Brackets < IDE
単なるテキストエディタよりは高機能だが、 IDE ほど機能は多くなくまた動作も重くない。とてもバランスが良く、シンプルなテキストエディタと高機能な IDE のちょうど良い中間あたりの使い心地。
10
![Page 11: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/11.jpg)
Adobe サポート
Adobe によりプロジェクトが設立され、 GitHub のリポジトリも Adobe により管理されている。Adobe のサービス、ソフトととても親和性が高い。
11
![Page 12: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/12.jpg)
デフォルト機能でできること
12
![Page 13: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/13.jpg)
13
•ライブプレビュー
•クイックエディット
•ホバークイックビュー
![Page 14: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/14.jpg)
ライブプレビュー
14
ライブプレビュー > クイックエディット > ホバークイックビュー
![Page 15: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/15.jpg)
ライブプレビュー
15
![Page 16: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/16.jpg)
ライブプレビュー
16
![Page 17: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/17.jpg)
クイックエディット
17
ライブプレビュー > クイックエディット > ホバークイックビュー
![Page 18: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/18.jpg)
クイックエディット - HTML
18
![Page 19: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/19.jpg)
クイックエディット - HTML
19
![Page 20: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/20.jpg)
クイックエディット - CSS
20
![Page 21: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/21.jpg)
クイックエディット - CSS
21
![Page 22: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/22.jpg)
クイックエディット - JavaScript
22
![Page 23: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/23.jpg)
クイックエディット - JavaScript
23
![Page 24: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/24.jpg)
ホバークイックビュー
24
ライブプレビュー > クイックエディット > ホバークイックビュー
![Page 25: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/25.jpg)
ホバークイックビュー - Imagas
25
![Page 26: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/26.jpg)
ホバークイックビュー - Imagas
26
![Page 27: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/27.jpg)
ホバークイックビュー - CSS
27
![Page 28: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/28.jpg)
ホバークイックビュー - CSS
28
![Page 29: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/29.jpg)
ライブデモで紹介するエクステンション
29
![Page 30: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/30.jpg)
30
HTML+CSS 系
HTML Block Selector 開始・終了タグどちらかにフォーカスが当たっている状態で実行すると、
対応するタグまでの範囲を選択してくれます。 (Ctrl+Shift+T)
Brackets Css Color Preview 色指定をしている行の左側に、実際の色を表示してくれます。
Brackets CSS Class Code hint プロジェクト内で使用している CSS セレクタを取得し、 HTML コーディ
ング中にコードヒントとして表示してくれます。
![Page 31: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/31.jpg)
31
HTML+CSS 系
Brackets SASS Brackets で Sass のリアルタイムライブプレビューを実現します。
libSass を用いているため、 Ruby の Sass とはアウトプットスタイル等
の挙動が若干異なります。→解説記事
CSSFier HTML コードをコピーして CSS に貼り付けるだけで、自動的に HTML を
CSS セレクタに変換してくれます。
読み方は「フィエル」がどうやら正しそうです。(すみません)
![Page 32: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/32.jpg)
32
JavaScript 系
JavaScript Globals JS コード内のグローバル変数を分かりやすく表示してくれます。
Rename JavaScript Identifier 変更したい変数・関数名上で実行、名前を編集すると、他使用箇所にも自
動で編集内容を反映してくれます。 (Ctrl+R)
![Page 33: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/33.jpg)
33
デザインデータ連携系
Swatcher スウォッチファイル (.aco) を読み込み、 SASS/LESS にインポートします。
カラーピッカーによるインポートも可能です。
Extract for Brackets (Preview) 通称 PSD Extract 。 PSD を読み込み下部に表示させ、コーディングに必
要な様々な情報をその場で取得できます。
![Page 34: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/34.jpg)
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 を始めとする各種ファイルの構造をアウトライ
ン表示してくれます。
![Page 35: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/35.jpg)
35
その他機能拡張系
Brackets Snippets (by edc) 各種言語のスニペットを管理・展開出来るようにするエクステンションで
す。編集や新規作成も容易で、より効率的なコーディングを実現します。
→解説記事
Interactive Linter 各種 lint/hint 系の結果をリアルタイムに表示してくれます。ただしシン
タックスエラーは指摘してくれますが、セマンティックエラーは指摘して
くれません。
Edge Inspect extension for Brackets and Edge code Brackets と Adobe Edge Inspect CC を連携させるエクステンションで
す。
リアルタイムにスマートフォン・タブレットでの実機確認が可能になりま
す。
![Page 36: SaCSS vol.69 ライブデモで学ぶ!無料で使えるコーダー必見のエディタ『Brackets』魅力紹介!](https://reader034.fdocument.pub/reader034/viewer/2022051122/58a665d51a28ab1c5b8b6edf/html5/thumbnails/36.jpg)
36
• Bracketsの機能紹介、使い方解説
• Brackets おすすめエクステンション集・
解説
• Bracketsショートカット集
for more info