Dreamweaver CS6 でオススメの拡張まとめ

  • あとで読みたい人は…

【お知らせ】Dreamweaver CC の設定についてはこちらをご覧ください。
Dreamweaver CCにアップデート!CS6から各種設定や拡張機能を移行する

こんにちは、@cappeeです。

リカバリ後、後回しにしていたDreamweaverの拡張機能のことを思い出して色々と調べてみました。

調べたところたくさん記事はあるのですがDreamweaverの対応しているバージョンが古かったり、CS6にはすでにデフォルトで機能があったりと整理が必要そうだったので、Dreamweaver CS6 でオススメの拡張を自分なりにまとめました。他にオススメがあればぜひ教えてください!

コーディング効率化:Zen-Coding

なにわともあれまずZen-Codingは入れておかないと始まらないですね。コーディングの効率化には必須の拡張です。

下記の一覧より「Zen Coding for Dreamweaver(バーション)」をダウンロードし、mxpファイルをダブルクリックすると「Adobe Extension Manager」が開くので、承諾してインストールすればOKです。

Zen Coding for Dreamweaver をダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

さらなる効率化のために以前Zen-Codingの展開後のコードをカスタマイズした記事も私の方で公開しているのでぜひそちらもご覧ください。

Zen-Codingを自分なりにカスタマイズしてさらに効率化できた

 Dreamweaver CS6 でオススメの拡張まとめ

文字列からリストを作成

文字列からリストを作成するコマンドです。
原稿があって後からulやolなどのリストタグを追加したい時にとても便利です。

上で紹介したzen-cordingでも簡単にリストを作成出来ますのでzen-cordingを使っていない方はどうぞ。(でも使うことをオススメします!)
ちなみにzen-cordingでリストタグを追加するには、文字列のどこでもいのでマウスを置くかドラッグで選択し、「ul>li*」で展開すれば文字の行毎にliタグが付きます。

コマンドの方に話を戻すと、こちらはmxpファイルではなく、直接コマンドフォルダに下記よりダウンロードしたhtmファイルを追加します。

リストを作成.htmをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

htmファイルは下記の場所、コマンドフォルダに入れてください。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\Commands

画像サイズをリセット

imgタグの画像サイズを簡単に挿入してくれるコマンドです。
プロパティからも画像サイズはリセットできますが、ソースコードを選択すれば部分的にや一括でリセットしてくれるのがとても便利です。

上記と同じくコマンドフォルダにダウンロードしたhtmファイルを入れてください。

画像サイズをリセット.htmをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

画像サイズを半分にリサイズしてRetina対応

imgタグの画像サイズを半分にリサイズしてくれるコマンドです。
スマホサイトの制作でRetina対応する場合、画像を倍で制作してソースコードにその半分のサイズで記載する必要があるので非常に便利です。

上記と同じくコマンドフォルダにダウンロードしたhtmファイルを入れてください。ファイル名が「image_reset_half.htm」となってますので、わかりやすく「画像サイズを半分(Retina).htm」などと変えてしまっても大丈夫です。

image_reset_half.htmをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

閉じタグコメントを生成&挿入:End comment

コードの量が多くなるとミスを防ぐためにも閉じタグにどのIDまたはClassの閉じタグかをコメントしておくとわかりやすくなります。そんな閉じタグのコメントを挿入し、自動でIDまたはClass名を入力してくれる拡張機能です。

End_commentをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

閉じタグ漏れを防ぐ:Close Tags

上記の閉じタグコメントでもどうにもならなくなった時に使う拡張機能です。閉じタグがなかくてデザインが崩れたりした経験はみんなありますよね。その閉じタグ漏れを防ぐいでくれます。

ダウンロードにはAdobe ID が必要です。下記の黄色い「Download」ボタンよりダウンロードし、Zen-Codingと同じくmxpファイルを開いてインストールしてください。

Close Tags をダウンロード

機種依存文字・全角半角変換:character.mxp

以前はフィーチャーフォンの携帯サイト制作でカタカナ→カタカナに変換するために重宝された拡張ですが、それ以外にもWindows用の機種依存文字をMacで文字化けしないように別の文字に置き換えたり、全角数字を半角に変換(もちろん逆も可)したりとても便利です。

