2017年3月11日に開催されたCSS Niteに参加してきました。
今回のテーマは「Reboot Dreamweaver」。
馴染みのあるAdobeアプリなのと、全8テーマのセッションというボリューミーな内容に惹かれて申し込みました…！
自分の復習のためにひとつひとつのセッションを振り返ってみようと思います。

目次

CSS Niteとは？

Web制作に関わる人のためのセミナーです。
全国各地で様々なテーマで開催しています。
前々から気になっていて、今回やっと参加できました！
→CSS Nite WEBサイトはこちら

1時限目【基調講演】温故知新：DreamweaverとWeb制作シーンの20年を振り返る

出演：鷹野 雅弘さん（スイッチ） @swwwitch

Dreamweaverの歴史や機能の比較など楽しく解説していただきました。

気になるワード「Emmetで爆速コーディング」

Emmetというツールを入れれば爆速でコーディングができるらしい！（CC2015から対応）
例えば「#main」と入力したタブキーを押せば「div id=”main”」といったように、省略語を展開できる機能らしい！（これをExpandというらしい）
知らなかった〜！早速入れてみよう（＞_＜）
→【参考記事】HTML/CSSを爆速コーディング Emmet入門 第1回 Emmetを薦める理由

2時限目【デザインビュー】Dreamweaverで高速・楽々マークアップ

出演：生明 義秀さん（AZM Design） @g_azami

あまり使われていない「デザインビュー」を使って高速でコーディングできる方法をレクチャーしてくださいました。

デザインビューはざっくりマークアップに重宝！

デザインビューは「表示を正しく見るため」ではなく、見出し、小見出し、tableなど視覚的に判別できた方がタグの挿入がしやすいぞということみたいです。
プロパティや挿入パネルから、クリックだけでのタグ追加のマークアップは見ていてとっても気持ちがよかった！
そして速い！！ポチポチ打つのがアホらしくなってくるくらい（笑）
バージョンに関係なく使えて、とっても実用的な印象でした（◍•ᴗ•◍）

3時限目【コードビュー：Brackets】Dreamweaverのコードエディター機能を進化させたBrackets

出演：酒井 優さん（WEBCRE8） @glatyou・たにぐち まことさん（H2O space） @seltzer

Dreamweaverの機能に影響をもたらしたBracketsというエディターの説明や、それぞれどのような違いがあるのかについてのセッションです。
聞いていると、Bracketsの機能を反映しまくりやんっていう印象でした。

簡単なマークアップはDreamweaver、フロントエンドはBrackets

という印象を持ちました。
Dreamweaverは「誰でも」「直感的に」なイメージですが、Bracketsはガッツリコードを打ちたい人やフロントエンド寄りの業務に適しているイメージです。

Bracketsって無料なの！！！！！？

…ていうかこのエディター無料なのね！無料でいいの！？
オープンソースなので改良も速そうです。
→BracketsはこちらからDLできます
→【参考記事】無料エディター「Brackets」にも恋に落ちた

4時限目【Tips】忘れがち、実は使えていない Dreamweaverの便利機能

出演：森 和恵さん（r360studio） @r360studio

2時限目でも挿入パネルなど便利機能には触れましたが、もっと掘り下げて、「こんなことができたの！」というような裏ワザ的な機能にもフォーカスしてくださいました。

Dreamweaver内でバリデートチェックできるんだ

ファイル　→　ドキュメント　→　現在のドキュメント（W3C）　からバリデートチェックができるらしい。
知らなかった〜〜！！

正規表現検索での魔法の記述

わたしがずっと知りたかった魔法の呪文。
<!— .* —>.*¥n　で、<!— —>内にどんな言葉が入っていても検索に引っかかるそう。
こう書けばいいのか〜知らなかったよ〜〜！！

5時限目【Ps/Ai】いまどきのデザインアプリとDreamweaverとの連携

出演：北村 崇さん（TIMING DESIGN） @tah_timing・浅野 桜さん（タガス） @chaca21911

コーダーさんにうれしいPSDデータの作り方や、Dreamweaverの「Extract機能」を使用してPSDのスタイル属性やテキストを簡単に抽出、反映する方法をレクチャーしてくださいました。

PSDのつくり方に目からウロコ。エンジニアに「すみませんでした」と土下座したい

「レイヤーの構造はタグと合わせて上から下へ」「レイヤー名にカラーコードやpxを入れる」「小数点のある要素はつくらない」「図形やマスクには数値が取りやすいシェイプツールを使う」などなど、神がかったデータのつくり方を伝授してくださいました！
…と同時に、新卒時代にわたしのクソみたいなデータから実装してくださったエンジニアさんに土下座をしたくなりました。

特に印刷から来た人だとレイヤーを下から構成していく方が多いですが、WEBは上からが鉄則ですぞ！！
気をつけましょう（^O^）

