Semi-long Communication:TINAMIのアクセス解析

(published: Mar. 14, 2000 / modified: Oct. 4, 2002)

更新履歴

スクリプトが生成する内容についての注意を追加。(Oct. 4, 2002)

発端

昨日からTINAMIのアクセス解析サービスを始めた訳ですが、そこで使われる解析用のフレーズを埋めこむのに苦労したという話です。

まずTINAMIでアクセス解析を申し込むと、下の様なHTML文書が出てきます。

<!--ここから-->
<SCRIPT type="text/javascript">
<!--
var uid="xxxxxxxx";
var ref=window.document.referrer;
var tag="<A HREF=\"http://webstat.tinami.com/gw.cgi?"+uid+"\"><IMG SRC=\"http://webstat.tinami.com/banner.cgi?id="+uid+"&rf="+ref+"\" BORDER=\"0\" ALT=\"[TINAMI]\" WIDTH=88 HEIGHT=31></A>";
document.write(tag);
// --> 
</SCRIPT>
<NOSCRIPT>
<A HREF="http://webstat.tinami.com/gw.cgi?xxxxxxxx"><IMG SRC="http://webstat.tinami.com/banner.cgi?id=xxxxxxxx&rf=noscript" WIDTH=88 HEIGHT=31></A>
</NOSCRIPT>
<!--ここまで-->

上記のテキストエリア内のタグをコピーして、あなたのサイトのトップページ（TINAMIに登録されているURLのページ）の好きなところに貼り付けてください。

しかし私のサイトのトップページは XHTML1.0strict準拠なので、このまま埋めこむとSGMLの仕様すら満たさない謎文書になること請け合い、しかもJavaScriptの知識も皆無、という訳でW3Cの仕様書その他とニラメッコしつつソースを改造しました。

具体的な改訂について

SCRIPT要素の中身は#PCDATAなので、スクリプトをコメントで隠すことが出来ない (スクリプトがコメントとして無視される場合がある)。マーク区間<![CDATA[…]]>を使う手もあるけれど、外部ファイルにしたスクリプトをSCRIPT要素のsrc属性で取りこむことにしよう
要素名、属性名は当然小文字に修正
属性値は引用符で囲まなければならない。当然スクリプトの方も修正したけれど、引用符に対して適当にエスケープを置く必要があることを忘れてパニックに
imgタグの閉じ方もXML仕様に変更しておかないと
&は常に実体参照を使って&と書かなければならない。外部ファイルにしたスクリプトでの実体参照はよく分からないけれど、取り敢えずこちらも実体参照にしておこう
noscript要素側のimg要素のalt属性が無い。これも追加しておこう
noscript要素直下にはブロック要素しか置けなかった (インライン要素を直書きするのは禁止)。ここではp要素を使って内容をブロック要素だけにした
スクリプトが生成する内容も、XHTMLの仕様を満たさなければならない。 img要素がbody要素直下に現れるのを避けるため、p要素の子になるようにした。

改造した結果

こうした改造によってアヴァンタイトルに埋めこまれたスクリプトは、はMozilla browserでもInternet Explorer 5でも作動し、文書自身もAnother HTML-Lint でエラーの出ないものとなりました。

まずはHTMLパートのソースを。

<script type="text/javascript" src="tinami.js">
</script>
<noscript>
 <p>
  <a href="http://webstat.tinami.com/gw.cgi?xxxxxxxx"><img src="http://webstat.tinami.com/banner.cgi?id=xxxxxxxx&amp;rf=noscript" alt="[tinami]" width="88" height="31" /></a>
 </p>
</noscript>

そして外部スクリプトは下の様になります。

var uid="xxxxxxxx";
var ref=window.document.referrer;
var tag="<a href=\"http://webstat.tinami.com/gw.cgi?"+uid+"\"><img src=\"http://webstat.tinami.com/banner.cgi?id="+uid+"&amp;rf="+ref+"\" border=\"0\" alt=\"[TINAMI]\" width=\"88\" height=\"31\" /></a>";
document.write("<p>");
document.write(tag);
document.write ("</p>");

反省

JavaScriptの知識が無い状態での突貫工事だったので、出来は今一ツです。特に外部スクリプトでの実体参照など、未だに謎な部分が多いです。

一番の問題はスクリプト関係の要素及び属性が完全封印されている ISO/IEC 15445:2000でどうやって組み込むかです。一番良いのは参照元の探知もサーバ側で全部やってくれることなのですが。

H-man AND NOW
作：Nishino Tatami (ainosato@vc-net.ne.jp)