Wikiのような利用者が編集出来るWebページの作り方

こんにちは、@yoheiMuneです。
今日は、WikipediaのようなWebページだけど、訪問者(利用者)がページを編集できるようなページを作ってみました。その作り方をブログに残しておきたいと思います。

http://www.yoheim.net/labo/wiki/wiki.php



ページの編集を可能にするcontenteditable属性

contenteditable属性を利用します。この属性をtrueに設定することで、編集できるページができます。思ったより簡単(*´∇`*)
以下はサンプルのHTMLです。こーんな感じで作成出来ます。

<!-- contents editable area  -->
<div id='edit_area' contenteditable='true'>
  <h2>自由に編集出来ます</h2>
  <div style="color:#ff3300; font-size:large;">文字を書いてみたり。下の画像をドラッグして移動出来ます</div>
  <br />
  <br />
  <img src="img/chrome.png" alt="chrome" />
  <img src="img/safari.jpeg" alt="safari" />
  <img src="img/firefox.jpeg" alt="firefox" />
  <img src="img/opera.jpg" alt="opera" />
  <img src="img/ie.jpg" alt="ie" />
</div>

contenteditable='true'を設定したDIV要素の中は、編集可能となります。文字を書いたり、文字を消したり、既に存在する絵を移動したり、削除したり。編集出来るようになります。
この要素をBODYタグに設定すると、ページ全体が編集可能になるようです。


編集した場合にHTMLはどうなる?

contenteditable='true'のDIVの中身を編集した際に、どんなHTMLになるかを試してみました。試した結果、ChromeFirefoxなどブラウザによって挙動が違うようです。改行するとbrタグが入ったり、divタグで囲まれたり、挙動が違うようです。上記ページの「HTML表示」ボタンを押す事で、どんなHTMLになっているかを見ることが出来ます。興味のある方はお試しください♪(´ε` )
ちなみにW3Cの規定は以下から見ることができます。HTML5.jpさんのページで日本語訳されているのでそのページを。
http://www.html5.jp/tag/attributes/contenteditable.html



おまけに

編集したものを保存したり、保存したものを開く機能も付けてみました。こちらは、HTML5のローカルストレージを利用しており、保存データはサーバーではなくご利用のマシンに保存されるようになっています。ローカルストレージについては、"ローカルストレージを使う"をご覧下さい(・∀・)



最後に

訪問者や利用者がWebページを編集出来るって、イイですね。Webページのコミュニケーション方法が広がりそうです。簡単にできるのでありがたいです(*゚▽゚)ノ


運営しているサイトです。どうぞよろしくお願いします。
HTML5LearnersHTML5を学び合うFacebookPage
HTML5サンプルページ:作成したサンプルを載せているサイト
YoheiM.NET:技術情報を中心に情報発信サイト

cooking_bot:料理情報をつぶやくTwitterアカウント