アクセスカウンタープラグイン(その4)

アクセスカウンターでは、数字を画像化して表示することが多いです。

↓アクセスカウンターの画像表示の例
アクセスカウンターの画像表示の例

そこで、今日はアクセスカウンターを画像化して表示する方法を解説します。

1.SplitStringプラグインのインストール

まず、拙作のSplitStringプラグインをダウンロードして、Movable Typeにインストールします。
SplitStringプラグインは以下からダウンロードすることができます。

SplitString.pl

プラグインの継続的な開発やサポートのために、プラグインをご利用された方は、ドネーション(寄付)を行っていただけると幸いです。
ドネーションの方法は、こちらのページをご参照ください。

また、このプラグインの他にも、いくつかのプラグインを配布しています。
配布中のプラグインは、Movable Type Plugin Directoryのページをご参照ください。

Movable Typeのプラグイン開発等のドキュメント「Movable Type Developer's Guide Volume 1」も販売しています。
ご自分でプラグインを作ってみたい方に、ぜひお勧めしたい一冊です。
詳細は特設ページをご覧ください。

ダウンロードしたファイルに「SplitString.pl」のファイル名をつけて保存し、そのファイルをMovable Typeの「plugins」ディレクトリにアップロードします。

2.SplitStringプラグインとアクセスカウンタープラグインを組み合わせる

SplitStringプラグインは、任意の文字列を1文字ずつ出力する働きをします。
これを利用して、アクセスカウンターの数値を1桁ずつ出力し、それをimgタグに変換することで、アクセスカウンターを画像化して表示することができます。

数値をx桁にして表示し、かつ値が0の桁には「0」を表示するようにしたいとします。
また、数値の画像に「0.gif」~「9.gif」のファイル名をつけて、Blogの出力先ディレクトリにアップロードしてあるものとします。
その場合、以下のようにタグを組むことで、数値を画像にして出力することができます。

<MTSetVarBlock name="○○"><$数値を出力するMTのタグ sprintf="%0xd"$></MTSetVarBlock>
<MTSplitString name="○○"><img src="<$MTBlogURL$><$MTSplitStringChar$>.gif" alt="<$MTSplitStringChar$>" /></MTSplitString>

MTSetVarBlockタグの「name="○○"」の箇所には、数値を一時的に記憶しておくための変数の名前を指定します。
変数名は自分で決めます。

また、「数値を出力するMTのタグ」の箇所には、アクセスカウンター関連のタグを入れます。
そして、「sprintf="%0xd"」で数値の桁数を指定します。例えば、6桁で出力するなら「sprintf="%06d"」とします。

3.タグの組み合わせ例

一昨日のエントリーで、アクセスカウンターを表示するためのテンプレート・モジュールの例を紹介しました。
そのテンプレート・モジュールを書き換えれば、アクセス数を画像で表示することができます。

以下のリストは、Blog全体/今日/昨日/ページのアクセス数を画像で表示する例です。
Blog全体のアクセス数は8桁、今日と昨日のアクセス数は4桁、ページのアクセス数は6桁で表示するようにしています。

<MTAccessCounterAdd>
<ul class="module-list">
   <li class="module-list-item">Blog全体<br /><MTSetVarBlock name="blog_access_count"><$MTBlogAccessCount sprintf="%08d"></MTSetVarBlock><MTSplitString name="blog_access_count"><img src="<$MTBlogURL$><$MTSplitStringChar$>.gif" alt="<$MTSplitStringChar$>" /></MTSplitString></li>
   <li class="module-list-item">今日<br /><MTSetVarBlock name="blog_today_access_count"><$MTBlogTodayAccessCount sprintf="%04d"></MTSetVarBlock><MTSplitString name="blog_today_access_count"><img src="<$MTBlogURL$><$MTSplitStringChar$>.gif" alt="<$MTSplitStringChar$>" /></MTSplitString></li>
   <li class="module-list-item">昨日<br /><MTSetVarBlock name="blog_yesterday_access_count"><$MTBlogYesterdayAccessCount sprintf="%04d"></MTSetVarBlock><MTSplitString name="blog_yesterday_access_count"><img src="<$MTBlogURL$><$MTSplitStringChar$>.gif" alt="<$MTSplitStringChar$>" /></MTSplitString></li>
   <li class="module-list-item">このページ<br /><MTSetVarBlock name="page_access_count"><$MTPageAccessCount sprintf="%06d"></MTSetVarBlock><MTSplitString name="page_access_count"><img src="<$MTBlogURL$><$MTSplitStringChar$>.gif" alt="<$MTSplitStringChar$>" /></MTSplitString></li>
</ul>

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください