たまたま勉強中だった時に見かけたTips。
個人的なメモです。HTML5には、IEで採用
されていたcontenteditable属性が追加され、
ページ内を編集することが出来ます。更に、
localStorageを使って編集状態を保存できる
んですが、この処理的なものをjQueryで
行う、みたいな方法です。
僕自身はまだ使う機会は無さそうなんですが、ちょっと面白かったのでメモ的に。技術的な話はリファレンスでご確認下さい。
contenteditableとlocalStorage
まず、contenteditableとlocalStorageに関してどういうものか、なんですが、僕も大して理解してないんですけど、大雑把に言うと、ユーザーが閲覧中のページを編集、保存できる、というもの。
contenteditableはIEですでに実装されていた属性なのでHTML5で新たに追加、というものではありません。また、localStorageはCookieとは異なります。
[note]比較してくれている記事が凄く参考になりました→LocalStorageがおもいのほか便利すぎたのでまとめ[/note]
馴染みはないマークアップだと思いますし、触ったほうが分かりやすいですね。以下デモです。
Sample
contenteditableのサンプルです！編集出来ます！
クリックしてみてください。バックスペースが表示されると思いますのでテキストを削除、編集可能です。しかし、編集後にリロードすると編集前に戻ってしまいます。これでは意味がありませんので、localStorageを使って編集状態を保存出来るようにしなければなりません。
対応ブラウザはChrome以外は確認していません。申し訳ないです。
マークアップ
<div id="editable" contenteditable="true">
<p>編集可能です。</p>
</div>contenteditable自体はこのマークアップだけですが、上記でも書いているように編集したものを記憶できなければ意味が無いのでlocalStorageを使用するのが一般的だと思います。
用途としては分かりやすいものでしたら、付箋アプリとかCMSでユーザーに提供される管理画面とかに使えるんじゃないでしょうか。
HTML5とlocalStorage
じゃあ、肝心のlocalStorageはどうやって使うんだ、という話なんですが、ちょうどいいデモがあるのでソースはここ（html5demos）で見てください。
この流れがjQueryで簡単に
やっと本題なんですが、この一連の流れが、jQueryを使ったら楽に出来るらしいです。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="http://ek.alphaschildren.org/storagify/Storagify/jquery.storagify.min.js"></script>
ｊQuery本体とプラグインを読み込み。プラグインの中身は1行です。
(function(a){a.fn.storagify=function(b){return this.each(function(){var c=a(this);c.attr("contenteditable","");c.text(localStorage.getItem(b));c.blur(function(){localStorage.setItem(b,c.text())})})}})(jQuery);あとは編集できるを指定します。↓
<script type="text/javascript">
$('p.editable').storagify('exampleParagraph');
$('.example h2').storagify('exampleHeader');
$('#refresh').storagify('resfreshText');
$('#quit').storagify('quitText');
</script>マークアップでcontenteditable=”true”も不要みたいです。
これはこれで手軽っぽいですね。jQueryをもともと使用したサイトなら一考の価値もあるんじゃないかなと思ってメモしてみました。