なぜCMSが必要か｜手作業で複製する場合との比較

お知らせを1件だけ載せるなら、カードを1枚作って、テキストを入力するだけで十分です。しかし、お知らせが増えるたびに、同じカードを複製して、画像・タイトル・本文を1件ずつ書き換えるとどうなるでしょうか。5枚、10枚と増えるにつれて、更新のたびに探す箇所と直す箇所が増えて、修正の漏れも起きやすくなります。

CMSは、この同じ形の情報を繰り返し追加する作業を、仕組みにしたものです。カードのレイアウトを1つ作っておけば、あとはCMS側で記事のデータを1件登録するだけで、同じ見た目のカードが自動的に増えます。デザインを作る作業と、記事を追加する作業が切り離されるため、サイトの更新を、デザインの知識がない人にも任せられます。

見本サイトのNEWSには、4件の記事が縦に並びます。この4件を、CMSで管理して、サイトに表示するまでの流れが、3-4と3-5の2つのレッスンの内容です。3-4では、記事のデータを入れる入れ物と中身を作り、3-5で、それをページ上に表示します。

Studio CMSに接続する

Ctrl/⌘+7 で開く接続パネルには、Studio CMS、API連携、RSS連携の3つの選択肢が並んでいます。このコースで使うのは、Studio CMSだけです。API連携とRSS連携は、外部のサービスとデータをやり取りする機能のため、ここでは名前だけ確認しておきます。解説動画では、CMSのタブを開いて、テンプレートを選ぶ画面から始めています。ここでは、テンプレートの「ニュース・お知らせ」を選び、入っているサンプルの記事とカテゴリーを、先にすべて削除してから、自分でモデルを作っています。

モデル・アイテム・プロパティの3階層

Studio CMSは、モデル・アイテム・プロパティの3つの階層で、情報を管理します。この3つの関係を先に整理しておくと、このあとの作業で迷いません。

お知らせというモデルを1つ作ると、その中に、お知らせの記事をアイテムとして、何件でも登録できます。それぞれのアイテムは、タイトル・本文・カバー画像といったプロパティを持ちます。同じモデルに属するアイテムは、すべて同じ構成のプロパティを持つため、一覧のカードを1つ設計すれば、どの記事も同じ見た目で表示できます。ダッシュボードのCMSタブを開くと、この3つの領域が、実際にどう表示されているかを確認できます。

モデルタイプとプロパティの型

モデルを新規作成するときは、最初にモデルタイプを選びます。モデルタイプによって、最初から用意されるプロパティが変わります。

どのモデルタイプでも、ステータス・タイトル・スラッグ・公開日時・最終更新の5つは、共通のプロパティとして自動的に用意されます。見本サイトでは、お知らせのモデルに記事タイプを、カテゴリーのモデルにカテゴリータイプを選びます。

モデルには、プロパティを追加できます。プロパティには、次の11種類の型があります。どの型を選ぶかによって、入力できるデータの種類と、ページ側での扱い方が変わります。

11種類のうち、見本サイトで使うのは、画像・テキスト・リッチテキスト・参照の4つです。特に参照は重要な型で、お知らせの記事1件ずつが、カテゴリーモデルのどのアイテムに属するかを、結びつけるために使います。この仕組みによって、記事ごとにカテゴリーを表示できるようになります。

無料プランの上限を確認する

ダッシュボードのPlans & Billingタブでは、CMSのアクティブモデル数と、公開アイテム数を確認できます。Freeプランでは、アクティブモデル数が3つまで、公開アイテム数が合計100件までです。この範囲の中で、見本サイトのNEWSを設計します。

案件でCMSを設計するときも、先にモデルの数と、想定するアイテムの数を見積もる習慣をつけましょう。無料プランの範囲で足りるのか、有料プランが必要なのかを、作り始める前に判断できるからです。

お知らせモデルを作ってプロパティを設計する

