poplineはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

最近のCMSの流行はWYSIWYGな環境です。見たままに、その場で編集できるスタイルは分かりやすくて便利です。今回はストレスフリーでコンテンツの編集が可能なpoplineを紹介します。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.08.36_thumb.1370869387.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.08.36.1370869387.png)
コンテンツの表示されている状態です。こちらは編集モードです。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.09.03_thumb.1370869391.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.09.03.1370869391.png)
文字を選択すると、装飾するためのツールバーが表示されます。文字列はそのまま編集可能です。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.09.29_thumb.1370869394.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.09.29.1370869394.png)
リストを追加してみました。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.09.44_thumb.1370869398.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.09.44.1370869398.png)
リンクの場合、さらにURLを入力する欄が表示されます。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.08.47_thumb.1370869401.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-10 9.08.47.1370869401.png)
こちらは表示モード。文字列を選択するとTwitterやFacebook、Google検索するためのツールバーが表示されます。

poplineはシンプルなテキスト編集がメインですが、まさに見たままにコンテンツを編集できるのがユニークです。保存終了したコンテンツはそのままでは消えてしまいますので、サーバに送信するなどして保存を行うようにしましょう。

MOONGIFTはこう見る

Webサイトを運営していて、ちょっと文言を変更したいと言った要望は良く出ます。その度にプログラマーがかり出されていては本来の業務に支障が出てしまいます。そこで使えるのがCMSです。画面の一部を可変にできれば、運営サイドで自由に変更ができるようになります。

Webクローラーを考慮しない場合(ログイン後など)であれば新しいコンテンツをJSONで保存すれば良いですし、クローラーを考慮する場合はサーバで出力した上で表示すれば良いだけです。そういったちょっとしたカスタマイズできる範囲を残しておくと運用がとてもスムーズになるはずです。

popline - An HTML5 Rich-Text-Editor Toolbar

kenshin54/popline · GitHub