Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
エディターガチンコ
バトル勉強会in大阪
設定のカスタマイズで

まだまだ使える

Dreamweaver
vs vs
自己紹介
エディターガチンコバトル勉強会 in大阪
丸山 章
鳥取在住 Web歴15年ほど

DreamweaverはVer.2Jから
CSSNite他セミナーに登壇
   や   の拡張機能とか
作ってます。
http://dwlog.net/
エディターガチンコバトル勉強会 in大阪
Dreamweaverの情報も発信してます
https://twitter.com/akira_maru
https://fb.me/MaruyamaAkira
DreamweaverJournal

https://fb.me/DWJourn...
私が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://sl...
エディターガチンコバトル勉強会 in大阪
• タグライブラリー
• コードヒントxmlを直接作成・編集
その2 柔軟かつカスタマイズ可能な
コードヒント
エディターガチンコバトル勉強会 in大阪
タグライブラリー
標準で実装されてないタグを登録できる
ex) HTML5のmain要素
MovableTypeのMTタグ
登録するとコードヒントで出てくるようになる!
⃝参考
HTML5コーディング環...
エディターガチンコバトル勉強会 in大阪
コードヒントxmlを直接作成・編集
コードヒントはxmlで書かれているため、

直接編集を行う
⃝参考
DreamweaverコードヒントHowTo

http://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...
エディターガチンコバトル勉強会 in大阪
スニペットと併用
section、headerなどを登録してさらにショート
カットを割り当て
スニペットは選択範囲を挟み込んで挿入できたりす
るので便利
⃝参考
Dreamweaverでスニペットを登録...
エディターガチンコバトル勉強会 in大阪
• コードヒントがすぐ出てくるようにする
• コードビューの配色をカスタマイズ
その2 環境設定をカスタマイズ
エディターガチンコバトル勉強会 in大阪
遅延設定を0に
コードヒントがすぐ出てくるようにする
エディターガチンコバトル勉強会 in大阪
環境設定>コードカラーリングで個別に変更する
コードビューの配色をカスタマイズ
エディターガチンコバトル勉強会 in大阪
配布されているカラーデータを利用
コードビューの配色をカスタマイズ
⃝参考

[ Dreamweaver ] コードカラーリングを Sublime Text 風
に変更した
http://bowz.in...
エディターガチンコバトル勉強会 in大阪
その3 新規ドキュメントの初期コード
をカスタマイズ
HTMLやCSSなどいつも使うものは初期コードに

設定しておく
⃝Windows
C:¥アプリケーション¥Adobe Dreamweaver CC...
エディターガチンコバトル勉強会 in大阪
拡張機能の導入
エディターガチンコバトル勉強会 in大阪
その4 拡張機能の導入
標準にはない便利機能を実現する。
• CSS Selector コードヒント
• 閉じタグコメントを自動挿入
• DMXzone Font Awesome
• Google Si...
エディターガチンコバトル勉強会 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に変換する
<...
エディターガチンコバトル勉強会 in大阪
DMXzone Font Awesome
Font 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大阪
Upcoming SlideShare
Loading in …5
×

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

7,325 views

Published on

エディター ガチンコバトル勉強会 vs.2 in 大阪で登壇した際のスライドデータです

Published in: Software

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

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

×