Standing on the Shoulder of Linus

Home / 2013 / 12月 / 09 / ユーザー毎の閲覧記録をローカルストレージに記録し、訪問状況に応じてnewを表示する

ユーザー毎の閲覧記録をローカルストレージに記録し、訪問状況に応じてnewを表示する

ユーザー毎の閲覧記録をローカルストレージに記録するようにしてみました。ワードプレスのサポートならレスキューワーク株式会社のニュース記事部分に実装しています。

HTML5のローカルストレージ機能を利用して実装しています。最初のアクセス時は全て new! を表示します。訪問した時刻をdateに記録します。ニュース記事のIDをnewstodayに記録します。二回目以降は、前回の訪問より7日以上経過していれば、newstodayをnewsにコピーします。newsに記録されているニュース記事は new! を表示しないようにしています。ひとまず7日にしていますが、ここはサイトの更新頻度に応じて調整したほうが良いかもしれません。あくまで暫定的な日数です。

/**
 * Copyright 2013 Fumito MIZUNO
 * License: AGPL ver.3.0 or later
 */
$js = <<<EOS
	jQuery(document).ready(function(){
		var days = 7; // ここで日数を指定する
		var tmpdata = localStorage.getItem('date');
		nowdate = new Date();
		var datein = nowdate.getTime();
		if (tmpdata === null || datein - tmpdata >= days*24*60*60*1000) {
			update = true;
		} else {
			update = false;
		}
		var storage_news = localStorage.getItem('news');
		if (update === true) {
			var todaydata = localStorage.getItem('newstoday');
			if(todaydata !== null) {
				localStorage.setItem('news',todaydata);
				storage_news = todaydata;
			}
		}
		if (storage_news === null) {
			postdata = new Array();
		} else {
			postdata = JSON.parse(storage_news);
		}
		var val = new Array();
		$('.news_box div.blog_set').each(function(){
			var id = $(this).attr('id');
			if ($.inArray(id,postdata) == -1) {
				$('#'+id).addClass('new');
			}
			val.push(id);
		});
		if (update === true) {
			localStorage.setItem('date',datein);
			localStorage.setItem('newstoday',JSON.stringify(val));
		}
	});
EOS;
$css = <<<EOS
.new::before{
  background-color: aqua;
  content: " new! ";
}'
EOS;
NosNos::main_controller()->addJavascriptInline($js);
NosNos::main_controller()->addCssInline($css);

ウェブサイトによっては「WordPress記事が公開されたら7日間はnewを表示する」という、ウェブ制作者目線の表示になっているケースがあるのですが、ユーザーにとって大事なのは、「自分にとって新しい情報かどうか」だと思われます。なので、この実装のほうが好ましいと思います。

関連

Posted in cms | Tagged html5, ブログ
← 重複コンテンツの議論について、皆が忘れているかもしれない事 FuelPHP イベント機能を使ってアプリケーションをカスタマイズする →

アーカイブ

人気の投稿とページ

  • キンドル本を印刷する(PDFに変換する)方法
  • 名古屋駅から国際センターまでの道のり(徒歩)
  • AGPL ライセンス(GPLとは似ているが違いもある)
  • 6年使ったイーモバイル(Y!mobile)を解約手続。店頭でSIM返却
  • JP-Secure SiteGuard WP Pluginは不正ログイン防止に役立つか

プロフィール

水野史土:月70万PVホームページ制作会社のレスキューワーク株式会社で、PHPソフトウェアのサポートを行っている。concrete5コミュニティリーダー、Novius OSコアコード貢献者でもある。 詳しくは管理者詳細参照。
大好評WordPress書籍「WordPressユーザーのためのPHP入門 はじめから、ていねいに。」サポートページ

Copyright © 2015 Standing on the Shoulder of Linus.