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

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

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

1.accesscounter.jsの作成

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

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

↓「アクセスカウンター用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>

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