Share on FacebookTweet about this on TwitterShare on Google+

concrete5のアドイベントカレンダーの11日目を担当しますピクトロンウェブプランニングの杉山です。 最初にconcrete5を知ったきっかけですが、次世代CMSを模索している中でと言いたいところですが....

このアドイベントカレンダーの締めをかざるコンクリートファイブジャパンの代表である菱川さんと家が近所であったというとてもローカルな話です。そこで徐々にマインドコントロールされたわけですが、結果的に非常に良かったと思っています。

私は代理店などを通さずプライマリーで仕事を取る事が多いため、デザインから構築までワンストップで納品まで行う構築を主にしたいと考えています。
concrete5にかかわらずオープンソースCMSには3つの携わり方があります。

1)サイト運営者としてCMSを使う人
2)サイト制作のツールとしてCMSを使う
3)デベロッパーとしてCMS開発に参加する

私は主に(2)の立場でconcrete5にかかわるですが 、これまでいくつかのCMSで仕事をこなして来ました。
頭の中やデザインカンプで出来上がったレイアウトを実際のプロトタイプに落とし込む際のまどろっこしさは常につきまといます。私の技術の未熟さももちろんあるのですが
“どんな風に、何を作るか?”に時間をかけたいのですが、
どうしても“どうやって作るか?”に時間を取られてしまいます。

プロトタイプまでのサクサク感

先日大阪で開催されたconcrete5 × サーバーセキュリティ勉強会で発表したスライドがこれです。


このスライドはトークを補足する事を前提にしているため、これだけではわかりにくいと思いますのでこのブログで補足したいと思います。
CMSにはサイト制作に必要な様々な機能が最初から実装されています。
このスライドでは、それをレディメイドとしています。 それに対してプログラムを駆使して拡張したり追加したりする部分はオーダーメイドと読んでいます。
建売住宅×注文住宅
に置き換えると話はわかりやすいでしょうか?
フルスクラッチの作るサイトは基礎から注文設計の住宅です。
建売住宅は基本設計は同じでドアやリビングの間取りなど決められた部分だけカストマイズできる。そんなイメージです。

CMSで言えば、コンテンツを追加したり編集したり保存したりする機能。そしてレイアウトして表示する機能が基本的に備えられていて、それを自分が制作するサイトに合わせてカストマイズして構成をしていきます。このカストマイズにどこまで専門知識がいるかがデザイナーにとっての使いやすさと工数にかかわってきます

ある商品データの群から新着順を取り出すには?さらに特集のチェックがオンになったものだけを取り出すには?

それにはPHPでね...query...SQLわかってる?...のオブジェクトの コンテキストがね...

p01

ググって出てきたページ通りにやってみたが、うまくいかず思わずちゃぶ台をひっくり返してしまった夜もあるでしょう。

そしてPHPのリテラシーが少ないのにググったコードをコピペして納品するの恐いですね。おかしくなっても、どこがおかしいかわかんない。まるでつなわたりです。

concrete5ではページリストブロックというのものを操作して各商品ページからリストを取得してブロックとしてページに挿入します。

各ページの特集という属性で絞り込み

02

表示数を5と決めた場合、それより多ければページ送りを出す。 並び順は公開日の新しいものを上にする。

03

ページの解説を表示し80文字に切り詰め、公開日を表示。

04

どうです?コードをいっさいかかずにここまでのサクサク作れてる感じが伝わるでしょうか?
もちろんコードをガリガリ書かなきゃ物足りねえなという方にはいくらでも奥はありますので、他の方のブログで。

さらに有料のPageList+を使えば、この菱川さんの「concrete5でノープログラミングで作るイベント情報サイト」にあるようにコードを書かずにいろんなデータ構成の呼び出しがGUIだけで作業できます。 この有料プラグインは私もヘビーローテーションです。

なにをどこに表示し、どうレイアウトするかのプロトタイプを作るまでのサクサク感をまだ使った事がない人には是非体験して欲しい。

デザイナーはMVCのViewだけさわってりゃいいじゃん!

concrete5001

最後のスライドにあるMVCでViewだけでなんとかしたいとというところを補足します。
concrete5はMVCモデルを採用したシステムです。 MVCについては時間のある方はじっくり調べればSmalltalk論文までさかのぼって調べるのも良いでしょう。
ものすごくおおざっぱで偉い人の怒られそうですが

Model(モデル)はデータの管理
Controller(コントローラ)は処理を制御
View(ビュー)は処理済みデータを表示

と考えて、デザイナーとしては前述のPageListブロックのようにデータベースとやり取りして、リクエストのセキュリティもチェックして抽出処理をしてViewにデータを渡すところまではconcrete5さんに頼む!としたいのです。
そこでこちらは、渡ってきたデータの表示処理だけやるって事です。

MCのところはconcrete5やaddonの機能でGUIでやっちゃっえれば楽でいいですよね?
その方向で考えればぐっと楽になります。

concrete5ではページ単位で値を格納する属性を任意に追加できます。

05

追加した属性を表示するには、ページ属性表示のブロックを追加して表示したい属性を選択すれば表示されます。

06

どこのデータを保存し、どのように呼び出すか?の過程のほとんどがGUIで実装されています。全部とは言いませんが。

最終的に表示を工夫したり調整するにはPHPを使うことも必要になってきます。

ですが、classを作るには?継承?スタティック?package? などと言うと

p06

デザイナーはまた壁に向かって体育すわりで独り言を言うようになってしまうかもしれません。

concrete5はviewで様々な表示を行うときpackage(パッケージ)をよく使います。
packageをどうやって作るかは置いといて、とにかく使い方さえ学べばpackageってゲームの武器みたいなもんです。

p07

海では剣が便利で、山では斧が便利みたいなことです。

実際の使い方を見てみましょう。
$form = Loader::helper(‘form’);
//ヘルパーフォームという道具を入手
echo $form->text(‘nickname’, ‘まっさん’);
//フォーム作れ!

とすれば

<input id=”nickname” type=”text” name=”nickname” value=”まっさん” class=”ccm-input-text”>

というタグを出力してくれる。

$dh = Loader::helper(‘form/date_time’);
//フォームのdate_timeという道具を入手

echo $dh->date(‘searchday’, $value = null, $calendarAutoStart = true,’date’);
//カレンダーフォームを作れ とすれば、こんなフォームを作ってくれます。

07

 

自分で作ると大変そうですよね?

$th = Loader::helper(‘text’);
//テキストヘルパーという道具を入手

$text = $th->twitterAutoLink($text, $newWindow = 0, $withSearch = 0)
//@usernames というテキストが$textにあれば、自動的にtwitterリンクを追加

テキスト分の中の@??というのを探して自動的にtwitterにリンクを貼るプログラムを作るのにどれだけ時間がかかるでしょう?
それぞれのパッケージにはスイスアーミーナイフみたいにいろんな機能をconcrete5があらかじめ作ってくれているわけです。

003739

またまた人のふんどしで相撲を取るとこれも菱川さんのサイトでデザイナーさんも必見、concrete5のヘルパーの使い方がまとめされています。 これでもほんの一部ですし、concrete5のパッケージを使いこなすだけでかなりの事ができるようになるわけです。

つまりデザイナーのとってのconcrete5って、ポートランドのスーパープログラマが作ったプログラムの電子ブロック(古い!)を組み合わせてサイトを作るようなものなんです。 ブロックの中身はわからなくても、あなたが顧客にどのようなデザインを提供し、どのように運用したいかをデザインできるんです。是非さわって作ってみてください。

次はkokona_sanよろしく〜