2003年10月04日 (土)

.Mac カウンタ徹底カスタマイズ

.Mac の Homepage のカウンターを徹底カスタマイズする方法を紹介しよう。.Mac カウンターが大き過ぎるとか、いまいち自分のページに合うカウンターがないとかでお困りの方には朗報かも。
自作サイトに .Mac の Homepage 機能で使用できるカウンターを流用する方法の紹介はもう既に色々なところでされている。この blog の前身でも紹介していた。この blog に .Mac カウンターを流用するにあたり、Netscape 4.X 対策の ilayer 要素が HTML の標準にない等の理由で削ったり、整形したりしているうちに、カウンターを上昇させずに現在値を知る方法はないのかしらと思って、カウンター用の JavaScript を読みはじめた。すると結構カスタマイズ可能なことが解ってきた。ついでに、自作 JavaScript とのコンフリクトの可能性もあることがわかった。残念なことに上昇させずに読む方法は見つからなかったが。

せっかく調べたので自分の備忘も兼ねて、ちょっと小難しい前置きに付き合ってもらいたい。

【.Mac カウンタの動作】
.Mac カウンタは次の仕組みで動作している。(Netscape 4.X 以外の場合)
  1. JavaScript でカウンタのための諸元を設定する。
    その JavaScript コードはページの HTML に埋め込まれたもので次のようになっている。
    counterUser='.Macアカウント';
    counterPage='ページ番号';
    imageBase='イメージのベースURL';
    window.onload=writeCounter;
    最後の行は、ページの内容を一通り読み込んだら、カウンターを書き出す動作をしなさいという意味。
  2. カウント値をインクリメントさせ、Cookie を送る(推測)
    http://homepage.mac.com/WebObjects/Counter.woa/wa/image?user=.Macアカウント&page=ページ番号 にアクセスするとカウント値が上昇し、見えないイメージが返される。そしてブラウザにはカウンタ値などが書かれた Cookie が送られる。
  3. Cookie からカウント値を読み取りカウンタ用 HTML を作り出す
    これは、1 の最後の行で指定された JavaScript 関数 writeCounter の内部で実行される JavaScript 関数 counterHTML によるもの。作り出される HTML は JavaScript 変数 imageBase の下の画像を組み合わせたもので次のようになる。
    <img src="imageBase/left.gif"/>
    <img src="imageBase/N.gif"/>
    ...
    <img src="imageBase/N.gif"/>
    <img src="imageBase/right.gif"/>
    ここで imageBase は JavaScript 変数として指定された URL で、N はカウント値の一桁一桁の数字である。実際には改行は入らない。
  4. 3 の HTML を CounterDiv という名前が付いている要素の内容とする。
    前出の JavaScript 関数 writeCounter の残りの動作の内容である。これによって、2 で取得された見えない画像部分がカウンターの画像に置き換えられる。

【自作 JavaScript とのコンフリクトの可能性】
1 のところで述べたように JavaScript の window オブジェクトの onload 属性が代入されている。このためもし window オブジェクトの onload 属性を利用した JavaScript を自作して埋め込んでも、カウンターを付けるとうまくいかなくなってしまう。

こういう場合は、writeCounter を内部で動作させるものを自分で作ってそれを window オブジェクトの onload 属性に入れておくとよいだろう。そのためには http://homepage.mac.com/i/chp/TKCounter.js を読み込む script 要素は head 要素の中に移動しておいた方が融通が効く。自分で JavaScript コードを作る人ならば、その理由は解ると思う。

【カスタマイズ方法】
いよいよ具体的なカスタマイズ方法だ。
カウントだけしてカウンターを表示させない
カウント値は別なページ(例えばカウンタを利用するためのダミーのページとか)で確認し、自作サイトでは表示させない方法だ。カウンタとして次の HTML コードを埋め込めばよい。 
<div id="CounterDiv">
	<img src="http://homepage.mac.com/WebObjects/Counter.woa/wa/image?user=.Macアカウント&page=ページ番号" alt="">
</div>
カウンタの画像を自作のものに置き換える
自作の素材として次のファイルを用意しよう。
ファイル名 役割
ファイル名 役割
left.gif カウンタの左端 0.gif 数字の 0
1.gif 数字の 1 2.gif 数字の 2
3.gif 数字の 3 4.gif 数字の 4
5.gif 数字の 5 6.gif 数字の 6
7.gif 数字の 7 8.gif 数字の 8
9.gif 数字の 9 right.gif カウンタの右端
用意したらそれをどこかのフォルダに置く。もちろん参照可能な URL が付けられるフォルダにである。これを仮に http://some.where.com/foo/bar だとしよう。

カウンタ付きページとして次の要領でページを作成しよう。 

<head>
	...
	<script type="text/javascript" src="http://homepage.mac.com/i/chp/TKCounter.js"></script>
	<script type="text/javascript">
	<!--
		counterUser='.Macアカウント';
		counterPage='ページ番号';
		imageBase='http://some.where.com/foo/bar';
		window.onload=writeCounter;
	// -->
	</script>
</head>
<body>
	...
	<div id="CounterDiv">
		<img src="http://homepage.mac.com/WebObjects/Counter.woa/wa/image?user=.Macアカウント&page=ページ番号" alt="">
	</div>
	...
</body>
この例では、オリジナルから離れてなるべくお作法に従って書いてみた。http://some.where.com/foo/bar ではなく http://homepage.mac.com/foo/bar ならば imageBase のところに単に /foo/bar とだけ書いてもよい。CounterDiv の id が付いた div 要素に適当に style-sheet を付けたりして表示位置を調節してほしい。

素材の画像を作るのが面倒なときはフリーのカウンタ素材が色々出ているからそれを探して使うといいだろう。

JavaScript が書ける人は、オリジナルの JavaScript コードを参考に Cookie からカウント値を読み取って動作する面白いカウンタを作れるかもしれない。例えば 100 人ごとにお目出度の音楽を鳴らすとか。音付きカウンタなんて見かけないから面白いかも。

最後にカスタマイズしたカウンタの例へのリンクを書いておこう。
http://homepage.mac.com/yuji_okamura/counter/index.html

Posted: 02:03    | Comment | Trackback

以下、類似エントリです。

CacheUpIt

iblogPatcher

Weblog Commenting and Trackback by HaloScan.com

iBlog

Copyright © 2003-2006 OKAMURA Yuji, All rights reserved.