はじめまして。キャロルシステムの鈴木です。

  このコラムでは、HeartCoreの標準関数である「List関数」について、 '便利な使い方' や '気をつけるポイント' など実際に使用する際に役立つ手法をご紹介します。

対象の読者ですが、以下に該当するような方向けのコラムとなります。

• ・HeartCore導入検討中の方(どんなことが出来るのか興味がある方)
• ・現在HeartCoreで構築中、または運用中のサイト管理者/開発ベンダーなど

第1回目の今回は、 『List関数ってなに？』 をテーマにお話していきたいと思います。

簡単に自己紹介

はじめに・・・

初コラムなので簡単に自己紹介をします。
新卒でキャロルシステムに入社して9年目の鈴木と申します。
「プロダクトソリューション」という部署に所属しており、HeartCoreを扱ったWebサイト構築に主に従事しています。

HeartCoreとの関わり

  「HeartCore歴」としては、入社3年目から現在に至るまで約6年ほど携わっていて、大小含め2、30程のHeartCore案件に関わりました。 HeartCore歴と経験した案件数だけで言うと、キャロルシステム社内では結構長い方なのかもしれません。

List関数とは？

ここから本題です。

「List関数 ＝ HeartCoreの標準関数の1つ」

HeartCoreには標準機能として様々な 関数 （HeartCore標準関数） が用意されています。

今回のテーマである「List関数」は代表的な標準関数であり、HeartCoreでWebサイトを構築する上では欠かせない とても重要な関数 です。

List関数はどんなときに使うの？

List関数を使う場面について解説します。

超ざっくり説明するとList関数は「コンテンツをList形式で 繰り返し表示 させることができる」関数となります。

どんな場面で使用するか、弊社HP内の 『コラムTOPページ(一覧ページ)』 を例に見てみましょう。

下部のイメージが、コラム一覧ページになります。どのサイトでも見かけるいわゆる『一覧ページ』ですね。
現時点で、合計4つのコラムがあるのが分かります。 ※2017/2/24現在※

<コラム一覧>

この「コラム一覧｣を例にとると、以下の画像のように、サムネイル画像、記事タイトル、掲載日というひとかたまりの要素を記事の数分、繰り返し表示しています。

このように、HeartCoreのList関数を使えば、詳細記事を投稿しただけで、自動的に記事一覧ページを更新することができます。

具体的な使用方法

List関数を使って自動的な一覧ページを表示するために必要な材料は、以下の通りです。

①記事詳細ページ（記事ページ分）

→この詳細ページから、一覧に表示させたい項目（先ほどの、サムネイル画像・記事タイトル・掲載日）を @関数 を利用して取得します。
※実際の@関数は、②エントリーページに記載。

以下の画像で見ると、赤点線枠の

• ・サマリー（詳細ページへのタイトル・リンクで使用）
• ・メタ情報（掲載日・一覧の並び順で使用）
• ・イメージ（サムネイル画像で使用）

などを登録しています。

②エントリーページ（初回のみ設定）

→エントリーページは、List関数を使って一覧ページを表示させるために、重要なページになります。
役割としては、詳細ページの情報を一覧ページに表示させるために必要な 『デザイン』 の部分を担っています。

先ほどの記事詳細ページで設定した項目を、@関数を使用して取得し、List関数でエントリーページの情報を呼び出します。 今回表示させたい項目は、それぞれ以下の@関数を使用しています。
※@関数とは、@@@～～～@@@を指します。

その他にも記事タイトルやページのURLなども@関数で取得できるように設定しています。

③一覧ページ（初回のみ設定）

→一覧ページにはList関数を埋め込みます。一覧ページに表示させたい記事詳細ページが格納されているグループ（ここではタイプ）、エントリーのページID、一覧に表示するためのコンテンツの並び順（他、表示する件数など）を設定します。

このように、②③を設定しておけば、あとは記事詳細ページを登録していくことで、以下のように自動的に一覧ページに各記事の項目が追加されます。

いろいろな設定で表示を制御可能

その他、List関数には表示内容を制御する様々な設定項目があり、それらを組み合わせることが可能です。

例1：表示条件を設定

  表示条件を設定することが可能です。

  設定例:
  ①「掲載日が今年(2017年)のコラムだけを表示」
  
   ※ publish-date = 掲載日
  ②「タイトルに'掲載'が含まれたコラムだけを表示」
  

例2：表示件数を設定

  表示MAX件数を設定することが可能です。

  設定例:「100件ある記事の中から条件にあった4件の記事だけを表示させる」
  　

例3：表示順を設定

  表示順を設定することが可能です。

  設定例:
  ①「掲載日の新しい順(降順)で表示」
  
   ※ publish-date = 掲載日
  ②「サムネイル画像が設定されているコラムを上に表示」
  　
   ※ thumbnail-flg = サムネイル画像フラグ

例4：0件時の表示内容を設定

  1件も存在しない、0件の場合に表示する内容を設定することが可能です。

  設定例:「"まだコラムはありません。"を表示」など。
  　

まとめ

今回は、HeartCore標準関数であるList関数の概要と基本の使い方についてご説明しました。

前述の通り、List関数はHeartCoreでサイト構築をする上では欠かせない超重要且つ便利な関数です。
List関数を覚えることで、サイト構築の難易度や工数を抑えることも場合によっては可能かと思います。

次回は、構築時に役立つList関数の応用テクニックと事例についてご紹介したいと思います。
本コラムが参考になれば幸いです。

それでは。