無理をしない。Dreamweaver Beta で楽々コーディング

追記: 2016年11月11日
2016年11月02日に [Dreamweaver CC (2017)](http://www.adobe.com/jp/products/dreamweaver/features.html) がリリースされましたので、Betaではなくそちらをご利用ください。

***

ここ2, 3年はWebシステムの開発に Sublime Text を利用しているのですが、HTMLコーディングにタイプ量がかさんでしまい辛かったので、他に何かいい手はないかと探していました。
そこで5年ほど前に使っていた『Dreamweaver は今どうなっているの？』と気になり、調べました。

結果としては、**Sass でなく CSS の実装でよい** なら、Dreamweaver は他のエディタを寄せ付けないほど楽にHTMLコーディングができるという結論に至りました。
餅は餅屋に任せましょう、HTMLコーディング[^lp]のことなら Dreamweaver です。

[^lp]: 保守を目的としない、LPサイトなどの1枚ページが特に有用です

大切なのは**手でコードを書く**ことではなく、**Webサイトをつくる**ことです。
GUI を使ってガシガシと実装していき、コードの整形は後でするようにしましょう。

## Dreamweaver Beta

Dreamweaver Beta には、現行の Dreamweaver CC 2015 ではなかった機能がたくさん実装されています。

- [完全に生まれ変わる次世代 Dreamweaver ベータ版を先行公開](https://blogs.adobe.com/creativestation/web-see-how-dreamweaver-is-transforming-for-the-future)
- [DreamweaverにBracketsが入ることで何が変わるのか | Adobe Creative Station](https://blogs.adobe.com/creativestation/web-dreamweaver-integration-with-brackets)


私が嬉しかったのは、Emacsカーソル操作ができるようになっていたことです。
コードビューで `Ctrl+P/N/B/F/H/D/K` などが使えるようになっていました。
`Ctrl+Y` や Vim プラグインが無いのが残念ですが、これだけでもグッと操作性が上がりました。

また、ベータ版は Dreamweaver CC 2015 と共存することができるので、気軽に試すことができます。

## Dreamweaver の実力

ここではベータ版を利用して、一通りのコーディング手順を紹介します。

### 1. ショートカットとGUI操作でマークアップをする


コーディングのはじめはマークアップです。適切なタグで文章に意味をもたせます。
以下のサイトで手順が解説されています。

- [Dreamweaver入門　第2回：効率的に文字原稿を挿入する方法
](https://blogs.adobe.com/creativestation/web-start-dreamweaver-getting-start-02-design-view)
- [Dreamweaver入門　第3回：HTMLマークアップを効率的にできるデザインビュー](https://blogs.adobe.com/creativestation/web-start-dreamweaver-getting-start-03-design-view-markup)

簡単にまとめると、

#### 1-1. 段落ごとに1行の空行を入れた原稿を用意する

`<li>` にあたる項目も1行の空行を含めます。

```原稿.txt
H1のタイトル 1

H2のタイトル 1

アイテム 1

アイテム 2

アイテム 3
```

#### 1-2. デザインビューに貼り付ける

すべての段落が `<p>` で囲まれます。

```index.html
<p>H1のタイトル 1</p>
<p>H2のタイトル 1</p>
<p>アイテム 1</p>
<p>アイテム 2</p>
<p>アイテム 3</p>
```

#### 1-3. タグを変更する

デザインビューで対象のテキストにカーソルを合わせて、ショートカットキー `Cmd+1, 2...` で見出し `<h1, 2...>` をつけ、[\[挿入パネル\]](https://helpx.adobe.com/jp/dreamweaver/using/insert-panel.html) `Cmd+F2` または [\[プロパティインスペクター\]]() `Cmd+F3` の各ボタンから `<ul / ol> + <li>` に変更します。[^dl]

[^dl]: 定義リスト `<dl>` はメニューバー [Edit] > [List] > [Definition List] より選択できます

```index.html
<h1>H1のタイトル 1</h1>
<h2>H2のタイトル 1</h2>
<ul>
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
</ul>
```

その他、選択したテキストをタグで囲む機能である [Quick Tag Editor] `Cmd+t` も中々使えます。

これにより（平面の）マークアップをしていきます。

### 2.  [DOMパネル] / [挿入パネル] を駆使して階層をつくる

(1-3.) の手順通り **デザインビューでテキスト選択 ⇒ \[挿入パネル\] でタグの付与**を行えば、`<div>` などで入れ子になる階層構造も作成することができますが、全体のDOM構造を確認しながらの作業には不向きです。
そこで頼りになるのが **[DOMパネル]** です。
このパネルにある [Wrap Tag][^wt] と (1-3.) にある [挿入パネル] を使い分けて[^insert]、マークアップを進めていきましょう。

[^insert]: デザインビューの選択がDOMパネルに反映されれば [挿入パネル] は使わなくてよさそうですが……Betaの不具合でしょうか

[DOMパネル] からの親DOM追加と、[挿入パネル] からの親DOM追加
<img width="640" alt="DOMパネルからの親DOM追加と、挿入パネルからの親DOM追加" title="DOMパネルからの親DOM追加と、挿入パネルからの親DOM追加" src="https://qiita-image-store.s3.amazonaws.com/0/6558/b96631bd-c338-ed18-99cd-17d1d715146a.gif">

[^wt]: [Wrap Tag] のショートカットキーはないのでしょうか

ここまでの作業をキャプチャ動画 (1:45) にしました。
<a href="https://streamable.com/6xdy" target="_blank"><img width="640" alt="markup.png" src="https://qiita-image-store.s3.amazonaws.com/0/6558/7e2b3424-6649-254f-ac70-b1a727858f2c.png">
Streamable</a>

基本は**デザインビューで原稿の変更、[DOMパネル] / [挿入パネル] でDOMの整形**を繰り返してHTMLをつくっていきます。
Beta のコードビューは Brackets を半分 (?) 取り込んでおり、[Emmet](https://blogs.adobe.com/creativestation/learning-emmet-for-css) を標準で利用することができますので、こちらも好みによって使っていきます。

### 3. クイックエディットでスタイルを指定する

コードビューにて、タグや class, id にカーソルを当てて `Cmd+E` を押すと、インラインエディターが開きます。
CSSファイル中のセレクタの順番は気にせず、スタイルをどんどん追加していきましょう。[^dw_emmet]

[^dw_emmet]: Brackets と違いCSSで Emmet を利用すると、コードヒントが閉じない場合があり少々使いづらい

<img width="640" alt="Quick Edit" title="Quick Edit" src="https://qiita-image-store.s3.amazonaws.com/0/6558/81d18374-7eae-f473-7cab-586dfab00cff.gif">

スタイル適用の際に [Real-time Preview] `Alt+F12` を開いておくと、保存しなくても適用されたスタイルが適用されるため便利です。

<img width="371" alt="real-time.png" src="https://qiita-image-store.s3.amazonaws.com/0/6558/e9c85878-4b38-5162-d085-1effb41a4941.png">

#### CSS設計

ここでひとつ注意点が。
どんどん勝手にスタイルを追加していくと、セレクタが散らばり、どこにどのスタイルが適用されているかが、すぐにわからなくなってしまいます。
そのため、HTMLからCSS構造がある程度掴めるように、CSSの設計をしておいた方がよさそうです。

##### OOCSS をアレンジして使う

CSSの設計はした方がよいものの、クイックエディットを活かすために、複雑な設計にはしないほうがよさそうです。
何度か試したところ、[OOCSS](http://hijiriworld.com/web/oocss/) をベースに、スキンを `is-*` で表すのがスッキリしてよさそうでした[^bluma]。
その他 Utility `u-*` などを用意して汎用的に調節するのも便利です。

[^bluma]: 参考: Bluma - http://bulma.io/

クイックエディットではじめてセレクタを追加する場合には、記載するCSSファイルを選択する必要があります。
そのため、CSSファイル数は最低限にした方が Dreamweaver のクイックエディットを活かすことができます。

```html:CSS読み込み例
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/utilities.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width:640px)">
```

```css:CSS例
.panel {}
.panel-list > li {}
.panel-list > li:first-child a {}

.news {}
.news.is-full {}
.news-date {}
.news-text {}

.title {}
.title.is-01 {}
.title.is-02 {}

.u-container {
  width: 960px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.u-clearfix:after {
  content: '';
  clear: both;
  display: block;
}

.js-blurin {
  animation: blurin 1.2s forwards;
}
@keyframes blurin {
  from {
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0;
  }
  to {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
```

#### クイックエディットの問題点

##### 疑似要素 [/ 疑似クラス] の選択ができない

疑似要素 `:before, :after` や 擬似クラス `:hover, :nth-child` をカーソルで選択することができないため、クイックエディットから編集することができません。
また、疑似要素を持つ親要素を選択したとしても擬似要素を認識することができません。



そのため、疑似要素を調節するためには、直接ファイルを開いて該当箇所を検索する必要があります。


##### Sass の未対応

BetaでSassに対応はしているらしいですが、私の環境では動きませんでした。

Brackets でも、index.html のある階層に scss を入れなければならない（Document Root の指定ができない）点と、**クイックエディットからつくるセレクタ**が Sass の階層を考慮してくれない点より、Sass を利用せずそのまま CSS の編集としてしまったほうがよいと判断しました。

```html:html
<div class="card">
  <h2 class="card__title"></h2>
</div>
```

```scss:scss
.card {}
```

この状態で、HTML `card__title` にカーソルを合わせて `Cmd+E` をすると。

```scss:理想
.card {
  &__title {}
}
```

```scss:現実
.card {}
.card__title {}
```

### 4. ソースコードの整形

一通りコーディングを終えたら、ソースコードの整形をしておきましょう。

<img width="307" alt="Apply Source Formatting.png" src="https://qiita-image-store.s3.amazonaws.com/0/6558/d41efc6e-d87a-2f64-90d3-c86263bbe96b.png">

## より快適なコーディングのために

### ショートカットキー [Save All] の追加

コーディングをしていると [Real-time Preview] にデザインが反映されなかったり、エラー画面になって止まってしまう場合があります。
その場合はすべてのファイルを保存しておくと大体直ります。
デフォルトでは [Save All] にショートカットキーが設定されていないので、他のエディタと同じようなショートカットキーを割り当てておくとよいでしょう。

<img width="640" alt="shortcut_save_all.png" src="https://qiita-image-store.s3.amazonaws.com/0/6558/ae2f4a17-e1ca-c732-95f6-c624300e8672.png">

### 複数選択編集

Bracktes からの機能で、[Find] > [Add Next Match to Selection] が追加されています。
コードの選択後に `Cmd-R` を押すことによって、複数の選択箇所を同時に編集することができます。

<img width="640" alt="複数選択編集" title="複数選択編集" src="https://qiita-image-store.s3.amazonaws.com/0/6558/3dff7e77-cf50-88a6-d743-61115f9950b9.gif">

### PSD のスライス

PSDのスライスには、Photoshop [画像アセットの生成](https://blogs.adobe.com/creativestation/dtp-photoshop-kihon-tips-04)、Brackets プラグイン [Extract for Brackets](http://qiita.com/assialiholic/items/d52c10605d821f597036) と [Avocode](https://avocode.com/) あたりを利用しています。
Avocode はたまにデザインが崩れるので、PSDを確認しながらがいいと思います。

### おわりに

レスポンシブサイト制作時間の体感比率としては HTML:CSS = 1:9 くらいになるため、スタイルの適用を重点的に改善させる必要がありそうです。
なんだかんだ言っても結局のところ、慣れているエディタでコーディングするのが一番早いですね。
それでは私は Sublime Text に戻ります……。