Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

Ajaxでアクセス・ランキングを表示する３

Oct192007
Vote:
http://bizcaz.com/archives/2007/10/19-000703.php
Categories: Customize
Tags: Customize, Page-Ranking
Social Bookmark

Prev Page: cron 使ってテンプレートを切り替える
Next Page: サイドバーにサムネイルを表示する

[2009.03.20] 以下のページでご紹介してます最新の prototype 版ランキングスクリプトをご利用ください。

こんばんわ^^

先日、広島!? で『酒まつり』というイベント!? があったそうです。
友人はその『酒まつり』に行って来たよぉ～ということでおみげをもらいました (●´∀｀●)

てっきり酒まつりなだけに、広島の地酒をいただけるものと楽しみにしてましたの。
でももらったおみやげは、なぜか『生八ツ橋』･･･（。－ω－）しかも聖護院のやつ。

生八ツ橋は京都行ったら必ず買って帰るくらい好きなのでいいのですが、なんで八ツ橋なん!?
というツッコミはしませんでしたが、もらった瞬間、満面の笑顔を消しました。

さて、わたしのサイトで公開してるアクセスランキングを更新しましたのでご紹介します。

- 2007.11.23 追記 -
最新版をAjaxでアクセス・ランキングを表示する４で紹介してます。

- 2007.11.14 追記 -

prototype.pagerank.js( or jquery.pagerank.js )内の 163 行目に MT タグを使用してます。ここでは各ページタイトルからサイトタイトルを削除する処理を行ってます。
ですので、各自のサイトに合わせて修正してください。

たとえば、サイト名が『あうあう』でエントリページのタイトルが『あうあう: わたしのヘタレな説明ですいません』だとした場合、最初の『あうあう: 』を削除するには以下のように修正します。

変更前
var title = encodeURIComponent(document.title.replace(' - <$MTBlogName$>', ''));
変更後
var title = encodeURIComponent(document.title.replace('あうあう: ', ''));

- 2007.11.03 追記 -

prototype.pagerank.js の設置の仕方をもっと詳しく書き直しました。

- 2007.10.21 追記 -

トップページを集計から除外するオプションを追加しました。
あと、肝心なもの忘れててまして、出力されるタグの説明を追加しました。
アクセスカウント数の表示／非表示機能を追加しました。
ついでに、カウント数の代わりにパーセンテージ表示を選択できるようにしました。
アクセスランキングの出力タグのサンプルとして、サンプルページ(index.php)内にスタイルを定義してみました。参考にしてください。

基本的な使い方は以下の prototype 版、jQuery 版共に以前といっしょです。

何だか設置に苦労されてるようなので、一応説明しておきます。

ダウンロード

お好みに応じて、prototype 版、jQuery 版をダウンロードしてください。

ディレクトリ構成

prototype 版も jQuery 版も基本的なディレクトリ構成はいっしょです。
また、ここでは以下のようなディレクトリ構成として説明しますが、各自の環境に合わせて読み替えてください。

http://●●●.com/
|
+-- js/
| +--- pagerank/
| | +-- ajax-loader.gif
| | +-- prototype.js( or jquery.js)
| | +-- prototype.pagerank.js( or jquery.pagerank.js)
| | +-- index.php
| | +-- rank_check.php
| | +-- rank_config.php
| | +-- rank_post.php
| | +-- rank_view.php

設置の仕方

まずスクリプト一式をアップロードします。
上記ダウンロードからお好みで prototype 版、jQuery 版をダウンロードして適当なフォルダに展開します。そして、上記ディレクトリ構成のようにアップロードします。
次に prototype.pagerank.js( or jquery.pagerank.js )を変更します。
以下の行を各自の環境に合わせて変更してください。
prototype.pagerank.js( or jquery.pagerank.js )
1. /****************************************************************************
2. * Cookie有効／無効フラグ(0:無効、1:有効)
3. * ※Cookieを無効にすると、ページにアクセスされるたびにカウントアップされます。
4. * また、当然PHPスクリプトはその都度実行されます。
5. ****************************************************************************/
6. var pagerank_enable_cookie = 1;
8. /****************************************************************************
9. * アクセスログを取りたいブログID
10. * ※複数のブログの集計を行いたい場合には 0 を指定してください。
11. 0 というブログ ID は存在しませんので。
12. ****************************************************************************/
13. var pagerank_blogid = <$MTBlogID$>;
15. /****************************************************************************
16. * アクセスランキングを表示するIDタグ名称
17. ****************************************************************************/
18. var pagerank_view_box = 'pagerank_viewer'; <-- prototype 版の場合
19. var pagerank_view_box = '#pagerank_viewer'; <-- jQuery 版の場合
21. /****************************************************************************
22. * ブログ URL(index.html がある場所)／アップロード先相対パス
23. ****************************************************************************/
24. var pagerank_blog_url = '<$MTBlogURL$>';
25. var pagerank_home_url = 'js/pagerank/';
27. /****************************************************************************
28. * アクセスログ保存／表示スクリプト／ローダーイメージ
29. ****************************************************************************/
30. var pagerank_post_url = [pagerank_blog_url, pagerank_home_url, 'rank_post.php' ].join('');
31. var pagerank_view_url = [pagerank_blog_url, pagerank_home_url, 'rank_view.php' ].join('');
32. var pagerank_loader = [pagerank_blog_url, pagerank_home_url, 'ajax-loader.gif'].join('');
34. /****************************************************************************
35. * トップページ除外フラグ(0:カウント、1:除外)
36. ****************************************************************************/
37. var pagerank_exclude_toppage = 0;
青い字の部分を変更します。
- pagerank_enable_cookie
  Cookie の有効／無効を設定します。
  - 0 を指定した場合 Cookie は無効になります。
  - 1 を指定した場合 Cookie は有効です。デフォルトは有効となってます。
  Cookie を無効にするとページにアクセスされるたびにカウントアップされます。また、PHP スクリプトはその都度実行されます。
- pagerank_blogid
  ページアクセスを集計したいブログのブログ ID を指定します。
  デフォルトでは <$MTBlogID$> となっていますが、直接ブログ ID に変更しても問題ありません。
  
  また、複数のブログのアクセスを集計したい場合には 0 を指定するといいです。
