View more

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

Blog

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

今回紹介するヘッドレスCMS「Newt」は、従来型のWordpressとは、構造とコンテンツ管理から違ってきます。では、Wordpressより何が優れているのか。どんな機能が付いているのか。など気になったポイントを紹介していきますので、CMS検討を考えている方に参考になれば幸いです。
話題のヘッドレスCMSのNewtとは?WordPressから移行を考えたメリットもご紹介!

なぜNewtなのか

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

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

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

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

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には標準でこの機能がついており、その自由度は、エンジニア、また投稿する運用目線でも、とても嬉しい仕様となっています。

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

  概要
複数値 有効化時に、複数のタイプを入力できるようになります
必須フィールド 有効化時に、入力がない場合はコンテンツの公開(保存して公開)ができなくなります
最大アイテム数(複数値が有効時) 設定したアイテム数を超えた場合に、コンテンツの公開(保存して公開)ができなくなります
最小アイテム数(複数値が有効時) 設定したアイテム数未満の場合に、コンテンツの公開(保存して公開)ができなくなります
  •  

お問い合わせフォーム「Form App」

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

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

 

※Form Appの機能一覧

機能 説明
受信トレイ エンドユーザーから収集したデータを一覧表示
ファイルアップロード 画像ファイルなどのバイナリデータをPOST、ストレージにアップロード
スパム対策 Google reCAPTCHA v3によるBotや攻撃、不正アクセスの検知
受信通知メール 新着メール受信時に、任意のメールアドレス宛に通知を送信
自動返信メール フォームに投稿したユーザーに対して自動応答メールを送信
独自ドメイン設定 独自ドメインのメールアドレスから各種メールを送信
カスタムリダイレクト フォームをPOST後、任意のページにリダイレクト
CSVダウンロード 収集したデータをCSVファイルでダウンロード
Appロール(権限管理) フォームやメッセージに対する操作権限を設定
Webhook 新着メッセージの受信をトリガーにWebhookを送信
Zapier連携 Google SheetsやSlack, MailChimp, Airtableなど5,000以上のサービスと連携

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

Newtと連携方法

今回は、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から見たNewtを使うメリット

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

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

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

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

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

まとめ

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

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

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

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

 

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

 

 

Webマーケティング、Web制作に関することなら
お気軽にご相談ください