Movable Typeの固定ページにおける1ページ=1リッチテキスト(WYSIWYG)の限界

私はリッチテキスト(WYSIWYG)エディタがあまり好きではありません。

Movable Typeの固定ページ機能はカスタマイズを行わない限り、 タイトルエリアと1つのリッチテキストエリアで構成されています。

固定ページを作成する際にタイトル以外のコンテンツは基本的にすべて、 この1つのリッチテキストエリアに入力することになります。

よくリッチテキストエリアのことを指して、「見たまま編集」、 「Wordと同じ使い勝手で更新ができる」と説明されることがありますが、 それは多くの場合で正しくありません。

基本的なテキストの文字装飾程度であれば問題ありませんが、 画像の挿入と回り込みなどを行うと途端に操作の難易度が上がります。

何度か同じ操作を繰り返しても思ったような見た目にならない、 一箇所触ったら他が崩れた、といった経験をされた方も多いのではないでしょうか。

リッチテキストの良いところ

  • 基本的な文字装飾までなら操作が直感的で分かりやすい
    • 公開側のサイトと同じ見た目で確認することができる
  • カスタムフィールドなどと比較してエリア内の自由度が高い

リッチテキストの良くないところ

  • 複雑なレイアウトを実現しようとすると操作が難しい
  • 同じ操作を複数回繰り返すと思わぬタグの入れ子が発生する
  • 1つの変更が同エリア内の他のコンテンツに影響しやすい
  • ページ量産時に入力者のスキルによって内容が安定しない
  • データの再利用性がない
  • レスポンシブ対応が難しい

解決策

  • レイアウトをパターン化できる場合はカスタムフィールド構成に変更する
  • ユニット・ブロック単位で更新できる仕組みを導入する

Movable Typeに期待すること

現状のMovable Typeでは1つ目の解決策をとるしか問題を解決する方法は ありません。

次期バージョンで以下の機能をコアに取り入れていただきたいです。

  • 1ページ=ユニット・ブロックを積みあげて更新できる仕組み
  • 1ユニットを1アセットとしてページに依存しないデータとして管理できる仕組み
  • 公開側のサイトからページの編集画面に遷移できる、または直接編集できる仕組み

One more thing?

上記すべてを満たしているわけではありませんが、直近の案件で必要だったため 似たような機能の実装を進めています。

Unit System for Movable Type

alfasadoの野田さんが開発されたプラグイン mt-plugin-snippet をインストールし、上記のgistの内容をプラグイン設定画面にコピペすると実際の内容を確認できます。

準備が完了後、記事投稿画面を開くとスニペットフィールド内に「テキスト」・「画像」などのユニットがいくつでも追加することが可能になります。

実際の案件ではユニット初期化時と追加時に発生するjQueryの独自イベント、unit_initやunit_addedを元にbit-partさんの MTAppjQueryMTAppjQueryPlus の MTAppMultiConverter などを使用して入力エリアをカスタマイズしています。

諸々の課題・やりたいこと

  • ユニットが1件の場合に正しく保存されない(原因判明/修正中)
  • プレビュー→再編集で表示が復元されない(調査中)
  • できれば独立したプラグインにしたい
  • カスタムフィールドに対応したい
  • 1ユニットごとの情報を1アセットとして別オブジェクト管理したい

MTMLとjQueryは少なからず分かるものの、Perlが分からなすぎて辛かったり、 きっともっと良い物が近いうちにリリースされるようですが実案件もあるので、 引き続き試行錯誤したいと思います。 (´ཀ`」 ∠)

もし上記のGistの内容などでご指摘等ありましたら、TwitterまたはFacebookで ご連絡いただけると大変嬉しいです。