私はVue.jsでサイト制作をして4年目くらいになります。 求人/口コミ/管理画面など基本的にはVue.jsかNuxt.jsで開発しており、中でもブログ系もVueに置換えたいなーと何度か思ったことがありました。 実際実装しようとするとフロントはすぐに作れます。問題は記事を投稿する部分を開発するのが面倒になり代替手段としてWordpressの記事投稿機能を再利用し、結果WordpressAPIを利用して実装していたこともあります。
ただ記事投稿の機能を利用するためだけにWordpressってオーバースペックだしセキュリティ的に怖いのと重たいんですよね。そんな感じでしばらく運用しているとHeadressCMS
というものを見つけたので今回紹介させてもらいます。
Wordpressのようにブログなどを管理できるシステムをCMS(Content Manegement System)といいます。CMSはコンテンツ、ファイル、構成などを管理公開するシステムです。Wordpressのようにコーポレートサイトやブログ運営、その他にも文書管理システムなどにも応用されていたりする幅広いサービスです。年々進化しWordpressを導入していれば技術者いなくともSEO対策〜サイト運用までなんでも完結するくらい機能がつまっています。
HeadressCMSは従来のCMSと何が違うか?
それはコンテンツを管理するバックエンドの機能のみを持ち、WEBサイトのUI/デザインなどの機能は一切持ちません。コンテンツを管理する機能のみを持つことで軽量な動作と柔軟なサービス提供が可能になります。
CMS側でデザイン定義をしないということは、記事とデザインの独立性が非常に高くすることができます。たとえばプラットフォームの自由度もそうです、記事をAPI化することでWEBサイトだけでなくアプリとしての運用も安易になるでしょう。
記事以外のコンテンツ、例えば「企業概要」「お問い合わせ」のようなページを制作する場合などWordpressでは固定ページとして管理する必要がありましたが、HeadressCMSでは必要であれば利用すればいいし不要ならVue側で実装するなど幅広い対応が可能となります。
データ構造を自分で定義できるのもメリットの1つかもしれません。
Wordpressでは記事を投稿する際のレイアウトなど全て決まってる状態からスタートしますがHeadressCMS
では初めから用意されていません。全て自分で構造定義から始めることができるので不要なものを持つ必要がないです。
そのためレスポンス速度が圧倒的に早くサクサク動きます。
結論から言うとWEBサービスをゼロイチで制作することができてWordpress使う方が工数もかかるってタイプの人にはHeadressCMSの方が絶対あってます。
などなどいくらでも理由はつけれますが私には合ってるので今後メインで利用しようと意思決定しました。
Headless CMSを調べているとstrapiが良さげ、今回はsttrapiをつかって安易なブログ記事を投稿するサンプルを交えて紹介していきたいと思います。
ソフトウェア | 最低バージョン |
---|---|
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"}]
このようにすることであとは自分の作りたいコンテンツに合わせてカスタマイズができますね。あとはサービスに合わせて作りこんでいきましょう。