Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SaCSS vol.75 初心者にこそオススメしたいコーディングエディタ Bracketsの魅力

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for assialiholic assialiholic
April 24, 2016
Technology
1
630

SaCSS vol.75 初心者にこそオススメしたいコーディングエディタ Bracketsの魅力

オープンソースのエディタ、Bracketsで出来る数々の魅力的なことを紹介したスライドです！
（2016/4/23 札幌で開催されたSaCSS Vol.75にて使用）

Avatar for assialiholic

assialiholic

April 24, 2016
Tweet

More Decks by assialiholic

See All by assialiholic
人生最強のコアスキル a.k.a 開発業務から日常にまで使える最強のスキルについて
Avatar for assialiholic assialiholic
0
830
地方都市でもできる！ 最新ツールと泥臭さのブランディング
Avatar for assialiholic assialiholic
0
530
5年先も第一線で戦えるwebディレクターであるために
Avatar for assialiholic assialiholic
3
790
Adobe XDで始めるAtomic Design
Avatar for assialiholic assialiholic
6
4.3k
JBUG (札幌#3) LT「大事なことはコメントだけに書くなぁ！」
Avatar for assialiholic assialiholic
1
1.1k
ディレクション資料をXD化してわかった、XDのメリットと課題
Avatar for assialiholic assialiholic
2
570
デザイナーとコーダの溝を埋める、テクニカルディレクションにおけるXDの活用事例
Avatar for assialiholic assialiholic
3
790
Developer meetup for beginners 「札幌ITひよこ会」 webのミライ、web屋のミライ
Avatar for assialiholic assialiholic
0
360
webマーケティング手段のいままでとこれから〜ボストン直輸入の新鮮ピッチピチネタをお届けします〜
Avatar for assialiholic assialiholic
1
570

Other Decks in Technology

See All in Technology
Embedded SREの終わりを設計する　「なんとなく」から計画的な自立支援へ
Avatar for SansanTech sansantech
PRO
3
2.6k
[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)
Avatar for abemii_ abemii
0
150
登壇駆動学習のすすめ — CfPのネタの見つけ方と書くときに意識していること
Avatar for おおいし bicstone
3
130
私たち準委任PdEは2つのプロダクトに挑戦する ～ソフトウェア、開発支援という”二重”のプロダクトエンジニアリングの実践～ / 20260212 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
200
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
210
Why Organizations Fail: ノーベル経済学賞「国家はなぜ衰退するのか」から考えるアジャイル組織論
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
190
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
480
量子クラウドサービスの裏側　〜Deep Dive into OQTOPUS〜
Avatar for OQTOPUS oqtopus
0
150
Cloud Runでコロプラが挑む 生成AI×ゲーム『神魔狩りのツクヨミ』の裏側
Avatar for COLOPL Inc. colopl
0
140
(技術的には)社内システムもOKなブラウザエージェントを作ってみた！
Avatar for Har1101 har1101
0
190
AIが実装する時代、人間は仕様と検証を設計する
Avatar for Gota gotalab555
1
240
CDKで始めるTypeScript開発のススメ
Avatar for つくぼし tsukuboshi
1
550

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
4.3k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
140
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
170
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
280
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
240
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
170
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
250

Transcript

  1. About 名前：半田惇志 会社：株式会社24-7 職種：テクニカルディレクター／エンジニア 主な担当：HTML/CSS・JS・CMS(WP・MT・HubSpot・ Drupal) 最近CSSの設計思想も作っております 嫌いな人：margin-topを使う人 好きな線：1px solid

    #d3d7d9
  2. None

  3. Bracketsが好きすぎて本出しました。 Kindleストア で絶賛 発売中！ 税込780円！ 安い！ お得な キャンペーン 実施中！

  4. 初心者にこそオススメしたい コーディングエディタ Bracketsの魅力 2016/04/23 SaCSS vol.75

  5. 1. Bracketsとは？ 2. 成長したい人がBracketsを使うべき10の理由 3. 便利な拡張機能

  6. 1.Bracketsとは？

  7. Brackets Adobeによってプロジェクトが発足された、 オープンソースのエディタ。 Web開発にフォーカスして作られており、 Brackets自体もHTML/CSS・JavaScriptでできている。

  8. 2.成長したい人が Bracketsを使うべき10の理由

  9. 1.無料

  10. Sublime Text USD $70

  11. Coda ￥9,800

  12. Dreamweaver ￥2,180／月

  13. Brackets ￥0

  14. 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

  15. 2.画面構成がわかりやすい

  16. Dreamweaver

  17. Dreamweaver

  18. Dreamweaver やたらと多いツール群

  19. Brackets

  20. Brackets

  21. Brackets すっきり☆（ゝω・）vｷｬﾋﾟ

  22. 3.コードヒントによる支援

  23. None
  24. None
  25. None
  26. None

  27. 4.エラーがあると教えてくれる

  28. None
  29. None
  30. None
  31. None

  32. 5.ライブプレビューがすぐできる

  33. 1.ライブプレビューアイコンをクリックします

  34. 1.ライブプレビューアイコンをクリックします

  35. 2.Google Chromeが自動で起動します

  36. 3.終わり。

  37. 6.内容がリアルタイムに反映される

  38. 編集すると……

  39. すぐ消える（保存の必要もなし）

  40. 7.選択ボックスのハイライト

  41. ブロック要素の場合

  42. インライン要素の場合

  43. 8.画像や色のポップアップ

  44. None
  45. None
  46. None
  47. None

  48. 9.複数選択

  49. こんなマークアップがあったとして

  50. 「Block」を全部「Unit」に変えたい

  51. 同じ単語を複数選択

  52. 後は書き換えるだけ

  53. 真価を発揮するのは、 Emmetと組み合わせたとき。

  54. Emmetと組み合わせる

  55. Emmetと組み合わせる

  56. Emmetと組み合わせる

  57. Emmetと組み合わせる

  58. Decrement Number by 1

  59. Emmetと組み合わせる

  60. Emmetと組み合わせる

  61. 10.モダンエディタの ビッグウェーブにのっている

  62. •JSONによる設定管理 •分割ビュー •プロジェクト内の横断検索 •様々な拡張機能、Emmet対応

  63. 3.便利な拡張機能

  64. Extract for Brackets(Preview) Brackets内にPSDを直接読み込み、 コーディングに必要な情報をその場で取得

  65. Extract for Brackets(Preview)

  66. Extract for Brackets(Preview)

  67. Extract for Brackets(Preview)

  68. Extract for Brackets(Preview)

  69. Extract for Brackets(Preview)

  70. Extract for Brackets(Preview)

  71. Extract for Brackets(Preview)

  72. Edge Inspect extension for Brackets and Edge Code 編集中のHTMLを スマートデバイスで開発しながら実機確認

  73. Edge Inspect extension for Brackets and Edge Code

  74. Edge Inspect extension for Brackets and Edge Code

  75. Edge Inspect extension for Brackets and Edge Code

  76. Emmet HTML/CSSを効率的に記述するための エディタプラグイン

  77. デモで紹介した機能 ・Increment/Decrement Number (http://goo.gl/6l3kRp) 数値を0.1、1、10ずつ増減 ・Wrap with Abbreviation (http://goo.gl/imuYjv) 選択範囲をタグで括る

    ・tagUpdate 選択したタグを変更 （ドキュメントがありませんが、Ctrl+Shift+Iです）

  78. その他の便利な機能 ・Go to Edit Point (http://goo.gl/up4e1U) HTMLタグ内の編集可能箇所、空属性へ移動 ・Go to Matching

    Pair (http://goo.gl/LVf5T8) 対応するタグへ移動 ・Balance (http://goo.gl/37yzF) 選択範囲をタグ内から拡張

  79. まとめ

  80. • Webに最適のエディタ • スキルの多寡に関わらず、 コーディングを強力にサポート • モダンな開発フローに追従している

  81. Bracketsで、成長しよう。

  82. None