設定のカスタマイズで まだまだ使える Dreamweaver

エディターガチンコ
バトル勉強会in大阪
設定のカスタマイズで 
まだまだ使える 
Dreamweaver
vs vs

自己紹介
エディターガチンコバトル勉強会 in大阪

丸山章
鳥取在住 Web歴15年ほど 
DreamweaverはVer.2Jから
CSSNite他セミナーに登壇
やの拡張機能とか
作ってます。
http://dwlog.net/

Dreamweaverの情報も発信してます
https://twitter.com/akira_maru
https://fb.me/MaruyamaAkira
DreamweaverJournal 
https://fb.me/DWJournal

私がDreamweaverを使う理由
設定をカスタマイズしてより効率的な作業を
拡張機能の導入
今日お話する内容

私がDreamweaverを
使う理由

• ファイルの同期非同期
• クローク
• Dwテンプレート
その1 強力なサイト管理

ファイルの同期非同期
リモートローカル
新
新
ダウンロード
何もしない
サーバーとローカルの
ファイルを比較
ダウンロード
or 削除
アップロード
クロークしたフォルダ、ファイル
は無視される

ファイルの同期非同期
Demo

クローク
指定した拡張子、フォルダ、ファイル単位で
ファイル操作などの除外対象となる
⃝どんなときに使う？
素材ファイルの管理をファイルパネル内で

クローク
指定した拡張子の指定はサイト設定で

クローク
フォルダ、ファイル
単位のクロークは
ファイルパネルで

Dwテンプレート
テンプレートの修正でサイト内ファイルを一括修正
■は編集可能領域
HTML
dwt dwt
更新
サイト定義が必要です！

利点1 テンプレートを変更すると、適用している
すべてのページで即座に変更が反映される。
リンク切れをおこしにくい
階層が変わっても追随する
作業的負荷の軽減
編集可能領域は書き換えない

利点2 デザインを編集させないようにすることで、
情報の入力に特化させることができる。
デザイナー
UI・デザイン
担当者
情報入力
編集者のスキル不足などによる、レイアウト崩れを最小限に留める

利点3 HTMLを直接触らないで、表示のコントロー
ルや項目の追加が可能。（オプション領域・リピー
ト領域）
レイアウト表示の切り替えレイアウトブロックの制御

Dwテンプレートの3つの機能
編集可能領域
オプション領域（編集可能なタグ属性）
リピート領域
レイアウトの一部のみ編集可能にする
レイアウトやオブジェクトの表示を条件
で切り替える
レイアウトや表組みなどを繰り返し表示
する

Dwテンプレートでできるこんなこと
• レイアウトパターンの切り替え
• 直感的なバナーの表示非表示のコントロール
⃝参考
DW テンプレートをマスターして楽々サイトメンテナンス 
http://slidesha.re/1hryzLf
コードビュー中心で開発するDreamweaverテンプレート 
http://slidesha.re/1q7Ypnt

• タグライブラリー
• コードヒントxmlを直接作成・編集
その2 柔軟かつカスタマイズ可能な
コードヒント

タグライブラリー
標準で実装されてないタグを登録できる
ex） HTML5のmain要素
MovableTypeのMTタグ
登録するとコードヒントで出てくるようになる！
⃝参考
HTML5コーディング環境を Dreamweaverで構築する 
http://slidesha.re/1kHhe0O

コードヒントxmlを直接作成・編集
コードヒントはxmlで書かれているため、 
直接編集を行う
⃝参考
DreamweaverコードヒントHowTo 
http://slidesha.re/1mZxyYy

その3 デザインタイムスタイルシート
一時的に別CSSファイルを適用、また設定して
いるCSSファイルを削除することができる。
Dwのデザインビューでのみ有効！

デザインタイムスタイルシート
よくあるパターン
• Dwにデザインビューに未対応のスタイル表示を
回避させるためにつかう（box-sizing: border-
box;、clearﬁxなど）
• 作業用に背景にグリッドをはめる

