BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » るーも» 『作業の効率化に!?』 エディタ(主にDreamweaver)編

このエントリーをはてなブックマークに追加

『作業の効率化に!?』 エディタ(主にDreamweaver)編

   投稿日: 2015/03/28    投稿者:るーも

どうも!るーもです!


早速ですが、前回に引き続き?Web制作ツールに関することを書いていきます!


今回はDreamweaverなどのエディタについて。


毎度恒例ですが、知ってるものも多々あるかと思いますので、
その辺はスルー頂き、気になるものがあったら試してみてください。


------------------------------------
■コードカラーリングについて
------------------------------------
コーダーさんがよくDreamweaverの画面を黒くしているのを見ると思います。
なぜかあれを見るととても仕事が出来る人のような気がして、
ちょっと仕事に慣れてくると憧れるものです・・w


実際になぜ色を変えるのかは個々人に理由があるかと思いますが、
自分の場合は白よりもソースコードが見やすいのと白よりもブルーライトが
軽減されている?気がするのが一番の理由です。(最初は憧れ的なものでしたが・・)


ruumo_codecoloring.jpg


【設定方法】
①Colors.xmlをダウンロード


いろいろな方が作ったものが配布されているので、そちらを利用することをおすすめします。
自分でコツコツと変更することも出来ますが、おそらくかなりの時間がかかるので、
気に入るものを探して落としたほうが楽で無難です。(下記参考)
それを元に改良することをおススメします。


参考URL:http://blog.1dz.jp/?eid=793

②Colors.xmlを設置
ダウンロードしたファイルを解凍し、Colors.xmlを次の場所にコピーします。
念のため、Colors.xmlのバックアップを取っておくのをおすすめします。


○Windowsの方
C:\Users\<ユーザー名>\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\configuration\CodeColoring


○Macの方
/Users/<ユーザー名>/Library/Application Support/Adobe/Dreamweaver CS6/ja_JP/Configration/CodeColoring


※OSによって、格納場所が微妙に違うことがありますが、基本同じような構造ですので、参考までに。

③Dreamweaverを起動して、微調整。
ダウンロードしたColors.xmlによって、微調整が必要なものもありますので、
[環境設定]→[コードカラーリング]より調整してください。
また、変更などもここから行えます。


------------------------------------
■Dreamweaverの設定について
------------------------------------
いろいろな方が作成したソースコードを改修や修正をすることがありますが、
見ていると、スペースやインデントがかなり混ざったりぐちゃぐちゃになっているものがあったりします。

自身で作成する際にそういった事にならないよう予め表示できる方法があります。
目視でわかるようにすることで、作成時にぐちゃぐちゃにならずに済みます。
見やすいソースコードになっていると他の方が修正などする際にも楽だと思いますので、是非お試しください。

【設定方法】
Dreamweaverを起動し、[表示]→[コードビューオプション]→非表示の文字にチェック


ruumo_highlight.jpg

★余談ですが・・★
Dreamweaverを起動し、[表示]→[コードビューオプション]→無効なコードをハイライト表示にすることで、ネストエラーしたコードなどエラーコードが黄色になりますので、目視でのコーディングミスを防ぐことも出来ます。


------------------------------------
■半角・全角検索・置換方法について
------------------------------------
ruumo_translate.jpg

【方法】
①Dreamweaverの拡張機能を使う場合
(簡単だけど、少し精度に難あり?)

拡張機能にて半角・全角変換を行ってくれるものがあります。
下記よりDLしてもらって、DWにインストール後、
コマンド⇒その他⇒機種依存文字・全角半角の変換で実行できます。

詳しくは下記を参照ください。
http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_conversion_ext.html

※実体験上、予期せぬ部分まで置換してしまう事がありますので、
必ずバックアップを取ってから実行しましょう。


②正規表現を使う場合
(ちょっと難しい?けど覚えるといろいろ便利、どのエディタでも使えるはずです。)

検索画面を表示し、正規表現を使用にチェックマーク入れて下記を検索。

半角文字検索の場合、 [。-゚] を入力。
全角文字検索 [A-Z] [a-z] [0-9] を入力。

[A-Z]を検索させると全角文字のAからZまで検索してください。DWさんお願いします。って感じです。

※筆者もあまり正規表現については詳しくはないので、気になる方は検索してみてもらえると。。です!


思いつくものをざっと書いてみましたが、
みなさんで使っている、行っている便利な機能などありましたら、
是非教えてください!

それではまたーヾ(。・ω・。)ノ

カテゴリ:

TOPへ