concrete5 5.7 コンポーザー画面

concrete5 Ver.5.7でのコンポーザーの使い方

Share on Facebook
LINEで送る
Pocket

concrete5 バージョン5.7系では今までの5.6系と、コンポーザーの使い方が変わっています。

このコンポーザーの詳しい使い方がどこにも書いてなかったので、書いてみました。

concrete5のコンポーザーとは?

concrete5Webページを直接GUIでグリグリいじってページのコンテンツを制作していくタイプの直感的CMSです。
とてもわかりやすくて、専門的なWebの知識(HTMLCSS)がない人でも簡単にWebサイトを作る事ができます。

ただ、WordPressの様に投稿画面のフォームに上から順番にダーっと入力していけばページが作られるという、古来からのUIが好きな人もいますし、その方が効率が良いWebページもあります。

concrete5では、そういった投稿画面も自由に管理画面から作る事ができ、それをコンポーザーと言います。
コレ、使いこなすと非常に便利です。

Ver. 5.7で変わったコンポーザー

このコンポーザー機能ですが、5.6系でも使えるのですが、バージョン 5.7になって使い方が少し変わりました。

5.7のページタイプとページテンプレート

コンポーザーはページタイプ毎に設定するものなのですが、 Ver. 5.7では新たに「ページテンプレート」という概念が追加されました。

これは5.6までのページタイプの一部を切り離した物です。

今までページのテンプレートファイルとページタイプは1対1の関係でしたが、これによりひとつのページタイプが複数のテンプレートファイルを使える様になりました。

具体的な例で言うと、「新着情報」というページタイプが「右サイドバー」と「左サイドバー」二つのテンプレートファイルを使える、という様な事ができるようになりました。

これで5.6系でよく勘違いされていたページタイプの役割、「見た目のレイアウトを決めるもの」と、ページタイプ本来の役割である「どんな用途かを決めるもの」が分かれ、よりわかりやすくなりました。

これにより、コンポーザーの使い方、設定方法等も大きく変わっています。

まず、コンポーザーのフォームの設定から

concrete5 Ver. 5.7系でコンポーザーを設定する時は、まずページタイプの設定からフォームの設定をします。

ページタイプ管理画面

ページタイプの設定画面を開き、この「フォームを編集」ボタンをクリックします。
フォームを編集

フォームの設定画面が表示されますので、ここでコンポーザーに表示したい項目を決めていきます。
コンポーザーに表示する項目の設定

各セットのタイトルバーにカーソルをホバーすると、メニューアイコンが表示されます。(これ、ホバーしないと表示されないのってどうなん?とは思いますが)
」をクリックすると、入力項目の追加ができます。
フォームセットの編集アイコン

ブロック内蔵プロパティカスタム属性の中から好きな要素を追加できます。
試しに、ブロックImage(画像)を追加します。(ここ翻訳漏れしてるな…)
フォームアイテムの設定画面

フォームセットに追加されます。
ここもカーソルをホバーすると編集アイコンが表示されるので、エンピツのアイコンをクリックすると編集できます。
スクリーンショット 2015-04-30 6.45.44

この様に要素の設定画面が表示されるので、適当に埋めます。
カスタムラベルは表示する要素の名前、説明は簡単な要素の説明文を入れます。
とりあえず今回は「サンプル画像」としておきます。
画像ブロックの設定画面

次に、ページタイプの一覧画面に戻り、今フォーム要素の編集をしたページタイプの「出力」ボタンをクリックします。
ページタイプ設定画面:出力ボタン

このページタイプで利用できるページテンプレートの一覧が表示されるので、編集したいページテンプレートの「デフォルトを編集」ボタンをクリックします。
ページテンプレート設定画面

5.6系と同様のデフォルトブロックの編集画面が表示されるので、普通のページにブロックを足すのと同じ様に、メニューバーの「+」をクリックして、ブロックタイプ一覧の一番下の方にある「コンポーザーコントロール」というブロックを表示させたいエリアにドラッグ&ドロップして配置します。
コンポーザーブロック

 

そうすると、さっき設定したコンポーザーのコントロール要素を選択できる画面が表示されるので、ここに表示したいアイテムを選びます。
フォームアイテム設定画面

これでコンポーザーに自分が追加した要素が表示される様になります。

コンポーザーで開けないときは

コンポーザーの設定をしたのに、ページの設定メニューに「コンポーザー」が無くてコンポーザーでページを開けない時は、そのページタイプの「基本情報」で設定します。

ページタイプ基本情報

基本情報設定画面を開くと、「コンポーザーで開きますか?」という設定項目があります。ここを「はい」に設定すると、コンポーザーで開く事が出来る様になります。
コンポーザーに表示する設定

ページを追加メニューに表示させたい時は

コンポーザーで開く設定の下に、「このページタイプはよく追加されますか?」という設定項目があります。ここを「はい」に設定すると、
ページを追加メニューに表示させる設定
メニューバーの、ページ追加ボタンをクリックすると表示される画面の、「新しいページ」という項目に表示される様になります。

もっと詳しく知りたい方は

僕は月一回、下北沢のオープンソースカフェというコワーキングスペースでconcrete5の勉強会を開催しています。(詳しくはコチラ concrete5東京ユーザーグループ

ぜひこの勉強会に参加して質問して頂ければと思います。

それ以外にも僕がCTOをやっている、コンクリートファイブ ジャパン株式会社でも有償のトレーニングサービスも行っていますので、こちらをご利用ください。

もちろん、弊社株式会社クロスキューブでもconcrete5を使ったWebサイトの開発、カスタマイズなど行っていますので、そういったご相談も大歓迎ですw
ぜひお問合せください。

5.6のコンポーザーの事や、concrete5の基本が知りたい方には、既に発売されている書籍もオススメです。

Share on Facebook
LINEで送る
Pocket