Dreamweaverの
コードエディター機能を
進化させたBrackets

• 酒井優（@glatyou）
• たにぐちまこと（@seltzer）

はじめに

CC 2017において生まれ変わった
アドビのDreamweaver

この背景にある同じくアドビの
Bracketsというエディター

このセッションでは

Bracketsというエディターのこと
そしてこれがDreamweaverに
何をもたらしたのかを解説します

1. はじめに
2. 自己紹介
3. なぜBracketsが生まれたのか
4. Bracketsから得られた Dreamweaverの機能
5. BracketsとDreamweaverの立ち位置
6. まとめ

自己紹介

酒井 優(@glatyou)

• フリーランスのウェブ制作者
• WEBCRE8.jp - ウェブ制作者向けブログ
• HTML5KARUTA - HTML5学習ゲームツール

1. はじめに
2. 自己紹介
3. なぜBracketsが生まれたのか
4. Bracketsから得られた Dreamweaverの機能
5. BracketsとDreamweaverの立ち位置
6. まとめ

なぜBracketsが
生まれたのか

Bracketsとは

アドビが開発したオープンソースのコードエディター

ソフトウェアとしての違い

ソースを公開することで
一般の開発者にも開発に
参加してもらっている

ウェブ業界のとても早い
流れに対応するため

役割の違い

ウェブ制作者の職種

ウェブ制作の仕事を全てカバーしているため
細分化された職種それぞれのベストからは遠ざかる

コーディングの仕事をしている人は
IDEよりコードエディター寄り

組み合わせるツールを選べたほうがやりやすい

Dreamweaverが産まれた頃は
ツールの選択肢も少なく
ユーザーはウェブ制作者全般だった

ツールもユーザーも多様化し
求められる機能の幅が広がってきた

酒井的歴史認識

2012

Sublime Text2 正式リリース（2011初出）

2013.05

（酒井Bracketsを使い出す）

2014.11

Brackets正式リリース（2012初出）

2015.06

Atom 正式リリース（2014初出）

2016.04

Visual Studio Codeリリース（2015初出）

この章のまとめ

• ウェブサイトのニーズの増大、大規模化
• ウェブ制作者の職種の細分化
• 制作環境の多様化

＿人人人人人人人人＿
＞　Brackets爆誕　＜
￣Y^Y^Y^Y^Y^Y^Y￣

1. はじめに
2. 自己紹介
3. なぜBracketsが生まれたのか
4. Bracketsから得られたDreamweaverの機能
5. BracketsとDreamweaverの立ち位置
6. まとめ

Bracketsから得られた
Dreamweaverの機能

• リアルタイムプレビュー
• CSSプリプロセッサー
• マルチペイン
• 検索置換
• モダンなエディター機能
• コードヒントとフォーマット
• アドビの他のアプリとの連携

リアルタイムプレビュー

リアルタイムプレビューの特徴

• ライブビューと違い
  実際のブラウザーでチェックできる
• HTML、CSSの修正は即時反映
• 標準でChrome以外にFirefox、Safari、
  モバイルデバイスに対応
• Bracketsと違ってプレビュー中に
  デベロッパーツールが開ける

CSSプリプロセッサー

後半のセッションで！

マルチペイン

マルチペインの特徴

• コードを分割して表示でき、見通しが良くなる
• コード-コード分割で同じファイル、関連ファイルを開く
• ドキュメントウィンドウで複数のHTMLファイルを開く
• 2つのやり方を使い分ける

検索置換

検索置換の特徴

• Dreamweaverの検索置換はもともと最強
• 複数行検索置換
• 非モーダル化でより便利に

モダンなエディター機能

• マルチカーソル、矩形選択
• クイック編集
• Emmet

マルチカーソル、矩形選択

Cmd＋クリック

クリックした場所にカーソルを追加

Shift＋Alt＋↑

上の行にカーソルを追加

Shift＋Alt＋↓

下の行にカーソルを追加

Alt + ドラッグ

矩形選択

クイック編集

• HTML要素からCSSプロパティの、
  JS関数から内容の確認や編集ができる
• color系プロパティー、cubic-bezier()関数の編集

Emmet

• HTMLやCSSを省略した記法で書くことができる
• 他にも便利な機能があり最近のエディターでは
  ほとんどサポートされている

コードヒントとフォーマット

コードヒントとフォーマットの特徴

• HTML5、CSS、JS、PHPのコードヒント
• 上記を含む多くの言語のコードフォーマット
• 他アドビアプリとの連携による
  リソースファイルの呼び出し

アドビの他のアプリとの連携

後半のセッションで！

最近のエディターと並べても
十分にモダンな機能を備えてきた

コードエディターとして
Dreamweaverは選択肢になり得る？

1. はじめに
2. 自己紹介
3. なぜBracketsが生まれたのか
4. Bracketsから得られた Dreamweaverの機能
5. BracketsとDreamweaverの立ち位置
6. まとめ

Bracketsと
Dreamweaverの
立ち位置

Dreamweaverの物足りない点

• Autoprefixer、Minifier、Beautifyの
  ような機能は現時点ではない
• エクステンションが使えない
• エディターに比べれば当然動作は重い

Bracketsの便利な機能エクステンション

• Autoprefixer、Minifier、Beautifier
• Editorconfig
• Paste and indent
• SVG preview
• Sass hint
• CDN Suggestion

今後もBracketsでできることが
Dreamweaverでできるようになる可能性はある

とは言え、やはり使い分け

まとめ

既製品のDreamweaver

DIYのBrackets

ご清聴ありがとうございました★