- pagerank_blog_url
  アップロード先の URL を指定します。デフォルトでは <$MTBlogURL$> となっています。
  トップページ(index.html がある場所)の URL を指定してください。
- pagerank_home_url
  アップロード先の相対パスを指定します。トップページからの相対パスを記述してください。
  デフォルトでは js/pagerank/ となっています。
  各自の環境に合わせて変更してください。
- pagerank_exclude_toppage
  トップページを集計から除外するか否かを指定します。
  - 0 を指定した場合カウントされます。デフォルトはこの設定になってます。
  - 1 を指定した場合トップページへのアクセスが除外されます。
次に rank_config.php を変更します。
以下の行を各自の環境に合わせて変更してください。
rank_config.php
1. <?php
2. /*
3. * ページ・アクセス情報を保存するファイル名
4. */
5. $GLOBALS['RANK_DATA'] = 'data.txt';
6. /*
7. * 更新履歴情報を保存するファイル名
8. */
9. $GLOBALS['PERIOD_DATA'] = 'period.txt';
10. /*
11. * 上位何位まで表示するか設定します
12. * ★0を指定するとすべて表示します
13. */
14. $GLOBALS['VIEW_COUNT'] = 15;
15. /*
16. * 表示データ削除の周期を設定します
17. * ★必ず以下の設定範囲内で設定してください。
18. * ★未使用時は 0 を設定してください。
19. */
20. $GLOBALS['PERIOD_MONS'] = 1;// 月:0～ 3の間で設定
21. $GLOBALS['PERIOD_DAYS'] = 0;// 日:0～31の間で設定
22. $GLOBALS['PERIOD_HOUR'] = 0;// 時:0～24の間で設定
23. /*
24. * 指定 IP アドレスからのカウントを省きます
25. * たとえば、自宅パソコンからはカウントに入れたくない場合などです
26. * 複数の IP アドレス指定が可能です
27. * ★ただし、あまり多くの除外 IP アドレスを指定すると、
28. * その分表示速度に影響がでますのでご注意ください
29. */
30. $GLOBALS['SELF_ADDR'] = array('0.0.0.0');
31. /*
32. * アクセスカウンタ数の表示／非表示を設定します
33. * 0:非表示、1:表示、2:全体のパーセンテージ表示
34. */
35. $GLOBALS['SHOW_COUNTER'] = 1;
36. ?>
- RANK_DATA
  アクセスログファイル名です。任意のファイル名に変更してください。
- PERIOD_DATA
  集計期間を保持しておくファイル名です。これも任意のファイル名に変更してください。
- VIEW_COUNT
  上位から何番目までを表示するかを指定します。デフォルトでは 15 位までとなってます。
- PERIOD_MONS / PERIOD_DAYS / PERIOD_HOUR
  集計期間を指定します。デフォルトは 1 ヶ月間となってます。
  
  たとえば、1 週間ごとにランキングをクリアしたい場合には以下のようにします。
  1. 1 週間分集計したい場合
  2. $GLOBALS['PERIOD_MONS'] = 0;// 月:0～ 3の間で設定
  3. $GLOBALS['PERIOD_DAYS'] = 7;// 日:0～31の間で設定
  4. $GLOBALS['PERIOD_HOUR'] = 0;// 時:0～24の間で設定
- SELF_ADDR
  自宅からのアクセスを除外したい場合に、自宅 IP アドレスを指定します。添付ファイル中の rank_check.php をブラウザから実行することで自宅 IP アドレスを知ることができます。
  また、複数の IP アドレスを指定できます。たとえば、以下のようなかんじで。
  1. $GLOBALS['SELF_ADDR'] = array('23.24.25.26', '120.121.122.123');
- SHOW_COUNTER
  アクセスカウンタ数の表示／非表示の設置を行います。
  - 0 を指定すると表示されません。
  - 1 を指定するとカウンタ数を表示します。デフォルトはこの設定になります。
  - 2 を指定すると全体のパーセンテージを表示します。
一通り変更したら、pagerank/ フォルダごとサーバにアップロードします。
また、prototype.pagerank.js 中のブログ ID(pagerank_blogid) やブログ URL(pagerank_blog_url)に、MT タグを使用する場合は MT の管理画面からインデックステンプレートを新規作成して、prototype.pagerank.js( or jquery.pagerank.js )をコピー & ペーストして再構築すると、ブログ ID や URL などが自動的に割り当てられます。

PHP スクリプトはお使いのサーバに合わせてパーミッションを変更します。
たとえば、さくらインターネットやロリポップでは 755、CORESERVER では 705 とします。また、pagerank/ ディレクトリのパーミッションを 755 としてください。
次にアクセスログを集計したい、すべてのページに以下を追加します。
1. prototype 版の場合
3. <script type="text/javascript" src="<$MTBlogURL$>js/pagerank/prototype.js"></script>
4. <script type="text/javascript" src="<$MTBlogURL$>js/pagerank/prototype.pagerank.js"></script>
1. jQuery 版の場合
3. <script type="text/javascript" src="<$MTBlogURL$>js/pagerank/jquery.js"></script>
4. <script type="text/javascript" src="<$MTBlogURL$>js/pagerank/jquery.pagerank.js"></script>
最後にアクセスランキングを表示したいページ内のお好きなところに以下を追加します。
1. <div id="pagerank_viewer"><script type="text/javascript">pagerank_view();</script></div>

以上で設置完了です。ブラウザから表示確認してください。

そそ、大事なこと忘れてました。
Movable Type 4をお使いの人はテンプレート・モジュールの『ヘッダー』を以下のように変更してください。ブラウザに依存するのか、タイトル部分が改行されてログ出力されてしまうケースがあるようです。
対策は検討中です。

<MTIf name="entry_template">
<title><$MTGetVar name="page_title"$> - <$MTBlogName encode_html="1"$></title>
<MTElse>
<MTIf name="main_index">
<title><$MTBlogName encode_html="1"$></title>
<MTElse>
<title><$MTBlogName encode_html="1"$> - <$MTGetVar name="page_title"$></title>
</MTIf>
</MTIf>

出力されるタグについて

出力されるランキングのタグは以下のような構成になっています。

