Create.jsはユーザ向け画面をそのまま編集できるJavaScriptライブラリです。

CMSは一般的にユーザ向けの画面と管理画面とが分かれて提供されています。しかし運用時にはユーザ向けの画面を見ながらその場で修正したいこともあるでしょう。その際に使えるライブラリがCreate.jsです。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.07.01_thumb.1357650793.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.07.01.1357650793.png)
メイン画面です。この時点では普通に表示されています。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.07.07_thumb.1357650797.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.07.07.1357650797.png)
エディターを立ち上げました。Editボタンを押します。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.07.12_thumb.1357650801.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.07.12.1357650801.png)
編集可能な部分に色がつきました。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.08.07_thumb.1357650804.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.08.07.1357650804.png)
編集中の画面です。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.07.41_thumb.1357650810.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.07.41.1357650810.png)
編集しました。

[![](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.09.25_thumb.1357650814.png)](http://images.moongift.jp/2013/01/Screenshot 2013-01-08 10.09.25.1357650814.png)
コンソールで見ると編集した内容がJavaScriptのオブジェクトになっているのが分かります。

Create.jsは単体で動作する訳ではなく、編集した内容を別途サーバサイドに送ってDBやファイルを更新する必要があります。ただし、編集可能な箇所を決めたりすることはできるので、運用担当者の編集可能範囲について自由に更新し、保存ボタンを押した時にAjaxを使ってPOSTで送信するようにすれば見たままの編集が実現するでしょう。

Create.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

サーバサイドを更新してしまう手もありますが、Create.jsの更新情報をそのまま保持しておき、表示の際に再現するようにすればクライアントサイドだけの実装で完結する可能性があります。ただしSEO向けのコンテンツは変えられないので注意が必要です。

サーバサイドの書き換えは手順が多く、アプリケーションサーバの再起動もあったりと手間がかかります。JavaScriptを使ってちょっとした文言をその場で変更するようにすればテストも簡単にできるでしょう。その結果をもってサーバサイドの書き換えを行うかどうか検討すれば良いのです。

via Inpage Editing For CMS Using Create.js | Blogfreakz - Web Design and Web Development resources

Create.js - Make anything editable

bergie/create · GitHub