Ver.8 から使えるExpressオブジェクトとは?

Share on Facebook
LINEで送る
Pocket

この記事はconcrete5 Japan Advent Calendar 2016の4日の記事です。3日の記事はacliss19xxさんの「検索ブロックのカスタマイズ」、5日の記事はmizuno.fumitoさんの「concrete5をウェブサービスのベースとして活用する」です。
この記事と合わせて読んでみてください。

concrete5 Ver.8 が12月1日にやっとリリースされました!

新しいUI、機能が盛りだくさんのメジャーバージョンアップ、concrete5 Ver.8がやっと出ました!
たくさんの新機能の中でも僕が一番注目し、喜んでいるのが Express オブジェクト です。

Express オブジェクトをわかりやすく言うと、concrete5の中にMS AccessやKintoneの様なデータベースを作れる機能です。凄いんですコレ。

今日はそんな新機能のExpressオブジェクトの使い方をご紹介します。

まず、Expressデータオブジェクトを作る

何はともあれデータの入れ物であるデータオブジェクトが必要です。
一般的なデータベースで言うところのテーブルにあたるものです。

これは管理画面 > システムと設定 > エクスプレス  のメニューで設定します。

2016-12-04-0-09-36

この画面の「データオブジェクト」をクリックするとデータオブジェクト設定画面に遷移します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-0-29-17

すでに登録されているデータオブジェクトが並んでいます。
初期段階だと、コンタクトフォームのデータオブジェクトだけがあると思います。

この右上の青い「オブジェクトを追加」ボタンをクリックするとデータオブジェクトの新規追加画面に遷移します。今回は試しに商品リストを作りたいと思うので、商品オブジェクトを作りましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-0-36-47

新規追加画面を開くと、こんな感じになっています。

上から順番に値を埋めていきます。

  • 名前
    • このオブジェクトの名前です。日本語でOKです。今回は「商品」としておきましょう
  • ハンドル
    • これはconcrete5の属性とかでもおなじみのシステム内で利用する英数小文字のハンドルです。システム全体を通してユニークなものを設定しましょう。
      今回は「product」としておきます
  • 複数形ハンドル
    • これがちょっと厄介なのですが、データベースを管理するライブラリの都合上単数形をハンドルに、複数形をこの複数形ハンドルに設定します。
      今回は「products」としておきます。

各パラメータを埋めたら、右下の「保存」をクリックします。

オブジェクトの属性を追加する

次に、作成したデータオブジェクトの属性「プロパティ」を設定していきます。

これはconcrete5のページ属性と同じ考え方です。
商品の名前や価格、製造年月日や商品コード、商品画像など、「商品」というオブジェクトに必要な情報を入れるフィールドを作っていきます。
ただ、ページ属性とは違った新しい属性も設定できるので、そのあたりを重点的にご紹介します。

Expressオブジェクトに設定できる属性

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-0-46-04

こんだけあります。

ちょっとわかりにくいのが、「エクスプレスエンティティ」という属性です。
これは他のオブジェクトの値をもってくるものです。他のマスタの情報をもってこれると思うと分かりやすいかもしれません。

とりあえず今回は「商品名」「概要」「商品画像」「メーカーロゴ」を設定しましょう。
商品名はテキストフィールド、概要は複数行のテキストフィールド、商品画像は画像フィールド、メーカーロゴはエクスプレスエンティティで指定しましょう。

商品名、概要、商品画像はページ属性と作成方法、設定方法はほぼ同じなので割愛します。
今回はこのExpressデータオブジェクトのひとつめのキモ、「エクスプレスエンティティ」について説明します。

エクスプレスエンティティとは、他のデータオブジェクトの値を表示させるフィールドです。わかりやすくするために、今回はメーカーロゴとしました。
さっきの商品オブジェクトを足したのと同じ様に、「メーカー」オブジェクトを追加しましょう。その際に、「メーカーロゴ」という画像フィールドを設定します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-1-05-17

そして、商品オブジエクトの属性設定画面で、エクスプレスエンティティフィールドとして、「メーカーロゴ」属性を追加します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-1-07-47

そして属性設定画面の「Expressオプション」でさっき作成したメーカーオブジェクトを選択します。

