
STUDIOでお知らせ一覧のようなリストは作成できますか?



CMS機能を使って作成する方法を説明します。
企業やサービスのWEBサイトでは、最上部などに最新情報のリストを表示したいケースが多々あります。ここでは、STUDIOでCMS機能を使ってお知らせ欄のリストを作成する方法を説明します。
STUDIOでCMS機能を使ってWEBサイトに更新可能なリストを表示する方法
STUDIOのCMSの構造に付いて
STUDIOのCMSは、扱う情報(今回の例では1件の”お知らせ”が持つ情報)をモデルとして定義して、その“お知らせ”モデルのデータを、必要な数作成していきます。
その後、デザインエディタで“お知らせ”モデルのリストを画面に配置して、WEBページにお知らせ情報のリストを表示します。


CMSで”お知らせ”の内容をモデルとして定義する
まずは、CMSで1件の”お知らせ”が持つ情報を定義して、“お知らせ”モデルを作成します。


モデルタイプ | 説明 |
---|---|
記事タイプ | ブログの投稿時事などに適した項目が用意されたモデル |
ユーザータイプ | 人の管理を行うのに適した項目が用意されたモデル |
カテゴリータイプ | カテゴリーとして用いるのに必要な項目のみのモデル |
カスタムタイプ | タグとして用いるのに必要な項目のみのモデル |
画面左上の「モデル」の横にある「+」をクリックして「新規モデルの作成」画面を開きます。
ここでは「新規モデルの作成」でモデル名は”お知らせ”として、モデルタイプは「記事タイプ」を選択します。


「作成する」ボタンをクリックすると作成したモデルの設定画面が開くので、プロパティに必要な項目を追加します。


ここでは、お知らせに必要な情報の「日付」をテキストタイプのプロパティで追加します。


「日付」のプロパティが追加されます。これでモデルの作成は完了です。


お知らせ の実データを作成する
次に、作成した”お知らせ”モデルの実データを作成していきます。「新規追加」ボタンを押します。


すると、データを編集する画面が開くので、登録する内容を入力します。


続けて、同じように3件のデータを登録します。


これでCMSで必要な作業は終わりです。「デザインエディタ」に戻ります。


デザインエディタでCMSのリストを配置する
CMSで作成したモデルのリストを、デザインエディタで配置できるようになっています。
メニューから選択して配置します。




配置したCMSリストのボックスを選択して、今回使用する日付とタイトル以外の項目を削除します。


残った項目を横並びにするために設定を変更します。ボックスを選択して矢印を押します。


右矢印を選択すると、ボックス内の項目が横並びになります。


投稿日のテキストボックスを選択します。「ボックス」タブで「テキスト」を「CMSプロパティから選択」の”日付”へと変更します。


お知らせ の詳細ページを作成する
次に、お知らせ一覧の各項目をクリックすると開く詳細ページを作成します。「ページを管理」メニューを選択します。


「ページ」タブの追加ボタンを押して、リストから「動的ページ(CMS)」を追加します。


次に「動的ページ用のモデルを選択」で”お知らせ”を選択します。


すると「お知らせ」モデルのデータを表示するページが作成されます。このページにテキストボックスを追加して、ボックスの「テキスト」を”Body”にします。


これで、追加したテキストボックスに本文が表示されるようになりました。


最初のページに戻り、リストのボックスの「リンク」プロパティで、初期設定のリンクを削除します。


先程作成したページを変わりに選択します。(入力欄にカーソルを入れるとページのリストが表示されて選択できます。)


以上で完了です。プレビュー表示すると以下のように表示されます。



