OperaのDragonflyを使ってUserCSSを書く〜初級編〜
OperaのUserCSSがちっとも流行らないのでDragonflyを利用したUserCSSの書き方をエントリ*1しました。
『流行らない理由は簡単でOpera自体が流行ってないからです』というのはアレすぎで、UserCSSの本来の目的はOperaで閲覧時、サイト崩れをしてしまうダメWebサイトの修正が目的であり、blog広告を削ったレイアウトを作ったりするのはおかしな使い方なのかもしれません。またblogなどについている広告クリックや広告枠を売ることで生計を立てている人がWeb業界には多く、自ら首をしめるようなことをしないってのが流行らない理由ではないかと思っています。
準備するもの
- Opera9.5以上
- （文字コード指定できる）メモ帳(Windows端末だとサクラエディタとかTeraPadとか)
OperaはWebページ閲覧から開発環境までオールインなブラウザなのでfirefoxの用にゴキブリアドオンとかインストールする必要はありません。素晴らすぃ！
Opera9と10αでは挙動が若干異なりますが、言うほど支障がないのと、自分の環境がOpera10αなので10α版とDragonfly*2*3という開発ツールを用いて説明します。
ここではBrowser.jsというサイトの広告を例に説明します。
事前にBrowser.jsの管理人のXenoさんにこういうことをしたいって報告したら「うちのサイトを例にするなんざ言語道断だ！*4」というコメントいただきましたが、よく考えるとこれまで公開したUserCSSだって誰一人として管理者の了承を得ずして公開してますし、Browers.jsだからダメでGIGAZINEだからが良いとか、それは違うと思うので気にしないことにします。
リンク先を確認するとわかるのですが、1ページ辺りのボリュームがあり、ページ上段のバナー、左サイドバーのアフィリエイト広告、下段のAdsense、続きを読むをクリックしてからのAdsenseなどなど広告が表示されます。まずはページ上段のバナーを取り除くUserCSSを作成したいと思います。
※この記事は09/3/24現在の記事で閲覧者が見ているタイミングでどのように変わっているのかはわかりません。
※ある日全ての広告が消えているかもしれません。
※そんなことはよくある話なので脳内変換しつつ読み進めてください。
Dragonfly起動
Operaのメニューより、Dragonflyを起動させます。
（日）ツール > 詳細ツール > 開発用ツール
（英）Tool > Advanced > Developer Tools
昔から思ってんですけど、hogehogeツールじゃなくてDragonflyって名称書けばいいのに。
起動するとOperaの下段にDragonflyが立ち上がります。
起動したら今回の編集対象となるBrowser.jsをOperaで表示させます。
サイトの読み込みが完了しなければdragonflyが正しく読み込まないので、適時リロードしながら待ちます。
ここまでで躓いたら多分一生UserCSSに縁がない人なんだと思いますので、以下の文章を読むのはあなたのためになりません。ブラウザの閉じるか戻るをクリックすることをオススメします。
DragonflyでWebページのタグを調べる
Webページは一般的にhtmlファイルとCSSファイルで構成され、その中のheaderとbodyというhogehoge..です。
が、今回の説明はHTML知識がなくても広告を消せる！が目的なので割愛します。Browser.jsを開いた状態でDragonflyのメイン画面にあるDOMタブをクリックします。
こんな文字列が表示されていますでしょうか。
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - <html lang="ja"> + <head> + <body> </html>
firefoxのゴキブリなやつ*5と違って本当に不安定なのがDragonfly、永遠にβ版なのかと思わせるほどの糞っぷりです。うまく表示されないときはF5で再読み込みさせたり、Operaを終了→再起動として一度メモリを開放してあげてもいいかもしれません。複数Operaブラウザを立ち上げたり、タブを掴んでウィンドウ管理とかしてしまうと意外とうまく表示されないのであきらめてください。
Operaブラウザはそんなもんです、Operaユーザたるもの慣れているはずですよね。
次に画面上のヘッダ部分に設置されたバナー広告にマウスカーソルを合わせクリックします。おそらくマウスに併せて青い枠線が表示されるので容易にどこの部分をさしているのかわかると思います。
これはこのバナーのHTMLの構造をチェックするという意味で１クリックでｳﾏｰではありません。
クリックするとDragonflyのウィンドウにはクリックした箇所のHTMLの構造が表示されています。
帯上の色がついている前後を抜粋するとこんな感じです。
<a href="http://click.linksynergy.com......"> <img alt="富士通パソコンFMVの直販サイト富士通 WEB MART" border="0" src="http://www.fujitsu-webmart.com/image/id_10000077.jpg"/> </a> <img border="0" width="1" height="1" src="http://ad.linksynergy.com......"/>
それぞれについて簡単に説明します。
aタグはリンクの開始を意味し
<a href="http://click.linksynergy.com......">
imgタグは画像をWebページに表示させる呪文です。altは画像のタイトルで実態はsrc以下のURLにあります。
<img alt="富士通パソコンFMVの直販サイト富士通 WEB MART" border="0" src="http://www.fujitsu-webmart.com/image/id_10000077.jpg"/>
/aとはaから開始されたリンクの終了を意味しています。
</a>
まとめると、aタグからリンクが開始され画像を表示させて/aタグでリンクここまでって構造です。非常にシンプル。
丁度パンを加えて朝走っていたら曲がり角で女の子とぶつかって学校にいったら転校生で「あーあんたあの時のっ！」ってのと似てると思います（始まり的な意味で）
どうでもいい話はさておき、ここで一度Dragonfly君にはさよならしてもらいます。終了はわかりにくいですが、右側の×っぽいボタンをクリックすると終了します。
UserCSSを作成する
ここで一度Operaから離れCSSを編集するエディタを起動させます。
起動させたら、ファイル > 文字/改行コード指定保存を選択し、文字コードをUTF-8、改行コードをCR+LF変更し名前をつけて保存します。ここでは便宜上、browserjsadblock.cssという名前でデスクトップに保存しました。
文字コード指定保存までできればUserCSS作成作業の1/3ぐらい完了しました。
browserjsadblock.cssの1行目に@charasetを書き込みます。
これは外部CSSを書く時のルールで、ここからhogehogeという文字コードで記載しますよーという意味です。ローカルで起動しているUserCSSではなくてもよいですが、なんとなく書いてみました。
@charset "utf-8";
UserCSSを書く
話と作業をOpera側に戻します。
先ほどDragonflyで調べたHTMLありましたよね。そこを参照しながらUserCSSに以下のように書いてみます。
@charset "utf-8";
/* ヘッダ画像の削除 */
img[src^="http://www.fujitsu-webmart.com/image/"]{
display:none;
}「/*」〜「*/」で囲まれた部分はCSSとして認識させませんよ、という意味なのでメモ代わりのコメントアウトで記載する必要はないけど便宜上書いてみました。
display:none;は表示:させない！という呪文で、通して介錯すると、
画像（img）のURL(srcの"http://www.fujitsu-webmart.com/image/"）から始まるURL（^=）は表記（display）させない！（none）って感じです。
厳密には違うけどニュアンスで感じ取ればそれでいいんです。^=をフルパスで記載してもいいですが多分この画像広告は一定表示回数で変動するので変動しても/image/xxxxx.jpgって形と予測して^=の前方一致としました。
前方一致~=のはUserCSSを書く上で非常に諜報するものなので覚えておいて損はありません。
間違っている例としてhttp://www.fujitsu-webmart.com/image/*では前方一致として動きません。
ここまで記載して一度UserCSSを保存します。
Operaで作成したUserCSSを認識させる
Browser.jsを表示させて、右クリックから「このサイトの設定」（もしくはSite Preferences）を選択し、ダイアログが表示されたら「表示」（もしくはDisplay）タブに移動します。
このサイトのスタイルシートの部分を先ほど作成したbrowserjsadblock.cssに設定してOKを選択します。
これで、browserjs.blog102.fc2.comというドメイン配下において、browserjsadblock.cssというスタイルが適応されることになります。
適応させた後、Browser.jsを再読み込みさせます。そうすると富士通のバナー広告がなくなっていませんか？
なくなればUserCSSは大成功です。
パンの少女に例えると、自己紹介が終わった後、先生に「ん〜お前ら知り合いだったのか、じゃあ席となりで面倒みてやれ」ってなっ具合です。
これからようやく落とした消しゴムを拾って手が触れたり、お弁当それおいしそうだねパクっとか、ノド乾いたからそれちょーだい（え、それ間接キス！？）という大きなイベントがある感じです。
はいはい、例えがキモいですね、知ってますよ。
UserCSSの世界の入り口は非常に浅く、知識適当にそこそこでなんとかなります。
もっとOperaでUserCSSを書く
ここまでで作成したbrowserjsadblock.cssはhttp://www.fujitsu-webmart.com/image/〜の画像を全て非表示にするというものです。
これでは問題があります、バナーもなくなりますが、仮に作者側でコンテンツ部分に富士通のWebmartの画像を直リンで表示させていると、そこの部分も消してしまいます。そこで余計な部分を非表示にしないようにバナーについてもう少し細かい設定を仕込みます。
Dragonflyを立ち上げ、バナーをクリックまでは上記でやりました。そこからHTML的にもう少し辺りを見回します。
Dragonflyの際下段に
html > body > div#all > h1 > table >tbody > tr > td > a > img
という表記があります。これは
HTMLのbodyという要素の、div#allの中のh1の中の（略） aの中のimg（画像）です。という意味で、CSSにもそのまま適応することができます。
そこでbrowserjsadblock.cssを以下のように書き換えます。
@charset "utf-8";
/* ヘッダ画像の削除 */
h1 img[src^="http://www.fujitsu-webmart.com/image/"]{
display:none;
}こうするとh1の中の画像（fujitsu-Webmarc.com/image/*）の画像を非表示（display:none;）しますという意味になります。
こうやってCSSの適応範囲に制限を加えていくことで非表示の範囲を制限していきます。
同じように次はサイドバーにあるamazonの広告をflash広告を消してみたいと思います。
Dragonflyでamazonの広告をクリックしてWebページの構成を調べます。
なんだかよくわからない文字列が大量にあるしscriptとか書いてあるし、html > body > divとか広範囲でよくわかんねぇ！感じです。
そこで調べる対象を広告本体から広告周辺に変更します。
丁度、AMAZON.CO.JPという見出し文字がありましたので、そこの前後のHTML構造をDragonflyで読み取ります。
h6というのがAmazon.co.jpを表示させています。その下のほうになにやらflashplayerを使っている何かがあることまでわかります。
<p style="text-align:left"> <h6 style="text-align:left">Amazon.co.jp</h6> <p class="header" style="text-align:left"> </p> <div class="plugin-freearea" style="text-align:left"> <div align="center"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_ffe0773b-bcf6-482a-af78-8a2d739f8e68" width="160px" height="400px"> <noscript> <p/> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_134a21ff-2cf2-4ba3-8014-511fcfbe2a20" width="160px" height="600px"> <noscript> <p/> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_1b55218d-5493-45d9-a65b-52e224010f47" width="160px" height="600px"> <noscript> </div> </div>
ここで鋭い方は気がつくはずです。flashを構成する要素はobjectの要素なんだ！と。
そこで今度はdragonfly側のobjectの一番上の部分をクリックしてhtml全体の構造をチェックしてみます。
html > body > div#all > div#right > div.plugin-freearea > div > object#Player_ffe0773b-bcf6-482a-af78-8a2d739f8e68
画像はいい感じにあふれていますが、ちゃんとobject#player_ffe...と書いてあるのがわかりました。
そこでbrowserjsadblock.cssにこんな形で追記してみます。
@charset "utf-8";
/* ヘッダ画像の削除 */
h1 img[src^="http://www.fujitsu-webmart.com/image/"]{
display:none;
}
/* サイドamazon広告の削除 */
div#right div.plugin-freearea object{
display:none;
}object#Player_ffe0773b-bcf6-482a-af78-8a2d739f8e68と記載すると間違いなくそのものですが、あえて緩めの制限でobject全体になるようにしてみました。
最低限サイドのコンテンツの証と見られるdiv#rightの中の要素の〜というのを入れてあるので、本文のコンテンツに被害はでないし、サイドにあるobjectなんて大抵（私にとって）見る価値の薄いものなので気にせず非表示にしました。
もうここまでいくと、わざと寝坊し、朝遅刻寸前なスケジュールを組んで走り出しているあなたがいるわけです。
大抵の広告は上記した直接タグを探す方法と、前後のタグから探す方法で見つけられると思います。
最終的な完成イメージはこんな感じになります。
まずは初級、UserCSSで広告を消す方法でした。やる気と反響があれば、いつか中級としてUserCSSによるレイアウトの変更方法を書く予定？上級っていうと、UserJsと組み合わせてディレクトリ構成のページ（アメブロとか）に対応させる方法かな。
あと、転校生がパンをくわえて走っているのか、自分がパンをくわえて走っているのかで悩みました。実にどうでもいいですね。
