サイトでページのCookieによるクリッピング機能を追加する方法

サイト内でページをクリップ！のような機能を追加して、サイト内のページを特定の場所に保存しておく便利な機能を追加する方法です。クリップはCookieに保存するのでログインなどの機能を付けなくても大丈夫というわけです。Wordpressでも簡単に実装できます。

IE7ではJSON Parseの一部機能が動かないためIE7では表示されない仕組みにはしてあります。ソースを確認して下さい。

Cookie jqueryを導入

https://github.com/carhartl/jquery-cookie
より

<script type='text/javascript' src='jquery.cookie.js'></script>

としてページ内に導入。

メインのJs

$(document).ready(function() {

    var ua = navigator.userAgent;
    var isIE7 = ua.match(/msie [7.]/i);
    
    if($('.fav-add').length > 0){

        $('.fav-add').click(function(){
            $.cookie.json = true;
            var flag = 0;
            data = { 'url': location.href, 'id': $(this).attr('postid'), 'title': $(this).attr('title') };
            favs = $.cookie('favs');
            if( $.type(favs) == 'undefined' ) favs = [data];
            $.each(favs, function(i, val){
                if( parseInt(val.id) == parseInt(data.id) ) flag = 1;
            });
            if(flag == 0) favs.push(data);
            $.cookie('favs', favs, { expires: 365, path: '/' });
            $(this).fadeOut(null, function(){
                $(this).css('background-color', '#AC2626').html('Cliped!!').fadeIn().unbind();
            });
        });
        
        var id = $('.fav-add').attr('postid');
        var flag = 0;
        if( $.cookie('favs') ){
            
            $.each(eval($.cookie('favs')), function(i, val){ 
                if( id == val.id ) flag = 1; 
            });
            if( flag >= 1 ){
                $('.fav-add').css('background-color', '#AC2626').html('Cliped!!').unbind().fadeIn();
            else  if(!isIE7) $('.fav-add').html('add Clip').fadeIn();
            
        } else {
            if(!isIE7) $('.fav-add').html('add Clip').fadeIn();
        }
        
    }

});

html内でのadd clipボタン

<div class="fav-add" postid="1234" title="クリップする際のタイトル"></div>

postidはユニークIDを。Wordpressなどでは post->ID や the_ID() をIDとして。このIDで重複チェックしています。

Cookieに保存されたページの内容は下記のようにして取り出します。

Cookieから取り出して表示用Js

$(document).ready(function() {
    
    if($('#fav').length > 0){
        
        if( $.cookie('favs') ){
            var html = '';
            var text = '';
            $.each(eval($.cookie('favs')), function(i, val){
                html += '<li><a href="'+val.url+'">'+val.title+'</a></li>';
            });
            console.log( html ); /* html に表示するだけ */
            
        } else {
            /* なにもクリップされていない場合 */
        }
    }

});

クリップしたURLなどをを表示したいページに

<div id="fav"></div>

と記述。id=favを探してcookieを展開します。

ページの固有IDを生成しなければならないのですが、WordpressなどのCMSでは簡単に可能ですので実装も難しくはないはずです。お試しあれ。