【導入事例あり】国産ヘッドレスCMS・Newtを徹底紹介
こんにちは。Webディレクターの安藤です。
ここ数年でプロジェクトの一部でヘッドレスCMSが絡むことや、APIベースでのシステム開発といったご要望が当たり前になってきました。ご依頼いただくプロジェクトだけではなく、社内でもグループ会社のコーポレートサイトで利用していたWordPressをヘッドレス化して高速化したりと、ヘッドレスCMSはより身近なものになってきています。
本日はこうした背景をふまえて、国産クラウド型ヘッドレスCMSである「Newt」について実際にさわりながら解説をしていきますのでぜひご覧ください。していきます。
WordPressはヘッドレスCMSの導入がおすすめ。セキュリティ対策や高速化に効果があります。
「あなたにピッタリのヘッドレスCMS選定ガイド」でヘッドレスCMSの特徴と自社に合うかどうかの診断をすることができるのでぜひダウンロードしてご覧ください。
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
1.ヘッドレスCMSとは
WordPressに代表されるような従来のCMSは、ウェブサイトビュー、テンプレートのフロントエンド、コンテンツデータのバックエンドのシステムといった複数の機能が一つに統合されています。
ヘッドレスCMSの「ヘッド」とは表示部分のこと。ヘッドレスCMSはバックエンドのシステムのみで、コンテンツを「表示する画面」がありません。フロントとバックエンドが完全に分離しているのが大きな特徴です。
Newtとは
2022年3月にリリースした、日本製のクラウド型(Saas型)ヘッドレスCMSのSaaS（Software as a Service）です。
日本製ヘッドレスCMSのSaaSといえば、MicroCMSが最大手ですが、コンテンツ数、API数、メンバー数が、無料プランでも無制限なのがNewtの優位なところです。
NewtのWebサイトには、「Creating the Next WordPress」というコンセプトとともに、まさに次のWordPressになるべく、従来のヘッドレスCMSの弱点だった「開発者を必要とする」技術であるという前提を覆すため、ノーコードでもヘッドレスCMSのコンテンツ管理をはじめられます。
Newtには、「スペース」、「App」の概念があり、スペースの中に複数のAppをつくることができます。
「スペース」とは、WordPressでいうところの「サイト」のような単位です。
「App」は、WordPressでいうところの「カスタム投稿タイプ」のような単位です。
また「スターター」（デフォルトのWPテーマのようなもの）を使えば、GitHubや静的サイトホスティングサービスと連携して、すぐにサイトを持つことが可能です。
シンプルで直感的。LPや小規模なサイトでCMSを導入したい方々クライアントには非常に利用提案しやすいCMSとなっています。
現時点では大規模サイトへの適用には向かないと思いますが、これからもっと機能は充実はしていきそうです。
参考
- https://zenn.dev/ryo555/articles/6fc9ad830c7679
- https://www.newt.so/showcases
- https://zenn.dev/s7/scraps/61ce0db20b99ec
「Newt」をさわってみよう
「Newt」には無料プランがあります。
早速登録してさわってみましょう。
Newtへ登録／ログインする
まずは好きなメールアドレスでアカウント登録をしましょう。
スペースの作成
「新規スペース作成」を押して、スペースの作成をします。
スペース名とスペースUIDを入力して、「スペース作成」をクリックします。
スペースが作成されたら、「最初のAppを追加しましょう」という画面に切り替わります。
Appはコンテンツ管理のユニット構成です。
画面中央付近の青いボタンか左上の「Appを追加」より追加することができます。
無料でヘッドレスなブログを公開してみる
「Newt」には無料のスターターが用意されており、簡単にブログを公開することができます。
必要なものは以下の3つのサービスのアカウントです。
1. Newt：CMS及びバックエンドサーバー
2. GitHubやBituccket：フロントエンドのテンプレート
3. Vercel：フロントエンドサーバー（ブログのホスティング）
Vercelは、個人的かつ非営利な目的でのみ無料アカウントを適用できます。
営利が発生する場合は有償プランを用意しましょう。
また、Vercelのアカウントは、連携するGitHubやBitbuckeアカウントでの登録・ログインがおすすめです。
Appの追加
今回はより簡単に実装できる「テンプレートから追加」を選択します。
今回はBlogを選びます。
モーダルウィンドウの最下部に、Githubのソースコードのリンクがあります。
クリックしてタブを開いておきましょう。
上部に戻って「このテンプレートを追加」をクリックします。
App追加後はこのような画面に変化します。
これでNewtをブログのCMSとして使用することができます！カンタンですね！
右の「投稿を追加」ボタンから、記事の投稿ができます。
次は、Newt＋GitHub＋Vercelを連携します。
Newtのスターターを自分のGitHubにクローンする
先程開いておいたNext.jsのスターターのリポジトリ画面に移ります。
任意の方法で、自分のGitHubリポジトリにクローンします。
エディタでスターターテンプレートを開く
クローンしたら、.env.local.exampleを.env.localにリネームして開き、環境変数を設定します。
私はローカルにダウンロードして、VS Codeエディタで編集しています。
ローカル環境の環境変数を設定する
ここでいう環境変数は、フロントエンドサーバーであるVercel、GitHub、Newtを連携するために必要な認証キーのようなものです。
編集するのは以下の3項目です。
NEXT_PUBLIC_NEWT_SPACE_UID=スペースUID
NEXT_PUBLIC_NEWT_APP_UID=blog→自分のApp UIDに変更
NEXT_PUBLIC_NEWT_API_TOKEN=CDN APIトークン次はNewtの管理画面で、対応するキーを取得します。
スペースUID / AppUID / CDN APIトークンを取得する
スペースUIDは、メイン画面に表示がされています。
AppUIDは左カラムの「Blog」 > 「App設定」と進みます。
API_TOKENは、メイン画面に一度戻り、「スペース設定」から取得します。
上の「Newt CDN API Token」の青いボタン「作成」を押します。
好きな名前を入力して、右下の「作成」ボタンクリック
コピーして完了です。
取得したスペースUID、AppUID、CDN API Tokenを.env.localファイルに記述し、Gitのリポジトリにソースコードをアップします。
Vercelにデプロイ
Vercelは、とても簡単にセットアップができる、シンプルなクラウドホスティングサービスです。
静的サイトやSPAのホスティングももちろんできますが、サーバーレス関数やWebアプリを無料で簡単にホスティングでき、デモサーバー代わりに使われていることもあります。
連携するGitHubやBitBucketのアカウントでサインインしたら、早速リポジトリを連携しましょう。
「Add New」から「Project」を選択します。
文字列検索でリポジトリを検索し、「Import」をクリックします。
任意のプロジェクト名を入力し、「Framework Preset」は「Next.js」を選択します。
「Environment Variables」をクリックして展開し、先程.env.localで記述した中身をコピー＆ペーストしましょう。
最後に「Deploy」をクリックします。
Deployが完了したら、もう公開完了です！
初期ドメインは、https://プロジェクト名.vercel.app/ となります。
記事に変更を加えたら自動デプロイする設定
このままだと、都度手動でデプロイをしないと、いくらNewtで記事を更新したところでフロントエンドには反映されません。そのため、記事を更新したらそれがフックになってVercelに自動デプロイする設定をする必要があります。
①settings → ②Git → ③Deploy Hooksで入力画面を開きます。
Create Hookで「任意のhooksの名前」と「Gitのブランチ名」（通常はmainかmaster）を入力し、「Create Hook」ボタンを押します。
フックが作られるので、「Copy」ボタンからコピーします。
Newtの管理画面に戻り、「スペース設定」＞「Webhook」＞「テンプレートから作成」をクリックします。
Vercelのフック入力画面があるので、コピーしたwebhookを貼り付けて、「Webhook作成」をクリックします。
これで記事を更新したら、自動デプロイされるようになりました！
実案件の導入事例
弊社では上記の手順をふまえ、LPのコンテンツ管理としてNewtを導入してみました。
Newtはフリープラン、VercelはProプランを利用しています。
導入した所感
カスタムフィールドを多用したサイトも構築できる
旧来のWordPressではAdvanced Custom Fieldsなどのプラグインを使い、カスタムフィールドを組み合わせて複雑なレイアウトを実現するということがされてきました。
そのような管理画面に慣れているユーザーからすると、新しいCMSに乗り換える際、「複数のカスタムフィールドを組み合わせた繰り返しフィールドを実現できるか」が大きな懸念点の一つだと思います。
Newtで試したところ、それは問題なくできました。
ただし記事を紐付けるフィールドはない
例えばWordPressであれば、関連フィールドでサイト内の記事を手動選択し、記事のピックアップ表示が簡単にできます。
しかしNewtの場合、2023年10月時点では、そういったフィールドはありません。
タイトル、画像、URLのフィールドを組み合わせた繰り返しフィールドを実装してすべて手入力にするか、ロジックを組んで自動表示という仕様に変更する必要があります。
HTML入力を許可するテキストフィールドに注意が必要
NewtではHTML入力ができるテキストフィールドとして、プレーンテキストとMarkdownが用意されています。
Rich TextフィールドではHTMLの変換ができず文字として出力されるため、その点に注意が必要です。
無料プランでも小規模サイトなら十分
無料プランではモデル上限数が10個までとなっています。モデルは、WordPressに置き換えるとコンテンツタイプのようなものです。
1モデルの中で使用するフィールドの数には上限は特にありません。
また、無料プランでは月間最大100万リクエストと100GBのデータ転送という上限があります。
月間2~3万PV以上のサイトなら一つ上のSmall（3,980円/ 月）が適していますが、それに満たない小規模なサイトであれば、無料プランでも十分なスペックだと思います。
まとめ
今回は、ヘッドレスCMSのNewtについて、実際の導入事例を交えながら紹介させていただきました。
「Creating the Next WordPress」というコンセプト通り、コンテンツ管理の概念やUIもWordPressに似ており、エンジニア・運用者どちらにもわかりやすく導入しやすい、優れたヘッドレスCMSという印象を受けました。
またGitHub、Vercelと組み合わせれば、ヘッドレスCMSで一番ややこしいサーバー周りに頭を悩ませることなく、簡単に環境を用意することができます。
もし、ヘッドレスCMSでのWeb開発や移管をご検討の際は、お気軽にご相談ください。
ラボ型開発やビジネスに関する豊富な資料も用意しています。
ヘッドレスCMSの選定にお悩みの方へ。
自社に必要なヘッドレスCMSがわかる下記資料もぜひご確認ください。
独自選定の代表的なヘッドレスCMSの特徴をもとに、誰でもヘッドレスCMSの選定ができるポイントを押さえた資料を作成しました。
学生時代にWebサイトを自作したことがきっかけでWebの世界に。制作会社でデザイン、WordPressテーマ開発の実務を経て、テクニカル・ディレクターとして大規模サイト構築のディレクションを経験。2021年からWakka Inc.の日本拠点でWebディレクターとして参画。最近はブロックエディタになったWordPressをもう一度、勉強しています。
