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

• Jul052007
• Author: bzbell
• Categories: Customize
• Tags: jQuery, Page-Ranking

• Prev Page: jQueryで記事内容をアコーディオンのように表示する
• Next Page: RebuildQueue プラグイン

こんばんわ^^

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

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

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

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

ディレクトリ構成

http://●●●.com/
+--- pagerank/
+-- ajax-loader.gif
+-- jquery.js
+-- jquery.pagerank.js
+-- index.php
+-- rank_config.php
+-- rank_post.php
+-- rank_view.php

設置の仕方

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

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

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

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

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

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

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

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

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

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

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

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

90行目
変更前
var location = encodeURI(document.location);
変更後
var location = encodeURI(document.location.href);

• Related Entries
• 08/02/22Ajaxでアクセス・ランキングを表示する６
• 08/02/16Ajaxでアクセス・ランキングを表示する５
• 07/12/03jQuery でアンチエイリアスの角丸をやってみる（jQuery curvyCorners）
• 07/11/26jQuery でファイルアップロード( JqUploader )
• 07/11/23Ajaxでアクセス・ランキングを表示する４
• 07/10/19Ajaxでアクセス・ランキングを表示する３
• 07/08/09jQueryでフォーム入力エラー時にブルブルさせてみる
• 07/07/30jQueryでページ分割
• 07/07/29jQueryで横スライドなメニューを表示する
• 07/07/08ブログ内検索を高速化(jQuery版)

• Edit
• Permalink
• Comments(4)
• Trackbacks(0)