本文のレイアウト方法

質問全般・改善要望
返信する
Ryo
メンバー
メンバー
記事: 24
登録日時: 2009年8月25日(火) 13:19

本文のレイアウト方法

投稿記事 by Ryo »

皆様、こんにちわ。

MODxでは本文のレイアウト、というか、エディタとしてTinyMCEが実装されていますよね。
下記のような部分がhtmlの知識がないスタッフにはわかりにくく、レイアウト崩れや、画像を使うのを嫌がる要因になっています。
  • 画像の右寄せ、左寄せ、その後のclear both
    <p>とbrの違い
    画像の下に説明文
それで、bingo CMSのデザインユニットのような事はできないでしょうか?
http://www.bingo-cms.jp/character/d04/
ここは画像、ここは文章、というのがあらかじめはっきり決まっているユニットを組み合わせて本文を作るというのは、Wordすらろくに使えないレベルの人でも簡単にきれいにレイアウトできて、良いアイデアだと思います。

私はプログラムはさっぱりなので、MODxで実現できるのか、そもそも方向性が違うのかわかりませんが・・・。
もし可能でしたらやり方を教えていただけるとありがたいです。よろしくお願いします。
kazh
メンバー
メンバー
記事: 12
登録日時: 2010年2月26日(金) 20:18

Re: 本文のレイアウト方法

投稿記事 by kazh »

亀レス過ぎていまさらご本人がご覧になるかわかりませんが、1MODXファンとしてご参考まで。

> それで、bingo CMSのデザインユニットのような事はできないでしょうか?
> http://www.bingo-cms.jp/character/d04/
> ここは画像、ここは文章、というのがあらかじめはっきり決まっているユニットを組み合わせて本文を作るというのは、Wordすらろくに使えないレベルの人でも簡単にきれいにレイアウトできて、良いアイデアだと思います。

確かに、Wordすらろくに使えないのに、やたらと表やリストや段組なんかを入れたがる人向けには、ユニット型というのは面白いアプローチですね。

MODXの場合、内容を入力する人とHTML/CSSを書く人は、同一か、完全に分かれている、というのが基本設計となっている気がします。
つまり、HTMLが分からないなら、レイアウトは別の人が考えて運用者は内容だけ入力すれば良い、という感じです。
内容を入力するだけでページが完成する、そのための裏側を自在に作り込めるという点では、私の知る限りMODXの右に出るCMSはありません。

# ちなみに、デザインユニットというのも、そういうリッチテキストエディタを開発すればMODXに組込可能だと思います。
# TinyMCEは選択肢の1つとして同梱されているだけですので。

以下は、Ryoさんはご存じの上での疑問かもしれませんが、他の迷っている方も見るかも知れないので一応。

MODXでは、非常に柔軟なテンプレート変数(いわゆるカスタムフィールド)の定義が出来るようになっています。
本文(Contents)欄などは、とりあえず初期状態でなんでも書ける余地を残すためのオマケみたいなものだと、勝手に思ってます。
汎用テンプレート以外では画面から消してしまって良い程です。

Ryoさんのおっしゃるアプローチを、MODXでは
1. ページレイアウトの種類ごとにテンプレートを作成する(例 : 「書評」)。※この時点では中身は空で良い。
2. 本文(Contents)欄を使わずに、テンプレート変数をなるべく細かく設定してあげる(例 : 「本のタイトル : 単行テキスト」「ISBN : 数値」「価格 : 数値」「発売日 : 日付」「著者 : 単行テキスト」「紹介画像 : 画像」「書評 : 複数行テキスト」)。
3. 設定したテンプレート変数を埋め込んだテンプレートを書く。
という風に行います。

こうしてあげれば、書評専用の管理画面ができます。
テンプレートとテンプレート変数のセットを他にも作れば、テンプレートを切り替えるだけでそれぞれ専用の入力画面が出せます。

同じ内容でレイアウトの異なるテンプレートをいくつか用意してあげたり、ラジオボタンで画像の配置を選択できるテンプレート変数を用意してあげたり、スニペットやカスタムウィジェットを使って、例えば価格なら勝手に半角化して3桁ごとにカンマ区切りされるようにする、英数字は自動で半角化する、著者名は何度も使うかも知れないのでManagerManagerでタグフィールド化しておく、等々、いくらでも親切な管理画面に出来ます。それこそ、運用者は「きちんとした日本語さえ書ければ良い」というレベルまで。

PHPでCMSを開発する、という開発者の視点で見るとMODXは最高のフレームワークだと思います。
先ほどの書評の例のように、構造化されたデータと表示の間をつなぐシステムを作るのに最適です。
表示に関する細かい要求にも制限が出ませんし、デザイナがどんな突飛なレイアウトを組んできても余裕で対応できます。

ただ、そのためにはいくらかシステム開発の思想が必要です。
設定する側がきちんと設計できないと、MODXは何の取り柄もないCMSにもなりかねません。
統一性や設計などない、好き勝手なページをたくさん作りたいという場合にも、あまり他に勝る部分はないと思います。
この辺が好き嫌いと使いどころの分かれるところかもしれませんね。
sama55
メンバー
メンバー
記事: 816
登録日時: 2009年8月03日(月) 08:16

Re: 本文のレイアウト方法

投稿記事 by sama55 »

私もkazhさんの仰る通りだと思います(激しく同意)。 ;)
Ryo
メンバー
メンバー
記事: 24
登録日時: 2009年8月25日(火) 13:19

