Web上でコンテンツを作る際のUIについて悩むことはないでしょうか。一ページずつ作る仕組みにするのがシンプルですが、ユーザにとって使いやすい仕組みとは言いづらいです。 そこで参考にしたいのがYogurtです。Reactを使い、ユーザビリティの高いドキュメント作成が可能です。

Yogurtの使い方

編集画面です。カテゴリはフォルダアイコンで表示され、その中にドキュメント(エントリーと呼びます)を追加します。

カテゴリを選ぶとエントリーの追加ができます。

エントリーを選んで編集できます。

新しいカテゴリを追加します。

ドキュメントの編集はMarkdownが使えます。

こちらは閲覧モード。

MarkdownがHTMLに変換して表示されます。

Yogurtはカテゴリとドキュメントという形式で表示され、コンテンツはMarkdown記法で作成します。編集時には点線が表示されるのではっきりとしていて分かりやすいです。エディタ部はシンプルですが、Markdownなので慣れている人にとっては問題ないでしょう。

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

Yogurt β plant-milk/Yogurt