Nuxtプロジェクトにブログとお問合せ機能を付けるなら、WordPressよりも簡単な方法がある

サイト制作の困りごと

• サイトにブログやお問合せを追加したいけど、WordPressを導入するのはコストも手間もかかる。

• フォーム埋め込みサービスだと見た目を自由にカスタマイズできない。

Spearly CMSを使ったブログ機能とお問い合わせ機能の追加

導入が簡単でカスタマイズも自由にできる。全ての機能が無料で使えてドキュメントも豊富なので、それらを参考にブログとお問合せ機能をつけたサイトを作ってみる。

Spearly CMSを使用して作成したサイトがこちら

Spearly CMS側のコンテンツ管理画面

お問合せフォームの受信データ

導入概要・使用感

• @spearly/nuxt-moduleの導入は、ドキュメントに沿ってするだけですぐにできる。

• Spearly CMSをまだ触ったことがない方はそちらでの操作（コンテンツタイプの設定など）も必要なので、別ドキュメント推奨。

• サーバーが必要なく、コードがそこそこかければ自由に使いこなせる。

• 導入のステップをざっくりと

  1. Spearly CMSでコンテンツ作成

  2. Spearlyのインストールとセットアップ

  3. サイトに表示（タグ埋め込み）

つべこべ言わず使い方を教えてくれ！

という声が聞こえてきそうなので、ここから実際の導入手順を紹介していく。
前提として、今回使用するのはNuxtプロジェクト専用の@spearly/nuxt-moduleを使用する。
今回やることはこちら

• 既存サイトのブログ部分をSpearly CMSに置き換え

• お問い合わせ機能を追加

補足

• 既存サイトはNuxtのテンプレートを使用。

NuxtJs Tailwind Blog Starter

• @spearly/nuxt-module

@spearly/nuxt-module

１. Spearly CMSでコンテンツを作成

まずは埋め込みをする前に、CMSでコンテンツを作成する。
Spearly CMSにログインして、ブログとお問合せフォームのフィールドを作成していく。

• ブログのコンテンツタイプを作成する

  • 今回作成したフィールド

• フィールドの作成方法はこちらを参考に

  • 「Spearly CMSに登録しよう」から「実行許可ドメインを設定しよう」まででOK

• お問合せフォームを作成する

  • 今回作成したフォーム

２. Spearlyをサイトにインストール&セットアップ

@spearly/nuxt-moduleのREADMEに詳しくは記載されているのだけど、抜粋してご紹介。

Install

// npm
$ npm i -S @spearly/nuxt-module

// yarn
$ yarn add @spearly/nuxt-module

Setup

nuxt.config.(j|t)s

export default {
  ...
  buildModules: ['@spearly/nuxt-module'],
  spearly: {
    options: {
      apiKey: 'SPEARLY_API_KEY',
    },
    mode: 'all',
  },
}

TypeScriptを使用した場合は、以下も追加
tsconfig.json

{
  "compilerOptions": {
    ...
    "types": ["@spearly/nuxt-module"]
  },
  ...
}

３. サイトに表示する（タグ埋め込み）

サイトに表示するために、タグ埋め込みを行う。
ページ構成は以下

• pages

  • blog

    • _slug.vue

    • index.vue

  • index.vue

  • projects.vue

3.1 ブログ一覧の表示
ブログ一覧を表示しているページ（pages > blog > index.vue）に以下コードを配置

<template>
  <spearly-content-list id="CONTENT_TYPE_ID">
      <template v-slot="item">
        <nuxt-link :to="`/${item.content.attributes.publicUid}`">
          {{ item.content.values.title }}
        </nuxt-link>
      </template>
    </spearly-content-list>
</template>

<script>
export default {}
</script>

*CONTENT_TYPE_IDは、Spearly CMSのコンテンツタイプ一覧ページに表示されているIDに置き換える。
Spearly CMSで作成したタイトルが表示された。

