以下のような画像の広告を削除するProxomitron用フィルタを作成してみましょう。
Webページサンプル値上がりしている理由は深く考えないことにしましょう。(^^;
htmlソースを見る前に画像の場所がすぐ分かるように、画像の情報を取得しておきます。
[右クリック -> 画像情報を表示] (IEなら [プロパティ] が該当します) で画像の情報を参照して下さい。
「アドレス」をクリップボードへコピーします。(コピーするアドレスは1つでOKです)
htmlソースをテキストエディタで開き、コピーしておいたアドレスで検索します。
あれ…、見つかりませんね?
画像のアドレスは合っているはずですが、相対URLで書かれているのかもしれません。
とりあえず、検索ワードの初めの方を削って、「ファイル名」だけにして再度検索してみて下さい。
ファイル名は "ad1.png", "ad2.png" のどちらかになるはずです。
<a
href=
'http://sample.adserver.co.jp/'
>
<img
width=
'512'
height='64'
src='../sample_ad/ad1.png'
alt='ad1'
/>
</a>
<br
/
>
<a
href=
'http://test.adserver.co.jp/'
>
<img
width=
'512'
height='64'
src='../sample_ad/ad2.png'
alt='ad2'
/>
</a>
今度は見つかりましたね。
htmlソースを見ると、先程の検索でHITしなかった理由が分かります。
画像を表すタグはimg要素ですが、URIを示すsrc属性値に相対URLが使われています。
Webページ制作者はファイルの場所を指定する時に、相対URL, 絶対URLという2つの方法を使い分けます。
相対URLとは現在のページを基点として、相対的にファイルの場所を指定する方法です。
対して、絶対URLは現在のページに関わらず、どこから見ても分かる絶対的なファイルの場所を指定します。
もう一度、htmlソースを見て下さい。
a要素のhref属性値に http://sample.adserver.co.jp/
が指定されているのが分かりますね。
それが絶対URLです。
http://
で始まるアドレスは絶対URLと考えて下さい。
img要素のsrc属性値にある ../sample_ad/ad1.png
は相対URLです。
現在見ているこのページを基点として、1つ上の階層に移り、"sample_ad" というディレクトリ内の "ad1.png" に画像ファイルがある事を示しています。
ファイル名, ディレクトリ名 だけで構成されているアドレスは相対URLと捉えて下さい。
相対URLには以下のような種類があります。
http://abc.com/xyz/prx/qed/index.html
" とした時の相対URL, 絶対URL
page.html
http://abc.com/xyz/prx/qed/page.html
"dir/page.html
http://abc.com/xyz/prx/qed/dir/page.html
"/page.html
http://abc.com/page.html
"./page.html
http://abc.com/xyz/prx/qed/page.html
"../page.html
http://abc.com/xyz/prx/page.html
"../../page.html
http://abc.com/xyz/page.html
"さて、htmlソースに書かれているどの文字列にマッチさせるべきかを見てみましょう。
ポイントは「ユニークな文字列」を見つけることでしたね。
先に、各要素について見てみます。
a要素は前回使った要素なので説明を飛ばします。
img要素は画像を貼る要素です。src属性で指定した画像ファイルを参照し、ページに表示します。
br要素は改行を表します。
ユニークな文字列の1つには、a要素があります。
a要素で括った内部にimg要素を含んでいますから、a要素を消せば画像ごと削除できます。
もう一つのユニークな文字列は、img要素です。
img要素を消しても、a要素が残りますがリンクを貼る対象がなくなるので画面上から消えてくれるのです。
今回はimg要素を消す方法を試してみましょう。
<img
width=
'512'
height='64'
src='../sample_ad/ad1.png'
alt='ad1'
/>
<img
width=
'512'
height='64'
src='../sample_ad/ad2.png'
alt='ad2'
/>
img要素からユニークな文字列となる属性を探すと…、これは簡単ですね。
画像を相対URLで指定しているsrc属性がユニークです。
他の属性については今回は考慮しなくてよいでしょう。
では、ステップを踏みながら少しずつフィルタを作成していきます。
前回と似た工程がいくつかありますが、復習のつもりでもう一度読んでみてください。
<img\s
img要素に制限するため、 <img
と記述します。
img要素にはsrc属性が指定されているため、<img
となる事は確実です。
...src=...>
ですので、半角スペースを保証する \s を追記します。
<img\s[^>]++src=
次にsrc属性まで消費しなければならないわけですが、src属性はimg要素の内に収まっていなければなりません。
src属性は <img
で始まって、>
で終わる文字列の中に存在しなければならないわけです。
そのために、[^>]++
を使います。
[^>]
は文字クラスを用いており、「> ではない1文字」を示します。
そして、++ は後ろをみながら直前の文字を繰り返します。
src=
が後ろにくるまで、「> ではない1文字」を繰り返すこととなり、src属性がimg要素の内にあることを保証できます。
最後に、前後の空白を吸収してくれるメタキャラクタ = を追記します。
<img\s[^>]++src=$AV(../sample_ad/ad[12].png)
$AV でクオートの有無に関わらず、src属性値にマッチさせます。
src属性値の中で文字クラスの [12]
を記述し、2つの画像ファイル名の違いを吸収します。
<img\s[^>]++src=$AV(../sample_ad/ad[12].png)[^>]+>
最後に、[^>]+>
を記述します。
+ は「後ろを見ない繰り返し表現」ですが、後ろに1文字が来る場合は [^>]
と組み合わせることで有効に作用します。
仕上げに、フィルタ名, URL欄 を埋めます。
以下は完成したフィルタをエクスポートしたものです。
[Patterns] Name = "Kill <img> ad" Active = TRUE URL = "$TYPE(htm)" Limit = 256 Match = "<img\s[^>]++src=$AV(../sample_ad/ad[12].png)[^>]+>"
$TYPEで、フィルタの有効範囲を「Webページ」に制限します。
Replace欄に何も書かない事で、「削除する動作」を実現しています。
それでは、最終チェックです。
広告を含むhtmlソース(htmlソース1) をテストウインドウの <テストするHTMLを入力> と書かれている欄に記述して、テストしてみてください。
テストで該当部分が削除されることを確かめてから、ブラウザでこのページを更新してください。
1つのフィルタで2度マッチしてくれるのはお得ですね。(^^;