XHTMLと広告（邪道編）

手動広告する方法。 もちろん、王道編という物は存在しない。

XHTMLとは？

XHTML = XML + HTML

上で全てを語り尽くしているんだけど…。

XMLはXML 1.0 SEを 元にしてる。

他のXHTMLではそれぞれ参照した仕様書を明記してあるので参照して欲しい。 必ずしも最新版を参照しているとは限らない。

XHTMLの種類

正式に仕様が発表されている物としては次の物がある。

他にも草案段階としては、

などがある。

表記について

広告HTML/XHTMLタグを書くにあたって 便宜上ユーザー名をuser、サーバ名をs*とする。 また、わかりやすいように改行及びスペースを入れている。 実際の設置時は>と<に隙間がない方が好ましい。 そうしないと、余計なスペースがレンダリングされる。

広告を手に入れる

管理メニューから、広告HTMLが手に入る。 人によって異なるので注意しよう。

広告HTMLは次のようになっているだろう。

通常

<IFRAME HEIGHT="60" WIDTH="468" FRAMEBORDER="0" MARGINHEIGHT="0"
        MARGINWIDTH="0" SCROLLING="NO" ALLOWTRANSPARENCY="TRUE"
        SRC="http://ad.xrea.com/ad_iframe.fcg?site=user.s*.xrea.com">
  <A HREF="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com"
     TARGET="_BLANK" >
    <IMG SRC="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com"
         HEIGHT="60" WIDTH="468" BORDER="0">
  </A>
</IFRAME>

ポップアップ

<SCRIPT LANGUAGE="JAVASCRIPT">
  <!-- 
    window.open("http://ad.xrea.com/ad_pop.fcg?site=user.s*.xrea.com",
                "XREAADPOP",
                "width=500,height=70"); 
  //-->
</SCRIPT> 
<NOSCRIPT>
  <A HREF="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com"
     TARGET="_BLANK" >
    <IMG SRC="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com"
         HEIGHT="60" WIDTH="468" BORDER="0">
  </A>
</NOSCRIPT>

広告を挿入する

一つ一つ見て行こう。

注意点がある。 タグの付け方によってブロックレベルになったり、 インラインレベルになったりする。 その広告HTMLがインラインかブロックかは明記するが、 ミスクとはどちらにでもとることが出来る*1。 なお、bodyの内容はブロックレベルだけであることにも注意して欲しい。

XHTML 1.0 Strict

XHTML 1.0 SEを 元にしている。 XHTML 1.0 TransitionalとXHTML 1.0 Framesetも同様。

正直に言うと、XHTML 1.0 Transitionalを使った方がいい。 それでも使いたいというのであれば、 おおむねXHTML 1.1と同様なのでそちらで述べる。

XHTML 1.1との違いはモジュールが使えないこととiframeのくわえ方。 iframeは、

<!ENTITY % special
    "br | span | bdo | map | object | img | iframe ">

としてくわえる。

XHTML 1.0 Transitional

これは簡単だ。

基本的にはこの二つだけである。

通常広告(インライン)

<iframe height="60" width="468" frameborder="0" marginheight="0"
        marginwidth="0" scrolling="no"
        src="http://ad.xrea.com/ad_iframe.fcg?site=user.s*.xrea.com">
  <a href="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com"
     target="_blank" >
    <img src="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com"
         height="60" width="468" border="0" alt="ad image" />
  </a>
</iframe>

ポップアップ広告(ミスク)

<script type="application/x-javascript" language="javascrpt">
  window.open("http://ad.xrea.com/ad_pop.fcg?site=user.s*.xrea.com",
              "XREAADPOP",
              "width=500,height=70"); 
</script> 
<noscript>
  <div>
    <a href="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com"
       target="_blank" >
      <img src="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com"
           height="60" width="468" border="0" alt="ad image" />
    </a>
  </div>
</noscript>

他には次のことに注意しなければならない。

XHTML 1.0 Frameset

XHTML 1.0 Transitionalと同様。

XHTML 1.1

XHTML 1.1を 元にしている

XHTML 1.0 Transitionalと比べて、 色々な物が制限される。 主な物は次の物が使えなくなる。