これで、メーカーオブジェクトに登録されたメーカーロゴ画像を選択できる様になります。

フォームを設定する

さて、入れ物を作ったら次はデータの登録です。

作成したデータオブジェクトにデータを登録するためには、「フォーム」を作成する必要があります。これは、concrete5のコンポーザーの様なものと考えてください。
各属性ごとにデータの入力UIを定義していきます。

ここでミソなのが、ひとつのデータオブジェクトに対して複数のフォームを設定できるということです。
フロント画面に表示する用、管理画面専用、権限によって出しわける、など色々できます。
たとえば、商品の注文フォームを作る際に、ゲスト用、会員用、お得意様用と分けるとかできるんです。

フォームを作る場合は、データオブジェクトの詳細画面で、メニューの「フォーム」を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-1-20-35

そして右上の「フォームを追加」ボタンをクリックします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-1-22-24

新規作成画面が表示されるので、フォームの名前を入力して右下の「保存」ボタンをクリックします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-1-24-45

次に、フィールドセットを追加します。フィールドセットとは、入力UIのグループの様なものだと思ってください。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-1-25-02

「フィールドセットを追加」をクリックするとこの画面が表示されるので、フィールドセット名を入力して「セットを追加」をクリックします。

フィールドセットを追加したら、そこにどの属性の入力UIを設定するかを決めていきます。

追加されたフィールドセットのタイトルバー右の「+」をクリックし、入力するフィールドを選択していきます。

ezgif-com-video-to-gif-2

追加されたフィールドの鉛筆マークをクリックすると、その入力フィールドの設定ができます。

今回はちょっと解りづらいコアプロパティのテキストフィールドについて説明します。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-1-36-54コアプロパティのテキストフィールドは、このフィールドセットの説明をするパーツです。

  • ヘッドライン
    • 入力フォームで表示される見出しです。
  • 本文
    • このフィールドセットの説明文を入力します。
  • カスタムラベル
    • このフィールドセットのカスタムラベルを設定します。

商品オブジェクトのフォームの設定が終わったら、メーカーオブジェクトのフォームも設定して、データを登録できる様にしておきましょう。

データを登録する

さあ、フォームの準備ができたら実際にデータを登録しましょう。
データの登録は「システムと設定」からではなく、 管理画面 > エクスプレス から行います。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-1-52-52まずは、メーカーオブジェクトにメーカーロゴを登録しましょう。
Exoressオブジェクトの「メーカー」をクリックして、右上の「+Newメーカー」をクリックします。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-1-54-19おそらくこんな感じのデータ登録画面が表示されるので、メーカーロゴを選択して登録します。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-1-56-54次に商品情報を登録します。
管理画面 > エクスプレス で「商品」を選択し、レコードの追加をします。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-01-23さっきフォームの設定で指定した通りの入力フィールドが表示されると思うので、そこに情報を入れていきます。
入力したら右下の「商品を保存」をクリックするとデータが登録されます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-04-21

登録したデータをWebサイトに表示する

さあ、データを登録したらWebサイトに表示させましょう。
Expressデータでは、情報の一覧表示と詳細表示ができます。つまり、今回のケースで言うと、商品一覧と商品詳細ページが作れてしまうんですね。ノンプログラミンでデータベースの専門知識も必要とせずに!!

素晴らしいな〜

Expressデータの一覧表示

Expressデータをconcrete5のフロントで表示するには、専用のブロックを利用します。

データの一覧を表示するためには、「エクスプレス」の「一覧」ブロックを利用します。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-09-35このブロックをページの好きな場所にドラッグ&ドロップして設置します。

ソース&検索

まず、どのデータオブジェクトのデータを表示するかを選択します。
今回は「商品」オブジェクトのデータを選択します。%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-10-30次に、データを検索できるかどうかを選択します。
検索できる様に「検索を有効化」をチェックすると、こんなメニューになります。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-13-06キーワード検索を有効にしたい時は「キーワードで検索」にチェック、拡張検索で属性で検索できる様にしたい時は「属性検索を有効化」の検索対象としたい属性にチェックを入れます。

結果の設定

