ホームページに最近見たページを表示する 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機能を選択しました。
- 閲覧履歴が他者に漏れにくい
- サーバー処理負荷を重くしない
といったメリットがあります。一方、デメリットとしては、
- 同じ閲覧者でも、端末やブラウザが異なると履歴が保存されない
- 履歴に基づいた提案はしにくい (「閲覧履歴を元におすすめページを出す」などは難しい)
があります。
Author And Source
この問題について(ホームページに最近見たページを表示する JavaScript), 我々は、より多くの情報をここで見つけました https://qiita.com/ounziw/items/6501502262ff33aacbbc著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .