設定のカスタマイズでまだまだ使えるdreamweaver
DESCRIPTION
エディター ガチンコバトル勉強会 vs.2 in 大阪で登壇した際のスライドデータですTRANSCRIPT
エディターガチンコ バトル勉強会 in 大阪
設定のカスタマイズでまだまだ使えるDreamweaver
vs vs
自己紹介
エディターガチンコバトル勉強会 in 大阪
丸山 章鳥取在住 Web歴15年ほどDreamweaverはVer.2Jから CSS Nite他セミナーに登壇
や の拡張機能とか 作ってます。
http://dwlog.net/
エディターガチンコバトル勉強会 in 大阪
Dreamweaverの情報も発信してます
https://twitter.com/akira_maru
https://fb.me/MaruyamaAkira
Dreamweaver Journalhttps://fb.me/DWJournal
エディターガチンコバトル勉強会 in 大阪
私がDreamweaverを使う理由
設定をカスタマイズしてより効率的な作業を
拡張機能の導入
エディターガチンコバトル勉強会 in 大阪
今日お話する内容
エディターガチンコバトル勉強会 in 大阪
私がDreamweaverを使う理由
• ファイルの同期非同期
• クローク
• Dwテンプレート
エディターガチンコバトル勉強会 in 大阪
その1 強力なサイト管理
エディターガチンコバトル勉強会 in 大阪
ファイルの同期非同期
! !
リモート ローカル
! !
! !
新
新
ダウンロード
何もしない
サーバーとローカルの ファイルを比較
! ダウンロード or 削除
アップロード
クロークしたフォルダ、ファイルは無視される
エディターガチンコバトル勉強会 in 大阪
ファイルの同期非同期
Demo
エディターガチンコバトル勉強会 in 大阪
クローク指定した拡張子、フォルダ、ファイル単位で ファイル操作などの除外対象となる
◯どんなときに使う？ 素材ファイルの管理をファイルパネル内で
エディターガチンコバトル勉強会 in 大阪
クローク指定した拡張子の指定はサイト設定で
エディターガチンコバトル勉強会 in 大阪
クロークフォルダ、ファイル単位のクロークは ファイルパネルで
エディターガチンコバトル勉強会 in 大阪
Dwテンプレートテンプレートの修正で サイト内ファイルを一括修正
■は編集可能領域
HTML
dwt dwt更新
サイト定義が必要です！
エディターガチンコバトル勉強会 in 大阪
Dwテンプレート利点1 テンプレートを変更すると、適用している すべてのページで即座に変更が反映される。
リンク切れをおこしにくい
階層が変わっても追随する
作業的負荷の軽減
編集可能領域は書き換えない
エディターガチンコバトル勉強会 in 大阪
Dwテンプレート利点2 デザインを編集させないようにすることで、 情報の入力に特化させることができる。
デザイナー
UI・デザイン
担当者
情報入力
編集者のスキル不足などによる、レイアウト崩れを最小限に留める
エディターガチンコバトル勉強会 in 大阪
Dwテンプレート利点3 HTMLを直接触らないで、表示のコントロールや項目の追加 が可能。（オプション領域・リピート領域）
レイアウト表示の切り替え レイアウトブロックの制御
エディターガチンコバトル勉強会 in 大阪
Dwテンプレートの3つの機能
編集可能領域
オプション領域（編集可能なタグ属性）
リピート領域
レイアウトの一部のみ編集可能にする
レイアウトやオブジェクトの表示を条件で切り替える
レイアウトや表組みなどを繰り返し表示する
エディターガチンコバトル勉強会 in 大阪
Dwテンプレートでできるこんなこと
• レイアウトパターンの切り替え
• 直感的なバナーの表示非表示のコントロール
◯参考 DW テンプレートをマスターして 楽々サイトメンテナンス http://slidesha.re/1hryzLf
コードビュー中心で開発するDreamweaverテンプレートhttp://slidesha.re/1q7Ypnt
エディターガチンコバトル勉強会 in 大阪
• タグライブラリー
• コードヒントxmlを直接作成・編集
その2 柔軟かつカスタマイズ可能なコードヒント
エディターガチンコバトル勉強会 in 大阪
タグライブラリー
標準で実装されてないタグを登録できる
ex） HTML5のmain要素 MovableTypeのMTタグ
登録するとコードヒントで出てくるようになる！
◯参考 HTML5コーディング環境を Dreamweaverで構築するhttp://slidesha.re/1kHhe0O
エディターガチンコバトル勉強会 in 大阪
コードヒントxmlを直接作成・編集
コードヒントはxmlで書かれているため、直接編集を行う
◯参考 DreamweaverコードヒントHowTohttp://slidesha.re/1mZxyYy
エディターガチンコバトル勉強会 in 大阪
その3 デザインタイムスタイルシート一時的に別CSSファイルを適用、また設定しているCSSファイルを削除することができる。
Dwのデザインビューでのみ有効！
エディターガチンコバトル勉強会 in 大阪
デザインタイムスタイルシートよくあるパターン • Dwにデザインビューに未対応のスタイル表示を回避させるためにつかう（box-sizing: border-box;、clearfixなど）
• 作業用に背景にグリッドをはめる
エディターガチンコバトル勉強会 in 大阪
ラウンドトリップFireworksやPhotoshopと連携してダイレクトに 画像を編集する
◯良くあるパターン ファイル名はそのままでイメージを差し替えしたい
エディターガチンコバトル勉強会 in 大阪
ペーストスペシャル貼り付け時に構造やスタイルを維持の有無をコントロールできる。Office書類からの貼り付けが柔軟に！ 詳しくは森さんのセッションで
エディターガチンコバトル勉強会 in 大阪
設定をカスタマイズしてより効率的な作業を
エディターガチンコバトル勉強会 in 大阪
• カスタムキーボードショートカット
• コマンドと併用
• スニペットと併用
その1 ショートカットをカスタマイズ
エディターガチンコバトル勉強会 in 大阪
カスタムキーボードショートカット自分の作業のしやすいようにショートカットを編集する
エディターガチンコバトル勉強会 in 大阪
コマンドと併用自分で導入したコマンドにキーボードを割り当てる
ex）Open Mutiple File：ファイルパネルで選択した複数ファイルを同時に開くコマンドCS5以降: http://bit.ly/1q4EaXY
エディターガチンコバトル勉強会 in 大阪
スニペットと併用section、headerなどを登録してさらにショートカットを割り当てスニペットは選択範囲を挟み込んで挿入できたりするので便利◯参考 Dreamweaverでスニペットを登録してショートカットも割り当てる方法http://delaymania.com/201404/web/dw-snippet/
エディターガチンコバトル勉強会 in 大阪
• コードヒントがすぐ出てくるようにする
• コードビューの配色をカスタマイズ
その2 環境設定をカスタマイズ
エディターガチンコバトル勉強会 in 大阪
遅延設定を0に
コードヒントがすぐ出てくるようにする
エディターガチンコバトル勉強会 in 大阪
環境設定>コードカラーリングで個別に変更する
コードビューの配色をカスタマイズ
エディターガチンコバトル勉強会 in 大阪
配布されているカラーデータを利用
コードビューの配色をカスタマイズ
◯参考[ Dreamweaver ] コードカラーリングを Sublime Text 風に変更した http://bowz.info/4941 !Dreamweaverのコードカラーリングまとめ http://blog.1dz.jp/?eid=793
エディターガチンコバトル勉強会 in 大阪
その3 新規ドキュメントの初期コードをカスタマイズ
HTMLやCSSなどいつも使うものは初期コードに設定しておく◯Windows C:¥アプリケーション¥Adobe Dreamweaver CC¥ja_JP ¥Configuration¥DocumentTypes¥NewDocuments ◯Mac /アプリケーション/Adobe Dreamweaver CC/ja_JP/Configuration/DocumentTypes/NewDocuments
エディターガチンコバトル勉強会 in 大阪
拡張機能の導入
エディターガチンコバトル勉強会 in 大阪
その4 拡張機能の導入標準にはない便利機能を実現する。
• CSS Selector コードヒント
• 閉じタグコメントを自動挿入
• DMXzone Font Awesome • Google Sitemap Generator 2
エディターガチンコバトル勉強会 in 大阪
CSS Selector コードヒントコードヒントでCSSセレクターをだす
CS5以前：http://bit.ly/1pPhXjg CS6以降：http://bit.ly/1kSWazn
エディターガチンコバトル勉強会 in 大阪
閉じタグコメントを自動挿入htmlの閉じタグの手前にコメントを入れる
CS6以下用：http://bit.ly/TqkCCv ※CC用はExtention Manager CS6でzxpに変換する
<div class="test"> aaaaaa </div>
<div class="test"> aaaaaa </div><!-- / .test -->
↑ ここにカーソルをおいて実行 ↑ コメントが挿入される
エディターガチンコバトル勉強会 in 大阪
DMXzone Font AwesomeFont AwsomeのWebフォントを導入しやすくする デザインビューでの表示もhttp://bit.ly/1uxyZ5i埋め込むタイプも選択できる アイコンをプレビューしながら挿入
エディターガチンコバトル勉強会 in 大阪
Google Sitemap Generator 2サイトのURLとトップページを指定するだけでSitemap.xmlを生成してくれる
http://bit.ly/UkoXIb
エディターガチンコバトル勉強会 in 大阪
まとめ
Dwには他のエディタにはない、独自かつ強力な機能が多数ある 環境設定やショートカットをカスタマイズして自分好みにアレンジしよう 拡張機能はDwでの作業を超便利にするよ どれか一択ではなくて、他のエディタやツールも上手に使って効率化をしよう
ありがとうございました
@akira_maru
MaruyamaAkira
エディターガチンコバトル勉強会 in 大阪