2003年10月18日 (土)

.Mac テキストカウンター

.Mac カウンターの使い道は何もグラフィカルカウンターだけではない。テキストカウンターだってちゃんとできるのだ。

ここのところ iBlog カスタマイズガイド の執筆でこっちのネタを考える余裕がなかったが、実はこの文書にも見えないがカウンターを付けている。これは .Mac カウンタ徹底カスタマイズ で紹介した見えないカウンタなのだが、こそこそやっているようで少し嫌になってきた。かといってカウンターの画像をここに貼付けるのも嫌だし...というわけでテキストカウンターを作ってみた。後で入れるつもりだ。
# カウンターを付けないという選択肢はないのか >> 自分
# ない! だってどれくらい参照しているか見たいんだもん。

なんたってテキストだから .Mac カウンタを早く描画する で紹介したカウンターよりももっと早く表示される。さり気なくカウンターを入れられる。スタイルシートでフォントや色も自由気ままに変えられて画像を作る必要もない。テキストカウンターって凄いじゃないか!
(後から注)「早く表示される」は間違い。「早く表示できる」が正確。下に例示したサンプルでは早く表示する工夫をしていないから。.Mac カウンタを速く描画する でやった工夫をテキストカウンタに応用すればもっと速くなる。

最初にサンプルを見てもらおう。サンプルはここにある。
http://homepage.mac.com/yuji_okamura/counter/Text/index.html
ここで使用してる JavaScript ファイルは
http://homepage.mac.com/yuji_okamura/counter/Text/TextCounter.js
だ。

さて、テキストカウンターを使用する方法はこうだ。上の TextCounter.js をダウンロードし、自分のサイトの適当なところに置き、これの URL を仮に http://homepage.mac.com/yourName/TextCounter.js としておこう。そして次のようにテキストカウンターを入れたい HTML ファイルを書こう。赤はあなたの環境合わせて書き換えるところで、青はあなたの好みで書き換えるところだ。
...
<script type="text/javascript" src="/i/chp/TKCounter.js"></script>
<script type="text/javascript" src="/yourName/TextCounter.js"></script>
<script type="text/javascript">
<!--
counterUser = 'yuji_okamura';
counterPage = '55';
window.onload = writeTextCounter;
// -->
</script>
</head>
<body>
...
<span id="CounterDiv" name="CounterDiv"><img src="/WebObjects/Counter.woa/wa/image?user=yuji_okamura&amp;page=55" alt="?" width="0" height="0" border="0"></span>
...

※青いところは img 要素の alt 属性の中身。小さいからわかりにくい。

img はよそにやって alt 属性は空にしておき、代わりに何か文字列を入れて、クッキーが禁止されているブラウザなどでカウンターを表示できないときの代替文字とするのもよいだろう。

Posted: 18:09    | Comment | Trackback


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