iframeは仕方がないので外す。 これはXREAでも認められている *5。

ベース

とりあえず、使えない物を省いて作ってみた。

通常広告(インライン)

<a href="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com">
  <img src="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com"
       height="60" width="468" alt="ad image" />
</a>

しかし、このままでは、 広告をクリックすると自分のページが消えて、 広告主のサイトが表示されてしまう。 そもそもリンクにより新しい窓を開くか開かないかは、 ユーザーが選択すべき物であるという考え方があるので、 それでもかまないと言う人もいるかも知れないが、 やはりこのままでは駄目だろう。

targetあり

では、どうしたらいいのか？ XHTML 1.1はモジュールベースだ。 よって、ユーザーがモジュールを加えることは許されている。 嬉しいことに、target属性のみのモジュールが用意されさている。 よって、それを加えることにしよう。

ドキュメント宣言*6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[
  <!ENTITY % xhtml-target-1.mod 
      PUBLIC "-//W3C//ELEMENTS XHTML Target 1.0//EN"
      "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-target-1.mod" >
  %xhtml-target-1.mod;
]>

このままではvalidなxmlでないので、直接必要な物だけ取り入れる。

安全なドキュメント宣言*7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[
  <!ATTLIST a
      target  CDATA  #IMPLIED
  >
]>

でも、せっかくtargetのモジュールがあるのに、使わないのはもったいないので、 Post-Framework Redeclaration placeholderを利用する。

xhtml-postfw-redeclなドキュメント宣言*8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[
  <!ENTITY % xhtml-postfw-redecl.module "INCLUDE" >
  <!ENTITY % xhtml-postfw-redecl.mod
      PUBLIC "-//W3C//ELEMENTS XHTML Target 1.0//EN"
      "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-target-1.mod" >
]>

広告は簡単、iframeの中身だけ。

通常広告(インライン)

<a href="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com"
   target="_blank" >
  <img src="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com"
       height="60" width="468" alt="ad image" />
</a>

targetとiframeあり

ついでだからiframeも加えてしまおう。*9

ドキュメント宣言*10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[
  <!ENTITY % xhtml-target-1.mod 
      PUBLIC "-//W3C//ELEMENTS XHTML Target 1.0//EN"
      "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-target-1.mod" >
  %xhtml-target-1.mod;
  <!ENTITY % xhtml-iframe-1.mod 
      PUBLIC "-//W3C//ELEMENTS XHTML Inline Frame Element 1.0//EN"
      "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-iframe-1.mod" >
  %xhtml-iframe-1.mod;
  <!ENTITY % Inline.extra "| %iframe.qname;" >
]>

同様に、必要と思われる物だけ取り込む。

安全なドキュメント宣言*11

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[
  <!ATTLIST a
      target       CDATA               #IMPLIED
  >
  <!ELEMENT iframe (a)>
  <!ATTLIST iframe
      src          CDATA               #IMPLIED
      frameborder  ( 1 | 0 )           '1'
      marginwidth  CDATA               #IMPLIED
      marginheight CDATA               #IMPLIED
      scrolling    ( yes | no | auto ) 'auto'
      height       CDATA               #IMPLIED
      width        CDATA               #IMPLIED
  >
  <!ENTITY % Inline.extra "| iframe" >
]>

通常広告(インライン)

<iframe height="60" width="468" frameborder="0" marginheight="0"
        marginwidth="0" scrolling="no"
        src="http://ad.xrea.com/ad_iframe.fcg?site=user.s*.xrea.com">
  <a href="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com"
     target="_blank" >
    <img src="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com"
         height="60" width="468" alt="ad image" />
  </a>
</iframe>

これで、XHTML 1.0 Transitionalとほぼ同じになる。

独自外部DTDモジュール

ここまで来たのなら独自に作ってしまおう。 次のようなファイルを作り、適当な場所に置く。

xhtml-prefw-redecl.mod

<!ENTITY % Inline.extra "| iframe" >

xhtml-postfw-redecl.mod

<!ENTITY % xhtml-target-1.mod 
    PUBLIC "-//W3C//ELEMENTS XHTML Target 1.0//EN"
    "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-target-1.mod" >
