ポータルサイトやコミュニティサイト等で、お気に入りページを登録できることがありますね。自分が気になるページをチェックしておいて、後で確認しやすくする機能です。
今回、localStorageを利用してお気に入り登録機能を作ってみたので、方法を書きます。仕組みとしてはホームページに最近見たページを表示する JavaScriptに似ています。
簡易的な実装です
今回は、訪問者が自分のお気に入りを保存できて後で確認できれば良い、という要件で、簡易的に実装しています。(このページをお気に入りした人には、このページがお勧め、といった機能までは提供しない)
htmlのボタンです。
<span class="favoritedmark fade">★</span>
<button class="btn btn-primary addtofavorite">お気に入りに登録</button>
<button class="btn btn-primary removefavorite hidden">お気に入りから外す</button>
お気に入りに登録されている場合 ＝＞ ★、お気に入りから外す
お気に入りに登録されていない場合 ＝＞ お気に入りに登録
を表示する、という仕組みにしています。
まずは、お気に入りに登録するコードです。
$(".addtofavorite").click(function(){
var favorite_pages_start = JSON.parse(localStorage.getItem('favorite_pages'));
var title = $("h1.page-title").text(); // ページのタイトルを取得
if (!title.length) { // ↑が無い場合は、<head>のタイトルを取得
title = document.title;
}
var favorite_pages = [{
url: CCM_CID, // CCM_CIDは、concrete5 が各ページに付与しているID
title: title,
datetime: $.now()
}];
if(favorite_pages_start.length >= 10) { // 最大10個まで
alert("お気に入りの登録数の上限に達しました。");
return;
}
if (favorite_pages_start) {
for(i=0;i<10;i++) {
if (favorite_pages_start[i] && favorite_pages[0].url !== favorite_pages_start[i].url) {
favorite_pages.push(favorite_pages_start[i]);
}
}
}
localStorage.setItem('favorite_pages',JSON.stringify(favorite_pages));
addFavorite();
});
addFavoriteは自作の関数です。画面表示を切り替える、という単純な実装です。
function addFavorite() {
$(".favoritedmark").removeClass('fade');
$(".removefavorite").removeClass('hidden');
$(".addtofavorite").addClass('hidden');
}
お気に入りに登録されているページを外すコードです。
$(".removefavorite").click(function(){
var favorite_pages_start = JSON.parse(localStorage.getItem('favorite_pages'));
var favorite_pages = [];
if (favorite_pages_start) {
for(i=0;i<10;i++) {
if (favorite_pages_start[i] && CCM_CID !== favorite_pages_start[i].url) {
favorite_pages.push(favorite_pages_start[i]);
}
}
}
localStorage.setItem('favorite_pages',JSON.stringify(favorite_pages));
removeFavorite();
});
removeFavoriteは自作の関数です。画面表示を切り替える、という単純な実装です。
function removeFavorite() {
$(".favoritedmark").addClass('fade');
$(".removefavorite").addClass('hidden');
$(".addtofavorite").removeClass('hidden');
}
最後になりますが、ページを表示したときに、既にお気に入りに登録されているかを判定するコードです。
var favorite_pages = JSON.parse(localStorage.getItem('favorite_pages'));
var selected = false;
if (favorite_pages) {
for(i=0;i<10;i++) {
if (!selected && favorite_pages[i] && !isNaN(favorite_pages[i]['url'])) {
if (CCM_CID == favorite_pages[i]['url']){
selected = true;
}
}
}
}
if(selected) {
addFavorite();
}
以上で、個別ページの設定は完了です。
お気に入りに登録したページを一覧表示する設定は、後日書きますので、しばらくお待ちください。
実際に活用している事例は、石神井町：街ぶらインフォメーションや計算フォームをごらんください。