ここからは、実際に手を動かします。接続パネルからStudio CMSを開き、モデルを新規作成します。モデルタイプの選択画面で記事タイプを選び、モデル名に お知らせ と入力して作成します。記事タイプを選ぶ理由は、お知らせのように、公開日時の順に並ぶ記事を扱うモデルでは、スラッグと公開日時と本文が、最初から用意されているほうが、設計の手間が減るからです。

作成したモデルを開くと、タイトル・スラッグ・ステータス・公開日時が、何もしなくても最初から並んでいます。これらは、モデルタイプに関わらず、すべてのモデルで共通のシステムプロパティで、自分で作る必要はありません。

システムプロパティに加えて、見本サイトのNEWSに必要なプロパティを追加します。見本サイトのNEWSには、カバー画像・日付・タイトル・カテゴリー・本文の冒頭が並びます。日付とタイトルはシステムプロパティで、カバー画像と本文は記事タイプに最初から用意されているため、解説動画では、プロパティを追加せず、そのまま使っています。追加するのは、次の節で作る、カテゴリーの参照だけです。

カテゴリーモデルを作って参照でつなぐ

お知らせを分類するために、もう1つ、カテゴリー というモデルを作ります。カテゴリーには、決まった構造の記事本文が必要ないため、モデルタイプはカテゴリータイプを選びます。タイトルだけがあれば、分類として使えるからです。必要なプロパティを自分で設計したいときは、カスタムタイプを選びます。

カテゴリーのモデルには、見本サイトで使う3つの分類を、アイテムとして登録します。

この時点では、お知らせとカテゴリーは、別々に存在するだけで、どの記事がどのカテゴリーに属するかを表せません。2つを結びつけるのが、参照型のプロパティです。お知らせのモデルに戻って、新しいプロパティを参照型で追加し、参照先にカテゴリーのモデルを指定します。プロパティ名は カテゴリー にします。これで、記事のアイテムごとに、3つのカテゴリーのうちどれに属するかを選べるようになります。

記事4件を登録する

モデルとプロパティの設計が終わったら、CMSダッシュボードから、お知らせの記事を4件、アイテムとして登録します。1件目は、すべての項目を確認しながらゆっくり進めます。2件目以降は、同じ流れの繰り返しです。

タイトルは、上の表のとおりに入力します。本文は、記事らしい文章であれば、お好みの内容で構いません。カバー画像は、ストックパネルの写真を使います。一覧のカードには、本文の冒頭が表示されるため、概要のプロパティは作りません。

表の公開日時は、すべて過去の日時です。公開日時が未来だと、公開中にしても一覧に表示されないため、次の節で確認する仕組みにも関わります。

表示される条件を確認する｜予約公開

ステータスと公開日時の組み合わせによって、アイテムが実際に表示されるかどうかが変わります。この違いを、テスト用のアイテムで確認しておきます。

テスト用のアイテムを1件作り、ステータスを下書きにして、一覧に表示されないことを確認します。次に、ステータスを公開中にして、公開日時を未来の日時にして、まだ表示されないことを確認します。確認が終わったら、テスト用のアイテムは削除しておきましょう。なお、このテストは、解説動画では実演していません。動画では、公開のメニューで、公開日時も選べることを確認しています。

この違いは、公式の20のチェックリストにある、コンテンツが表示されないときの原因の1つです。記事を登録したのにサイトに反映されないときは、まず、ステータスと公開日時の組み合わせを確認しましょう。

ここまでの完成状態

このレッスンの終わりには、CMSダッシュボードに、記事のデータがそろっています。一方で、サイトの見た目には、まだ何も表示されていません。データを登録しただけでは、ページに反映されないのがCMSの特徴で、表示するための作業は、次の3-5で行います。

完成状態と違う箇所があれば、該当するセクションの手順に戻って、設定を見直しましょう。原因が見つからないときは、1つ前の状態まで戻して、操作を1つずつ確認すると、見つけやすくなります。