何世代ぶりかでDwを起動してみたんですけど、随分と装いが変わりましたね。。。
で、ソースフォーマットがなかなか見つからなかったのでメモ。
編集 – コード – ソースフォーマットの適用
dreamweaver
DreamweaverCC 2015が思いのほか酷い
ドキュメントタイプにLESSやSassやSCSSがあるんだけど
実際使うとカラーリングが入れ子を認識してない。
ソースフォーマットをするとインデントされずに、1行目に空行が入る。
入れ子になったulをスルーして
ulに対応した「}」が開始タグなしとして扱われてる。
ファイルウインドウのアイコンも.htmlや.phpといった拡張子関係なく同じだし、全体的にグレーで視認性がすこぶる悪いと思うの。
自分でアイコン選択出来るのかな？
DreamweaverCC コードとデザインの分割が上下になってたので左右に変更した。
- 表示>左右に分割 にチェック入れる
- 表示>ライブビューを左に表示 のチェック外す
Dreamweaverの超絶便利な拡張みつけた、これはインストール必須なヤツだ。
あけましておめでとうございます
忙しいと「うわーっ」てなってしまって本当にダメだ、（と毎年言っているような気がするけど）
それなのに見捨てずにいてくださる方々、ありがとうございます(m*_ _)mﾍﾟｺﾘ
そこにあぐらをかいてはいけないんだろうけど、なんかもう感謝としかいいようがないっすよねぇ
足を向けて眠れねぇなぁというか、なんというか。
本年もよろしくお願いいたします。
さて、表題の拡張機能の話
実際は去年の秋か冬あたりから使い始めたんですけど
どうゆうものかというと
コードビュー上のカーソルがある行を、キーボード操作で複製したり移動したり出来るようにするヤツです。
Coda2にも同じような拡張があって、すごく便利で
Dwでも出来たらいいのにって探したら作ってる人がいました、素敵。
![[image]DreamweaverでEclipseライクなコード編集ができる拡張機能](http://blog.sakurachiro.com/wp-content/uploads/2013/01/0113-01.jpg)
CodeEditUtilsを使うと何が出来るのか、というと
例えば下のソースを
[html classname=”html-sh”]
<ul>
<li>あ</li>
<li>か</li>
<li>さ</li>
</ul>
[/html]
[html classname=”html-sh”]
<ul>
<li>あ</li>
<li>さ</li>
<li>か</li>
</ul>
[/html]
にする場合
かをカットしてさの下にペーストすると思うんですけど
この拡張機能を使うと
かの行にカーソルがあるとしたら
alt + ↓（自分で決めたショートカット）でかを下に移動させられます（つまり上下が入れ替わる）。
カットしてペーストして、、、とかしなくていいの。
他にも上の行や下の行に複製も出来る。
どう？便利じゃないですか。
あとは、alt + command + D（任意のショートカット）で1行まるごと削除できるようになる。
これmacbook proだととても便利。
これは入れておいて損はないはず。
[Mac] Dreamweaverに登録してあるサーバー情報の、通常見えないパスワード（●●●●●●）を見るにはキーチェーンを使う
普段Dreamweaver（以下Dw）だけでコーディングからサーバーへのput/getを全部やっていて
たまたまFTP情報もDwのサイト管理内にしか手元にない場合に
別のエディタや別のFTPソフトを使う必要が出た時に
●●●●●●で隠れているパスワードをMacだと表示する方法がわからず
どうしたものか、と困っていたMac初心者のまことです。
Dwサイト管理のパスワードも、ユーティリティのキーチェーン中に保存されていました。
![[image]画像はlaunchpadのユーティリティ内](http://blog.sakurachiro.com/wp-content/uploads/2012/06/2012-0603-1.png "画像はlaunchpadのユーティリティ内")
![[image]キーチェーン](http://blog.sakurachiro.com/wp-content/uploads/2012/06/2012-0603-2.png "キーチェーン")
キーチェーンにDw内のパスワードまで入ってるとは思いもよらなんだ。
余談
「自分の証明書」ってなんか格好いいですよね、うちは何者なんだろ。
![[image]存在証明](http://blog.sakurachiro.com/wp-content/uploads/2012/06/2012-0603-04.png "存在証明")
macのdreamweaverで使えるテキスト差分ツール
mac（OSX lion）で使えるWinMergeのようなdiffツールをやっと見つけた。
1つ目はDiffMerge
SourceGear | DiffMerge | overview
インストールして
dreamweaverで環境設定（command + U）
ファイルの比較 – 参照
Macintosh HD:usr:bin:diffmerge
（アプリケーションのdiffmergeを選択するわけじゃなのね・・・）
こんな感じ
![[image]DiffMerge](http://blog.sakurachiro.com/wp-content/uploads/2012/02/0221-1.png "DiffMerge")
ただ初期設定のままだと日本語が化けるらしいので
以下のサイトを参考に設定。
「DiffMerge」で日本語テキストを正しく表示させる方法 – 強火で進め
![[image]設定箇所](http://blog.sakurachiro.com/wp-content/uploads/2012/02/735a0634951f18e7ade29fa6e65c514e.png "設定箇所")
![[image]変更箇所](http://blog.sakurachiro.com/wp-content/uploads/2012/02/0221-3.png "変更箇所")
2つ目はTextWrangler
Bare Bones Software | Download TextWrangler
こっちは「ファイルの比較 – 参照」が
Macintosh HD:usr:local:bin:twdiff
だった。
追記 / 20120902
Adobe Dreamweaver * ファイルの違いの比較
dreamweaver / 拡張機能を無効もしくは削除して調子が悪くなったら
例えばコピペができなくなったりした時
Configurationを削除してみるといいかもしれない。
キーボードショートカットを編集してると色々問題が起こるのかなぁ
Configuration再構築すると再設定しなきゃダメだから超面倒臭い( ´･＿･｀)
JavaScript エラーのトラブルシューティング（Dreamweaver CS4/CS5）
C-12. ユーザ設定フォルダの再作成
以下の操作を行い、Dreamweaver のユーザー設定フォルダを再作成します。
Windows
1. Dreamweaver を終了します。
2. 以下の「Configuration」フォルダのフォルダ名を「Configuration_OLD」などに変更します。注意 ： 以下のフォルダは隠しフォルダのため、Windows の初期設定では表示されません。ファイルやフォルダが参照できない場合は、Windows のフォルダオプションで隠しファイルや隠しフォルダを表示する設定に変更必要があります。設定の変更方法について詳しくは、Windows ヘルプを参照してください。
Windows 7/Vista ： Users¥＜ユーザ名＞\AppData\Roaming\Adobe\Dreamweaver ＜バージョン＞\ja_JP\Configuration
Windows XP ： Documents and Settings\＜ユーザ名＞\Application Data\Adobe\Dreamweaver ＜バージョン＞\ja_JP\Configuration
3. Dreamweaver を再起動し、問題が改善されるか確認します。Macintosh
1. Dreamweaver を終了します。
2. Finder で以下のフォルダを参照します。
Macintosh HD/Users/[username]/Library/Application Support/Adobe/Dreamweaver ＜バージョン＞/[language]/Configuration
3. フォルダ名を「Configuration Old」に変更します。
4. Dreamweaver を起動し、問題が再現されるか確認します。
DreamweaverのjQuery拡張機能 / jQuery Utilities Toolset with Code Utilities
![[image]jQuery Utilities Toolset with Code Utilities](http://blog.sakurachiro.com/wp-content/uploads/2011/05/20110503_1.png "jQuery Utilities Toolset with Code Utilities")
Adobe – Dreamweaver Extension
上の一般、レイアウト、フォームとか書いてあるタブの所にjQueryのタブを追加
ボタンひとつで
[js]$(function(){
});
[/js]
とか挿入出来る。
jQueryのコードヒント拡張もあるみたいなんだけど
jQuery API extension for Dreamweaver | XTND.US – Xtnd urslf! Extensions for software. Adobe Dreamweaver, Drupal, jQuery, Eclipse, Fireworks
Dreamweaaver側のショートカットを変更してるとインストール出来ないのよね
一応
C:\Users \[ユーザー名]\AppData\Roaming\Adobe\Dreamweaver [各バージョン]\ja_JP\Configuration\Menus\
のMenus.xmlを削除するとインストール出来る。
変更したショートカットが無くなってしまうので、WinMergeなんかを使って差分をコピったりするのもいいかも。
WinMergeの説明はこちら / ファイル比較ツールをWinMergeに変更す
WinMerge 日本語版本体はこちら / WinMerge 日本語版
Dreamweaverでaltの入っていない画象にとりあえず(空)を入れる.dwr
なんらかの理由でaltの無い画象がたくさんあるhtmlが出来てしまった時
とりあえず先にalt=””だけを置換で簡単に挿入するクエリー
準備
以下のzipをダウンロードして解凍、no-alt-no-future.dwrが出てくる。
とりあえずalt=””を挿入するdreamweaverの検索クエリー
対象html
いい感じにaltの入ってない画象があるhtml
![[image]altの無い画象](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110403_1.png "altの無い画象")
使い方
![[image]dwrを読み込んで置換](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110403_2.png ".dwrを読み込んで置換")
ctrl+Fしてクエリーのロードをクリックして
no-alt-no-future.dwrを選択
いきなり置換するのは怖いと思うので
まずはすべて検索で動作確認。
問題が無さそうなら任意の検索対象を選択してすべて置換。
検索対象を現在のローカルサイト全体なんかにすると一気に終わる。
結果
![[image]altが入る](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110403_3.png "とりあえず空のaltが入る")
ただ空のaltが入るだけ。
ダウンロード / とりあえずalt=””を挿入するdreamweaverの検索クエリー
Dreamweaver CS4 / CS5 cssコードヒントのwidowsを消す
やりたい事
cssのコードヒントで
widまで入力したら
widowsじゃなくwidthを表示させたい
対処法
CodeHints.xmlを変更する事で可能(自己責任で)
CodeHints.xmlの場所
cs4以前とcs5以降で対象のCodeHints.xmlの位置がどうも違う？
Windows7での例
cs4
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS4\configuration\CodeHints\CodeHints.xmlcs5
C:\Users\[ユーザー名]\AppData\Roaming\Adobe\Dreamweaver CS5\ja_JP\Configuration\CodeHints\CodeHints.xml実際の作業
CodeHints.xmlを開いて
Ctrl+F(検索)でwidowsを探す
多分3件ヒットするので
<menuitem label="widows" value="widows:" icon="shared/mm/images/hintMisc.gif" />の方をコメントアウト
で、コードヒントにwidowsが表示されなくなると思う。
こっちもコメントアウトしといたほうがいいのかな。
<menu pattern="widows:" additionaldismisschars=";:" allowwhitespaceprefix="true" displayrestriction="css">
<menuitem label="inherit" value="inherit" icon="shared/mm/images/hintMisc.gif" />
</menu>