次に一覧の表示についての設定です。「結果」タブをクリックすると、様々な設定項目が設定できます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-17-57

  • ページあたりの表示件数
    • ページングの設定です。1ページあたり何件のデータを表示させるかを設定します。初期値は20です。
  • 詳細ページへのリンク
    • 一覧のデータをクリックした時に詳細ページへ遷移させる場合にはここで詳細ページをサイトマップから選択します。事前に作成しておく必要があり、詳細ページにはエクスプレスオブジェクトの詳細ブロックを配置しておく必要があります。
    • ページ選択下部の属性などのチェックボックスは、一覧の中のどこをクリックすれば詳細ページに遷移するか?リンクテキストとして使用するフィールドを選択します。
  • カラムを選択
    • 表示するデータのフィールドを指定します。
  • 並び順
    • 表示するときのソート順を指定します。
    • ここで便利な「カスタム表示順」を指定することができます。これは名前順や価格順などの機械的なソートではなく、サイトマップ順の様なマニュアルで並び順を指定したい時に利用します。
  • 並び替え
    • 表示順の変更設定です。どのフィールドでどんな風に並び変えができるかを設定します。

デザイン

一覧の表示結果のデザインに関する設定をします。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-31-22ここでは一覧ブロックの表示に関するデザイン部分の指定ができます。

名前はこの一覧ブロックの見出し、説明は概要説明です。
それ以外に背景色や色々設定できますので、色々いじってみてください。

さあ、すべての設定が終わったら保存してどういう風に表示されるか見てみましょう。おそらくこんな感じに表示されていると思います。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-34-55

Expressデータの詳細表示

一覧表示ができたので、次に詳細表示の設定をしてみましょう。

一覧と同じ様にエクスプレスカテゴリの「詳細」ブロックを詳細ページに配置します。どのページを詳細ページにするかは、一覧ブロックの設定で選択してください。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-37-28

  • エンティティ
    • どのExpressデータオブジェクトのデータを表示するかを選択します。今回は「商品」ですね。
  • エントリー
    • 他の一覧ブロックから遷移してきたときの詳細画面の場合は、「他のリストブロックからエントリーを取得」にします。
      常に特定のエントリーを表示させたい時には「特定のエントリーを表示」にしてエントリーを選択します。
  • エンティティフォームにデータを表示
    • これ翻訳が良くないですね。これはどのフォームにデータを表示させるか?です。表示させたいフォームを選択しましょう。(つまり入力用と出力用でフォームを分けられるんです)

さあ、表示を確認してみましょう。一覧から遷移してちゃんとデータは表示されましたか?多分こんな感じで表示されていると思います。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-51-28今回は入力用のフォームを使って表示させたので、なんだかちょっと変ですが、表示用のフォームを作ればもっとちゃんとした表示にできます。

また、画像フィールドのデータが現バージョンでは画像ファイルへのリンクとして表示されてしまうので、この辺を変えたい場合はカスタムテンプレートの作成が必要です。

フロントからデータを入力させるには?

フロントからデータを入力させるためには、今までのフォームブロックを使います。フォームブロックを配置すると、それがそのままExpressオブジェクトになります。

つまり、Expressデータオブジェクトは今までのフォームブロックの拡張なんですね。

まとめ

今回は商品情報のデータベースを作りましたが、これ以外にもスタッフ情報や、営業所一覧、Q&Aの投稿など、様々なWebアプリケーションをこれで作ることができます。

また、今回は省略しましたが、Expressデータオブジェクト同士を連携(リレーション)させる「アソシエーション」という機能を使えば、さらに複雑なデータ構造をconcrete5内で表現することができます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-04-2-59-08このアソシエーションとカスタムテンプレートで現在のWebアプリケーションに求められる事の大半はノンプログラミングで実現でき、少しカスタマイズすれば、CRMなどのさらに複雑なWebアプリケーションも簡単に作成することができる様になり、今後ますますイントラサイトなど、社内の業務システムの一部として活用することが期待されます。

次回はこのアソシエーションやカスタマイズ方法についてご紹介いようかなぁと思っています。

さあ、皆さんもこのExpressデータオブジェクト機能を使って、いろんな機能をWebサイトに追加してみてください。

Share on Facebook
LINEで送る
Pocket