linkerは「人と人」「人と情報」「人と物」をつなぐデザインユニットです。

エディタの小ネタ(TeraPadとJedit X)

ttl20090605.jpg

こんばんは!@cremaです。

今日は@commonstyleこと教育デザイナーの境祐司先生と、相互にポッドキャストを録音しあってきました。

境先生の鞄からガジェットが出てくるたびに、@taku-workの眼がかつてないほどキラキラ輝いてゆくのを見逃さなかったワタクシですw

さてさて今日は、エディタの小ネタをお送りします。

きっと90%ぐらいの方がご存知の内容だと思いますが、残り10%の方に向けて書きますです><

Dreamweaverで全角アキを視覚化したい

DreamweaverでCSSを書く初心者の方が「CSSが効いていないんです!」と訴える時に頻繁に見受けられるケースとして、要らぬ場所に全角アキが入っているというものがあります。

Dreamweaverのコードビューは、デフォルトでは全角半角アキやタブなどを表示していませんので、ついうっかり全角アキを入れてしまうんですよね。そこでDreamweaverの[表示オプションアイコン→非表示の文字]でチェックを入れてみます。

ph20090605-001.jpg

すると、一応こんな見栄えになり、どこにアキが入っているかは一応見えるのですが...(このスクリーンショットだと4行目のおしりに全角アキがあります)。

ph20090605-002.jpg

半角アキを示す場所に「・」が入っているのもちょっとどきっとしますし、全角アキを示す「□」が通常の文字と同じ色なので、本当の文字の「□」と見分けがつかない等、ちょっと気になる点が多いのです。

そんなときにTeraPad

そこで私は、Windows環境の時はTeraPadをついオススメしてしまいます。

不可視文字を表示させるには、書類を開いたあと、[表示→オプション]を選択します。

ph20090605-004.jpg

さらに「表示」タブをクリックして、「マーク」欄にて表示させたいものにチェックをつけます。

ph20090605-005.jpg

そして、先ほどと同じCSSを見るとこんな感じです。

ph20090605-006.jpg

半角アキの部分は上向きの小さな「コの字」ですし、全角アキを示す「□」も文字とは違う薄いグレーで、アキが見やすいと思うのですがいかがでしょう。動きもさくっと軽いですしね。

MacならJedit X

Mac環境の場合は、Jedit Xがとてもいい感じです。

不可視文字を表示させるには、メニューバーの[表示→不可視文字の表示]で、表示させたいものを選択します。

ph20090605-007.jpg

そして、先ほどと同じCSSを見るとこんな感じ。

ph20090605-008.jpg

不可視文字が薄いグレーになっていることに加えて、セレクタやプロパティの部分もカラーリングが見やすいですね。

Jedit Xの「全角半角置換」と「書類の比較」が素敵

話は少し変わりますが、Jedit Xで私が大好きな機能が、高機能な全角半角の置換とプラグイン(JDiff X)を使った書類の比較です。

Webサイト制作の際、クライアントさんからWordなどのデータをいただいた時、どうしても全角英数文字が混ざっていることがあります。

これを半角英数に統一したいのですが。。。

全角を半角に置換するエディタもあったりしますが、書類全体(または選択範囲全体)に効いてしまうため、カタカナも半角になってしまうのが悩みどころだったりします(私が知らないだけかも)。

Jedit Xの場合、[ツール→全角→半角...]を選択すると、こんなダイアログボックスが現れます。

ph20090605-009.jpg

どの文字を半角に置換するかを細かく設定することができ、さくっと書類全体に反映させることができるので、とってもらくちん。半角全角入り混じった原稿をいただいても、笑顔で対応できますw

最後に、似通ったファイルのわずかな違いを発見したい場合には、有料のプラグイン「JDiff X」を使います。

[ファイル→書類を比較する...]を選ぶと、こんな2カラムのウィンドウが現れますので、比較したい書類をそれぞれ左右の空欄にドロップします。

ph20090605-010.jpg

それだけで、違う部分をしっかり教えてくれるわけですよ。

ph20090605-011.jpg

プログラマの皆さんは普通にDiffをとっていらっしゃると思うのですが、私のようなデザイナーには色々難しいことが多いので、こういうらくちん機能はありがたいのです。

というわけで、今日の小ネタもやわらかな感じでお送りしました。まる。