6時限目【Bootstrap】チームで使える！ ワークフローに効くDreamweaver+Bootstrap

出演：松田 直樹さん（まぼろし） @readymadegogo

ワイヤーフレームをDreamweaverのDOMパネル＋Bootstrapでタグ打ちすることなく直観的に作成する方法をレクチャーしてくださいました。

レスポンシブサイトに重宝

レスポンシブサイトは、静止画での説明はなかなかイメージがむずかしいところ。
むしろ静止画の方が、各デバイスごとにワイヤーフローを作らないといけないので時間がかかります。
それが、Bootstrapを使えばあっという間に作成できちゃって口がアングリでした。
あらかじめレスポンシブサイト化とすることで、「スマホだと文章が長すぎて辛い」などといった問題も早めに回避できますぞ◎
あと、先方にもURLを伝えるだけでOKというのも楽♪

できればこのままデザインを肉付けしたいところですが案件次第ですね！

7時限目【Sass】DreamweaverでSassを使うための勘所

出演：久保 知己さん（まぼろし） @kojika17

DreamweaverでSassを使う方法やポイントをレクチャーいただきました。
しかし、DreamweaverはSassの対応に遅れていて…おっと…といった感じ（笑）

Sassライブラリとのバージョンが設定できない・生成されたCSS側に更新があった場合、SCSSに自動反映されない

しかも、Sassライブラリは、バージョンによってDreamweaverとの互換性が合わなくて使えないものもあるそうです…。
一発屋のお仕事ならまだいいとして、定期的な改修のある制作では不向きですね。
Sassを使うなら別のエディターで試した方が良さそうっす…（ ༎ຶ‿༎ຶ ）
登壇者さんはなんのエディターを使っているんだろう。

8時限目【Adobe】Dreamweaverに追加予定の機能と開発チームへの機能要望の出し方

出演：轟 啓介さん（アドビ） @keisuke322

現在開発中のDreamweaverのデモや機能要望の出し方をレクチャーしてくださいました。

Dreamweaverをインストールするだけで、Gitをすぐに使えるようになる

おお！これは大変便利！！
古いデータにもカンタンに戻れるようになりますなあ◎
楽しみ〜（◍•ᴗ•◍）
→【Git入門サイト】サルでもわかるGit入門
→【Git入門サイト】郵便局メソッド

機能要望はDreamweaver User Voiceへ

基本英語ですが、翻訳して…。
共感する要望があれば「Vote」ボタンをクリックして支持しませう◎
（参加するにはメールアドレスやFb/Twitterアカウントが必要です）
→Dreamweaver User Voice

全体を通してのまとめ

Dreamweaverは、はじめての方にも優しいエディター

という感想を持ちました。
プロパティや挿入、DOMといったパネルを使えば、入れたい箇所にワンクリックでタグを挿入できることに衝撃でした。
機能は知っていたんだけど、まさかこんなにスピードがちがうとは…！！
CSSだって、はじめの何文字かを入力すれば予測変換的なものが出てくるしね。
重たいアプリですが、優しい機能が盛りだくさんなのでしゃあないよね〜！

便利だけど、なるべく手打ちでやりたいかも…

それでもわたしは手打ち派かな…手打ちじゃないと忘れてしまうから！
仕事環境によってはアプリさえも満足に揃っていないところもあります。
そういうところに放り込まれてもある程度役に立てるくらい自分自身の知識として取り込んでおきたいなと感じました。
急ぎの案件にはガッツリ活用させていただきたいけど♡

一般的なエディターなので活用できて損はなし！

決してマイナーなエディターではないですし！！
特にインハウス職だとコーディングといえばDreamweaverなんじゃないでしょうか？
他のAdobe製品といっしょにインストールできるっていうお手軽さもあいまって。
なので、活用できるに越したことはないし、強みにもなると思います！

はじめてWEB制作をしたいという方はDreamweaverをオススメします。
ある程度慣れてみて、自分の組み方のタイプによってBracketsやSublimetextなど他のエディターも試してみるというのが良いと思いました。

セッションで使用されたスライドや音声などは後日一般公開されるそうです！

現在は参加者のみの閲覧となっているのでここにはのせられませんが、3ヶ月後くらいに一般公開されるそうです！
3ヶ月後…6月中旬ごろかな？
こちらのページでお知らせされると思いますので、時期が来たらチェックしてみてくださいまし◎
→CSS Nite LP51「Reboot Dreamweaver」（2017年3月11日開催）

公式サイトで取り上げていただきました！

CSS Niteのサイトやフォローアップのメールでわたしの記事を紹介してくださいました！
ひっそり書いたつもりなのでびっくり…うれしい。
ありがとうございます～！！

CSS Niteでは全国でイベントを開催しています

CSS NiteではWEBに関するセミナーを全国で開催しています！
ぜひチェックしてみてね〜！
CSS Niteはこちら