株式会社キャッチアップで働くエンジニアのブログです。

技術雑記

【baserCMS】baserCMS5のREST APIとViteで簡単な静的サイトを構築

Twitter bookmark Facebook LINE Pocket Feedly RSS

baserCMS5 × Vite × 11tyでAPIデータの取得とHTML生成する

baserCMS5からREST APIが標準で使えるようになりましたのでヘッドレスCMSとしてbaserCMS5を使い、HTMLコンテンツを生成する手順を紹介します。

 

各ツールの役割

baserCMS5:ヘッドレスCMSとしてREST APIを提供。今回はブログ記事をAPI経由で取得してみます。

11ty(Eleventy):ヘッドレスCMSのAPIからコンテンツを取得できる静的サイトジェネレーターでHTMLを出力します。

Vite:11tyだけではCSSとJSのビルドはできないので、そこを補うために11tyと組み合わせて使います。

ちなみに「Vite 読み方」で検索すると、

Vite(ヴィート)は、2020年に1.0.0-rc.1がリリースされた、比較的新しいフロントエンドのビルドツールです。

だそうです。

ふるえるぞハート!燃えつきるほどヒート!!刻むぞ血液のヴィート!

Viteプロジェクトの作成

Viteの公式ガイド を参考にまずはプロジェクトを作成します。

npm create vite@latest

上記を実行すると色々質問されるので、下記のようにしました。

✔ Project name: … vite-test
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

vite-testディレクトリが作成され、package.jsonなどいろいろなファイルが生成されました。

プロジェクトのルートに移動して実行しろとのことでしたので、早速動作を確認します。

cd vite-test
npm install
npm run dev

色々モジュールがインストールされた後、下記のようになります。

  VITE v5.0.5  ready in 221 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

早速、ブラウザで http://localhost:5173/ にアクセスしてみるけど、アクセスできない、、、あれ?

一旦CTRL+Cで止めて

npm run dev -- --host

とすると良いそうです。(参考 https://qiita.com/ginger-yell/items/602091d7010f77fbb47a

改めて、ブラウザで http://localhost:5173/ にアクセスするとOKでした!

Viteで11tyを利用するためのプラグインを導入

HTMLテンプレートを使ってAPIでブログ記事データを取得したいので、Viteで11tyを扱うためのプラグイン vite-plugin-eleventy をインストールします。

npm install --save-dev vite-plugin-eleventy

https://ja.vitejs.dev/guide/using-plugins.html を参考にして vite.config.jsを作成します。

See the Pen vite.config.js by kaburk (@kaburk-the-reactor) on CodePen.

必要なnodeライブラリをインストール

必要なライブラリをインストールします。

npm install --save-dev sass dotenv node-fetch@2

各種ファイルを準備

挙動の確認ができたので使わないサンプルファイルは紛らわしいので削除しておきます。

rm -r public index.html style.css main.js counter.js javascript.svg

 

動作検証用に index.html と style.scss を作成します。

ファイルを作成したらブラウザで http://localhost:5173/ を確認してください。

npm run dev -- --host

を実行していない場合はあらためて実行後にブラウザで確認します。

baserCMS5のAPIを利用可能にする

baserCMS5をインストールして、ローカルのブラウザで確認できる状態にしておいてください。

公式ドキュメントのインストールガイドローカル環境を構築して利用する」に沿って、Docker環境で動作するようにインストールしてみました。

https://localhost/

APIはインストール直後は有効になっていないので「Web API ガイド」にしたがって config/.env の内容を書き換えます。

今回はブログ記事の取得を試すので、USE_CORE_API を true にして有効化しています。

 

https://localhost/baser/api/bc-blog/blog_posts.json

にアクセスするとブログ記事の一覧情報がJSON形式でバッチリ取得できました!

APIで取得したブログ記事一覧を表示してみる

11tyのプラグインを追加できたので、HTMLテンプレートとデータファイルを用意して動作確認します。

先ほど作った index.html を index.njk とリネームしてnunjucksテンプレートとして使うようにして下記のように書き換えます。

参考:https://mozilla.github.io/nunjucks/

APIで取得したブログ記事一覧のnoとtitleを一覧表示する処理を記述しています。

See the Pen index.njk by kaburk (@kaburk-the-reactor) on CodePen.

各種設定を記述する .envファイルを作成します。

See the Pen .env by kaburk (@kaburk-the-reactor) on CodePen.

_dataディレクトリを作成してその中にJSファイルを入れるとプロジェクト全体で使用できるようになるようです。

参考:https://www.11ty.dev/docs/data-js/

ただし拡張子はcjsにする必要があるとのことでした。

下記はAPIのURLをnode-fetchでGETして取得したJSONデータをテンプレートに反映する処理になります。

ここまで作成したファイルの一覧

左のような感じになっていればOKです!

 

動作確認

先ほどと同じく、ファイルを作成したらブラウザで http://localhost:5173/ を確認してください。

npm run dev -- --host

を実行していない場合はあらためて実行後にブラウザで確認します。

無事、ブログ記事一覧が表示されました!

.envに記述したAPIのURLのパラメータをいろいろ変えると別のブログを取得したり表示する記事数を変えたりできますよ。

最後に

フロントエンド側の仕組みはまだまだあまり詳しくないのでいろいろ勉強しようと思います。

baserCMS5のAPI自体は非常に簡単に扱えますので、ぜひ皆さんもいろいろ活用してみてください!

認証も行えば管理側の操作もAPIを使っていろいろ操作できるようですので、ブログ記事を投稿するアプリ作ったりもできそうですので、いずれ試してみたいと思います。

 

Twitter bookmark Facebook LINE Pocket Feedly RSS