話題のヘッドレスCMSのNewtとは？WordPressから移行を考えたメリットもご紹介！

ヘッドレスCMSには、現在国産だと「microCMS」「Kuroco」、海外製だと「Contentful」など、すでに多くのヘッドレスCMSがあります。

今回「Newt」を紹介する理由としては、現在シェア率の非常に高いCMSであるWordPressからの変更を検討した際に、標準で欲しい機能が備わっていた点が挙げられます。

複数人でサイト運営をする際、記事コンテンツの統一性を保つ手段としてカスタムフィールドや、関連度の高いコンテンツをAppという単位でグループ化できる機能など、WordPressではプラグインを使って実現していたことが、Newtではすでに標準搭載されています。

また、非常に管理画面のUIも細部にまで配慮されており、コンテンツの性質に合わせて管理ビューをカスタマイズ（4種類のビューから選択）できるなど、従来のCMSにはない機能もNewtの特徴です。

テンプレートの種類(Appテンプレート)

設定できるテンプレートは、現在6つ用意されています。Newtでは、これをAppという表現になっています。

このAppは、「コンテンツ管理のユニット」とされており、このAppごとに、投稿できるユーザー権限を振り分けたり、フィールドの設定を自由に設定することができます。

Appの一つであるBlogの中では、追加するとすでに、タグ別、投稿者別 など、想定されるカテゴリー(モデル)も用意されており、このコンテンツを自由にサイトに合う形に、変更・追加することが可能です。

柔軟な投稿画面のカスタマイズ

投稿者一覧など、記事以外の一覧を出したい場合、Wordpressでは少し難易度が高いカスタムフィールドの追加についても、豊富なフィールドの中から選択することで、投稿者の情報(プロフィール画像や地域)を増やしたいなどの要望も、スムーズに行えます。

Newtには、下記のフィールドが選択が可能です。

1. テキスト
2. リッチテキスト
3. マークダウン
4. 数字
5. 日付
6. 画像
7. ファイル
8. 選択
9. チェックボックス
10. カラー
11. 絵文字
12. 地図
13. 参照
14. 埋め込み
15. マルチタイプ

そして、より柔軟な投稿や表示にするために、独自のフィールドの組み合わせを作ることができます。

例として、よく見かける画像とリンクが付いたスライダーを組み込みたい場合です。

この際には、URL(テキストフィールド)と画像フィールドの組み合わせ、そして、そのフィールドのグループを投稿によって、設定する数も可変に対応させるという必要が出てきます。

Newtでは、その組み合わせは勿論、オプションの設定で、繰り返し(数量の可変)にも、しっかりと対応させることができます。

これは、Wordpressだと追加プラグインが必要になりますが、Newtには標準でこの機能がついており、その自由度は、エンジニア、また投稿する運用目線でも、とても嬉しい仕様となっています。

※カスタムフィールドで使えるオプション

コーポレートサイトで、一番導入頻度が多いお問い合わせフォームについても、Newt ではフォーム「Form App」がテンプレートに含まれています。

Form Appは、フォームを実装するために必要不可欠なバックエンド機能と、利用するためのエンドポイント（URL）が提供されており、簡単に導入することができます。

※Form Appの機能一覧

自動返信内容も簡単に管理画面から設定も可能なことや、完了画面への遷移もカスタムリダイレクトを有効にすることで、フォーム送信後のエンドユーザーを任意のページにリダイレクトできます。

今回は、NewtとNext.jsを利用して、コードをお見せしつつトークンの取得から記事表示までの方法をご紹介します。

1.Newt CDN API Tokenを作成する

APIリクエストに必要なトークンを発行します。
スペース設定 > APIキー のページから「Newt CDN API Token」を作成します。

2.開発環境での環境変数の設定

この変数の設定では、SPACE_UID(スペース UID)が必要になってきます。
管理画面のスペース設定 > 一般より確認して、.env.localファイルに下記のように記述します。

.env.localファイル

  NEWT_SPACE_UID=sample-blog
  NEWT_CDN_API_TOKEN=xxxxxxxxxxxxxxx

他にnewtでは、下記が必要になってきますので、控えておきましょう。

• App UID
• モデル UID

「Blog」テンプレートを追加した場合、App UIDは blog、「投稿データ」モデルUIDは article となります。

3.APIクライアントの作成

先ほど、.envファイルに設定した値と、CDN APIを利用するので、apiType には cdnを指定します。

newt.tsファイル

import { createClient } from 'newt-client-js'
const client = createClient({
   spaceUid: process.env.NEWT_SPACE_UID + '',
   token: process.env.NEWT_CDN_API_TOKEN + '',
   apiType: 'cdn',
})

4.一覧ページの作成

/lib/newt.ts

import 'server-only'
import { createClient } from 'newt-client-js'
import { cache } from 'react'
import type { Post } from '@/types/post'

 const client = createClient({ 
         spaceUid: process.env.NEWT_SPACE_UID + '', 
          token: process.env.NEWT_CDN_API_TOKEN + '', 
          apiType: 'cdn', 
}) 
export const getArticles = cache(async () => { 
     const { items } = await client.getContents<Post>({ 
           appUid: 'blog',　//App UIDを設定 
            modelUid: 'article',　//モデル UIDを設定 
            query: { select: ['_id', 'title', 'slug', 'body', 'coverImage', 'author'], }, 
       }) 
return items 
}) 

app/page.ts

import Link from 'next/link' 
import { getArticles } from '@/lib/newt'

export default async function Home() {  
       const articles = await getArticles()
       return (
           <main>
                 <ul> {articles.map((article) => { return ( 
                        <li key={article._id}>
                            <Link href={`articles/${article.slug}`}> 
                                   {article.title} 
                                   {article.author}
                                   <img src="{article.coverImage.src}">
                             </Link>
                        </li> 
                        ) 
                       })} 
                  </ul>
            </main> 
         ) 
}

フォームの連携方法はこちらで詳しく掲載されています。

https://www.newt.so/docs/tutorials/contact-form-in-nextjs

WordPressは各レンタルサーバーにはすでに簡単インストールが搭載されており、素早くWebサイトを立ち上げることができるといったメリットがある反面、多くのデメリットも抱えています。

• プラグインなどの定期的なアップデートの保守コスト
• スパム攻撃や、セキュリティ面での不安

便利で多機能なプラグインですが、たびたびプラグインの脆弱性を狙ったサイトの被害も多く報告されています。サイトのセキュリティ向上のためには、プラグインを最新の状態に保つことは推奨されていますが、やはりその度に、保守コストはかかり、またアップデートによりサイトの表示崩れによる修正コストもかかってきます。

Newtでは、Wordpressで実現していた投稿の仕様、お問い合わせフォーム設置など、今回紹介した内容で見ていただいた通り、十分な機能が備わっており、格段に保守コストへの不安も無くなってくると思っています。

またヘッドレスという手段を取ることで、攻撃されるリスクの軽減、表示速度の改善など、多くのメリットも期待できます。

今回Newtについて紹介してきました。

Newtは、今までWordpressを採用していた企業のサイト運用者の方にも、馴染みやすく他に比べて多機能なヘッドレスCMSの一つだと思っています。

セキュリティ面など余計な不安を考えずに、より良いコンテンツを作ることに注力できることが非常に大切であり、CMS選定は慎重に行うべきだと思っています。

その選定の検討材料に今回の記事が参考になれば幸いです。

株式会社デパートでは、ご要望やお悩みに応じたCMSのご提案から構築までワンストップで行っております。ぜひご相談ください。