Movable Type 備忘録

 Ajax でアクセス・ランキングを表示する( jQuery 版 )

  • Jul052007
  • Vote:
    http://bizcaz.com/archives/2007/07/05-000431.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

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

こんばんわ^^

今日携帯からこのサイト見てみたらちゃんと読めた Σ(￣Д￣；)!!
前に携帯から普通のサイトって見れない･･･て聞いたことあったんだけど、ちゃんと読めるじゃん (;￣∇￣A

当然、スタイルシートは無視されてるけど、イメージも縮小表示されてるし、それにわりとサクサク表示されてた。
何だか知らないけど、すっごく得した気分で帰宅できたのココロ。

さて、今回はこちらのAjaxでアクセス・ランキングを表示するを jQuery 版としてカスタマイズしてみました。
今現在わたしのサイトでも使用してるものです。

以前のバージョンは prototype 版だったのですが、わたしのサイトでは prototype の使用をやめたので、それに伴って jQuery 版として作り直したものです。
主な変更点は、JavaScript の部分のみとなってます。

ディレクトリ構成

  1. http://●●●.com/
  2.  +--- pagerank/
  3.       +-- ajax-loader.gif
  4.       +-- jquery.js
  5.       +-- jquery.pagerank.js
  6.       +-- index.php
  7.       +-- rank_config.php
  8.       +-- rank_post.php
  9.       +-- rank_view.php

設置の仕方

  1. まずスクリプト一式をアップロードします。
    jquery.pagerank.zip をダウンロードして適当なフォルダに展開します。そして、上記ディレクトリ構成のようにアップロードします。

  2. 次に jquery.pagerank.js を変更します。
    以下の行を各自の環境に合わせて変更します。

    1. 10行目
    2. /*
    3.  * アクセスログを取りたいブログIDを設定
    4.  */
    5. var pagerank_blogid = 1;
    6. /*
    7.  * アクセスランキングを表示するIDタグ名称
    8.  */
    9. var pagerank_view_box = '#rank-viewer';
    10.  
    11. var pagerank_post_url = 'http://●●●/pagerank/rank_post.php';
    12. var pagerank_view_url = 'http://●●●/pagerank/rank_view.php';
    13. var pagerank_load_img = 'http://●●●/pagerank/ajax-loader.gif';

    赤い字の部分にアクセスログを集計するブログのブログIDを指定します。
    青い字の部分を各自の環境に合わせて変更します。
    緑の字の部分はアクセス・ランキングを表示する、Ajax の出力先の ID タグ名称になります。

    一通り変更したらサーバにアップロードします。

  3. 次にアクセスログを集計したい、すべてのページに以下を追加します。

    1. <script type="text/javascript" src="<$MTBlogURL$>pagerank/jquery.js"></script>
    2. <script type="text/javascript" src="<$MTBlogURL$>pagerank/jquery.pagerank.js"></script>

  4. 最後にアクセス・ランキングを表示したいページ内のお好きなところに以下を追加します。

    1. <div id="rank-viewer"></div>
    2. <script type="text/javascript">pagerank_view();</script>

    赤い字の部分は固定タグ名称になります。
    一通り追加したら変更ページの再構築を行います。

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

基本的な仕様はこちらのAjaxでアクセス・ランキングを表示すると同じです。
ログをクリアする期間などの変更は上記ページを参照してください。

- 2007.07.24 追記 -

アクセスページの URL にパス情報が付加されてしまって、同じページのアクセスなのに別ページとして扱われてしまう不具合を対応しました。 具体的には jquery.pagerank.js 内の以下の箇所を修正しました。

  1. 90行目
  2.  
  3. 変更前
  4. var location = encodeURI(document.location);
  5.  
  6. 変更後
  7. var location = encodeURI(document.location.href);

 Trackback Pings(0)

No trackbacks found.

 Comments(4)

#1: Posted by ゆにっく @ July 6, 2007 [REPLY]
user-pic

20日ぶりにmixiにログイン(^^;)したら、bzbellさんのマイミクさんが4人に増加!むむ、いつの間に!?それから、携帯でここ読めたんですか?うちのはどうやろう???書き込みとかも携帯からできるんかな?

 
#2: Posted by bzbell @ July 6, 2007 [REPLY]
user-pic

>>1 ゆにっく さん

こんにちわ^^

> 20日ぶりにmixiにログイン(^^;)したら、bzbellさんのマイミクさんが4人に増加!

はは (;￣∇￣A
お知り合いの方からマイミクがあったので見てみたら、他の方からのマイミクもあったので合わせて 4人になりました。

最近たまに mixi にログインしてますの。

> 携帯でここ読めたんですか?

そうなんですよ。
暇だったので携帯からわたしのサイトを検索して表示してみたら、見れちゃったからチョビッと以外でした (;￣∇￣A

 
#3: Posted by K君 @ October 18, 2007 [REPLY]
user-pic

はじめまして。
他に公開されているMT用のアクセスランキングの中でも手軽そうだったのでありがたく使わせていただく予定です。
で、手軽かと思ったら相当てこずっていて、どうしても出来ないことがありまして・・・。アドバイスをもらえたらと書き込んだ次第です；－＿－）

MTへ通常通りに設置し、通常通りに動いています。
が、ttp://123.ne.jp/# とか
ttp://123.ne.jp/#moreとか
ttp://123.ne.jp/#trackback
のように同じ記事ですが、アドレスにid的なものがついたりすると別ページと認識されてしまい上位を同じ記事で独占してしまったりします・・・・。
1位：ttp://123.ne.jp/
2位：ttp://123.ne.jp/#
3位：ttp://123.ne.jp/#more
のような・・・・。なんとか除外する方法やごまかせる方法は無いでしょうか・・・。

宜しくお願い致します。。。

 
#4: Posted by Author Profile Page bzbell @ October 18, 2007 [REPLY]
user-pic

>>3 K君 さん

こんばんわ^^

使っていただいてありがとうございます♪
でもご迷惑をおかけしてるようで (;￣∇￣A

わたしが使ってる、最新のスクリプトを公開します。
ご報告頂いてる不具合は解消されてます。

 

 Post a Comment

 

コメント用フィード