XHTMLと広告（邪道編）

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

XHTMLとは？

XHTML = XML + HTML

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

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

XHTMLの種類

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

XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
XHTML 1.1
XHTML 1.1 plus MathML 2.0
XHTML Basic 1.0

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

XHTML 1.1 plus MathML 2.0 plus SVG 1.1
XHTML 2.0

などがある。

表記について

広告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 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>

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

iframe要素にはallowtransparencyという属性はない。^*2
img要素にはalt属性が必須。^*3
script要素にはtype属性が必須。^*4
script要素の内容をコメントで囲んではならない。囲んだ場合は、コメントの中はパーサによって無視され、スクリプトは実行されない。
JavaScriptのMIME-TYPEはIANAに登録されいていない。また、JavaScriptは普通のユーザーがそのまま読める文書ではない。よって、application/x-javascriptとするのが妥当だと思われる。
noscript要素の内容は( %Block.mix; )+である。つまり、何かしらのブロックレベル要素が必要となる。

XHTML 1.1

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

iframe要素
a要素のtarget属性
img要素のborder属性（代わりにスタイルシートを用いるが後に述べる）
script要素のlanguage属性（代わりにtype属性を使用するので問題なし）

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 plus SVG 1.1

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

XHTML Basic 1.0

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部分での&を&とエスケープしている。これはattvalue内では&と<及び"または'は必ずエスケープしなければならないからだ ^*12。本来はCGIが&の代わりに;を使用しても正しく解釈できるようにすべきである ^*13。

設置する

何が一番いいのか？

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

やることは、class属性^*14による意味づけと、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の広告例

実際においてみた。 ^*15

これらは全て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になる。自動広告も働かないので、自分で広告を挿入しなければならなくなる。

^*16

手動広告挿入の自動化

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だと思います。
^*12cf.XML 1.0 SE[NT: AttValue]
^*13cf.HTML 4.01[B.2.2 Ampersands in URI attribute values]
^*14id属性でも構わないが、もしかしたら、XREAの広告を複数付けたいという物好きがいるかも知れないので、 class属性にする。
^*15IE6ではうまく見れません。その他、古いブラウザではたぶん無理です。
^*16さて、邪道なXHTML 1.1はapplication/xhtml+xmlとしていいのだろうか？現在調べ中