Mercury Editorは実際に表示された内容をそのまま編集できるWYSIWYGエディタ。

Mercury EditorはHTML5/JavaScript製のオープンソース・ソフトウェア。Webサイトを運営していると、一部のデータを変更したいというニーズは必ず発生する。全てを自動化できる訳はなく、アイコンやラベルの変更は手作業で行うだろう。


編集中

しかしシステムへの組み込みで細分化されたテンプレートを完成図を予想しながら変更していくのは難しい。そこで完成された図をそのままに修正する試みはどうだろう。それを可能にするのがMercury Editorだ。

Mercury EditorはJavaScript製のコンテンツエディターだが、表示されているWebサイトをそのまま編集できる所が新しい。実行すると画面上にツールバーが表示されて編集できる状態になる。編集できる場所は指定可能だ。文字装飾はもちろん、画像やYouTubeなどの動画を差し込んだり、テーブルを追加することもできる。


動画、画像の埋め込み

それを実際に変更された状態を見つつ編集できる。さらに編集履歴や一通りの編集内容をスニペットとして保存しておいたり、ノートにメモを記しておくこともできる。保存を押すと編集内容をJSONとして指定したパスにポストする。後はシステム側でデータを受け取って反映するだけだ。

Railsとの親和性が高く、Gemfileで簡単に組み込める。もちろんRails以外でも連携は可能だ。ツールバーのカスタマイズもでき、機能拡張を作ることもできる。見たままに編集できるのは運用担当者にとって非常に分かりやすい。運用を手軽にする、便利なソフトウェアだ。

[s2If current_user_can(access_s2member_level1)]


保存時のコード。JSONで来る(プレミアム限定)

[/s2If]
[s2If current_user_can(access_s2member_level1)]


履歴(プレミアム限定)

[/s2If]
[s2If current_user_can(access_s2member_level1)]


いざという時のHTMLエディタ(プレミアム限定)

[/s2If]

MOONGIFTはこう見る

WYSIWYGなエディタは有名なものが幾つもあるが、表示がグラフィカルなだけでワードプロセッサレベルだった。それでは実際の見た目とどれくらいの違いがあるかは分からなかった。Mercury Editorは実際に使われる際に組み込めるので見た目の差異がとても小さい。

最終的に使うのがWebサイトなのであれば、より実体に近い形で表現する方がミスは減るはずだ。また、それこそがWebブラウザ上でツールを提供する利点と言えるだろう。より実際に使う場面に近づける、そんな工夫が今後必要になるのではないだろうか。

Mercury Editor - Home

jejacks0n/mercury - GitHub