Movabletype Plugin アクセスランキングプラグイン: JSONAccessRanking

JSONAccessRankingの実装について

実装は簡単です。以下のような流れになります。

1. プラグインフォルダにJSONAccessRankingフォルダを追加します。
2. プラグインページにて必要情報を設定。（ログインアカウント名、パスワード、レポートID、最大表示件数）
3. 新規テンプレート作成JSONデータ用（インデックステンプレート）。
4. ヘッダー部分にjQueryコードを追加。
5. フッター部分に外部スクリプト読み込みコードを追加。
6. jQueryスクリプトをjsフォルダ（任意）にアップ。
7. 新規でウィジットテンプレートを作成。
8. 作成したウィジットテンプレートをウィジットセットの任意の位置に追加。
9. 最後に再構築するだけとなります。

プラグイン追加

プラグインフォルダにJSONAccessRankingを追加すると以下のようにプラグインページにてインストールされているかを確認してください。

基本情報設定

プラグイン設定画面にて必要情報（Google Analyticsログインアカウント名、パスワード、レポートID、最大表示件数）を入力して設定保存します。

ProfileID（レポートID）については、こちらをお読みになってIDを取得してください。プロファイル ID - Analytics ヘルプ

JSONファイル新規作成

テンプレートページにて新規インデックステンプレートを作成します。一応、1週間、1ヶ月でのアクセスランキングデータ（JSON）を生成できるように属性指定で対応しています。二通り表示させたい場合はjsonファイルを二つ作成ください。できれば、下記表示のようにファイル名末尾を変えるようなファイル名にすることで、jQueryプラグインでタブ形式でスムーズに読み込み、切り替え表示できるようになります。（まだプラグインまで作っていませんが・・・）

追加されるテンプレートタグは以下になります。

<mt:JSONAccessRanking>

span属性でweek/monthを指定することができます。（デフォルト：属性指定無しは、week（7日間集計）となります）

1ヶ月間の集計からJSONアクセスランキングデータを生成したい場合は、

<mt:JSONAccessRanking span='month'>

例えば、7日間の集計でアクセスランキングJSONデータを生成したい場合は、ファイル名をaccessranking_week.jsonとし、中身は以下のコードのみ記述するだけとなります。

<mt:JSONAccessRanking>

jQueryコード追加

ヘッダー（テンプレートモジュール）にjQuery読み込み用のコードを追加します。以下のコードで。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("jquery", "1.3.2");
</script>

フッター（テンプレートモジュール）（</body>後)に以下のコードを外部スクリプトとして読み込むようにします。

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

後は、jsフォルダ（任意）に以下のコードで必要部分を変更し、アップします。

var uri = 'jsonデータのアドレスに変更';

var base_uri = 'あなたのサイトのトップアドレス（一番最後のスラッシュ/は無しで 例）:http://yourdomain.com';

タイトルを先頭から40文字で切り上げ、'...'で表示するようにしています。もし、文字数を変更したいときは、title = title.substr(0,40);の40を適宜変更ください。 もし全文表示させたい場合は、

title = title.substr(0,40);
title += '...';

上記の部分を取り除いてください。

新規ウィジットテンプレート作成

新規ウィジットテンプレートを作成します。コードは以下のような感じで。

<div class="widget-ranking-entries widget-archives widget">
    <div class="widget-content accessranking">
    </div>
</div>

後は、作成したウィジットテンプレートをウィジットセットで好きな位置に設定し、すべてのファイルを再構築することでアクセスランキングが表示されるようになります。

インデックステンプレートを再構築することで最新データが反映されるようになります。定期的に再構築するように設定しておくといいですね。参照：ブログの公開プロファイル | Movable Type 4 ドキュメント

以上となります。プレリリースとして公開します。

JSONAccessRankingファイルダウンロード

[追記：Monday, September 28, 2009　　若干修正したファイルに差し替えました。]

jQueryプラグインなども随時アップしていきます。また、正式にこちらのMT4Plugins::WEB DESIGN BLOGにリリースノートも作成いたします。

タブ形式にて週間(Week)、月間(month)にて切り替え表示されたい方は、こちらのjQueryメモ　jQueryプラグイン勉強　attached json作成参考にコードをカスタマイズください。後ほどプラグインをアップしてお知らせします。

プラグイン作成で学んだこと

今回のプラグイン作成でいくつか学べることがありましたので、書き残しておきます。以下がコードとなります。

MT::Utilにはいろいろと使えるメソッドがあります。Date系、encode系などいろいろと使えるメソッドが用意されています。MT::Util - Movable Type utility functionsまた、APIリファレンスには、記述されていないメソッドもありますので、直コードを読んだ方がいいかもしれないですね。

LWP::UserAgentは、MT->new_uaでできる。参照：MTちょっと制限がありますが、十分使えると思います。APIを利用する際につかえますね。

$plugin->translateでフレーズをトランスレートできる。 MT::Plugin

ログの出力はMT->logで。カスタマイズする際には、できるだけログに記録を残すようにしておくと後々問題が起きた際の原因究明などにいいかもしれないですね。参照：Logging to the Activity Log | MovableType.org - Home of the MT Community

エラーはdieで$plugin->translate()で日本語表示するといいかも。何かと予測できない使い方でエラーが予想されるブロックにはdieを使うことでエラー出力されますね。（他にもありますが）エラー出力をよく英語で表記されていますが、ここでも$plugin->translate();使うと日本語表示に変換できます。同時にシステムログにもエラー出力させるようにしておくといいですね。

今回のプラグイン作成でいろいろと勉強することができました。また時間があれば、bootstrapで紐付けて、何かを出力できるものを実装してみたいですね。ajaxstar_ratingもbootstrapとajaxを利用することで実現できそうな・・・。他のWEBAPIを利用したものもできそうな気がします。

以上です。不具合などありましたらFriendFeedにコメントいただければ、早く対応できるかと思います。

（余談：今回作成・確認作業でChrome dev on Ubuntuにて確認していたんですが・・・Chromeで確認すると文字化け起こしますね。文字化けに8時間ほど悩みました＞＜。気をつけてください。）