YouTubeのクイックリストのように、ログインしていない状態でもサイト内ブックマークのようなことができるJQueryのプラグインなどはありませんか?中身はクッキーを使っているのか、 Flashクッキーなのかは分かりませんが、なんとなくイメージは湧きますがよくありそうな機能なので既に誰かがつくったいいライブラリやプラグインがあるような気がします。


JQueryに限らず、Javascriptなどで容易に実装できるものがあれば教えてください。

回答の条件
  • 1人2回まで
  • 登録:2010/01/23 15:03:10
  • 終了:2010/01/30 15:05:02

回答(1件)

id:typista No.1

typista回答回数359ベストアンサー獲得回数72010/01/28 15:39:46

ポイント60pt

jQueryとjQueryのcookie用プラグインをダウンロードし、HTML記述例のようにするとユーザごとに最近読んだ記事(最近クリックしたリンク)をcookieに保存します。

動作サンプルは、http://typista.xii.jp/をご覧ください。左(メイン)領域のトップに薄い青枠で「あなたが最近読んだ記事」として表示するようにしました。

サイト内ブックマークがご希望の場合、今回のサンプルは、ページ内のすべてのリンククリックで動作してしまいますので、ユーザアクションでcookieに追加するような修正が必要です。あとはhrefの内容によって外部リンクの場合は、追加しないなども必要ですよね。たぶん。

ポイントは、cookieに追加したいサイト内リンク(オブジェクト)をaddCookieLinks()にbindしてあげるか、addCookieLinksを少し改造して、パラメータ渡しにするといった感じでしょうか。説明難しいですか?

◆jQuery

 http://docs.jquery.com/Downloading_jQuery

◆jQueryのcookie用プラグイン

 http://plugins.jquery.com/project/Cookie

◆HTML記述例

<script type='text/javascript' src='jquery.cookie.js'></script>
<script type='text/javascript' src='previewRecent.js'></script>
<div id="previewRecent"></div>

◆最近読んだ記事を保存&取得するJS

jQuery(function($){
	var previewRecentMax = 10;
	var previewRecent = getPreviewRecent( previewRecentMax );
	$('#previewRecent').html( previewRecent );
	$('#previewRecent').css( {
				'position' : 'relative',
				'top' : '0px',
				'left' : '0px',
				'width' : '450px',
				'background-color' : '#EEEEFF',
				'border' : 'dotted 1px #9999FF',
				'z-index' : '100000',
				'opacity' : '0.8',
				'padding' : '8px'
				 } );


	function getPreviewRecent( recentMax ) {
		var ret = "<strong>あなたが最近読んだ記事</strong><br />";
		var linkList = $.cookie('linkList');
		var labelList = $.cookie('labelList');
		if ( ( linkList == null ) || ( labelList == null ) ) {
			ret += "最近の閲覧はありません。";
		} else {
			var linkArray = linkList.split( '\n' );
			var labelArray = labelList.split( '\n' );
			for ( var i = 0; ( i < linkArray.length && i < recentMax ); i++ ) {
				ret += '<a href="' + linkArray[ i ] + '">' + labelArray[ i ] + '</a><br />\n';
			}
		}
		return ret;
	}
	
        $('a').each( function() {
                $(this).bind( "click", addCookieLinks );
        } );
        function addCookieLinks() {
                        var linkList = $.cookie('linkList');
                        var labelList = $.cookie('labelList');
                        if ( linkList == null ) {
                                linkList = "";
                        } else {
                                linkList = "\n" + linkList;
                        }
                        if ( labelList == null ) {
                                labelList = "";
                        } else {
                                labelList = "\n" + labelList;
                        }

                        linkList = $(this).attr('href') + linkList;
                        labelList = $(this).text().replace( /\n/g, '' ) + labelList;

                        $.cookie( 'linkList', linkList );
                        $.cookie( 'labelList', labelList );
        }
});
id:dingding

大変詳細に教えていただきましてありがとうございます!

是非こちらで試し見てます。

2010/01/28 17:40:33

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません