本文へジャンプ

トップページ > サンプル紹介 > 法則36 Ajaxを利用して人気記事ランキングを表示する

サンプル紹介

法則36 Ajaxを利用して人気記事ランキングを表示する

prototype.pagerank.jsのカスタマイズ

Cookieを有効にする
//14 行目
var pagerank_enable_cookie = 1;
ブログIDを指定する
//21 行目
var pagerank_blogid = <$MTBlogID$>;
トップページのURLを指定する
//33 行目
var pagerank_blog_url = '<$MTBlogURL$>';
関連ファイルの場所を指定する
//34 行目
var pagerank_home_url = 'js/pagerank/';
ランキングの表示件数を指定する
//57 行目
var pagerank_ranking_max = 15;
ランキングの表示形式を選択する
//63 行目
var pagerank_ranking_type = 1;
ランキングのタイトルを指定する
//274 行目
var title = document.title.replace(' - ブログ名', '');

rank_config.phpのカスタマイズ

アクセスログのファイル名を指定する
//9 行目
$GLOBALS['RANK_DATA'] = 'data.txt';
集計期間のファイル名を指定する
//13 行目
$GLOBALS['PERIOD_DATA'] = 'period.txt';
集計期間を指定する
//19、20、21 行目
$GLOBALS['PERIOD_MONS'] = 0;// 月:0 . 3 の間で設定
$GLOBALS['PERIOD_DAYS'] = 14;// 日:0 .31 の間で設定
$GLOBALS['PERIOD_HOUR'] = 0;// 時:0 .24 の間で設定
除外IPアドレスを指定する
//29 行目
$GLOBALS['SELF_ADDR'] = array('0.0.0.0');

集計用のJavaScriptを呼び出す(X)HTMLソース

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

ランキングを表示する(X)HTMLソース

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

出力される(X)HTMLソース

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

rank_view.phpの46行目~76行目の内容

$cnt = 0;
$s = "<ul id='page_rank' class='widget_list'>\n";
foreach ($count as $key => $val) {
    $class = $class_rrobin[$cnt++%2];
    $rankclass = $class_rankin[($cnt>3)?0:$cnt&3];
    $s .= '<li class="widget_list_item list_entry'.$class.'"><a title="'.$title[$key].'" href="'.$url[$key].'" target="_blank">';
    if ($GLOBALS['TYPE']) {
        if (2 == $GLOBALS['TYPE']) {
            $val = sprintf("%3.2f%%", ($val / count($count) * 100));
        }
        $s .= '<span class="right'.$rankclass.'">'.$val.'</span>';
    }
    if ($desc[$key]) {
        $s .= $title[$key].'<span class="desc">'.$desc[$key].'</span></a></li>'."\n";
    }
    else {
        $s .= $title[$key].'</a></li>'."\n";
    }
    // 指定された上位ランク数に達したら終了します
    if ($GLOBALS['MAX'] && $cnt >= $GLOBALS['MAX']) break;
}
$s .= '</ul><p style="text-align:right;">14 日間ログを集計します。</p>';

ダウンロード

Movable Type備忘録

リンク

Movable Type備忘録

第3章 ユーザーが使いやすいWebサイトを 作成する法則の一覧

  1. 法則33 特定のカテゴリに属するブログ記事を一覧表示する
  2. 法則34 注目の記事をピックアップして表示させる
  3. 法則35 シークレットタグを使ってブログ記事を分類する
  4. 法則36 Ajaxを利用して人気記事ランキングを表示する
  5. 法則37 最近コメントがあったブログ記事を一覧表示する
  6. 法則38 コメントやトラックバックのあったブログ記事をツリーで表示する
  7. 法則39 MultiBlogを利用して複数ブログの記事を一覧表示する
  8. 法則40 ランダムにブログ記事の一覧を作成する
  9. 法則41 複数のブログから同じタグのブログ記事を抜き出す
  10. 法則42 RSSを利用して外部ブログの記事をまとめて表示する
  11. 法則43 タグを利用して関連記事へのリンクを自動的に表示する
  12. 法則44 同じカテゴリの前後のブログ記事へリンクを作成する
  13. 法則45 a要素にtitle属性を指定してアクセシビリティを向上させる
  14. 法則46 カテゴリを任意の順番に並べ替える
  15. 法則47 パンくずリストを作成する
  16. 法則48 静的なアーカイブページを分割する
  17. 法則49 検索結果がゼロ件のときに代わりの導線を用意する
  18. 法則50 タグ検索結果のURLを短くして利便性を高める
  19. 法則51 OPMLファイルを生成して複数のフィードをまとめて登録させる
  20. 法則52 フィードアイコンはもっとも目に付く位置に配置する
  21. 法則53 「続きを読む」のナビゲーションは的確に配置する
  22. 法則54 商品ごとに問い合わせフォームを作成する
  23. 法則55 ブログ記事にGoogleマップで地図を表示する
  24. 法則56 ブログ記事に5段階評価を付ける
  25. 法則57 同じアーカイブから2つのレイアウトを作成する
取り扱いオンラインショップ