<ul id="page-rank" class="widget-list">
<li class="widget-list-item rank-list-odd">
<a title="●●●" href="http://■■■" target="_blank">
<span class="right rank-list-1st">アクセス数</span>ページタイトル</a></li>
<li class="widget-list-item rank-list-eve">
<a title="●●●" href="http://■■■" target="_blank">
<span class="right rank-list-2nd">アクセス数</span>ページタイトル</a></li>
<li class="widget-list-item rank-list-odd">
<a title="●●●" href="http://■■■" target="_blank">
<span class="right rank-list-3rd">アクセス数</span>ページタイトル</a></li>
<li class="widget-list-item rank-list-eve">
<a title="●●●" href="http://■■■" target="_blank">
<span class="right">アクセス数</span>ページタイトル</a></li>
</ul>
<p style="text-align:right;">30日間ログを集計します。</p>

上記は rank_view.php ファイル内の 45 行目～ 73 行目で出力するタグを作成してます。

rank_view.php / 45 行目

$cnt = 0;
$s = "<ul id='page-rank' class='widget-list'>\n";
foreach ($count as $key => $val)
{
if ( $cnt++ % 2 )
$class = 'rank-list-odd';// 奇数番号の場合
else
$class = 'rank-list-eve';// 偶数番号の場合
if (3 < $cnt)
$rankclass = '';
else
{
if ( $cnt == 1 )
$rankclass = ' rank-list-1st';
elseif ( $cnt == 2 )
$rankclass = ' rank-list-2nd';
elseif ( $cnt == 3 )
$rankclass = ' rank-list-3rd';
}
$s .= '<li class="widget-list-item '.$class.'"><a title="'.$title[$key].'" href="'.$url[$key].'" target="_blank">';
if ($GLOBALS['SHOW_COUNTER']) {
if (2 == $GLOBALS['SHOW_COUNTER']) {
$val = sprintf("%3.2f%%", ($val / count($count) * 100));
}
$s .= '<span class="right'.$rankclass.'">'.$val.'</span>';
}
$s .= $title[$key].'</a></li>'."\n";
// 指定された上位ランク数に達したら終了します
if ( $GLOBALS['VIEW_COUNT'] && $cnt >= $GLOBALS['VIEW_COUNT'] ) break;
}
$s .= '</ul><p style="text-align:right;">30日間ログを集計します。</p>';

ざっと説明すると、

50 ～ 53 行目
リンクリストの背景をシマシマにするクラス名を処理してます。
- .rank-list-odd: 奇数番リスト
- .rank-list-eve: 偶数番リスト
55 ～ 65 行目
ランキングの順番を差別化するクラス名を処理してます。
- .rank-list-1st: 1 位
- .rank-list-2nd: 2 位
- .rank-list-3rd: 3 位
67 ～ 77 行目
リンクリストを作成しています。
69 ～75 行目
アクセスカウンタの表示／非表示、パーセンテージ表示選択時の処理してます。

必要でしたらお好みでカスタマイズしてください (￣∇￣)/

Edit
Permalink
50 Comments
1 TrackBack

Trackback Pings(1)

TrackBack URL for this entry:

from MovableTypeのススメ: MovableType備忘録さんで公開されているAjaxを用いたアクセスランキン...
Tracked on November 2, 2007

Comments(50)

#1: Posted by さじ @ October 19, 2007 [REPLY]: こんにちは。
お世話になってます。
さっそく設置させてもらいました。
なぜかCookie有効／無効のフラグを1にするとJavascriptのエラーがでますが、
まぁなくてもよさそうなので。
無事動いています。
複数ブログ対応でたすかりました。ありがとうございますー。
（ブログが4つあるうちの2つだけのランキングがみたい。。。なんてのは無理ですよね。。。）

#2: Posted by K君 @ October 19, 2007 [REPLY]

先日jQuery版にコメントしてからすぐの対応、とても助かりました（T_T）
早速DLし、設置したところ、最初全く動かずいろんな所をいじった結果
jquery.pagerank.jsの31行目のデフォルトの状態
var pagerank_home_url = 'pagerank/';
では動きませんでしたが
var pagerank_home_url = 'http://自分のURL/pagerank/';
としたところ、元気に動きました。
もしかして当たり前のことなのか偶然なのかわかりませんが御礼と報告を兼ねましてコメントさせて頂きます。

あ。あと、index.phpにブラウザからアクセスしても真っ白なのですが、設置ページでは普通に動作しています。これはこれで大丈夫なのでしょうか？？

#3: Posted by bzbell @ October 20, 2007 [REPLY]

>>1 さじさん

こんばんわ^^

遅くなってすいませんでした (●＞∀＜●)

> なぜかCookie有効／無効のフラグを1にするとJavascriptのエラーがでますが、

えぇ～ Σ(￣Д￣；)!! Cookie は有効にした方が良いですよ。リロードでもカウントされてしまうので。 jquery.pagerank.js を確認したところ、55 行目が

pagerank_set_cookie -> rank_set_cookie

のように記述ミスしてました。ごめんなさい。正しくは pagerank_set_cookie になります。

> （ブログが4つあるうちの2つだけのランキングがみたい。。。なんてのは無理ですよね。。。）

なるほど。そういう使い方もありですね。
チョビッと検討してみます♪

#4: Posted by bzbell @ October 20, 2007 [REPLY]

>>2 K君さん

こんばんわ^^

> もしかして当たり前のことなのか偶然なのかわかりませんが御礼と報告を兼ねましてコメントさせて頂きます。

ありがとうございます♪

<$MTBlogURL$> は MT のタグでして、ブログの URL が表示されます。
ですので、K君さんの変更方法は正しいです (￣∇￣)b
説明不足でごめんなさい。

> あ。あと、index.phpにブラウザからアクセスしても真っ白なのですが、設置ページでは普通に動作しています。これはこれで大丈夫なのでしょうか？？

あれっ!? ホントだ!! index.php を見たら、6、7 行目が

jquery.js -> jqeury.js
jquery.pagerank.js -> jqeury.pagerank.js

