CMS記事作成から公開までの流れ

CMSは、記事や作品といったコンテンツの管理が可能です。Studioでは、CMSダッシュボードからコンテンツデータを編集・管理し、デザインエディターでサイト上にどのように表示するかを設定できます。

この記事では、CMSダッシュボードで記事となるアイテムの作成から、デザインエディターでの表示。公開するまでの大まかな流れをご紹介します。事前に以下の記事をお読みいただくと、より理解が深まります。

１. CMSを有効にする

まず始めに、CMS機能を有効にしましょう。

ダッシュボード上部の「CMS」タブ、またはデザインエディター左上にある「CMS」リンクをクリックして、CMSダッシュボードを開き、「CMSをはじめる」をクリックします。

初期データの有無が選べるので、「空白からはじめる」を選択します。サンプルデータが追加される「テンプレートデータを使う」でも構いません。

※ CMS組み込み済みのテンプレートからプロジェクトを開始した場合、この選択画面は表示されません。

まずは「モデル」を追加します。「モデル」は4種類で、記事タイプやユーザータイプなど用途によって使い分けます。今回は記事の執筆に特化した編集画面をもつ「記事タイプ」のモデルを使います。なおモデルは記事自体ではなく、「記事をひとまとめにしたグループ」と覚えておきましょう。

画面左上の「＋」ボタンをクリックし、任意のモデル名を入力。作成するをクリックします。

作成した記事モデルが画面に表示され、中に記事（アイテム）を追加できるようになります。「記事を追加」ボタンからアイテムを追加しましょう。

記事を追加するとアイテム自体の編集画面に移動します。編集画面では、記事タイトル、本文、カバー画像など追加できるので、サンプルとしてそれぞれ追加しましょう。ここで追加した文章と画像は後のステップで、エディターで呼び出し表示させます。

デザインエディターへ移動し、先ほど追加した記事を表示する「動的ページ」を追加します。このページは通常のページとは異なり、CMSデータを紐づけて表示・デザインできるページです。

１. スクリーン右上から追加アイコンをクリックします。

２. ページの種類を選択する画面が表示されるので、「動的ページ（CMS）」を選択します。

３.ページに表示したいモデルを選択します

今回は先ほど新規作成したモデルを選びます。

動的ページに選択したモデルのデータが紐付き、画像のようなタイトルのみデフォルトで配置されているページが現れます。

このページにダッシュボードで登録した本文やカバー画像を追加し、デザインを整えていきます。

まずは、カバー画像を表示してみましょう。

画像ボックスを追加パネルよりドラッグ&ドロップで配置します。
画像ボックスを選択し、レイヤーパネルを開きます。Coverプロパティ右横の青い丸をクリックして、コネクタを画像ボックスへ繋げます。

※画面右側のボックス設定パネルでも設定可能です。
これでカバー画像が表示できました。次は本文を追加していきましょう！本文はリッチテキストボックスを利用します。
画面左側の追加パネルから、リッチテキストボックスを配置します。
レイヤーパネルを開き、Body プロパティ横の青い丸をクリックして、コネクタをリッチテキストボックスへ繋げます。

※画面右側のボックス設定パネルでも設定可能です。