Dreamweaver CS3と記載されていますが、CS6でも問題なく使うことができます。ただし、「コマンド」の「その他」に追加されるのでご注意ください。また、色んな拡張を追加していくと表示されなくなる場合がありますので、再度インストールしなおせば大丈夫です。

機種依存文字・全角半角変換をダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

外部リンクのチェック:External Link Checker

外部リンクが有効かをチェックしてくれる拡張機能です。インストールするとコマンドにこれでもかというほど項目が追加されるので注意してください。。使い勝手もあまり良くないので、改善してもらえるとありがたいのですが。

External Link Checkerをダウンロード

ちなみに上記までのオススメの拡張を入れると、Dreamweaverのコマンドにこのように表示されますので、拡張を使うときはコマンドから選択するか、ショートカットを設定してください。

dw extension1 300x281 Dreamweaver CS6 でオススメの拡張まとめ

WordPress用のコードヒント:WordPressCodeHints

私はWordPressをよく使用するのでこのコードヒントはありがたいですね。phpファイルでCtrl+スペースを押すとコードヒントが表示されます。

WordPressCodeHintsをダウンロード

 Dreamweaver CS6 でオススメの拡張まとめ

MovableType用のコードヒントはこちら。

Movable Type タグライブラリ for Dreamweaverをダウンロード

CSSコードヒントのカスタマイズ

こちらは拡張機能というよりは、DreamweaverのデフォルトであるCSSのコードヒント(CodeHints.xml)をカスタマイズしてコーディングをより効率化するというものです。

例えば、デフォルトだと「w」を入力するとよく使う「width」プロパティを出して欲しいのに「windows」がでちゃうので、そういったのを防いでよく使うプロパティが表示されるようにカスタマイズします。

すでにカスタマイズ済みのCSSコードヒントがないか調べてみると、「widowsプロパティの誤入力を防ぐCodeHints.xml|カラクリエイト」がよく紹介されているのですが2006年公開と古かったので、CS6対応のものを探していたらちょうど公開されたばかりのものがありました。ありがたいですね。

下記よりCSSのコードヒント(CodeHints.xml)をダウンロードしてください。

DreamweaverのCodeHints.xmlをカスタムして入力しやすくする

 Dreamweaver CS6 でオススメの拡張まとめ

コードカラーリングのカスタマイズ

ソースコードが一番見やすいカラーにカスタマイズします。ちなみに私は黒背景にSublime Text2と同じ配色で設定しています。
最初は違和感があるかもしれませんが、色が明確でわかりやすいです。

Dreamweaverのコードカラーリングをカスタマイズする

 Dreamweaver CS6 でオススメの拡張まとめ

スニペットのカスタマイズ

コーディングを効率化させるにはzen-cording+スニペットのショートカットを使うのが一番早いです。HTMLやCSSでよく使うコードを登録しておきます。

私のは配布できるほど整理できてないので、今のところは下記などを参考にしてください。

Dwでコーディングがちょこっと早くなる小技
Dreamweaverのスニペットに登録して作業効率が上がるCSS3まとめ

コード表示のフォント

環境設定を見るとデフォルトでは「MS ゴシック」になっているかと思いますが、最近公開されたAdobeのコード用フォント「Source Code Pro」や「Miguフォント」などに変更してもいいと思います。

個人的には「Source Code Pro」だと見やすいのですが日本語を変更する際の挙動が少しおかしかったり、「Miguフォント」だと少し太く感じだので結局デフォルトに戻してます。。

ただ、試してみる価値はあると思うので下記などを参考にしてみてください。

[速報] ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開
コーディング用フォント

ちなみにCS6で追加しなかった拡張

  • HTML5のタグを表示する拡張(HTML5非対応のCS4以前用のため):html5_tag_suites
  • iPhone向けサイトのテンプレート(最新のiPhone非対応のため):iPhone site extension for Dreamweaver CS4/5
  • CSS3コードヒント(デフォルトのコードヒントもCSS3の規約に伴いアップデートされているため):CSS3_CodeHints

以上になります。

コーディングはスピードが命ですので拡張をうまく利用して効率化したいですね!

Pocket
article clipper Dreamweaver CS6 でオススメの拡張まとめ

One thought on “Dreamweaver CS6 でオススメの拡張まとめ

  1. Pingback: コーディングを早くする「Emmet」 | WEBに関するあれこれ解決!

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)