%xhtml-target-1.mod;
<!ENTITY % xhtml-iframe-1.mod 
    PUBLIC "-//W3C//ELEMENTS XHTML Inline Frame Element 1.0//EN"
    "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-iframe-1.mod" >
%xhtml-iframe-1.mod;

上のファイルを置いた場所をhttp://user.s*.xrea.com/DTD/とすると、 次のようにすればよい。

ドキュメント宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[
  <!ENTITY % xhtml-prefw-redecl.module "INCLUDE" >
  <!ENTITY % xhtml-prefw-redecl.mod SYSTEM
      "http://user.s*.xrea.com/DTD/xrea-prefw.mod" >
  <!ENTITY % xhtml-postfw-redecl.module "INCLUDE" >
  <!ENTITY % xhtml-postfw-redecl.mod SYSTEM
      "http://user.s*.xrea.com/DTD/xrea-postfw.mod" >
]>

JavaScript版

targetを使わずにJavaScriptで同等の機能を得ることが出来る。 だが、JavaScriptを切られてしまうと無意味なので、あまりお勧めできない。

なお、この章の作成にあたり、 kzhr氏の日記を参考にした。

方法はたくさんあると思うのだが、とりあえず、一例を挙げる。

通常広告(インライン)

<script type="application/x-javascript">
  function ad(){
      window.open("http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com",
                  "_blank");
      return(null);
  }
</script>
<a href="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com"
   onclick="ad()">
  <img src="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com"
       height="60" width="468" alt="ad image" />
</a>

ポップアップ

問題はtarget属性のみだ。 まあ、JavaScriptなんて今時どこにでもあるから、 無視してしまおう。 ということで、XHTML 1.0 Transitionalとほぼ同じになる。 なお、script要素のlanguage属性は使えないので注意。

ポップアップ広告(ミスク)

<script type="application/x-javascript">
  window.open("http://ad.xrea.com/ad_pop.fcg?site=user.s*.xrea.com",
              "XREAADPOP",
              "width=500,height=70"); 
</script> 
<noscript>
  <div>
    <a href="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com">
      <img src="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com"
           height="60" width="468" alt="ad image" />
    </a>
  </div>
</noscript>

XHTML 1.1 plus MathML 2.0

XHTML 1.1と同様だと思われる。

XHTML 1.1 plus MathML 2.0 plus SVG 1.1

XHTML 1.1と同様だと思われる。

XHTML 2.0

まだほとんど出来ていないみたい。 なにやらtargetが復活しそうな予感。

XHTML Basic 1.0

XHTML Basicを 元にしている。 *12

概ねXHTML 1.1と同様。

XHTML 1.1と使っているモジュールに微妙な違いがある。 xhtml-prefw-redeclとxhtml-postfw-redeclは無いので使えない。 また、scriptが使えないのでポップアップ広告は不可能である。 他は同じ。

WAP2.0

auのezwebはWAP2.0になり、XHTML Basic 1.0がそのまま見れるようになった。 そこでezweb用の広告HTMLも考えてみる。

携帯用広告タグ

一応あるので見てみる。

I-MODE/J-SKY向け

<A HREF="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com&num=1"
   TARGET="_blank">
  <IMG SRC="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com&num=1"
       BORDER="0">
</A>

EZWEB向け(hdml)

<A TASK=GO
   DEST="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com&num=1">
  <IMG SRC="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com&num=1">
</A>

hdmlはよくわからないので無視する。 targetは画面が一つしか出ない携帯では意味がない。 borderもいらないだろう。 よって、次のようにすれば問題ないと思われる。

WAP2.0向け(インライン)

<a href="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com&amp;num=1">
  <img src="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com&amp;num=1"
       alt="xrea ad" />
</a>

DTDは変える必要はない。 そのままXHTML Basic 1.0で使える。

一つだけ注意点がある。 よく見るとURIのquery部分での&を&amp;とエスケープしている。 これはattvalue内では&と<及び"または'は 必ずエスケープしなければならないからだ *13。 本来はCGIが&の代わりに;を使用しても 正しく解釈できるようにすべきである *14。

設置する

何が一番いいのか？

