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

昨日に引き続き、アクセスカウンタープラグインの利用方法を解説します。
今日は、Blog全体のアクセス数や、各ページのアクセス数を、Blogの各ページに表示する方法を解説します。

2007年1月15日 9時35分
プラグインに一部不具合がありました。
上記の時刻までにプラグインをダウンロードされた方は、再度ダウンロードしていただき、AccessCounter.plファイルを差し替えていただきますようお願いします。

1.accesscounter.jsの作成

アクセスカウンターはAjaxで表示しますが、まずはその部分のJavaScriptを作成します。

まず、プラグインのzipファイルの中から、「js」フォルダにある「accesscounter.js」ファイルを、メモ帳等で開いておきます。
次に、インデックス・テンプレートを1つ新規作成し、テンプレート名を「アクセスカウンター用Ajax」、出力ファイル名を「accesscounter.js」にします。また、「インデックス・テンプレートを再構築するときに、このテンプレートを自動的に再構築する」のチェックはオフにします。
そして、先ほどメモ帳等に開いておいたファイルの内容をコピーし、新規作成したテンプレートの「テンプレートの内容」の欄に貼り付けます。
ここまでが終わったら、テンプレートを保存して再構築しておきます。

↓「アクセスカウンター用Ajax」テンプレートの作成
「アクセスカウンター用Ajax」テンプレートの作成

2.アクセスカウンター表示関連のテンプレートタグ

このプラグインをインストールすると、多数のテンプレートタグが追加されます。
それらのタグを組み合わせて、アクセスカウンターやランキングなどを表示します。
アクセス数の表示に関するものとして、以下のようなものがあります。

テンプレートタグ 内容
MTAccessCounterAdd アクセス数をカウントするためのタグです。
このタグ自身は何も出力しません。
MTBlogAccessCount 当プラグイン設置以来の、Blog全体のアクセス数を出力します。
MTBlogHostCount 当プラグイン設置以来の、Blog全体の訪問者数(訪問元のホストの数)を出力します。
同一ホストからのアクセスは、1日に1回だけカウントされます。
MTBlogTodayAccessCount Blog全体の今日のアクセス数を出力します。
MTBlogTodayHostCount Blog全体の今日の訪問者数を出力します。
MTBlogYesterdayAccessCount Blog全体の昨日のアクセス数を出力します。
MTBlogYesterdayHostCount Blog全体の昨日の訪問者数を出力します。
MTPageAccessCount 当プラグイン設置以来の、ページごとのアクセス数を出力します。

3.アクセスカウンター表示用のテンプレート・モジュールの作成

次に、アクセスカウンターを表示するためのテンプレート・モジュールを作成します。

テンプレート・モジュールを新規作成し、その名前を「アクセスカウンター用」にします。
そして、前述したタグを組み合わせて、アクセス数を表示する部分を作ります。

例えば、Blog全体/今日/昨日のアクセス数と、各ページのアクセス数を、サイドバーに表示したいとします。
この場合、Movable Typeの標準テンプレートをお使いなら、テンプレート・モジュールに以下のリストのようなタグを入れます。
また、小粋空間のテンプレートをお使いの場合は、以下のリストの各行から「class="○○"」を除いたものを入れます。
入力が終わったら、テンプレート・モジュールを保存します。

<$MTAccessCounterAdd$>
<ul class="module-list">
   <li class="module-list-item">Blog全体:<$MTBlogAccessCount$></li>
   <li class="module-list-item">今日:<$MTBlogTodayAccessCount$></li>
   <li class="module-list-item">昨日:<$MTBlogYesterdayAccessCount$></li>
   <li class="module-list-item">このページ:<$MTPageAccessCount$></li>
</ul>

4.テンプレート・モジュールのリアルタイム再構築を許可する

次に、3.で作ったテンプレート・モジュールを、リアルタイム再構築できるようにします。

Blogのメニューで「環境設定」の「設定」をクリックして設定のページを開き、「プラグイン」のタブをクリックします。
そして、リアルタイム再構築プラグイン(RealtimeRebuild)の箇所で「設定を表示」のリンクをクリックして、設定を行う状態にします。
すると、テンプレートの一覧が表示されますので、「アクセスカウンター用」をCtrlキーを押しながらクリックします。

↓「アクセスカウンター用」のテンプレート・モジュールのリアルタイム再構築を許可する
「アクセスカウンター用」のテンプレート・モジュールのリアルタイム再構築を許可する

5.各テンプレートの書き換え

次に、メインページのテンプレートと各アーカイブ・テンプレートを書き換えて、アクセスカウンターが表示されるようにします。

まず、各テンプレートのヘッダー部分に、以下のタグを追加します。
なお、テンプレートにprototype.jsをすでに組み込んでいる場合は、accesscounter.を組み込む行だけを追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>accesscounter.js"></script>

次に、アクセスカウンターを表示したい位置にタグを追加します。
メインページのテンプレートでは、サイドバー部分に以下のタグを追加します。

・Movable Type標準のテンプレートの場合

<div class="module-access-counter module">
   <h2 class="module-header">アクセスカウンター</h2>
   <div id="access_counter" class="module-content">
   <p>Now loading...</p>
   </div>
</div>

<script type="text/javascript">
<!--
    rebuild_access_counter('<$MTRealtimeRebuildQueryParam tmpl_name="アクセスカウンター用" page_name="メインページ" ajax="1"$>&link=' + location.href + '&referer=' + escape(document.referrer));
-->
</script>

・小粋空間のテンプレートの場合

<div class="sidetitle">
Access Counter
</div>

<div id="access_counter" class="side">
<p>Now loading...</p>
</div>

<script type="text/javascript">
<!--
    rebuild_access_counter('<$MTRealtimeRebuildQueryParam tmpl_name="アクセスカウンター用" page_name="メインページ" ajax="1"$>&link=' + location.href + '&referer=' + escape(document.referrer));
-->
</script>

また、各アーカイブ・テンプレートでは、サイドバーの部分に以下を追加します。

・Movable Type標準のテンプレートの場合

<div class="module-access-counter module">
   <h2 class="module-header">アクセスカウンター</h2>
   <div id="access_counter" class="module-content">
   <p>Now loading...</p>
   </div>
</div>

<script type="text/javascript">
<!--
    rebuild_access_counter('<$MTRealtimeRebuildQueryParam tmpl_name="アクセスカウンター用" context="1" ajax="1"$>&link=' + location.href + '&referer=' + escape(document.referrer));
-->
</script>

・小粋空間のテンプレートの場合

<div class="sidetitle">
Access Counter
</div>

<div id="access_counter" class="side">
<p>Now loading...</p>
</div>

<script type="text/javascript">
<!--
    rebuild_access_counter('<$MTRealtimeRebuildQueryParam tmpl_name="アクセスカウンター用" context="1" ajax="1"$>&link=' + location.href + '&referer=' + escape(document.referrer));
-->
</script>

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