あとは既存サイトの構成に従って、値を置き換えていく。
完成したのがこちら。

3.2 記事詳細ページを表示する
記事詳細ページ（pages > blog > _slug.vue ）に、以下タグを置いて、既存サイトの形に沿って渡す値を置き換えていく。

<spearly-content id="CONTENT_PUBLIC_UID">
  <template v-slot="content">
   ...
   // 既存のコードの値を `content.values`から始まる値に置き換える
   ...
  </template>
</spearly-content>

*CONTENT_PUBLIC_UIDは、Spearly CMSのコンテンツ一覧ページに表示されているエイリアスに置き換える。
完成！

3.3 お問合せフォームを追加する
お問合せを追加したい場所（今回は pages > index.vue）に、以下のコンポーネントを配置した。
*FORM_IDはSpearly CMSのフォーム一覧画面に表示される埋め込み用フォームID

<spearly-form id="FORM_ID" />

Spearly CMSで作成したフォームが表示された。必須項目の入力チェック、 受付期間外制御、入力内容確認画面表示などはデフォルトで設定されている。スタイルは持っていないので、デフォルトなスタイルを気にすることなく自分で簡単に当てることができる。

カスタマイズするために、こちらのコードを使用する。
カスタマイズの方法はanswersオブジェクトにフィールドIDと空の値を格納するだけ。

<template>
  <spearly-form id="FORM_ID">
    <template v-slot="form"> // フォームのデータを受け取ることができます
      <fieldset v-for="field in form.fields" :key="field.identifier">
        <label :for="field.identifier">
          {{ field.name }}
          <i v-if="field.required">*</i>
        </label>

        <input
          :id="field.identifier"
          v-model="answers[field.identifier]"
          :required="field.required"
          type="text"
        />
      </fieldset>
      ...
      <input v-model="answers._spearly_gotcha" type="text" style="position: absolute; width: 1px; height: 1px; overflow: hidden;" />
      <button @click="form.submit(answers)">Submit</button> // フォームの送信は form.submit を呼び出すことで実行できます
    </template>
  </spearly-form>
</template>

<script>
export default {
  data() {
    return {
      answers: {
        YOUR_FORM_FIELD_ID: '', 
        ...,
        _spearly_gotcha: '',
      }
    }
  }
}
</script>

完成したフォームがこちら。

おまけ1：受信データを見てみる。
受信データはSpearly CMS > フォーム一覧 > 受信データに届いていた。

おまけ2：オプション設定について
いくつかの便利なオプション機能も無料で使用できたので、紹介する。

• メール通知機能：新しい回答を受信した際に、通知を送信するメードアドレスを複数設定できる。

• フォーム受付期間：フォームの受付開始日時や終了日時、またはその両方を設定できる。

• フォーム送信後設定：フォーム送信後のメッセージや、リダイレクトURLを設定できる。

• Webhook設定：新しい回答が送信された際に、Webhook URLに設定されたURLにPOST通信を行う。外部サービスやSNSなどとの連携に活用できる。

感想

• コンポーネントを使うだけでAPI呼び出しも何も書かずにできるから、すごい簡単になった感じ。

• スタイリングもカスタマイズも自由にできて、ドキュメントも豊富。

• フォームは解答を受信するだけでなく、メール通知やWebhook設定など便利な機能も揃っている。

• CMS側でプレビューが見れたりと、今回紹介できていない便利な機能もいくつかあったので、ぜひ公式ドキュメントを読んで使ってみてほしい。

• 今回、Nuxtプロジェクトへの導入専用の@spearly/nuxt-moduleを使用した。もちろんNuxt以外への導入もできるので、公式サイトでチェック。

関連サイト

• @spearly/nuxrt-module

• Spearly CMS

Spearly CMS | 埋込タグで簡単に導入できるヘッドレスCMS

• Spearly利用に役立つドキュメントサイト

Spearly 公式ドキュメント

• Spearlyの新機能をお届け

Spearly News