Movable Type 備忘録

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

  • Feb162008
  • Vote:
    http://bizcaz.com/archives/2008/02/16-163605.php
  • Categories: prototype
  • Tags:
  • Social Bookmark

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

via: アクセスランキング・プラグイン（prototype.pagerank.js）

こんにちわ^^

午前中は天気良くってテンション上がったので、午前中のうちに買い物行ってきました。
ついでに（いつものように）アイス買って公園で遊んでる子供たち見て和んでました (●´∀｀●)

でも今は雲ってます。

さて、以前訪問者さんからのご要望でページランキングにエントリページの概要もいっしょに表示したいとのことでしたので対応してみました。

ダウンロード

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

ディレクトリ構成や設置の仕方などはAjaxでアクセス・ランキングを表示する４でご紹介したのと同じです。
設置方法について上記ページを参考にしてください。

エントリ概要の表示の仕方

エントリの概要を表示したい人もいれば、したくない人もいるかと思います。 概要表示したくない人は今まで通りの使い方で問題ありません。
以下はエントリの概要を表示したい人向けの説明です。

  1. JavaScript を修正します。
    prototype.pagerank.js( or jquery.pagerank.js )内の以下の部分をコメントにしてください。

    1. prototype.pagerank.js の場合
    2. <mt:ignore>
    3. Event.observe(window, 'load', function() {
    4.     var location = encodeURI(document.location.href).replace(/#.*/,'');
    5.     var title = encodeURIComponent(document.title.replace(' - <$MTBlogName$>', ''));
    6.  
    7.     pagerank_post(pagerank_blogid, title, location, pagerank_blog_url, '');
    8. });
    9. </mt:ignore>

    上記赤い字の部分をコメント（削除）にします。
    以下は jQuery 版の場合です。

    1. jquery.pagerank.js の場合
    2. <mt:ignore>
    3. $(document).ready(function()
    4. {
    5.     var location = encodeURI(document.location.href).replace(/#.*/,'');
    6.     var title = encodeURIComponent(document.title.replace(' - <$MTBlogName$>', ''));
    7.  
    8.     pagerank_post(pagerank_blogid, title, location, pagerank_blog_url, '');
    9. });
    10. </mt:ignore>

  2. テンプレートモジュールを作成します。
    ログ収集 JavaScript 埋め込みの為のテンプレートモジュールを（たとえば、「トラッキングコード」という名前で）作成します。
    以下を内容をコピー & ペーストしてください。

    1. <script type="text/javascript">
    2. //<![CDATA[
    3. <MTSetVarBlock name="archive_type"><$MTArchiveType$></MTSetVarBlock>
    4. <MTIf name="archive_type" eq="Individual">
    5.     <MTSetVarBlock name="page_name"><$MTEntryTitle$></MTSetVarBlock>
    6.     <MTSetVarBlock name="page_desc"><$MTEntryBody words="18" convert_breaks="0"$></MTSetVarBlock>
    7. <MTElse>
    8.     <MTIf name="archive_type" eq="Page">
    9.         <MTSetVarBlock name="page_name"><$MTPageTitle$></MTSetVarBlock>
    10.         <MTSetVarBlock name="page_desc"><$MTPageBody words="18" convert_breaks="0"$></MTSetVarBlock>
    11.     <MTElse>
    12.         <MTIf name="archive_type" eq="Category">
    13.             <MTSetVarBlock name="page_name"><$MTArchiveTitle decode_html="1" remove_html="1"$></MTSetVarBlock>
    14.             <MTSetVarBlock name="page_desc"><$MTCategoryDescription$></MTSetVarBlock>
    15.         <MTElse>
    16.             <MTSetVarBlock name="page_name"><$MTBlogName$></MTSetVarBlock>
    17.             <MTSetVarBlock name="page_desc"><$MTBlogDescription$></MTSetVarBlock>
    18.         </MTIf>
    19.     </MTIf>
    20. </MTIf>
    21. pagerank_post(<$MTBlogID$>,"<$MTGetVar name="page_name" encode_js="1"$>","<$MTBlogURL$>","<$MTGetVar name="page_desc" encode_js="1"$>");
    22. //]]>
    23. </script>

    赤い字の部分がページごとに異なるページタイトル、ページの概要になります。

    [2008.02.19] 上記トラッキングコードですが、pagerank_post に渡す引数のページタイトル（第二パラメータ）とページ概要（第四パラメータ）は必ずダブルクォーテーション( " )で括ってください。
    また encode_js モディファイアも使用してください。

  3. テンプレートモジュールをインクルードします。
    先ほど作ったテンプレートモジュールを各テンプレート内に埋め込みます。埋め込む場所は <body>～</body> の間ならどこでも構いません。

    1. <$MTInglucd module="トラッキングコード"$>

  4. 再構築します。
    一通りテンプレート内に埋め込んだら、すべてのテンプレートを再構築して完了です。

出力されるタグについて

出力されるタグは以下の通りです。

  1. <ul id="page_rank" class="widget_list">
  2.     <li class="widget_list_item rank_list_odd">
  3.         <a title="●●●" href="http://■■■" target="_blank">
  4.         <span class="right rank_list_1st">アクセス数</span>ページタイトル<span class="desc">ページ概要</span></a></li>
  5.  
  6.     <li class="widget_list_item rank_list_eve">
  7.         <a title="●●●" href="http://■■■" target="_blank">
  8.         <span class="right rank_list_2nd">アクセス数</span>ページタイトル<span class="desc">ページ概要</span></a></li>
  9.  
  10.     <li class="widget_list_item rank_list_odd">
  11.         <a title="●●●" href="http://■■■" target="_blank">
  12.         <span class="right rank_list_3rd">アクセス数</span>ページタイトル<span class="desc">ページ概要</span></a></li>
  13.  
  14.     <li class="widget_list_item rank_list_eve">
  15.         <a title="●●●" href="http://■■■" target="_blank">
  16.         <span class="right">アクセス数</span>ページタイトル<span class="desc">ページ概要</span></a></li>
  17. </ul>
  18.  
  19. <p style="text-align:right;">14日間ログを集計します。</p>

青い字の部分がページ概要のタグになります。
スタイルについてはサンプルページを参考にしてください。

 Trackback Pings(1)

from 黒田哲司クロニクル

CSS Spriteを活用しよう - DesignWalker CSS背景画像を1枚にまとめてしまおうという手法。やってみよう、そうしよう。...

Tracked on February 18, 2008

 Comments(11)

#1: Posted by Real @ February 18, 2008 [REPLY]
user-pic

お忙しい中、さっそくアップ頂いてありがとうございます。
いま実装して表示を確認中なのですが、
ページ内にモジュールとして埋め込む「トラッキングコード」の部分で、書き出されたページを見るとjavascriptのエラーで弾かれてしまいます。
あと、ルートフォルダにも以前のバージョンのようにログのtxtファイルが生成されていなかったり…。
ということで、サイト上では空白のなにも無い状態となってます。

prototype.pagerank.js( or jquery.pagerank.js )のコメントアウトを取ればログファイルも生成されて表示されるのですが、概要文が表示されません。

一度ご確認いただけますでしょうか。

 
#2: Posted by Author Profile Page bzbell @ February 18, 2008 [REPLY]
user-pic

>>1 Real さん

こんばんわ^^

> prototype.pagerank.js( or jquery.pagerank.js )のコメントアウトを取ればログファイルも生成されて表示されるのですが、概要文が表示されません。

あちゃキャハハ
すいません。以下のコードを「トラッキングコード」テンプレートモジュールに上書きしてください。 

<script type="text/javascript">
//<![CDATA[
<MTSetVarBlock name="archive_type"><$MTArchiveType$></MTSetVarBlock>
<MTIf name="archive_type" eq="Individual">
<MTSetVarBlock name="page_name"><$MTEntryTitle encode_js="1"$></MTSetVarBlock>
<MTSetVarBlock name="page_desc"><$MTEntryBody words="18" convert_breaks="0" encode_js="1"$></MTSetVarBlock>
<MTElse>
<MTIf name="archive_type" eq="Page">
<MTSetVarBlock name="page_name"><$MTPageTitle encode_js="1"$></MTSetVarBlock>
<MTSetVarBlock name="page_desc"><$MTPageBody words="18" convert_breaks="0" encode_js="1"$></MTSetVarBlock>
<MTElse>
<MTIf name="archive_type" eq="Category">
<MTSetVarBlock name="page_name"><$MTArchiveTitle decode_html="1" remove_html="1" encode_js="1"$></MTSetVarBlock>
<MTSetVarBlock name="page_desc"><$MTCategoryDescription$></MTSetVarBlock>
<MTElse>
<MTSetVarBlock name="page_name"><$MTBlogName encode_js="1"$></MTSetVarBlock>
<MTSetVarBlock name="page_desc"><$MTBlogDescription encode_js="1"$></MTSetVarBlock>
</MTIf>
</MTIf>
</MTIf>
pagerank_post(<$MTBlogID$>,'<$MTGetVar name="page_name"$>','<$MTBlogURL$>','<$MTGetVar name="page_desc"$>');
//]]>
</script>

変更点は以下の通りです。

  • 各ページタイプの評価の順番を変更しました。 デフォルトはブログのタイトル、ブログの概要としています。
  • pagerank_post に渡すパラメータをカンマ( ' )で括りました。
  • encode_js を使用するようにしました。

以上です。
ご確認ください。もじもじ

 
#3: Posted by Real @ February 19, 2008 [REPLY]
user-pic

>>2 bzbell さん
修正版ありがとうございます。
早速書き換えて再構築してみました。
ばっちりJavascriptのエラーは解消しました。

ただ、ランキングの部分がまだ空白のままです。
手順どおりにいけてると思うのですが･･･。
テンプレートモジュールのトラッキングコードで生成されるパラメーターがprototype.pagerank.js( or jquery.pagerank.js )に上手く渡っていない感じがします。

あとこの方法だとdata.txtは生成されないですよね？？

 
#4: Posted by Author Profile Page bzbell @ February 19, 2008 [REPLY]
user-pic

>>3 Real さん

こんにちわ^^

> テンプレートモジュールのトラッキングコードで生成されるパラメーターがprototype.pagerank.js( or jquery.pagerank.js )に上手く渡っていない感じがします。

えっあせあせ!!
すいません。ロケーションの URL を渡してないですね。
prototype.pagerank.js( or jquery.pagerank.js )内の以下のように変更してくださいワクワク 

function pagerank_post(id, title, uri, desc) {
// 以下の 1 行を追加
var location = encodeURI(document.location.href).replace(/#.*/,'');
：
：
}
  1. pagerank_post の 3 番目のパラメータ location を削除します。
  2. その代わり、上記 1 行を追加します。

そうすればトラッキングコードはそのまま使えますもじもじ
今はお仕事中（のわりに返信してるし･･･）なので、配布スクリプトを変更できないのですが、帰宅したら改めて修正版を UP しますキャハハ

 
#5: Posted by Real @ February 19, 2008 [REPLY]
user-pic

>>4 bzbell さん

おはようございます。

早速下記の1行
var location = encodeURI(document.location.href).replace(/#.*/,'');
を足してみました。
しかし…うんともすんとも表示が変わりません。

一から読みなおして設置し直したりしてますが、改善の気配がなさそうです。
修正版がアップさせてから、もう一度仕切り直しします。

あと、一度動作のサンプルとか拝見させて頂くことはできるんですかね？？

 
#6: Posted by Author Profile Page bzbell @ February 19, 2008 [REPLY]
user-pic

>>5 Real さん

こんにちわ^^

> しかし…うんともすんとも表示が変わりません。

えぇーーーエーン!!
CORESERVER で確認したのですが、エントリ概要あり／なし混在でも概要ありの場合表示されたんだけどなぁあせあせ
ひょっとして、>>2 で付加したカンマ( ' )がまずいのかも。

わたしは（>>2）の対応なしで表示確認しましたが、エントリ文章の内容（たとえば、カンマが含まれてたりなど、JavaScript の構文に影響する文字が含まれてる）によっては送れないかもと思ってカンマや encode_js を付加したんだけど･･･もいちど確認してみます。

> あと、一度動作のサンプルとか拝見させて頂くことはできるんですかね？？

はい。
今はできないですけど帰宅したらサンプル公開しますワクワク

 
#7: Posted by Author Profile Page bzbell @ February 19, 2008 [REPLY]
user-pic

>>5 Real さん

お待たせしましたうぅ～ん
とりあえず、わたしのとこで確認したところエントリ概要は表示されるようです。
参考：今週いっぱい公開します

コメント中で見つかった location と再構築できなきなかった不具合は、対応したバージョンを UP しました。

 
#8: Posted by Real @ February 20, 2008 [REPLY]
user-pic

>>7 bzbell さん
修正版ありがとうございます。

早速ファイル一式差し替えて作業してみました。
でもやっぱり上手く表示されないんです。

月別アーカイブなどのページのトラッキングコードの概要部分が空白のパラメーターは拾ってdatファイルに書き込んでくれるので、ランキングに表示される（除外処理をすれば当然表示されません。）のですが、エントリーアーカイブページでのパラメーターはやっぱり上手く拾ってくれませんでした。

参考サイトを見ながら、まったく同じだなぁ～と思いつつ、しばらく行き詰まり状態です。

ただ、トラッキングコードのパラメーターは拾ってくれていると判明しただけ進歩・・・・・なのかな？

 
#9: Posted by Author Profile Page bzbell @ February 20, 2008 [REPLY]
user-pic

>>8 Real さん

こんにちわ^^

> 月別アーカイブなどのページのトラッキングコードの概要部分が空白のパラメーターは拾ってdatファイルに書き込んでくれるので、ランキングに表示される（除外処理をすれば当然表示されません。）のですが、エントリーアーカイブページでのパラメーターはやっぱり上手く拾ってくれませんでした。

そぅいぅことですか。
ページによってページ概要がロギングされないということですねパチパチ
そぅするとスクリプト側というよりトラッキングコード内の MT のコードに問題があるのかも、です。
わたしの方ではその部分は使用してないので、テンプレートモジュール用に作ったものなんですキャハハ
確認してみます。

 
#10: Posted by Author Profile Page I am Google @ March 5, 2008 [REPLY]
user-pic

いつも拝見させていただき、参考にさせていただいております。
ありがとうございます。
このたびランキングのエントリー概要表示版を導入しようと思いまして
上記手順と、コメントをすべて読みながら進めさせていただきまして、
最初にコメントアウトをする部分の

Event.observe(window, 'load', function() {
var location = encodeURI(document.location.href).replace(/#.*/,'');
var title = encodeURIComponent(document.title.replace(' - ', ''));

pagerank_post(pagerank_blogid, title, location, pagerank_blog_url, '');
});

こちらの部分がprototype.pagerank.js内に見当たらないのですが
こちらは、すでに削除されているものが配布されていらっしゃるのでしょうか？
日々お忙しい中誠に恐縮でございますが
もしご教示をいただければ幸いです。
どうぞよろしくお願いいたします。

 
#11: Posted by Author Profile Page bzbell @ March 5, 2008 [REPLY]
user-pic

>>10 bzbell さん

こんばんわ^^

> こちらの部分がprototype.pagerank.js内に見当たらないのですが
> こちらは、すでに削除されているものが配布されていらっしゃるのでしょうか？

あやや エーン
すいません。記事を書いてから、少しずつ改善したものが今の最新版になってます。

ですので、prototype.pagerank.js 内の 257 ～ 261 行目をコメント( または削除 )して頂けたらと思いますもじもじ

 

 Post a Comment

 

コメント用フィード