Re: 本文のレイアウト方法

投稿記事 by Ryo »

お返事ありがとうございます。

kazhさんが提示してくださった、テンプレートを複数用意したりする方法ですが・・・
○1ページに複数のユニットが必要な場合はどうするか?また、必要なユニットの数・種類・順番はページごとに異なる。
○テンプレート変数を用意する方法だと、WYSIWYGじゃない。
この2点が問題かなと思っているのですが、解決方法はあるでしょうか?運用者は素人でもOKにする為には、この2点は解決したいのです。
一点目は複数ページに作って、それをdyncontentか何かで連結して表示、という方法はあるのでしょうが・・・あんまりスマートじゃないですし・・・。
(一番の問題は、開発者な私がhtmlしかわからないという事ですかね・・・)
PHPでCMSを開発する、という開発者の視点で見るとMODXは最高のフレームワークだと思います。
先ほどの書評の例のように、構造化されたデータと表示の間をつなぐシステムを作るのに最適です。
表示に関する細かい要求にも制限が出ませんし、デザイナがどんな突飛なレイアウトを組んできても余裕で対応できます。

ただ、そのためにはいくらかシステム開発の思想が必要です。
設定する側がきちんと設計できないと、MODXは何の取り柄もないCMSにもなりかねません。
なるほど。PHPでCMSを開発するためのフレームワークと言われると手も足も出ません :|
MODxのテンプレートを作るのが簡単というところが魅力で導入したのですが(数年前はMODxみたいに普通のhtmlから簡単にテンプレートが作れるCMSは少なかったですよね)、今はMODxオフィシャルサイトの説明にもDreamweaverからの乗り換え、よりもフレームワーク的な魅力が多く書かれていますね。

レイアウト方法の問題も、どっちかというとMODxよりエディタの問題な気もしますし、あるいはbingo CMSに乗り換えれば良いじゃん、と言われそうな気もします(汗
ただ、乗り換えるのはかなり手間なのと、今、MODxでできていることがすべてできるか、というと怪しいので躊躇しています。

以下は蛇足です。
ちょっと、MODxの話題からは外れてしまうかもしれませんし、Web制作を生業としている方々には釈迦に説法になりますが・・・。

うちも含め、中小企業だとコンテンツ制作の流れは多かれ少なかれ、こんな感じでしょうか。
  • 内容を社長など偉い人が考える(もちろん、コンピュータは苦手)
    手の空いてるスタッフに伝える(手書き・テキストエディタ・口答など)
    スタッフが四苦八苦しながらが入力(リストがうまく書けない!写真位置が変!なんかずれる!などなど)
    社長が見て気にくわないところを何度でも修正
ぶっちゃけ、社長からぐちゃぐちゃの手書きやらテキストエディタの資料を渡されて、それを入力するのはかなりめんどくさいです(笑)
主たる業務でも無いので、たいがいのスタッフはhtmlに詳しくなる気もあまりないでしょう。
自分で好きに作ってくれたら良いのに・・・と常々思っていますし、そう思ってる中小企業IT担当は多いかと。

かといって、社長にhtmlやtinyMCEを教えても、綺麗に写真を入れたり表を書いたりはできるようにならないと思います。
そういう人にもbingo CMSのようなアプローチならいけるかな、というのが質問の意図です。
社長が自分である程度入力できるようになれば、スタッフの精神的にも、企業としてのコスト的にもメリットが多いからです。
(もちろん、htmlに詳しくないスタッフがすらすら入力できるようになるだけでも、大きなメリットです)

既存のプラグインかなにかで簡単に実装できるものじゃ無さそうなので、話題提供レベルと思って頂ければありがたいです。
ユニット方式がMODxに実装できるなら、ウン十万円くらいなら買います(笑)

参考までに、作りたいページはこんな感じです。
http://www.rope-access.co.jp/cliff_clim ... tion_plan/
http://www.rope-access.co.jp/slope_inve ... on/boring/
kazh
メンバー
メンバー
記事: 12
登録日時: 2010年2月26日(金) 20:18

Re: 本文のレイアウト方法

投稿記事 by kazh »

まさかお返事がつくとは。
年単位で放置してしまいました。申し訳ありません。
○1ページに複数のユニットが必要な場合はどうするか?また、必要なユニットの数・種類・順番はページごとに異なる。
これは、うちの場合、ユニット用としてレイアウトごとのテンプレートをそれぞれ作り、それをレンダリングするためのテンプレートを上位に置く形にしました。

[記事テンプレート] ← 下位ドキュメントをユニットに見立ててDiitoでレンダリングするテンプレート
├[ユニットテンプレート1] ← 段落タイトル+画像+キャプション+文章入力欄を用意したユニット用テンプレート
├[ユニットテンプレート2] ← 段落タイトル+でっかい画像1枚のユニット用テンプレート
└[ユニットテンプレート3] ← WYSIWYGでなんでも書けるユニット用テンプレート

こんな感じです。
ユニット用のテンプレートは、内容を入れるためだけのものなので、表示用のHTMLを持たず、上位記事にリダイレクトするようにしています。
1つの記事を投稿するためにたくさんドキュメントを作る必要があるので、運用者のレベルと頻度によっては現実的でないかもしれませんが・・・ :|

投稿用のモジュールを作れば、もうちょっとRyoさんのイメージに近いスマートなものにも出来ると思います。
返信する