ホームページに最近見たページを表示する JavaScript

最近見たページを表示するJavaScript (jQuery) を concrete5 のアドオンとして公開しました。計算フォーム、マイミツブログで利用しています。
使用している変数の一部に concrete5 特有のものがありますが、おおまかな処理は他のCMSでも使えます。

表示したページの情報を記録する

(1) /// License: MIT
$( document ).ready(function() {
    var recent_views_start = JSON.parse(localStorage.getItem('ounziw_recent_views'));
    var recent_views = [{
        url: CCM_CID,
        headertitle: document.title,
    }];
    if (recent_views_start) {
        for(i=0;i<10;i++) {
            if (recent_views_start[i] && recent_views[0].url !== recent_views_start[i].url) {
                recent_views.push(recent_views_start[i]);
            }
        }
    }
    localStorage.setItem('ounziw_recent_views',JSON.stringify(recent_views));
});

urlとページタイトルを取得して、順に保存していく、という方式です。
CCM_CIDは、concrete5が各ページに割り当てるIDです。他のCMSを使う場合や静的ページの場合は、document.URLに変更してもらえればと思います。
元の履歴に、同じページがあった場合に複数回表示する必要はないので、重複チェックを行っています。(元の履歴をいったんrecent_views_startに格納して、最新の履歴recent_views と比較)
取得する数は10個に決めうちにしてますが、この辺も適宜変更してもらえればと思います。

ページ上に表示する

localStorageに保存されているものを表示するコードです。

(2) /// License: MIT
$( document ).ready(function() {
    var recent_views_list = JSON.parse(localStorage.getItem('ounziw_recent_views'));
    var listclass = $('.recent_views').data('listclass');
    var title = 'headertitle';
    
    if ($('.recent_views').data('num') >= 1) {
        var num_of_lists = $('.recent_views').data('num');
    } else {
        var num_of_lists = 5;
    }

    listdata = $("<ul></ul>",{
        class: listclass,
    });
    if (recent_views_list) {
        $('.recent_views').append(listdata);        
        for(i=0;i<num_of_lists;i++) {
            if (recent_views_list[i]) {
                textdata = $("<a></a>",{
                    href: CCM_APPLICATION_URL + '/index.php?cID=' + parseInt(recent_views_list[i]['url']),
                    text: recent_views_list[i][title]
                });
                textlist = $("<li></li>").html(textdata);
                $('.recent_views ul').append(textlist);
            }
        }
    }
});

localStorageの情報を表示していきます。jQueryでHTML部品を作って組み立てていきます。この辺はもっと上手く書けるかもしれないです。
CCM_APPLICATION_URL は concrete5 のインストールされている URL です。

表示する場所は、以下のようなHTMLで指定します。

<div class="recent_views" data-num="5" data-title="title" data-listclass="viewhistory"></div>

実践例

このアドオンは、concrete5でサイト運用するため、レスキューワーク株式会社の業務として開発しました。concrete5 の公式サイトからダウンロードすることができます。

PHPを使わない理由

PHPを使わないで、JavaScriptで記述しました。理由としては、

• 閲覧者が確認できれば良い情報である -> サーバー側で処理する必要が無い

です。なので、閲覧者のブラウザで処理するlocalStorage機能を選択しました。

• 閲覧履歴が他者に漏れにくい
• サーバー処理負荷を重くしない

といったメリットがあります。一方、デメリットとしては、

• 同じ閲覧者でも、端末やブラウザが異なると履歴が保存されない
• 履歴に基づいた提案はしにくい (「閲覧履歴を元におすすめページを出す」などは難しい)

があります。