- HTMLタグには極力アトリビュートを付けない
- 付けるのは少しのIDといくつかのclass程度
- 当然TABLEタグでレイアウトなんぞは組まない
こういう考えで開発していくと、CakePHPのFormヘルパーが吐き出す、そっけなく簡素で女々しいHTMLタグも、むしろそれでいてくれてありがとうと思えるほど便利になる。
さて、俺が何を言いたいのか、わかっていただけてるかな。
「CakePHPのFormヘルパーで出力されたラジオボタンを整列したい」という問に対してphpでHTMLタグを出力させ、cssなどで整形するという解決
これ、完全に、デザイナの領域なのに、開発側で対応しようというのがそもそもの間違いであり、こういった作業は往々にして大した結果に至らない。要するに解決にならない場合が多いのではないだろうか。
とにかく、無理矢理が良くない、ということを言いたい。
CakePHPはほぼphpで書かれたMVCだけど、Vから先のことはこう考えるとよいだろう。
JavaScriptで、HTML（DOM）とCSSをコントロールする
だ。俺が言いたいことがわかっていただけたかな。
CakePHPのMVCよろしく、jQueryをコントローラとし、DOMで拾う内容をモデルとし、それらを吐き出すためにcss、場合によってはHTMLで整形してビューとする、というような流れを考えたほうが良い。
このほうが何しろソースは綺麗になるわ、サーバの負荷分散にもなるわ、デザイナのスキルアップにもなるわ、開発者の手間も省けるわ、で、いいことずくめだ。どうしてやらない？と俺は聞きたい。
ちなみにこの方法が実現できない様な糞ブラウザ（IE）を上司から要求されたら、そいつにこう言ってあげるとよいだろう。
「おや？部長、口からクソがはみ出てますよ？」
と。
というわけで、前置きが長くなったけど、CakePHPで素直に出力したcheckboxを、DOM操作で整列させるjQueryプラグインを作ったので披露してみたい。
CakePHP側では以下のようなビューを使用することとする。
echo $form->input('hobbies', array(
'type' => 'select',
'multiple' => 'checkbox',
'options' => $masters['hobby'],
'div' => true,
'label' => false,
))
$masters['hobby']には、find('list')などして生成したマスタデータが入っている。そしてこのビューを素直に表示させたときのサンプルがこうだ。
正直いって、生粋の開発者として長年生きてる人にとっては、この時点でこれ以上いじるのはやめたほうが良い。ろくなことがない。デザイナがやりにくくなるだけだ。2列にしてと言われても、開発者はやっちゃだめだ。
では次に何をするのかというと、今回俺が適当に作ったjQueryプラグインを使うことだ。htmlが書かれたファイル、つまりCakePHPのビューを一切弄らず、プラグインを使うだけで、以下のような複数列での表示が可能となる。
あまり列を増やすと横に広がりすぎるのでよろしくないけど、だいたい4列くらいが調度良いかな。
というわけで、今後はCakePHP側でフォームエレメントのレイアウトとか考えることすら要らなくなる。
当然この程度のプラグインだったら他にも存在するかもしれないけど、個人的にマルチ化したい要素を列分cloneして、「overflow:hidden」で1列ずつずらして表示するようなやり方だと、汎用的ではないと思うし、実際に使ってみたら見事に崩れたので、使用するのをやめた。
だからちゃんとDOM的に、要素を要素でラップしてfloatさせる、というプラグインが欲しかった。それは俺は発見できなかった。だから自分で作った。
取り急ぎ作ったもので全然大したものではないが、ひとつの解決法としてはかなり有効のはず。よかったら使ってみていただきたい。
というわけで、ソースはこれ。
jquery.multicols.js
改造の余地がたくさんあるけど、とりあえず徐々に対応予定。
使い方。
$('div.checkbox').multicols({
cols:2
});
facebook
twitter
google+
fb share