保存できる付箋を作ってみる(Cookie、localStorage） - jQuery入門

付箋を保存する方法

jQuery UI Draggableを使って付箋(sticky)を作ってみるのページで付箋を作成しましたが、ブラウザを閉じると付箋の文字や位置は消えてしまいます。今回は文字・位置・色を保存できる付箋を作成してみましょう。

付箋のデータを保存する方法はいくつかありますが、それぞれ長所と短所があります。

	メリット	デメリット
クッキーを使う	古いブラウザでも使える	保存できる容量が少ない(4Kbyte)。ユーザーがクッキーを消すことがある
localStorageを使う	保存できる容量が多い	古いブラウザには対応していない。設定によって使えないことがある
サーバーサイド(PHPなど)と通信する	永続的に保存される	サーバーサイドのプログラムが必要

クッキーに保存できる付箋

まずはクッキーを使った例を示します。

別ページで開く

クッキーに保存できる付箋のソース


<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>

<title>色と位置をクッキーに保存できる付箋</title>

<script>

$(function() {

  $('#new').click(function() {

    make();

    save();

  });



  $('#del').click(function() {

    $('.selected').remove();

    save();

  });



  function make() {

    var sticky = $('<div class="sticky">Drag & Double Click!</div>');

    sticky.appendTo('body')

      .css('background-color', $('#color').val())

      .draggable({stop: save})

      .dblclick(function() {

        $(this).html('<textarea>' + $(this).html() + '</textarea>')

          .children()

          .focus()

          .blur(function() {

            $(this).parent().html($(this).val());

            save();

          });

      }).mousedown(function() {

        $('.sticky').removeClass('selected');

        $(this).addClass('selected');

      });

    return sticky;

  }



  function save() {

    var items = [];

    $('.sticky').each(function() {

      items.push(

        $(this).css('left'),

        $(this).css('top'),

        $(this).css('background-color'),

        $(this).html()

      );

    });

    $.cookie('sticky', items.join('\t'), {expires: 100});

  }



  function load() {

    if (!$.cookie('sticky')) return;

    var items = $.cookie('sticky').split('\t');

    for (var i = 0; i < items.length; i += 4) {

      make().css({

        left: items[i],

        top: items[i + 1],

        backgroundColor: items[i + 2]

      }).html(items[i + 3]);

    }

  }

  load();

});

</script>

<style>

.sticky {

  width: 250px;

  height: 50px;

  position: absolute;

  cursor: pointer;

  border: 1px solid #aaa;

}

textarea {

  width: 100%;

  height: 100%;

}

.selected {border-color: #f44;}

</style>

</head>

<body>

<select id="color">

<option value="#ffc">黄色</option>

<option value="#fcc">赤色</option>

<option value="#cfc">緑色</option>

</select>

<input id="new" type="button" value="new">

<input id="del" type="button" value="del">

</body>

</html>

クッキーに保存できる付箋のソース解説


<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>

クッキーをJavaScriptで扱うのは少し面倒なので、簡単に扱えるjQuery用のプラグインである「jquery.cookie」を読み込んでいます。実務で使うのなら、jquery.cookieをダウンロードして読み込ませたほうが確実です。


$('#new').click(function() {

  make();

  save();

});

newボタンを押したときの処理です。付箋を作成するmakeメソッドを呼び出し、さらに付箋データを保存するsaveメソッドを呼び出します。


$('#del').click(function() {

  $('.selected').remove();

  save();

});

delボタンを押したときの処理です。現在選択されている付箋にはcssのselectedクラスを付加してあります。その要素をremoveメソッドで削除します。

makeメソッドの解説


function make() {

  ・・・

}

新しい付箋を作成するmakeメソッドです。


var sticky = $('<div class="sticky">Drag & Double Click!</div>');

makeメソッドではまずstickyクラスを付加したdiv要素を作成します。これが付箋になります。


sticky.appendTo('body')

次にbody要素の末尾に作成した付箋を追加します。


.css('background-color', $('#color').val())

次に付箋の背景色をセレクトボックスで選ばれている値（optionタグのvalue値）にします。


.draggable({stop: save})

jQuery UI Draggableの機能を使って付箋をドラッグ可能にします。引数のstopオプションにはドラッグが終了したときに呼び出されるメソッドを指定します。これによって付箋の位置を変えたときにsaveメソッドが呼び出されて付箋データが保存されます。


.dblclick(function() {

付箋をダブルクリックしたときの処理です。


$(this).html('<textarea>' + $(this).html() + '</textarea>')

付箋をダブルクリックしたときには、まず付箋のテキストをtextareaで囲い、編集可能にします。wrapInnerでも囲めますが、その場合中のテキストにタグが含まれているとそれが無効になるようです。


.children()

childrenは子要素を取得すメソッドです。これでtextarea要素が選ばれます。


.focus()

textareaにカーソルを移動します。


.blur(function() {

  $(this).parent().html($(this).val());

  save();

});

ここでフォーカスが外れたときのイベントを設定します。textarea以外の場所をクリックしたときなどにこのイベントが発生します。textareaの親要素である付箋のdiv要素の中身をtextareaの値で上書きし、textareaのタグを削除し、保存します。


}).mousedown(function() {

  $('.sticky').removeClass('selected');

  $(this).addClass('selected');

});

付箋の上でマウスボタンが押されたときは、すべての付箋からselectedクラスを削除し、押された付箋にselectedクラスを追加しています。


return sticky;

最終的に作成した付箋のjQueryオブジェクトを呼び出し元に返します。

saveメソッドの解説


function save() {

  ・・・

}

作成した付箋を保存するsaveメソッドです。


var items = [];

itemsに保存すべき付箋の情報が入ります。付箋は複数作成される可能性があるので配列にしています。


$('.sticky').each(function() {

  items.push(

    $(this).css('left'),

    $(this).css('top'),

    $(this).css('background-color'),

    $(this).html()

  );

});

画面上の付箋全てをひとつずつループし、itemsの要素として付箋の情報をセットします。セットされる情報は付箋のX座標・Y座標・背景色・テキストとなります。


$.cookie('sticky', items.join('\t'), {expires: 100});

$.cookieはjquery.cookieのメソッドで、クッキーに値をセットします。第一引数の「sticky」はクッキー名です。第二引数は保存する値で、items配列をタブで繋げた文字列を指定しています。第三引数はクッキーの有効期限で、ここでは100日を指定しています。

loadメソッドの解説


function load() {

  ・・・

}

クッキーに保存した情報を読み出して付箋を作り出すloadメソッドを定義しています。このメソッドはスクリプトの一番下の「load();」によって起動時に一度だけ呼び出されます。


if (!$.cookie('sticky')) return;

クッキーに値がないときは何もしません。


var items = $.cookie('sticky').split('\t');

タブ区切りの文字列にした付箋データを配列に戻しています。


for (var i = 0; i < items.length; i += 4) {

  make().css({

    left: items[i],

    top: items[i + 1],

    backgroundColor: items[i + 2]

  }).html(items[i + 3]);

}

makeメソッドで付箋を作成し、保存してある付箋データからX座標・Y座標・背景色・テキストをセットします。

localStorageに保存できる付箋

次にlocalStorageに保存できる付箋を作成してみましょう。localStorageとは、ブラウザ内に値を保存できる仕組みのことで、HTML5で規定されました。比較的新しい規格なのでIE6やIE7などの古いブラウザでは動きません。

別ページで開く

localStorageに保存できる付箋


<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<title>色と位置をlocalStorageに保存できる付箋</title>

<script>

$(function() {

  $('#new').click(function() {

    make();

    save();

  });



  $('#del').click(function() {

    $('.selected').remove();

    save();

  });



  function make() {

    var sticky = $('<div class="sticky">Drag & Double Click!</div>');

    sticky.appendTo('body')

      .css('background-color', $('#color').val())

      .draggable({stop: save})

      .dblclick(function() {

        $(this).html('<textarea>' + $(this).html() + '</textarea>')

          .children()

          .focus()

          .blur(function() {

            $(this).parent().html($(this).val());

            save();

          });

      }).mousedown(function() {

        $('.sticky').removeClass('selected');

        $(this).addClass('selected');

      });

    return sticky;

  }



  function save() {

    var items = [];

    $('.sticky').each(function() {

      items.push({

        css: {

          left: $(this).css('left'),

          top: $(this).css('top'),

          backgroundColor: $(this).css('background-color')

        },

        html: $(this).html()

      });

    });

    localStorage.sticky = JSON.stringify(items);

  }



  function load() {

    if (!localStorage.sticky) return;

    var items = JSON.parse(localStorage.sticky);

    $.each(items, function(i, item) {

      make().css(item.css).html(item.html);

    });

  }

  load();

});

</script>

<style>

.sticky {

  width: 250px;

  height: 50px;

  position: absolute;

  cursor: pointer;

  border: 1px solid #aaa;

}

textarea {

  width: 100%;

  height: 100%;

}

.selected {border-color: #f44;}

</style>

</head>

<body>

<select id="color">

<option value="#ffc">黄色</option>

<option value="#fcc">赤色</option>

<option value="#cfc">緑色</option>

</select>

<input id="new" type="button" value="new">

<input id="del" type="button" value="del">

</body>

</html>

localStorageに保存できる付箋のソース解説

クッキーに保存できる付箋のソースとほとんど同じなので、違うところのみ解説します。

saveメソッドの解説


items.push({

  css: {

    left: $(this).css('left'),

    top: $(this).css('top'),

    backgroundColor: $(this).css('background-color')

  },

  html: $(this).html()

});

保存はさきほどのように配列を繋げた文字列でも構わないのですが、今回はJSONを使います。JSONはJavaScriptのオブジェクトを文字列にしたようなデータ形式で、新しいブラウザでは標準対応しています。ここではまずオブジェクト形式で付箋のデータをitemsに格納します。


localStorage.sticky = JSON.stringify(items);

localStorageのキーstickyに値を保存しています。stringifyは引数で指定された要素をJSON形式にして返すメソッドです。

loadメソッドの解説


var items = JSON.parse(localStorage.sticky);

parseはJSON形式の文字列をJavaScriptのオブジェクトにするメソッドです。保存されている付箋データをオブジェクトにしてitemsに格納しています。


$.each(items, function(i, item) {

  make().css(item.css).html(item.html);

});

オブジェクトなのでそのまま値を格納することができ、配列を使うよりもすっきりとしたソースになります。

まとめ

古いブラウザでも対応させたい場合はクッキー、保存の容量を増やしたいときはlocalStorageを使うと良いでしょう。

前ページ　 jQuery入門 TOP　

ポンクソフト