Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SaCSS vol.75 初心者にこそオススメしたいコーディングエディタ Bracketsの魅力
Search
assialiholic
April 24, 2016
Technology
1
630
SaCSS vol.75 初心者にこそオススメしたいコーディングエディタ Bracketsの魅力
オープンソースのエディタ、Bracketsで出来る数々の魅力的なことを紹介したスライドです!
(2016/4/23 札幌で開催されたSaCSS Vol.75にて使用)
assialiholic
April 24, 2016
Tweet
Share
More Decks by assialiholic
See All by assialiholic
人生最強のコアスキル a.k.a 開発業務から日常にまで使える最強のスキルについて
assialiholic
0
780
地方都市でもできる! 最新ツールと泥臭さのブランディング
assialiholic
0
520
5年先も第一線で戦えるwebディレクターであるために
assialiholic
3
770
Adobe XDで始めるAtomic Design
assialiholic
6
4.2k
JBUG (札幌#3) LT「大事なことはコメントだけに書くなぁ!」
assialiholic
1
1.1k
ディレクション資料をXD化してわかった、XDのメリットと課題
assialiholic
2
560
デザイナーとコーダの溝を埋める、テクニカルディレクションにおけるXDの活用事例
assialiholic
3
760
Developer meetup for beginners 「札幌ITひよこ会」 webのミライ、web屋のミライ
assialiholic
0
360
webマーケティング手段のいままでとこれから〜ボストン直輸入の新鮮ピッチピチネタをお届けします〜
assialiholic
1
550
Other Decks in Technology
See All in Technology
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
230
Claude Codeは仕様駆動の夢を見ない
gotalab555
0
150
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
0
280
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
430
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
3
210
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
860
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
770
20250807_Kiroと私の反省会
riz3f7
0
130
Findy Freelance 利用シーン別AI活用例
ness
0
290
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.5k
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
300
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
0
980
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Why Our Code Smells
bkeepers
PRO
337
57k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
A Tale of Four Properties
chriscoyier
160
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Unsuck your backbone
ammeep
671
58k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
About 名前:半田惇志 会社:株式会社24-7 職種:テクニカルディレクター/エンジニア 主な担当:HTML/CSS・JS・CMS(WP・MT・HubSpot・ Drupal) 最近CSSの設計思想も作っております 嫌いな人:margin-topを使う人 好きな線:1px solid
#d3d7d9
None
Bracketsが好きすぎて本出しました。 Kindleストア で絶賛 発売中! 税込780円! 安い! お得な キャンペーン 実施中!
初心者にこそオススメしたい コーディングエディタ Bracketsの魅力 2016/04/23 SaCSS vol.75
1. Bracketsとは? 2. 成長したい人がBracketsを使うべき10の理由 3. 便利な拡張機能
1.Bracketsとは?
Brackets Adobeによってプロジェクトが発足された、 オープンソースのエディタ。 Web開発にフォーカスして作られており、 Brackets自体もHTML/CSS・JavaScriptでできている。
2.成長したい人が Bracketsを使うべき10の理由
1.無料
Sublime Text USD $70
Coda ¥9,800
Dreamweaver ¥2,180/月
Brackets ¥0
Sublime Text Coda Dreamweaver Brackets Atom Visual Studio Code 種別
エディタ エディタ IDE エディタ エディタ エディタ 対応OS Mac Windows Linux Mac Mac Windows Mac Windows Linux Mac Windows Linux Mac Windows Linux 値段 USD $70 ¥9,800 ¥2,180/月 ¥0 ¥0 ¥0
2.画面構成がわかりやすい
Dreamweaver
Dreamweaver
Dreamweaver やたらと多いツール群
Brackets
Brackets
Brackets すっきり☆(ゝω・)vキャピ
3.コードヒントによる支援
None
None
None
None
4.エラーがあると教えてくれる
None
None
None
None
5.ライブプレビューがすぐできる
1.ライブプレビューアイコンをクリックします
1.ライブプレビューアイコンをクリックします
2.Google Chromeが自動で起動します
3.終わり。
6.内容がリアルタイムに反映される
編集すると……
すぐ消える(保存の必要もなし)
7.選択ボックスのハイライト
ブロック要素の場合
インライン要素の場合
8.画像や色のポップアップ
None
None
None
None
9.複数選択
こんなマークアップがあったとして
「Block」を全部「Unit」に変えたい
同じ単語を複数選択
後は書き換えるだけ
真価を発揮するのは、 Emmetと組み合わせたとき。
Emmetと組み合わせる
Emmetと組み合わせる
Emmetと組み合わせる
Emmetと組み合わせる
Decrement Number by 1
Emmetと組み合わせる
Emmetと組み合わせる
10.モダンエディタの ビッグウェーブにのっている
•JSONによる設定管理 •分割ビュー •プロジェクト内の横断検索 •様々な拡張機能、Emmet対応
3.便利な拡張機能
Extract for Brackets(Preview) Brackets内にPSDを直接読み込み、 コーディングに必要な情報をその場で取得
Extract for Brackets(Preview)
Extract for Brackets(Preview)
Extract for Brackets(Preview)
Extract for Brackets(Preview)
Extract for Brackets(Preview)
Extract for Brackets(Preview)
Extract for Brackets(Preview)
Edge Inspect extension for Brackets and Edge Code 編集中のHTMLを スマートデバイスで開発しながら実機確認
Edge Inspect extension for Brackets and Edge Code
Edge Inspect extension for Brackets and Edge Code
Edge Inspect extension for Brackets and Edge Code
Emmet HTML/CSSを効率的に記述するための エディタプラグイン
デモで紹介した機能 ・Increment/Decrement Number (http://goo.gl/6l3kRp) 数値を0.1、1、10ずつ増減 ・Wrap with Abbreviation (http://goo.gl/imuYjv) 選択範囲をタグで括る
・tagUpdate 選択したタグを変更 (ドキュメントがありませんが、Ctrl+Shift+Iです)
その他の便利な機能 ・Go to Edit Point (http://goo.gl/up4e1U) HTMLタグ内の編集可能箇所、空属性へ移動 ・Go to Matching
Pair (http://goo.gl/LVf5T8) 対応するタグへ移動 ・Balance (http://goo.gl/37yzF) 選択範囲をタグ内から拡張
まとめ
• Webに最適のエディタ • スキルの多寡に関わらず、 コーディングを強力にサポート • モダンな開発フローに追従している
Bracketsで、成長しよう。
None