• かちびと.net

    HTML5のcontenteditable属性でコンテンツを編集→localStorageを使用して保存、の流れをjQueryで出来るようにする。みたいなやつ。Storagifyという軽量なプラグインで簡略化できるみたいです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

HTML5のcontenteditable属性でコンテンツを編集→localStorageを使用して保存、の流れをjQueryで出来るようにする。みたいなやつ

スポンサーリンク

たまたま勉強中だった時に見かけたTips。
個人的なメモです。HTML5には、IEで採用
されていたcontenteditable属性が追加され、
ページ内を編集することが出来ます。更に、
localStorageを使って編集状態を保存できる
んですが、この処理的なものをjQueryで
行う、みたいな方法です。

僕自身はまだ使う機会は無さそうなんですが、ちょっと面白かったのでメモ的に。技術的な話はリファレンスでご確認下さい。

contenteditableとlocalStorage

まず、contenteditableとlocalStorageに関してどういうものか、なんですが、僕も大して理解してないんですけど、大雑把に言うと、ユーザーが閲覧中のページを編集、保存できる、というもの。

contenteditableはIEですでに実装されていた属性なのでHTML5で新たに追加、というものではありません。また、localStorageはCookieとは異なります。

比較してくれている記事が凄く参考になりました→LocalStorageがおもいのほか便利すぎたのでまとめ

馴染みはないマークアップだと思いますし、触ったほうが分かりやすいですね。以下デモです。

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> 

jQuery本体とプラグインを読み込み。プラグインの中身は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をもともと使用したサイトなら一考の価値もあるんじゃないかなと思ってメモしてみました。

Storagify

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services