2012/04/06更新

[Web] Wikiのような利用者が編集できるWebページの作り方

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

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

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

contenteditable属性を利用します。この属性をtrueに設定することで、編集できるページができます。思ったより簡単(*´∇｀*)

以下はサンプルのHTMLです。こーんな感じで作成出来ます。

<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になるかを試してみました。試した結果、ChromeやFirefoxなどブラウザによって挙動が違うようです。改行するとbrタグが入ったり、divタグで囲まれたり、挙動が違うようです。上記ページの「HTML表示」ボタンを押す事で、どんなHTMLになっているかを見ることが出来ます。興味のある方はお試しください♪(´ε｀ )

ちなみにW3Cの規定は以下から見ることができます。HTML5.jpさんのページで日本語訳されているのでそのページを。

http://www.html5.jp/tag/attributes/contenteditable.html

おまけに

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

最後に

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