Web上で見たままに変更できるMarkdownエディタ「demarcate.js」
demarcate.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
Markdown記法を採用するWebサイト、Webサービスが随分増えているように感じます。一つの統一されたフォーマットで作業できるのは良い事です。今回はWebブラウザ上でダイナミックにコンテンツを編集できるdemarcate.jsを紹介します。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-27 9.01.19.1369618167.png)
こちらはデモです。左側のコンテンツが編集できる部分になります。右側にはヘルプが出ています。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-27 9.01.26.1369618172.png)
編集したい部分がマウスオーバーでハイライトされます。クリックで編集モードに入ります。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-27 9.01.32.1369618177.png)
編集モードです。ツールバーが編集エリアの下に出るのが特徴的です。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-27 9.03.06.1369618181.png)
もちろん日本語も使えます。右側にMarkdownの記法ヘルプが出てくれるのも便利ですね。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-27 9.03.20.1369618186.png)
上下ボタンを押すとコンテンツの位置を差し替えられます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-27 9.03.33.1369618190.png)
Markdown記法を拡張しているようで、テーブル表示にも対応しています。
demarcate.jsはWebブラウザ上で編集し、その場でHTMLを生成しています。後は変更したタイミングでコールバックを受け取れますので、その内容をサーバに送信すればダイナミックに編集ができるようになります。
MOONGIFTはこう見る
数年前のCMSは管理画面とユーザ画面とが分かれているのが一般的で、そのために管理画面上での変更が実際にどうユーザ画面で表示されるのかが分かりづらいのが欠点でした。Wikiでも同様の状態になっていました。
最近ではユーザ画面上での編集をサポートしたソフトウェアが増えていますので、管理者はもちろんユーザにとっても編集が容易でその変更結果が分かりやすい画面が提供できます。自作のシステムでも取り入れていきたいアイディアです。