ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

Markdown記法を採用するWebサイト、Webサービスが随分増えているように感じます。一つの統一されたフォーマットで作業できるのは良い事です。今回はWebブラウザ上でダイナミックにコンテンツを編集できるdemarcate.jsを紹介します。


こちらはデモです。左側のコンテンツが編集できる部分になります。右側にはヘルプが出ています。


編集したい部分がマウスオーバーでハイライトされます。クリックで編集モードに入ります。


編集モードです。ツールバーが編集エリアの下に出るのが特徴的です。


もちろん日本語も使えます。右側にMarkdownの記法ヘルプが出てくれるのも便利ですね。


上下ボタンを押すとコンテンツの位置を差し替えられます。


Markdown記法を拡張しているようで、テーブル表示にも対応しています。

demarcate.jsはWebブラウザ上で編集し、その場でHTMLを生成しています。後は変更したタイミングでコールバックを受け取れますので、その内容をサーバに送信すればダイナミックに編集ができるようになります。


MOONGIFTはこう見る

数年前のCMSは管理画面とユーザ画面とが分かれているのが一般的で、そのために管理画面上での変更が実際にどうユーザ画面で表示されるのかが分かりづらいのが欠点でした。Wikiでも同様の状態になっていました。

最近ではユーザ画面上での編集をサポートしたソフトウェアが増えていますので、管理者はもちろんユーザにとっても編集が容易でその変更結果が分かりやすい画面が提供できます。自作のシステムでも取り入れていきたいアイディアです。

About demarcate.js

will-hart/demarcate.js · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2