のように記述ミスしてますね (;￣∇￣A すいません。

#5: Posted by TON80 @ October 21, 2007 [REPLY]

こんばんは。何か良い記事別アクセスランキングを設置できないものかと探していましたら
イメージにぴったりのものを公開されているようなのでjQuery版を早速ダウンロードさせていただきました。
それにユーザーがテストしてバグを発見してより良いものを作り上げていく雰囲気がとても良いですね。

このライブラリの件ですが、これはトップページも必ずカウントされてしまうのでしょうか？？
Movabletype備忘録様でもトップページをカウントしているようですが
トップページをカウント除外とする方法もしくは代替する方法などは無いでしょうか？？

お手隙の際にでもお返事いただけましたら幸いです。
宜しくお願いいたします。

#6: Posted by bzbell @ October 21, 2007 [REPLY]

>>5 TON80 さん

こんばんわ^^

> トップページをカウント除外とする方法もしくは代替する方法などは無いでしょうか？？

もしかして、普通はトップページってカウントに数えないものなんですか (;￣∇￣A !?
言われてみればトップページのカウントが多いのは当たり前!? ですもんね。

では、トップページは除外するようなオプション付けますね。
チョビッとお待ちください♪

#7: Posted by cool_ni_ikou @ October 23, 2007 [REPLY]

はじめまして、アクセスランキングを使わせていただいています。
とてもすばらしいもので、離脱率軽減に役立っております。
感謝しています。

jQuery版にて気が付いたことが1点ありましたのでご報告いたします。
document.ready以下のfunction部分に
prototypeと併用できるよう、jQuery.noConflict( )が記述されています。
コレにより、他のプラグインが動作しないことが起きるかと思われます。
実際にタブプラグインとの併用で動作異常がありました。

jQuery.noConflict( );を外し、$エイリアスのパターンも用意しておいたほうがよろしいかと思いました。

質問です。
今現在30日間でのアクセスランキングを表示しています。
2Weeksでのアクセスランキングも増やし、タブ形式で読み込む場合、
別フォルダにて同じスクリプト（php)を用意した方がよろしいでしょうか？
phpに関しては、全く知識が無いのでお時間ある時にでもご返事いただければ幸いです。

今後とも役立つスクリプト開発がんばってください。
ではでは～。

#8: Posted by bzbell @ October 23, 2007 [REPLY]

>>7 cool_ni_ikou さん

こんにちわ^^

使っていただいてありがとうございます。

> 実際にタブプラグインとの併用で動作異常がありました。
> jQuery.noConflict( );を外し、$エイリアスのパターンも用意しておいたほうがよろしいかと思いました。

えぇーー Σ(￣Д￣；)!! そうなんですかっ!!
コンフリクトの記述すると、jQuery プラグインとの併用ができなくなることがあるんですね!?
知りませんでした (;￣∇￣A
勉強になりました。jQuery プラグインと併用／確認して対応します。

> 今現在30日間でのアクセスランキングを表示しています。
> 2Weeksでのアクセスランキングも増やし、タブ形式で読み込む場合、
> 別フォルダにて同じスクリプト（php)を用意した方がよろしいでしょうか？

なるほど。そいう使い方もありですね。
PHP 側で各コンフィグを固定するのではなく、パラメータとして渡すことでいろんなニーズで PHP の動作を変えられるようにした方が良さそうですね (￣∇￣)b

検討してみます♪

#9: Posted by Yumi @ November 2, 2007 [REPLY]

ずぶの素人です・・・・

さらにＭＴ初心者です・・・

あつかましいにも程があるのかもしれませんが

記事拝見させて頂いて設置に挑戦してみました。。。

わからないながらも指示どうりやったつもりなのですが、

やっぱり表示できませんでした；；

ディレクトリ構成ご説明の通りの形です。

もしお邪魔でなければ宜しくご指導お願いします；；

下記は私の状況です。

ＭＴ４

チカッパというサーバーで使用しています。

プロトタイプで挑戦してみました。

ご覧頂けると分かると思うのですがページはこんな状態です。。。
↓
http://www.infomaji.com/js/pagerank/rank_post.php

アクセスログのファイルも集計期間を保持しておくファイルもサーバー上に出来上がってこないので、その辺に問題があるのでしょうか？；；

ファイル指定はデフォルトの状態から変更していません；

良くわからない部分として４の

一通り変更したら、pagerank/ フォルダごとサーバにアップロードします。
また、MT の管理画面からインデックステンプレートを新規作成して、prototype.pagerank.js( or jquery.pagerank.js )をコピー & ペーストして再構築すると、ブログ ID や URL などが自動的に割り当てられます。

という部分なのですが、自分なりの解釈でprototype.pagerank.jsを開いて
中身をコーピーし、prototype.pagerank.jsを出力先に指定して保存しました。

このあたりで何か問題があるのでしょうか？；；

もしご良よしければご指導頂けると幸いです。

#10: Posted by Yumi @ November 2, 2007 [REPLY]

bzbellさんこんばんわ。

お返事も頂けていないのに何度も申し訳ありません；；

よくよく読ませて頂いていて
『Ajaxでアクセス・ランキングを表示する』
という以前の記事を見つけさせて頂きました。

こちらでも試してみようと思い、挑戦している途中で気付いたのですが、

http://www.●●●
｜
＋--pagerank　　←ここの部分のパーミッションを７７７に
｜　　＋～～～～　　　　　　　　　しないとダメだったんですね＞＜
｜　　｜～～～～～　　　　　　　ごめんなさい；；
（『Ajaxでアクセス・ランキングを表示する３』の時はpagerankの上にjs階層）

一度『Ajaxでアクセス・ランキングを表示する３』でアップロードしたフォルダやファイルを消して今『Ajaxでアクセス・ランキングを表示する』にチャレンジ中なのですが、ログファイルがちゃんと生成される所までは行けました！

ですが・・・・

またつっかえてしまいました；

きちんとログも記録されていて『/pagerank/index.php』では表示されるのですが、表示させたいページに表示されません；

今回はきちんと理解しようと、コメントや追記にも目を通したのですが分かりませんでした；（スタイルシートはbzbellさんがコメントで書いていた物をそのまま自分のスタイルシートに足しました）

本当に申し訳ないのですが、ご指導いただけると幸いです＾＾

#11: Posted by id:bzbell @ November 2, 2007 [REPLY]

>>10 Yumi さん
>>9 Yumi さん

こんばんわ^^
返事が遅くなってすいません。

> 自分なりの解釈でprototype.pagerank.jsを開いて中身をコーピーし、prototype.pagerank.jsを出力先に指定して保存しました。

はい。Yumi さんの方法で OK です。
また、パーミッションの件ですが、777 ではセキュリティ的なこともあるので 755 としてみてはどうでしょ (￣∇￣)b

表示の件ですが、

まず HTML ヘッダ(<head>～</head>)の間に以下を追加します。
```
<script type="text/javascript" src="<$MTBlogURL$>js/pagerank/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/pagerank/prototype.pagerank.js"></script>
```
上記はこの記事の例で示したディレクトリ構成の場合になります。
異なるディレクトリ構成の場合には、それに合わせて URL を変更してください。

次にランキング表示させたい場所に以下を追加します。

<div id="pagerank_viewer"><script type="text/javascript">pagerank_view();</script></div>

以上でランキング表示されるようになります。
また、CSS は別途 Yumi さんのお好みで読込むようにしてください♪

たとえば、index.php 内の <style type="text/css">～</style> の間をコピーして js/pagerank/pagerank.css というファイル名で保存して、HTML ヘッダ(<head>～</head>)の間に以下を追加します。

<link rel="stylesheet" href="<$MTBlogURL$>js/pagerank/pagerank.css" type="text/css" />

URL は保存先の URL に変更すればスタイルが適用されます (￣∇￣)b
どうでしょ…この説明で分かりますか (●´∀｀●)

#12: Posted by Yumi @ November 3, 2007 [REPLY]

早々のお返事ありがとうございます＾＾
こんなに早くお返事頂けると思ってなかったのでビックリしてます（笑）

今ver.3のプロトタイプの方でチャレンジ中なのですが、
またつまずいてしまいました；；

http://www.infomaji.com/●●●/●●●/●●●.php
↑こんな状態です；；

もう少し自分なりに頑張ってみますので、
またご報告差し上げます＾＾

#13: Posted by bzbell @ November 3, 2007 [REPLY]

>>12 Yumi さん

こんばんわ^^

上記ページ拝見させてもらいました（￣∇￣）

prototype.pagerank.js 中に <$MTBlogID$>( 21 行目 )や<$MTBlogURL$>( 31 行目 )、<$MTBlogName$>( 163 行目 )に MT のタグがそのまま使用されてます。

これらは >>9 で Yumi さんがやられたように、インデックス・テンプレートを作成してコピー & ペーストして再構築することで正しい値に変換されるところです。

インデックス・テンプレートを使用しない場合、上記の箇所を手修正して試してみてください。

説明下手ですいません。
もう少し分かりやすく記事の方修正します (m;_ _)mペコ

#14: Posted by Yumi @ November 3, 2007 [REPLY]

わぁん＞＜
ありがとうございます；；
意味が分かりました＾＾

出力先をprototype.pagerank.jsにしちゃってました；

js/pagerank/prototype.pagerank.jsを出力先にしたらなおったやつが出力されてました＾＾

このまま頑張って続けてみます！！

ご丁寧にご指導いただき
本当にありがとうございます＾＾

#15: Posted by bzbell @ November 3, 2007 [REPLY]

>>14 Yumi さん

> このまま頑張って続けてみます！！

はい。がんばって (●＞∀＜●)／
わたしの説明が下手っぴでご迷惑をおかけしてすいません。

わたししばらくパソコンの前で待機(ネットを徘徊)してますので、何かありましたらご連絡ください♪

#16: Posted by Yumi @ November 4, 2007 [REPLY]

bzbellさん・・・・

早速なんですが・・・・

http://www.infomaji.com/●●●/●●●/●●●.php
↑
この状態から抜け出せません；

サーバーを見てみたらrank_configで指定したアクセス情報をためこむファイルが出来上がってきてませんでした；

アクセスログを取りたいページに貼り付けるのは

js/pagerank/prototype.js"> js/pagerank/prototype.pagerank.js">

↑のだけでいいんですよね？
（ヘッダー内に貼り付けてあります）

それとも『Ajaxでアクセス・ランキングを表示する』の記事の方で書いてあった物も書き込んだ方がいいのでしょうか？ ↓ ajax_rank_post(, "", "");

このページのやり方だけみてやれば大丈夫だと思い込んでるのですが勘違い（笑）でしょうか？（泣）

#17: Posted by bzbell @ November 4, 2007 [REPLY]

>>16 Yumi さん

まず、prototype.pagerank.js を prototype.js で上書きしてませんか (;￣∇￣A
prototype.pagerank.js の内容を確認してください。

あとランキング表示についてですが、>>9 でご説明したように、HTML ヘッダ内の各 JavaScript の読み込みと、ページ内でランキングを表示させたい場所に以下を追加してください。

<div id="pagerank_viewer"><script type="text/javascript">pagerank_view();</script></div>

#18: Posted by Yumi @ November 4, 2007 [REPLY]

bzbellさん！

ご報告です！

表示まで出来ました＾＾

素人質問ばかりの私に丁寧に説明して下さり本当にありがとうございます＾＾

とても分かりやすく説明していただけてたんだなって出来て気付きました；；

理解力のなさで本当にお手数おかけしました；

ここから表示方法
（CSSについては１１でご説明頂いた形でやってみます）
を自分なりに頑張ってみるつもりです＾＾

出来上がり次第またご報告差し上げます＾＾

ﾎﾝﾄにありがとうございました＾＾

#19: Posted by bzbell @ November 4, 2007 [REPLY]

>>18 Yumi さん

こんばんわ^^

> 表示まで出来ました＾＾
> 素人質問ばかりの私に丁寧に説明して下さり本当にありがとうございます＾＾

やりましたネっ (●´∀｀●) ♪
わたしもうまく説明できなくってすいませんでした。

文章だけで説明するってホント難しい!! 改めて実感しました (;￣∇￣A

> 出来上がり次第またご報告差し上げます＾＾

はい。以前のコメント中の URL は消しておきますね。

#20: Posted by Yumi @ November 7, 2007 [REPLY]

bzbellさん、こんばんは＾＾

CSSに頑張って挑戦しているのですが、
２つ程ご指導頂きたく書き込みさせて頂きます。
（何度も申し訳ありません；）

ログ取得されるページタイトルについての質問です。
私のサイトでは、投稿時のタイトルの最初と最後に記事ヘッダー上で文字を入れてあります。（HPタイトルなど）
ログ取得の際、または、表示の際に純粋な記事タイトルだけを表示したいのですが、何か手はありますでしょうか？

もう、ひとつはランキング～位という文字を記事タイトルの前に入れたいのですが、ある程度知識がないとむずかしいでしょうか？
画像の方が簡単なのであれば画像でも頑張ってみるつもりですが、
簡単なやり方などあれば教えて頂けると幸いです。

ご多忙かと存じますが宜しくご指導お願いします。

#21: Posted by bzbell @ November 7, 2007 [REPLY]

>>20 Yumi さん

こんばんわ^^

ご質問の件ですが以下のように対応すれば可能です (￣∇￣)b

ページタイトルの件

prototype.pagerank.js 内の162 行目でサイトタイトルを削除する処理があります。その行では '- サイトタイトル名' という文字列を削除する処理になっています。
ですので、Yumi さんとこのサイトでしたら以下のように変更すればご希望通りの表示ができます。
```
var title    = encodeURIComponent(document.title.replace(/^.*:(.*):.*$/$1/, ''));
```
ランキング表示の件

ランキング表示は Yumi さんが言われるようにイメージを使うのが無難かもですね（￣∇￣）
テキストで表示させたい場合には、rank_view.php 内の 79 行目を以下のように変更します。
```
$s .= sprintf("<span class='ranking'>%2d位</span>%s", $cnt, $title[$key]).'</a></li>'."\n";
```
CSS で ranking というクラスでスタイルを設定可能です。

以上です。わたしの方で試したわけではないのでご確認ください。

#22: Posted by Yumi @ November 8, 2007 [REPLY]

bzbellさまさまさま

いつもありがとうございます；；

ランキング表示うまく行きました＾＾

記事タイトルの方はちょとうまくいかなかったのですが、
（一度再構築後、一度アクセスログファイルを消したら作られてこなくなっちゃいました；）
また読み違いがあるといけないので明日もう一度チャレンジしてみます＾＾

本当にいつもありがとうございます＾＾
技術力に感服ですｗ

#23: Posted by bzbell @ November 8, 2007 [REPLY]

>>22 Yumi さん

おはようございます。
すいません、正規表現が間違ってました。
正しくは以下の通りです。

var title    = encodeURIComponent(document.title.replace(/^.*:(.*):.*$/, "$1"));

ご確認ください (;￣∇￣A

#24: Posted by Yumi @ November 8, 2007 [REPLY]

bzbell様

こんばんわ＾＾
全てうまくいきました！

本当にお世話になりました＾＾

ありがとう。

無事設置できﾎﾝﾄに感謝です。

また機会がありましたら宜しくお願い致します＾＾

ではでは！

#25: Posted by bzbell @ November 8, 2007 [REPLY]

>>24 Yumi さん

こんばんわ^^

あっ!! ホントだ。良かったですね (●´∀｀●)
自分の希望通りに作れると嬉しいですよね♪

今後ともよろしくですの (●＞∀＜●)／

#26: Posted by 桃太郎 @ November 11, 2007 [REPLY]: bzbellさん、こんばんは
やっとページランク設置できました
ありがとうございました！

#27: Posted by bzbell @ November 11, 2007 [REPLY]

>>26 桃太郎さん

こんにちわ^^

> やっとページランク設置できました

はい。先ほど桃太郎さんとこのサイト見てきました。
でも、アクセスログは取られてないようです。
以下に気になった点を記します。参考にしてください。

prototype.js が重複して HTML ヘッダ内に明記されている。
MovableType MEMO のテンプレートを使う場合は prototype.pagerank.js は不要です。prototype.ajax.js 内に組込み済みです。
タグ検索するとレイアウトが崩れています。おそらく、システムテンプレート内の「検索結果」テンプレートが適用されてないと思われます。
コメント投稿ができない。サインインしようとすると、ページ遷移するのですがその後元のページに戻れませんでした。

以上です。

#28: Posted by wanwan @ November 14, 2007 [REPLY]

bzbellさま、こんばんわ。
ランキングを取りたくてこのjsを導入したのですが、私の方でも上手く動きません。

基本的に、エントリーページ内に、

と書いておき、pagerank自体のディレクトリも、

http://www.age1116.com/●●●/●●●/

にしてあるのですが、上手く記録を取ってないようです。
また、集計したモノをindex.htmlに張っているのですが、これも表示してくれていません。
多分、設定自体どこかおかしいとは思っているのですが、自分では解決出来なくなってきました。
もし、よろしかったらおかしいところ指示していただけると助かります。

ではでは。

#29: Posted by bzbell @ November 14, 2007 [REPLY]

>>28 wanwan さん

こんばんわ^^

wanwan さんとこのソースを確認させてもらいました (m;_ _)mペコ
何だかログ収集されてるようですよ (;￣∇￣A
自己解決かな!?

でも、チョビッと気になったことがあるので以下に記します。

prototype.js と prototype.ajax.js を <head>～</head> の間に追加した方がいいかも、です。
prototype.ajax.js の 163 行目にある、<$MTBlogName$> を書き換えてください。
元々は prototype.ajax.js をインデックス・テンプレートで作成することで、MT タグが変換されるようにしてます。ですので、普通にアップロードした場合は手動で書き換える必要があります。

また、163 行目の処理はエントリページタイトル中のサイト名を削除してます。
たとえば wanwan さんとこのサイトでいうと、各ページタイトルから 'Computer U Relax: ' を削除するようなことをやってます。具体的には以下のように修正してください。
```
var title    = encodeURIComponent(document.title.replace('Computer U Relax: ', ''));
```
上記のように修正することで、各ページのタイトルを純粋なページタイトルとしてログ収集することができます。
てか、これについては説明してませんでしたね (;￣∇￣A すいません。

以上です。

う～ん…わたしの説明がヘタレですいません。
これはプラグイン化した方がいいかも、なんて考えてます (;￣∇￣A

#30: Posted by Wanwan @ November 15, 2007 [REPLY]

丁重な解説ありがとうございます。
なんやかんややってなんとか自己解決できましたが、～のところは修正しちゃいます。

ありがとうございました。_(。。)_

また、PLUGINは期待しています。(・∀・)！

#31: Posted by Wanwan @ November 15, 2007 [REPLY]

連続で投稿すいません。(汗）

今、ブラウザ上での検証をie、Firefox、Safariでやっているのですが、Safari上でみるとランキング部分の文字化けが発生してしまうようです。
試しに他の方のページを見ても（実はここも）、同じように発生してしまうようで、原因が特定出来ない状態です。

色々文字コード等をいじってはいるのですが、二進も三進もいかない状態で、ちょっと困っております。
有効な手だてなどありましたら、お教えいただけるとありがたいです。

#32: Posted by bzbell @ November 15, 2007 [REPLY]

>>30 Wanwan さん
>>31 Wanwan さん

こんにちわ^^

解決してよかったです…といいたいところですが、Safari ではわたし検証したことないんです。
文字化けってことは、試しに以下のようにしてみてください。

<script type='text/javascript' src='<$MTBlogURL$>/js/prototype/prototype.ajax.js'  charset='<$MTPublishCharset$>'></script>

#33: Posted by Wanwan @ November 15, 2007 [REPLY]

早速のご返事ありがとうございます。

一応、こんな感じでいれてみました。

しかし、Safariのみ文字化けが発生してしまうようです。
多分Safari側での問題なのでしょうが、気持ち悪いですね。

#34: Posted by bzbell @ November 15, 2007 [REPLY]

>>33 Wanwan さん

こんばんわ^^

> 一応、こんな感じでいれてみました。

ほしぃ～(＞。＜)!!
微妙に違ってますね (;￣∇￣A
正しくは、prototype.pagerank.js の方に文字コード指定してみてください。

とは言っても、これで改善されるかどうかはわたしの方では確認できないのですけど♪

以下のページで Safari での Ajax について記されてます。
http://www.bricklife.com/weblog/000628.html

#35: Posted by Wanwan @ November 15, 2007 [REPLY]

ご丁重な説明ありがとうございます。
しかし、Safariの文字化け問題、根が深そうですね。

bzbell様のご指示通り修正してみましたが、やはり解決はしないようですし、元データを見てもUTF-8になっていますから、もう殆どSafari側の問題のような気がします。

とりあえず、Safari側の修正を待ってみようかと思います。

#36: Posted by bzbell @ November 15, 2007 [REPLY]

>>35 Wanwan さん

＆gt; bzbell様のご指示通り修正してみましたが、やはり解決はしないようですし、元データを見てもUTF-8になっていますから、もう殆どSafari側の問題のような気がします。

そうですかぁ。残念。
お役に立てなくってすいません（つω-`｡）

てか、わたしも人事じゃないんですよねぇ。MAC 買っちゃおうかなぁ (●´∀｀●)

#37: Posted by rui @ November 19, 2007 [REPLY]

いつも色々と参考にさせて頂いています。

このランキング機能もずっと入れたくて、ようやく希望のものを見つけて喜んで設置しているのですが
MTをShift-JIS対応にしているのでかなり苦戦しています。

どうにか表示の段階までは無事にできたのですが、後１歩皆様と同じくタイトルの表示に苦戦しています。

エントリーのタイトルの表示が
「エントリータイトル - カテゴリ : ブログ名」
という感じにしているのですが、
『 : ブログ名』の削除までは出来たのですが、『 - カテゴリ』も削除したいと思っています。

プログラムの知識が乏しく、どうしてもよく分かりません。
お手数かけますが、ご教授頂けたらと思いますm(_ _)m

#38: Posted by bzbell @ November 19, 2007 [REPLY]

>>37 rui さん

こんばんわ^^

> いつも色々と参考にさせて頂いています。

わぁ～♪ありがとうござますぅ (*´ω｀*)
ご質問の件ですが、以下のようにすればご希望通りにできるかと。

var title    = encodeURIComponent(document.title.replace(/^(.+) - .*$/, "$1"));

うまくいかなかったらご連絡ください (●´∀｀●)

#39: Posted by 桃太郎 @ November 20, 2007 [REPLY]

bzbellさん、こんにちわ！

ご指摘ありがとうございました。
とりあえずコメントは認証無しコメントだけにして無事解決？しました。
あとはなんとなく動いてるのでうまくいってる？はずです（笑）

もう一点教えてください。
bzbellさんのとこだとエントリータグをクリックすると、びよ～んとタグ検索結果までスクロールするのですが、これはどうすればできるのでしょうか？

#40: Posted by bzbell @ November 21, 2007 [REPLY]

>>39 桃太郎さん

こんばんわ^^

ご質問の前に桃太郎さんとこでタグ検索したら段落ちしてたので、まずはそちらを改善しましょ (￣∇￣)b
システムテンプレートの検索結果・テンプレートが以下のようになってるか確認してください。

<MTSearchResults>
    <MTBlogResultHeader>
        <div class="widget-results widget">
            <h3 class="widget-header">タグ検索結果</h3>
            <div class="widget-content">
                <ul class="widget-list">
    </MTBlogResultHeader>
    <li class="widget-list-item"><a href="<$MTEntryPermalink$>"><span class="right"><$MTEntryDate format="%y/%m/%d"$></span><$MTEntryTitle$></a></li>
    <MTBlogResultFooter>
                </ul>
                <p><a class="imgbutton" href="javascript:void(0);" onclick="clear_block('tagsearch_results')"><span>CLEAR</span></a></p>
            </div><!-- widget-content -->
        </div><!-- widget-searchresults -->
    </MTBlogResultFooter>
</MTSearchResults>

たぶん検索結果テンプレートに問題があるのではないかと思われまする。
そちらが正しく表示されるようになったら、わたしのサイトで実際に使ってるエフェクトを設置してくださいね。
そうしないとトラブった時に何が原因なのか判んなくなっちゃいますので♪

タグ検索時のスクロールは、scriptaculous.js のエフェクトを使用してますの。
以下の手順で設置してください。

まず、scriptaculous.js をダウンロードして、prototype.js と同じ場所に scriptaculous/ というディレクトリを作成して、その中にアップロードしてください。
エフェクト用 JavaScript をアップロードします。
以下に記す JavaScript をコピー & ペーストして適当なファイル(たとえば、prototype.effect.js )に保存します。
```
Event.observe(window, 'load', function() {
$$('a[href^=#]:not([href=#])').each(function(element) {
element.observe('click', function(event) {
new Effect.ScrollTo(this.hash.substr(1));
Event.stop(event);
}.bindAsEventListener(element))
})
})
```
保存したら prototype.ajax.js と同じ場所にアップロードしてください。

次にテンプレートモジュールのブログ記事のメタデータ・テンプレートを変更します。具体的にはブログ記事のメタデータ・テンプレート内の 9 行目を以下のように変更します。

<li class="entry-tag">Tags: <MTEntryTags glue=", "><a href="#tagsearch_results" rel="tag" onclick="javascript:ajaxload_content(['<$MTCGIPath$>', '<$MTSearchScript$>'].join(''), 'tag=<$MTTagName$>&amp;blog_id=<$MTBlogID$>&amp;IncludeBlogs=<$MTBlogID$>', 'tagsearch_results');"><$MTTagName$></a></MTEntryTags></li>

最後にテンプレートモジュールのヘッダ・テンプレート内の 46、47 行目を以下のように変更します。

<script type="text/javascript" src="<$MTLink template="JavaScript(prototype.ajax.js)" extract_url="1"$>prototype.js"></script>
<script type="text/javascript" src="<$MTLink template="JavaScript(prototype.effect.js)" extract_url="1"$>scriptaculous/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<$MTLink template="JavaScript(prototype.ajax.js)"$>"></script>
<script type="text/javascript" src="<$MTLink template="JavaScript(prototype.ajax.js)" extract_url="1"$>prototype.effect.js"></script>

以上で完了です (￣∇￣)/
設置がうまくいかないようでしたら、後日、記事にてもっと詳しく説明します。

#41: Posted by rui @ November 21, 2007 [REPLY]

素早いレスありがとうございます。

無事に希望通り表示されました(^-^*)
自分では出来なかったと思うので、とても助かりました。

もう１つ希望なのですが、結果の欄だけ表示させる事はできないでしょうか？
カテゴリーや月別ページはカウントはしないで、サイドバーにだけランキングとして表示させたいのですが・・。
インデックスのように指定すれば出来そうなのですが、よく分からなくて断念しました・・（Ｔ＿Ｔ）

今後改良の予定があるなら、ご考慮頂けると嬉しいですm(_ _)m

#42: Posted by bzbell @ November 21, 2007 [REPLY]

>>41 rui さん

こんばんわ^^

えと、確認ですが、

ランキング結果だけを表示させたい。
カテゴリや月別ページはランキングから除外したい。

上記については分かりました。後日記事にてその手順をご紹介しますね (￣∇￣)b

で、以下の件ですが、

サイドバーにだけランキングとして表示させたい。

についてですが、理解力が乏しくってよく分かりませんでした (;￣∇￣A ランキング表示する場所をサイドバーで表示したい･･･ということでしょうか。

#43: Posted by 桃太郎 @ November 21, 2007 [REPLY]

bzbellさん、こんにちわ！

何度もすみません。
もう一度検索結果テンプレートを確認してみましたが、問題はありませんでした。
私は今までIE6を使ってたので気付かなかったのですが、FireFoxだと確かに段落ちしてしまいました。
なぜかIE6とIE7だと段落ちせずにきちんと表示されています。

#44: Posted by 桃太郎 @ November 21, 2007 [REPLY]

bzbellさん、こんにちわ！

CSSをデフォルトに戻したらFireFoxでも段落ちせずに表示されるようになりました。
CSSを色々いじっているうちに、おかしくしてしまったようです。
ご心配おかけしましたm(_ _)m

#45: Posted by bzbell @ November 21, 2007 [REPLY]

>>43 桃太郎さん
>>44 桃太郎さん

> CSSをデフォルトに戻したらFireFoxでも段落ちせずに表示されるようになりました。
> CSSを色々いじっているうちに、おかしくしてしまったようです。
> ご心配おかけしましたm(_ _)m

あぁ～よかったぁ♪

#46: Posted by 桃太郎 @ November 22, 2007 [REPLY]

お世話になっております。
タグ検索時のスクロールを設定してみました。

タグをクリックするとタグ検索結果のところに飛ぶようになったのですが、bzbellさんのようにスクロールしてるとこが見えるようにするにはどうすればよいのでしょうか？

#47: Posted by bzbell @ November 22, 2007 [REPLY]

>>46 桃太郎さん

こんばんわ^^

> タグをクリックするとタグ検索結果のところに飛ぶようになったのですが、bzbellさんのようにスクロールしてるとこが見えるようにするにはどうすればよいのでしょうか？

JavaScript エラーしてますね。
まず、scriptaculous.js は prototype.js のバージョンに依存してますので、ダウンロードした scriptaculous.js の圧縮ファイル中の prototype.js に差し替えてみてください。

ちなみに、わたしが使ってる prototype.js は 1.4.0 です。
scriptaculous.js は 1.5.3 になります。

#48: Posted by 桃太郎 @ November 23, 2007 [REPLY]

bzbellさん、ありがとうございましたm(_ _)m

scriptaculous.js のprototype.js に差し替えたところうまく動作しました！
MTについてためになる記事が多いので、今後も参考にさせていただきます。
でわでわ。

#49: Posted by rui @ November 23, 2007 [REPLY]

bzbellさん、こんにちわ～。

＞サイドバーにだけランキングとして表示させたい。

表現力が乏しくて分かりにくくてすみません（＾＾；

・ランキング結果だけを表示させたい。
・カテゴリや月別ページはランキングから除外したい。

この２つと同じ事です。

カテゴリーや月別ページのサイドバーには、結果だけ表示させたいので、ランキングのカウントからは除外して、結果の表示だけさせたいと思っています。

お時間がある時にぜひ宜しくお願いしますm(_ _)m

#50: Posted by bzbell @ November 23, 2007 [REPLY]

>>49 rui さん

こんばんわ^^

以下のページでご要望の件ご紹介しました。
参考にしてください♪

http://bizcaz.com/archives/2007/11/23-215846.php

Ajaxでアクセス・ランキングを表示する３

ダウンロード

ディレクトリ構成

設置の仕方

出力されるタグについて

Trackback Pings(1)

Comments(50)

Post a Comment