検索と置換
2001/11/29
=====================================================[ No.15 2001/11/29 ]==
Dreamweaver Programming < 検索と置換 >
[ BACK NUMBER ]
http://www.game3rd.com/dreamweaver/mail/
===========================================================================
◆検索・置換
===========================================================================
前回予告したとおり、検索条件を拡張ファイルとして配布する方法を説明します。
Dreamweaverの検索/置換機能は通常のエディタと比べると強力で、タグや属性を条件
に加えることができます。が、検索機能についてヘルプには詳しく書かれていない
ので、便利さがあまり伝わってないかと思います。そこで、まずは検索機能の使用法
から説明します。
1.ダイアログの表示
検索・置換はドキュメントウィンドウ、サイトウィンドウのどちらからでも実行する
ことができ、メニューの[編集]-[検索/置換]を選択すると、設定ダイアログが表示さ
れます。ダイアログは前バージョンまでは分かれていたのですが、１つのダイアログ
に統合されました。
ダイアログのオプションは以下のようになっています。
[検索場所]
検索・置換の適用範囲を設定します。
○このドキュメント
現在編集中のドキュメント
○ローカルサイトすべて
サイト内に含まれるすべてのHTML
○サイト内の選択したファイル
サイトウィンドウ上で選択しているファイルでフォルダを選択している場合は
そのフォルダ内のファイルが対象になります。
○フォルダ...
指定したフォルダ内のファイルが対象になります。
"ローカルサイトすべて"を実行すると処理に時間がかかるので、複雑な検索条件を
実行する場合にテストをした方がいいので、最初はサイトウィンドウ上でいくつか
のドキュメントを選択して"サイト内の選択したファイル"を実行した方がいいで
しょう。
[検索する文字列]
検索したい内容を検索方法を次の４種類の中から選択します。
○ソースコード
HTMLタグを含めたすべてのテキストを範囲として、テキスト検索を行います。
○テキスト
HTMLタグをのぞいた通常ブラウザに表示されるテキストを範囲として、テキスト
検索を行います。
○特定のタグ
指定したタグを検索します。[任意]とした場合は、すべてのタグが検索対象
になります。
○テキスト(高度)
通常のテキスト検索にさらに条件を設定したい場合に使用します。
"特定のタグ"、"テキスト(高度)"ではさらに検索条件を設定することができます。
●属性あり
[特定のタグ]を選択した場合に使用できる条件です。指定した属性の属性値を
持っているタグが検索されます。属性名、検索条件、検索する属性値を設定し、
属性値を[任意の値]にするとすべての属性値が対象になります。
●属性なし
[特定のタグ]を選択した場合に使用できる条件です。指定した属性の属性値を
持たないタグが検索されます。
●含んでいる
[特定のタグ]を選択した場合に使用できる条件です。検索するタグ内に指定した
テキスト、タグを含んでいるタグが検索されます。
●含んでいない
[特定のタグ]を選択した場合に使用できる条件です。検索するタグ内に指定した
テキスト、タグを含んでいないタグが検索されます。
●タグ内部
タグ・テキストで使用できる条件です。指定したタグ内に含まれているタグ・
テキストが検索されます。
●タグ内部以外
タグ・テキストで使用できる条件です。指定したタグ内に含まれていないタグ・
テキストが検索されます。
上の６つの条件は[+][-]ボタンで重ねて設定することができるようになっていて、
より細かく設定できるようになっています。また、最初に設定した[検索する文字列]
に対して条件を付加していくのではなく、１つ上の条件に対して適用されるもの
なので、条件の上下関係に注意して下さい。
さらに、入力するテキスト(タグ、属性値)に対して大文字小文字の区別、正規表現
などのオプションを設定することができます。
○大文字と小文字を区別する
チェックすると大文字と小文字の区別して検索します。
○ホワイトスペースの違いを無視
ブラウザの解釈と同じようにスペースの数を無視します。
○正規表現を使用
正規表現を使ってテキストの条件を設定します。正規表現についてはヘルプを参照
して下さい。
と、ここまでが検索で設定する項目です。残りが置換で使用する項目です。
○アクション
[検索する文字列]に"特定のタグ"を設定した場合に設定する項目です。そのタグに
対して行う処理を選択します。
●タグとコンテンツを置換
見つかったタグとタグ内のコンテンツを入力したテキストと置き換えます。
●コンテンツのみ置換
見つかったタグ内のコンテンツだけを入力したテキストと置き換えます。
●タグとコンテンツを削除
見つかったタグとタグ内のコンテンツすべてを削除します。
●タグを除去
見つかったタグだけを削除し、タグ内のコンテンツを残します。
●タグを変更
見つかったタグを別のタグに置き換えます。ただし、要素から空要素への置き換えは
できません。
●属性を設定
見つかったタグに属性を設定します。
●属性を削除
見つかったタグから属性を削除します。
●開始タグの前に追加
開始タグの前に入力したテキストを追加します。
●終了タグの後に追加
終了タグの後に入力したテキストを追加します。
●開始タグの後に追加
開始タグの後に入力したテキストを追加します。
●終了タグの前に追加
終了タグの前に入力したテキストを追加します。
○置き換え後の文字列
[検索する文字列]に"ソースコード"、"テキスト"、"テキスト(高度)"を設定した
場合に設定する項目です。検索して見つかったテキストと置き換えるテキストを
入力します。
設定項目をずらっと説明しましたが、わかりにくいと思うので例題を用意しました。
◆例題１ 見出しの変更
===========================================================================
h1タグからh3タグへと置換を行う条件
[検索する文字列]：特定のタグ h1
[アクション]:タグの変更 h3
H1のタグを検索するので、[検索する文字列]は"特定のタグ"となり検索するh1を
入力します。h3タグへ置き換えるには、[アクション]で"タグの変更"と選択し、
H3と入力します。
◆例題２ 代替テキストの空設定
===========================================================================
画像に対して代替テキストを設定します。ただし、すでに設定されている代替テキスト
はそのまま残すようにします。
[検索する文字列]：特定のタグ img
オプション 属性なし alt
[アクション]:属性の追加 alt 変更 : ""(何も入力しない)
imgタグを検索するために[検索する文字列]は特定のタグとします。代替テキストが
設定されているimgタグを除外するために、[+]ボタンをクリックして、条件を追加
します。条件は"属性なし"を選択して、altを入力します。これで代替テキストの
設定されていないimgタグだけが見つかります。あとは、[アクション]で
"属性の追加"を選び、altと入力すれば、alt=""をimgタグに追加できます。
◆例題３ 正規表現を使った検索
===========================================================================
Fireworksを使ってスライス書き出しを行うと、テーブルが崩れないように透明GIF
(shim.gif)が作成されますが、このshim.gifのタグに対して無駄な属性が設定される
ようになっています。(Fireworks4)そこで、thim.gifが挿入されているimgタグから
不要な属性を取り除く置換を行います。
[検索する文字列]：特定のタグ img
オプション 属性あり src = [\w\/\.]*shim\.gif
[アクション]:属性の削除 name
[正規表現を使用]にチェック
src属性にshim.gifが含まれているimgタグだけを探すのですが、フォルダの階層が
違うと../や/images/とフォルダ名が入ることがあります。この部分の差異をなくす
ために、フォルダ部分と画像名と正規表現を使って表します。[\w\/\.]*shim\.gif
が正規表現で表したものです。これで、shim.gifの入ったimgタグがすべて見つかる
ので、あとはname属性を削除するように[アクション]を設定するだけで完了です。
◆条件の保存・呼び出し
===========================================================================
３つの例を紹介しましたが、条件が複雑になると毎回設定するのが面倒です。そこで
条件を保存してやれば、再利用できます。
条件を保存するには、フロッピーのアイコンをクリックします。保存ダイアログが
表示されるので、ここでファイル名を入力すれば、その名前で条件が保存できます。
保存した条件を使用するときは、フォルダアイコンをクリックすれば、選択ダイア
ログが表示されるので、保存した条件ファイルを選択します。自動的に条件が設定
されていつでも実行できる状態になります。
この条件はXMLファイルで保存されており、Win/Mac共通で使用することができるので
同じ会社内、チーム内で共有できます。
◆拡張機能の作成
===========================================================================
条件ファイルをコピーして使えばいいんですが、フォルダに階層をたどるのはこれまた
面倒です。そこで、拡張ファイルを作成します。拡張ファイルとして提供すれば
Configuration/Queriesへ自動的にコピーし、Extension Managerを使って
インストールの管理ができます、作成自体は、ひな形を用意しておけば簡単です。
ひな形は以下のようになります。
--------------------------------------------------------------------------
<?xml version="1.0" encoding="iso-x-sjis" ?>
<macromedia-extension
name="(拡張ファイル名)"
version="(バージョン)"
type="query">
<author name="(作成者)" />
<products>
<product name="Dreamweaver" version="3" primary="true" />
</products>
<description>
<![CDATA[(説明)]]>
</description>
<ui-access>
<![CDATA[(アクセス方法)]]>
</ui-access>
<files>
<file source="(ファイル名)" destination="$dreamweaver/configuration/Queries" />
</files>
</macromedia-extension>
--------------------------------------------------------------------------
MXIファイルはXML形式で記述し、テキストエディタで編集できます。()内に必要な
項目を入力して、拡張子をMXIとして保存します。ファイル名はMXIファイルからの
相対パスで入力して下さい。
MXIファイルの仕様は「ULTRADEVELOPER WEB MASTERING BOOK」に書いてあるので
そちらを参照して下さい。m(__)m
作成したMXIファイルからExtension Managerで拡張機能(MXP)を作成します。
1.
メニューの[ファイル]-[拡張機能の作成...]を選択します。
2.
ファイル選択ダイアログが表示されるので、MXIファイルを選択します。
3.
その後、保存ダイアログが表示されるので、保存ファイル名を入力すれば
作成開始です。ここでエラーが出なければ完成となります。
4.
作成した拡張機能が正しくインストールできるか、実際にインストールしてテスト
して下さい。
とここまでするなら、コピーした方が早いんじゃないかという感じですが、一度
作成してしまえば、この作業は必要ないので、自分が辛いだけで使うユーザー
はです。(^^;
◆作成した拡張機能
===========================================================================
前回のメルマガ発行以降に作成した拡張機能です。５つもできました。仕事のペース
がいい感じで作業時間を確保できてます。
○XML宣言の無効化
XHTMLを編集する場合にDreamweaverではXML宣言が先頭行にあると文法エラーを起こす
ので、XML宣言の部分をデータトランスレータでコメントタグに置き換えてエラーを
出ないようにします。内部的に置き換えているだけなのでソースに影響はありません。
http://www.game3rd.com/dreamweaver/extensions/info/69.htm
○HTML Tidyの起動
DreamweaverからHTML Tidyを呼び出し、結果をドキュメントウィンドウに表示します。
HTML Tidyのパスが通ってないと実行できないので、注意して下さい。
http://www.game3rd.com/dreamweaver/extensions/info/70.htm
○タグの後に付くスペースを削除
置換を使って、タグと改行の間に入るスペースを削除します。
http://www.game3rd.com/dreamweaver/extensions/info/71.htm
○HTMLEditFormat(ColdFusion)
UltraDeveloper専用の拡張機能です。データ場印でぃんぐぱねるによって挿入した値を
HTMLEditFormat関数を使ってフォーマットできます。引数はデフォルトで-1を設定
するようになっているので、変更したい場合は、手修正でレベルを変更して下さい。
http://www.game3rd.com/dreamweaver/extensions/info/72.htm
○CSE HTML Validatorの起動
CSE HTML Validator(http://www.htmlvalidator.com/)によるチェックを行い、
レポートします。
http://www.game3rd.com/dreamweaver/extensions/info/73.htm
○ライブラリ項目の検索
ドキュメント内から指定したライブラリ項目を検索し、レポートします。英語版のみ
の配布です。
http://www.game3rd.com/en/dreamweaver/info/51.htm
◆FireCracker-素材編
===========================================================================
Siliconcafeの森川さんがCD-ROMを出されましたすべてFireworksによって作成された
素材集で、すべてオリジナルのPNGが付属ととんでもない素材集です。5000種類以上
の素材が入って、2800円で売られているのでお得じゃないかと思います。
http://www.siliconcafe.com/goods/cdrom/firecracker_p1/index.html
これには僕は関わってないんですが、次のサイト編で拡張機能を提供しています。
かなりすげーと自分で思っているんですが、強力な拡張機能を作りました。(^^;
いずれ発表できると思います。
◆おしまい
===========================================================================
かなり期間が空いてしまってすみません。前回のメルマガで配信日を決めればよかっ
たんですが、甘えてしまいずるずると今日になってしまいました。次号は甘えの
ないように配信日を決めます。次は12月16日にします。ネタとしては、Fireworksの
連携第２弾をやってみようと思います。
===========================================================================
Dreamweaver Programming
発行、編集： 植木 友浩
登録、解除： http://www.game3rd.com/dreamweaver/mail/
注意： 記載された情報は各人の責任においてご利用ください。
この記事により生じるいかなる損害についても責任は
負いかねますのでご了承ください。
Copyright(C) 1999-2001. Tomohiro Ueki. All rights reserved.
===============================================[ Magazine ID: 0000021775 ]=
Thank you!
---------------------------------------------------------------------------
このメールマガジンは、インターネットの本屋さん『まぐまぐ』を利用して
発行しています。( http://www.mag2.com/ )
---------------------------------------------------------------------------
