ノーコードWeb制作ツールの「Studio」をデザイナーの友人経由で知り、最近使い始めました。ブログサイトをWordPressで作成して以降、オープンソースCMSのWordPressが多少扱えれば現状は良いだろうと、CMSに関する知識をほとんどアップデートすることなく過ごしてきてしまいましたが、今後は新しい技術や便利なツールは積極的に学び取り入れていきたいと考えています。
StudioでCMSを使用するには
今回は「Studio Community Japan」で受講した「Studio CMSセミナー｜ブログ・メディアを作るためのCMS活用&実装ステップ」の内容を元に、StudioでCMSを使用する方法をシェアしたいと思います。直感的な操作でとても簡単に導入することができました。
1. 新規プロジェクトを作成する
「プロジェクト」は、作成するWebサイトそのもの、またはその制作・管理を行う単位です。一つのプロジェクトには、デザインデータ、ページ構成や設定、そして今回使用するCMSデータの要素が含まれます。基本的に「1つのWebサイト = 1つのプロジェクト」として作成・管理します。
プロジェクトを作成するには、まず「Studio」にログインし、「プロジェクトを作成する」画面から「空白からはじめる」を選択します。その後プロジェクト名を入力する画面に変わるので、入力後「作成」ボタンをクリックします。今回は「CMSテスト」というプロジェクト名を設定しました。
プロジェクト作成後、左上のメニューにある自分で設定したプロジェクト名（CMSテスト）からダッシュボードの「CMS」を選択します。
Studio CMSの画面に遷移するので、「CMSをはじめる」ボタンをクリックし、初期データの有無を選ぶという選択画面から、「空白からはじめる」を選択して、再度「CMSをはじめる」ボタンをクリックします。
2. 記事とカテゴリのモデルを追加する
「モデル」では、管理したいコンテンツの構造（データの型枠）を定義します。ブログサイトを作成する場合、「記事」のような繰り返し作成するコンテンツの種類ごとに、どのような情報項目（フィールド）を持たせるかを決める設計図のようなものです。
モデルを追加するには、左サイドのメニューバーから「モデル」のプラスボタンから「モデルを追加」を選択します。
新規モデルの作成画面から、モデルタイプは「記事タイプ」を選択します。このモデルは、ブログ記事やニュースの管理に最適なものとなっています。モデル名は「記事」などと入力し、「作成する」ボタンをクリックします。
同様の手順で、記事のカテゴリに使用する「カスタムタイプ」のモデルも作成します。
モデル作成完了後、記事モデルの管理画面のヘッダーメニューバーの右端にあるプラスボタンから、「プロパティを追加＞（モデルを参照）カテゴリ＞（設定）シングルセレクト」を選択して「追加」ボタンをクリックします。シングルセレクトとマルチセレクトは、記事にカテゴリーを一つのみ選択できるか、または複数選択可能かが異なります。複数選択したい場合はマルチセレクトを選択しましょう。
画像の赤枠のように、モデルに「記事」と「カテゴリ」、記事の項目に「カテゴリ」が追加されていれば、モデル追加の手順は完了です。
3. カテゴリのアイテムを追加する
モデルのカテゴリの管理画面から「新規追加」または「アイテムを追加」ボタンをクリックして、アイテムを追加します。アイテム名とSlugを入力しましょう。Slugとは、URLの一部として使用される短い識別子です。半角英数字、ハイフン(-)、アンダースコア(_)のみで構成されます。
アイテムはブログ記事の分類に必要なものを追加しましょう。今回は「お知らせ（news）」「インタビュー（interview）」「イベント（event）」をテストで追加しました。
4. 記事のアイテムを追加する
記事のモデルでも同様にアイテムを追加します。記事の場合はWordPressのようなブロックエディタを使って記事を作成することができます。タイトル、見出し、本文などを挿入できます。今回はカテゴリを設定するテストのため、右サイドのメニューバーにあるカテゴリプロパティに任意のカテゴリを設定しましょう。
今回は3つの記事アイテムを作成し、それぞれに「お知らせ（news）」「インタビュー（interview）」「イベント（event）」カテゴリを設定しました。次は、右上のメニューにある「デザインエディタ」を選択して、作成したコンテンツ（CMS）を表示するためのページを作成していきます。
5. 記事詳細ページ（動的ページ）を作成する
「4. 記事アイテムを追加する」で追加したアイテムを表示するための記事詳細ページを作成するには、まず、デザインエディタの左サイドメニューからページを追加します。
ページの種類の選択を求められるので、「動的ページ」を選択します。
動的ページで表示するモデルは「記事」を選択し、作成ボタンをクリックします。
すると、「CMS – 記事」というページが作成されます。画像の上の赤枠の箇所では、追加した記事アイテムをプルダウンで選択することで、選択した記事の表示を確認できます。
左サイドメニューの追加タブを選択することで、記事詳細ページに表示させる要素を追加します。今回は、テキストボックス、画像ボックス、リッチテキストボックス（部分的なスタイル変更ができるテキストボックス）の3つを選択しました。
テキストボックスは、CMSプロパティのカテゴリのタイトルと紐付けます。
画像ボックスは、カバー画像と紐付けます。
そして、リッチテキストボックスはコンテンツと紐付けます。追加した要素とCMSプロパティを紐付け、デザインを作成すれば記事詳細ページは完成です。今回はデザインの作成は行なっていません。
6. 記事一覧ページ（静的ページ）を作成する
記事一覧ページを作成するために、新規ページを追加します。
ページ設定から、ページタイトルとパスを設定します。タイトルは「記事一覧ページ」パスは「post」としました。
同様に、記事詳細ページのパスを「/post/:slug」に設定しました。動的ページのパスは、パスとスラッグで構成されます。公開サイトのURLでは、CMSアイテムに設定したスラッグが「:slug」部分に置き換わるようになっています。
パスを変更すると、自動で「post」ディレクトリが生成されます。
ページの設定が終わったら、記事一覧ページに用意されているリスト（カテゴリと記事）を追加します。
追加後は上の画像のようになり、カテゴリと記事の一覧が表示されていることが確認できます。
左サイドメニューのレイヤータブから、全体の記事の表示数を2件から3件に変更しました。デザインに合わせて変えてみましょう。
一覧表示されている記事は、記事詳細ページにリンクしましょう。紐付いているスラッグを見ると、記事の固有のIDになっていることが確認できます。
7. カテゴリ別一覧ページ（動的ページ）を作成する
最後に、カテゴリ別一覧ページを作成します。新規の動的ページを作成し、モデルは「カテゴリ」を選択しましょう。
パスは「/post/category/:slug」に変更しました。ここでの「:slug」はこちらでカテゴリのアイテムを追加するときに設定したスラッグになります。
パスを設定することで、上の画像のように「post」ディレクトリ配下に置かれます。
記事一覧ページを作成した時と同様に、リストを追加します。また、リストのフィルターを「カテゴリ」、フィルター条件を「ダイナミック」に設定します。ダイナミックフィルター（Dynamic）を選択すると、動的ページに配置したリストの表示アイテムが、動的ページのアイテムごとに切り替わるようになります。
最後に、記事一覧ページのカテゴリ部分を、各カテゴリのアイテムとリンクさせることで、カテゴリをクリックした時に、カテゴリ別一覧ページが表示されるようになります。
StudioでCMSを使用してブログサイトをつくる方法の基本的な解説は以上になります。WordPressを扱ったことがない人や、ノーコードでブログサイトを作りたい人にとっては、Studioはとても良い選択肢なのではないかと思います。また、WordPressに慣れている人でも、Studioを使ってみたらSttudioの方か直感的で扱いやすいと感じることがあるかもしれません。無料でお試しできるプランもあるので、ぜひ一度触ってみてはいかがでしょうか。
・プログラムとデザインについての記事一覧（→こちら）
