CCK。CMSだとDropalとかJoomlaでは馴染みのある言葉ですね。
複雑なコンテンツ投入画面およびページの生成を助けるためのものです。
ポータルサイトはSeblodというCCKで作成することが多いです。


CCKとはコンテンツコンストラクションキットの略で、CMSの大き目の拡張機能(コンポーネント)として
インストールして使用します。Drupalでは基本機能として実装されてたかな。

一般的なCCKは、単なる多機能コンタクトフォームだったりするものも多いですが、
ここで紹介するSeblodは随一のものと言って良いほど多機能かつ高機能です。
無料で利用できますが、バリデーションや検索機能が無料~数10€程度の値段で提供されています。

ちなみに私はJoomla!の有償コンポーネントの選別のために、年間20万円ぐらいお金を払ってます。

なんで紹介しないのか?とか言われますが、案件作業で手一杯なもんで。。。


Seblodを利用すると、独自のコンテンツ投入の仕組み(フォームや権限管理、外部サイトとの連携など)を簡単に
実装することができます。 
今回「その1」として紹介しましたが、基本機能を紹介するだけで「その50」ぐらいまでは行くと思います(^^;

日本語化ファイルも提供されています。


さて、古いバージョンで数年前に作ったプロトタイプがあるので、実際にお見せします。
ホットペッパーやクーポンサイトの地域限定版みたいなサイトを作りました。

この時点では、デザインはまだ当てておらず、レイアウトも整えてません。
テストデータのみで、表示可能な部分のみなので、見づらくてすみません。

新着店舗の一覧で、実際には「こだわり」には”24時間営業” ”駐車場あり”などのスタンプが表示されます。



店舗詳細はこんな感じです。


簡易ポータルサイトの場合、各店舗1ページのみな場合が多いですが、
ちゃんとメニューがタブで分けられています。
「お知らせ」や「スタッフより」の吹き出しはサンプルですが、使用したYoothemeのテンプレートがもともと持つCSSの
クラスを指定しただけです。なので、ほかのテンプレートをベースにすれば、見た目は全て入れ替えることが可能です。





さて、これがどのように作られているかですが、
まずは下記はJoomla!の記事管理画面です。Ver.1.5で、もう4年ぐらい前でしょうか。懐かしいです。

その頃でもJoomla!+Seblod(当時はJSeblod CCK)で、問題なく店舗ポータルサイトが出来てしまったのも、
Joomla!のCMSとしての基本仕様がしっかりしていたからでしょう。

 

「test」店舗は1つの記事として登録されています。
(サイドバーのメニューなんかはメニューモジュールとして独立させてますが)

通常の記事の編集と同じように、「test」をクリックすると、なんと以下の画面になります。

 

この画面は管理画面用のフォームとして構成されており、Seblodではフロントサイト側専用のフォームも同時に作ります。
これは、管理者(店舗オーナーだったり、ポータルサイトオーナーだったり)にのみ編集できるページや項目を分離させるためです。
勿論、フロントサイト側でログインする権限によって項目を出し分けるということも可能です。

 
チェックボックスやラジオボタンで、各種の属性情報なんかも持たせられます。
勿論ページのフォームには、全てのフォームタグ要素が実装可能です。
複数値を持つデータはJSON形式でDBのカラムに保存したり、他多様な形式で保存が可能です。

フロント、管理画面ともに、個々のフィールドに対してクラスやIDを付与することが可能です。
当然フロントのフォームは一般ユーザー向けに見た目を整えるようにします。

また、ポップアップでヒントをつけたり、プラグインでバリデーション(入力規則)を加えることも可能です。
バリデーションの規則はJavascriptを書いて独自実装したり、外部のJavascriptに書いた関数を呼び出す
ということもできます。





また、店舗毎にクーポンの数も異なるかと思います。
そういう時はフィールドをグループ化して、そのグループを「グループx」というフィールドとして登録してやることで、
下記のようなクーポンを複数登録できるフォームを作成することが可能です。

※赤(-)がグループ(クーポン)削除、緑(+)が追加、青(・)は並べ替え用です。

「フィールドx」というのもあって、単一フィールド(画像など)を複数登録するためのものです。




お店のメニューも、店舗によって数は当然異なりますよね。
メニュー1~メニュー50までフィールドが用意されていて、縦の長さがどんぐらいあるのかという編集ページをみたことがありますが、
項目数を動的に増減させることができるので、編集のしやすさも確保されます。



ちなみに、編集画面のタブも、フォームフィールドの要素として登録できます。
今は一度に全部のタブを表示させてますが、フォームを複数ページに区切って、
「次へ」をクリックすると別のタブ(ら)が表示されるといった、マルチページのフォームも簡単に作成できます。
確認画面つきの登録フォームなんかですね。

英語ですが、こんな解説動画があります。




動画に現れてきますが、各フィールドの作成方法や、基本的なフォーム作成の流れはまたの機会ということで。