私はVue.jsでサイト制作をして4年目くらいになります。 求人/口コミ/管理画面など基本的にはVue.jsかNuxt.jsで開発しており、中でもブログ系もVueに置換えたいなーと何度か思ったことがありました。 実際実装しようとするとフロントはすぐに作れます。問題は記事を投稿する部分を開発するのが面倒になり代替手段としてWordpressの記事投稿機能を再利用し、結果WordpressAPIを利用して実装していたこともあります。

ただ記事投稿の機能を利用するためだけにWordpressってオーバースペックだしセキュリティ的に怖いのと重たいんですよね。そんな感じでしばらく運用しているとHeadressCMSというものを見つけたので今回紹介させてもらいます。

HeadressCMS

CMSとは

Wordpressのようにブログなどを管理できるシステムをCMS(Content Manegement System)といいます。CMSはコンテンツ、ファイル、構成などを管理公開するシステムです。Wordpressのようにコーポレートサイトやブログ運営、その他にも文書管理システムなどにも応用されていたりする幅広いサービスです。年々進化しWordpressを導入していれば技術者いなくともSEO対策〜サイト運用までなんでも完結するくらい機能がつまっています。

HeadressCMSとは

HeadressCMSは従来のCMSと何が違うか？
それはコンテンツを管理するバックエンドの機能のみを持ち、WEBサイトのUI/デザインなどの機能は一切持ちません。コンテンツを管理する機能のみを持つことで軽量な動作と柔軟なサービス提供が可能になります。

HeadressCMSの良いところ

CMS側でデザイン定義をしないということは、記事とデザインの独立性が非常に高くすることができます。たとえばプラットフォームの自由度もそうです、記事をAPI化することでWEBサイトだけでなくアプリとしての運用も安易になるでしょう。

記事以外のコンテンツ、例えば「企業概要」「お問い合わせ」のようなページを制作する場合などWordpressでは固定ページとして管理する必要がありましたが、HeadressCMSでは必要であれば利用すればいいし不要ならVue側で実装するなど幅広い対応が可能となります。

データ構造を自分で定義できるのもメリットの１つかもしれません。
Wordpressでは記事を投稿する際のレイアウトなど全て決まってる状態からスタートしますがHeadressCMSでは初めから用意されていません。全て自分で構造定義から始めることができるので不要なものを持つ必要がないです。 そのためレスポンス速度が圧倒的に早くサクサク動きます。

自分にあってる

結論から言うとWEBサービスをゼロイチで制作することができてWordpress使う方が工数もかかるってタイプの人にはHeadressCMSの方が絶対あってます。

• EC/求人サイトなどサービスを運用している中に記事コンテンツを増やしたい
• 記事を運用するサービスを現状のフレームワークなどに取り入れたい
• フロントはVue.jsなどのSPAで作る方が簡単だからそっちにしたい
• アプリで記事を提供したい
• コーポレートサイトを受注して一部項目を更新したいって要望に答えるための新しい手段

などなどいくらでも理由はつけれますが私には合ってるので今後メインで利用しようと意思決定しました。

strapi

Headless CMSを調べているとstrapiが良さげ、今回はsttrapiをつかって安易なブログ記事を投稿するサンプルを交えて紹介していきたいと思います。

目指してる構成

• フロントNuxt.js
• コンテンツ管理 +API strapi

必要要件

ソフトウェア	最低バージョン
Node.js	12.x
npm	6.x

yarn環境も必須になるのでインストールが済んで無いかたはこちらから

インストール

公式チュートリアルに基づいてインストールを始めます。

npm install strapi@alpha -g

まず始めるためにクイックスタートが用意されています。

yarn create strapi-app my-project --quickstart

yarn develop

次の画面がでればインストール完了です。

管理者権限のユーザーをまず作成する必要があるのでこのまま入力を進めていき完了するとダッシュボードが表示されるようになります。

現状はまず空の状態です。 ブログ記事を投稿するためにはまずContent-TypesBuilderでコンテンツタイプを定義しなければいけません。

はじめにコンテンツタイプを定義します。 タイトルと本文を入力する欄を作ります。

CPLLECTION TYPESに作ったblogsが追加されました。

そのまま記事投稿を行ってみましょう。

記事投稿ができたら次にAPIの公開を行います。 public権限に先ほど作ったblogsを追加していきます。

APIは読み取りのみ一般公開したいのでfind count findoneにチェックを入れます。

これでhttp://localhost:1337/blogsにアクセスした時に先ほど作ったコンテンツにアクセスできるようになりました。

[{"id":1,"title":"ブログタイトル","content":"# markdown\nでかけます","created_at":"2020-06-06T18:42:49.864Z","updated_at":"2020-06-06T18:42:49.864Z"}]

このようにすることであとは自分の作りたいコンテンツに合わせてカスタマイズができますね。あとはサービスに合わせて作りこんでいきましょう。