ラウンドトリップ
FireworksやPhotoshopと連携してダイレクトに
画像を編集する
⃝良くあるパターン
ファイル名はそのままでイメージを差し替えしたい

ペーストスペシャル
貼り付け時に構造やスタイルを維持の有無をコン
トロールできる。 
Ofﬁce書類からの貼り付けが柔軟に！
詳しくは森さんのセッションで

設定をカスタマイズして
より効率的な作業を

• カスタムキーボードショートカット
• コマンドと併用
• スニペットと併用
その1 ショートカットをカスタマイズ

カスタムキーボードショートカット
自分の作業のしやすい
ようにショートカット
を編集する

コマンドと併用
自分で導入したコマンドにキーボードを割り当てる
ex）Open Mutiple File：ファイルパネルで選択した
複数ファイルを同時に開くコマンド 
CS5以降: http://bit.ly/1q4EaXY

スニペットと併用
section、headerなどを登録してさらにショート
カットを割り当て
スニペットは選択範囲を挟み込んで挿入できたりす
るので便利
⃝参考
Dreamweaverでスニペットを登録してショートカットも
割り当てる方法 
http://delaymania.com/201404/web/dw-snippet/

• コードヒントがすぐ出てくるようにする
• コードビューの配色をカスタマイズ
その2 環境設定をカスタマイズ

遅延設定を0に
コードヒントがすぐ出てくるようにする

環境設定>コードカラーリングで個別に変更する
コードビューの配色をカスタマイズ

配布されているカラーデータを利用
コードビューの配色をカスタマイズ
⃝参考 
[ Dreamweaver ] コードカラーリングを Sublime Text 風
に変更した
http://bowz.info/4941
!
Dreamweaverのコードカラーリングまとめ
http://blog.1dz.jp/?eid=793

その3 新規ドキュメントの初期コード
をカスタマイズ
HTMLやCSSなどいつも使うものは初期コードに 
設定しておく
⃝Windows
C:¥アプリケーション¥Adobe Dreamweaver CC¥ja_JP
¥Configuration¥DocumentTypes¥NewDocuments
 
⃝Mac
/アプリケーション/Adobe Dreamweaver CC/ja_JP/
Configuration/DocumentTypes/NewDocuments

拡張機能の導入

その4 拡張機能の導入
標準にはない便利機能を実現する。
• CSS Selector コードヒント
• 閉じタグコメントを自動挿入
• DMXzone Font Awesome
• Google Sitemap Generator 2

CSS Selector コードヒント
コードヒントでCSSセレクターをだす
CS5以前：http://bit.ly/1pPhXjg
CS6以降：http://bit.ly/1kSWazn

閉じタグコメントを自動挿入
htmlの閉じタグの手前にコメントを入れる
CS6以下用：http://bit.ly/TqkCCv
※CC用はExtention Manager CS6でzxpに変換する
<div class="test">
aaaaaa
</div>
<div class="test">
aaaaaa
</div>
↑ ここにカーソルをおいて実行 ↑ コメントが挿入される

DMXzone Font Awesome
Font AwsomeのWebフォントを導入しやすくする
デザインビューでの表示も
http://bit.ly/1uxyZ5i
埋め込むタイプも選択できるアイコンをプレビューしながら挿入

Google Sitemap Generator 2
サイトのURLとトップページを指定するだけで
Sitemap.xmlを生成してくれる
http://bit.ly/UkoXIb

まとめ
Dwには他のエディタにはない、独自かつ強力な
機能が多数ある
環境設定やショートカットをカスタマイズして自
分好みにアレンジしよう
拡張機能はDwでの作業を超便利にするよ
どれか一択ではなくて、他のエディタやツールも
上手に使って効率化をしよう

ありがとうございました
@akira_maru
MaruyamaAkira

設定のカスタマイズで まだまだ使える Dreamweaver

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie 設定のカスタマイズで まだまだ使える Dreamweaver

Ähnlich wie 設定のカスタマイズで まだまだ使える Dreamweaver (20)

Mehr von Akira Maruyama

Mehr von Akira Maruyama (11)