dingding回答ポイント 60pt

ウォッチ

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

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

みんなの回答

typista2010/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 );
        }
});

スター

dingding 2010/01/28 17:40:33

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

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

みんなの回答

typista2010/01/28 15:39:46
満足60pt

dingding 2010/01/28 17:40:33

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

みんなの回答

typista2010/01/28 15:39:46 満足60pt

dingding 2010/01/28 17:40:33

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

typista2010/01/28 15:39:46
満足60pt