ノーコードツール「STUDIO」を使ってみた②CMS編

2020年12月17日 16:29

前回の記事に続き、ノーコードツール「STUDIO」でのサイト実装を検証してみました。今回はCMSにフォーカスしたいと思います。

■前回記事

ダッシュボード

ゼロベースでの作成は構造を把握するのに時間がかかりそうなので、基本的な設計が備わっているテンプレート「CMS Basic」をベースに作っていきます。まずはサイトの基本情報となるDashboradから。

プロジェクト名や公開時のドメインを設定するのは一般サイトと同じ流れです。が、今回肝になるのはメニュー上の「CMS」の項目。
ここで記事やカスタムカテゴリーなどの編集を行うことができます。

CMSのホーム画面。
WordPressなど他のCMSを使ったことがある方であれば感覚がつかみやすいかと思います。投稿する記事をベースにそれぞれ下記のパラメータが追加・設定できるようになっています。

■モデル
各記事に準ずる属性や記事タイプを設定する位置づけ。デフォルトでは「Posts」「Writers」「Tags」が用意されています。

■コレクション
新着記事やおすすめなど、記事を特定のグループに分ける位置づけ。WordPressでいうm「投稿タイプ」に近い概念だと思います。
デフォルトでは「Featured」が用意されています。

記事の編集画面。
記事テキストや画像の挿入を左側で、ダッシュボードで定義した記事のメタ情報を右側で設定する構成になっています。
これもWordPressの現デフォルトエディタ「Gutenberg」に操作感が近いので、非エンジニアの方も直感的に触れるのではと思います。

次にエディタ画面を見てみましょう。

今回選択したテンプレートはアーカイブ画面がすでにできているので、基本的には各モデルの詳細ページを定義していく形になります。
画面右上のメニュー「新規ページ」から「動的ページ（CMS）」を選ぶとCMSのダッシュボードで設定したモデルから選択できるようになります。

また各部品の選択も右側メニューの「CMS」から選択することで、ダッシュボードで編集した記事などの情報が自動で反映されるようになります。

デフォルトではwriterのページがなかったので新規で作ってみました。
こちらもダッシュボードで定義していればシンプルに導入が可能です。

例えばライターの写真だと左メニューのパーツ選択から「basic > image」をドラッグし、右メニューのメタ情報編集部分で画像の下部ボックスより表示プロパティ（画像の場合は「Avatar」）が選択できるので、プレビューで見たときも簡単にイメージが掴めました。

一般サイトよりも構造が複雑なCMSを試してみました。
もちろん最初はどんなものでも慣れが必要ですが、無料プランでも各画面の操作をトライアンドエラーでやっていくうちに身についていく感触は実感できたので、一部のみCMSなどより複雑な構成のサイト作成もできるようになるんじゃないかと思いました。

今後も随時機能を追加予定とのことなので、引き続き動向を待ちつつ試してみようと思います。

※細部のTipsなどは公式Youtubeも合わせて参考にしてみてください。