XHTML 1.1において、どれを使うのがいいのだろうか？ たぶんtargetありがもっともいいだろうが、 このままでは画像の周りにボーダーが付いてしまう事がある。 またインラインであるなど、色々困った面がある。 そこで、改造してみることにしよう。

やることは、class属性*15による意味づけと、CSSの適用だ。 CSSは外部でも内部でも構わない。

ドキュメント宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[
  <!ATTLIST a
      target  CDATA  #IMPLIED
  >
]>

CSS

img.ad_image { border: none; }

通常広告(ブロック)

<div class="ad_block">
  <a href="http://ad.xrea.com/ad_click.fcg?site=user.s*.xrea.com"
     target="_blank" class="ad_anchor">
    <img src="http://ad.xrea.com/ad_img.fcg?site=user.s*.xrea.com"
         height="60" width="468" alt="ad image" class="ad_image" />
  </a>
</div>

XHTMLの広告例

実際においてみた。 *16

これらは全てvalid XML1.0だ。vと付いているのはそのXHTML自体でvalid。

XHTMLでのMIME-TYPEはどうするの？

実は、上の方法はtext/htmlだとうまく行かない。 よって、MIME-TYPEはtext/xml、application/xml、application/xhtml+xmlの いずれかにする必要がある。 application/xhtml+xmlが普通である。

しかし、IE6.0ではいずれもうまく行かない。

text/xml
xhtml11.dtdがうまく解釈できない。
application/xml
xhtml11.dtdがうまく解釈できない。
application/xhtml+xml
MIME-TYPEが未知の型とされてダウンロードされる。

よってIEでの使用は諦める。 もし、どうしてもIEを使いたいのであれば、 サーバ側で普通のhtmlに変換して渡せばいいだろう。

Opera6.05ではstyle要素によるCSSが適用されないようだ。 xml-stylesheetで外部CSSを読み込ませれば適用されるが、 一度更新を押さないと反映されないようである。

なおXREAでは拡張子を.xhtmlにすれば、 Content-typeはapplication/xhtml+xmlになる。 自動広告も働かないので、自分で広告を挿入しなければならなくなる。

*17

手動広告挿入の自動化

XHTML 1.1の場合である。 他の場合も同様と思われる。

長くなりそうなので、別文書にした。 手動広告の自動化 for XHTML 1.1へ進め。

*1noscript要素はミスクである。 だが、noscriptはブロックしか内容に持てない。 よってミスクであるとしても、 noscriptはブロックであると考えた方がいいと思うのだが…。 これはxhtmlのバグだろうか？

*2IE専用と思われる。

*3その画像の意味から"ad image"とした。

*4language属性は取り除いてもよい。

*5cf.[SB:thread=888]

*6つか、validでない…。 cf.XML 1.0 SE[VC: Entity Declared]

*7たぶん、これでvalidでwell-formedになっているはず。 これでもinteroperabilityには適さない。 けど、いまどきXMLなのにSGMLを気にしても無意味だしな。

*8XMLとしてはvalidですが、 xhtml-postfw-redeclの使い方としては間違っているような…。

*9とても怪しい。 本来で有ればInline.extraではなくInlSpecial.classに加えるべきだろう。 しかし、XHTML 1.1ではインラインな要素はInline.extraに入れてくれとなっている。 外部なので仕方がないと言えば仕方がないか…。

*10vailidityもwell-formednessも無視…。 cf.XML 1.0 SE[WFC: PEs in Internal Subset]

*11これはvalidでwell-formedだと思います。

*12仕様書にはXHTML Basicとだけあって1.0とは書かれていない。 しかし、DTDは1.0となっている。 XHTML 2.0がでたら、それように作らないのかな？

*13cf.XML 1.0 SE[NT: AttValue]

*14cf.HTML 4.01[B.2.2 Ampersands in URI attribute values]

*15id属性でも構わないが、 もしかしたら、XREAの広告を複数付けたいという物好きがいるかも知れないので、 class属性にする。

*16IE6ではうまく見れません。その他、古いブラウザではたぶん無理です。

*17さて、邪道なXHTML 1.1はapplication/xhtml+xmlとしていいのだろうか？ 現在調べ中