Zenn
🐟

microCMSとローコードツール、HTMLテンプレートだけでブログを作ろう

2022/04/17に公開
Web
個人開発
microCMS
ローコード
ツナマヨ
tech

背景

様々なWEBフレームワークが栄枯盛衰してますが、温故知新。
いったん初心に返ってみませんか？

表示したいデータと、それを埋め込むHTMLのテンプレートさえあれば、
WEBサイトは作れるはずっ・・・

というわけで、なるべくHTMLだけでブログを表現しました。

準備するもの

1. microCMS

いわゆるヘッドレスCMSです。
利用するデータは、ここに入稿していきます。

https://microcms.io/

2. TUNA-Mayonnaise

各設定群を繋いでいくだけで、データフローを作成できるローコードツールです。

https://github.com/solaoi/tuna-mayonnaise

3. HTMLテンプレート

今回は雑に作った下記HTMLを利用します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>タイトル</title>
  </head>
  <body>
      <!-- ここに記事一覧や、記事内容を表示させます。 -->
  </body>
</html>

やってみた

1. microCMSでブログ記事を用意する

1-1. APIスキーマを定義する

こちらが各記事で入稿する内容となります。
シンプルに、タイトルと本文だけを用意しました。

1-2. 記事を入稿する

上記APIスキーマの設定で入稿フォームができますので、実際に入力していきます。

今回は5件ほど、ダミーデータを入力しました。

1-3. 利用するAPIを確認する

入稿した記事の一覧および単体をAPIプレビューからそれぞれ確認しておきます。
あとでローコードツール上で入力するので、覚えておきましょう。

記事一覧

黒塗り箇所がご自身のドメイン、赤塗り箇所がご自身のAPIキーとなります。

記事単体

黒塗り箇所がご自身のドメイン、赤塗り箇所がご自身のAPIキーとなります。

2. TUNA-Mayonnaiseでデータフローを作成する

2-0. インストール

brew install solaoi/tap/tuna

2-1. データフローを作成する

tuna toolコマンドを実行すると、ブラウザ上にUIが起動します。
ここで各種データフローを作成していきます。

2-1-1. データフローをダウンロードする

今回は作成済みのデータフローを用意したので、こちらをダウンロードしていきます。
下記リンクを右クリックし、リンク先を別名で保存...でtuna-mayonnaise.jsonという名前で保存します。

tuna-mayonnaise.json

2-1-2. microCMSのAPI情報を入力する

保存したtuna-mayonnaise.jsonのあるディレクトリで、
tuna toolコマンドを実行してください。

拡大・縮小すると、２つのグループがあることが分かります。
（下部が記事一覧、上部が記事単体向けのデータフローです。）

記事一覧

では画面下部の記事一覧グループで、各要素を解説しつつ、microCMSのAPI情報を入力していきます。

エンドポイント設定

リクエストを受け付けるエンドポイントの設定です。
今回は/articlesにGETでアクセスされた場合に記事一覧を返します。

Endpointノードについて
  • 本体
設定名 内容
Preview インプット内容をプレビューします
Enabled オフにすると、エンドポイントが非公開となります
Method 受け付けるメソッドを指定します
Path 受け付けるパスを指定します
BotBlocker Botからのリクエストを遮断します
RateLimit 過度なリクエストを遮断します
  • インプット
インプット名 内容
Content(JSON/HTML) JSONまたはHTMLを受け付けます
テンプレートとのマッピング

APIからのレスポンス結果であるJSONと、HTMLテンプレートをマッピングします。
マッピングに際しては、テンプレートエンジンとしてHandlebarsを利用します。

下記構文で実際にHandlebarsを利用しており、
JSON内のcontentsキーの値をループさせ、タイトルを順番に表示させます。

{"contents":[{"title":"ダミータイトル1"},{"title":"ダミータイトル2"}]}

APIからのレスポンスのデータ構造

Templateノードについて
  • アウトプット
アウトプット名 内容
HTML HTMLを出力します
  • インプット
インプット名 内容
TemplateEngine 各種テンプレートエンジン（Pug/Handlebars）を受け付けます
Date(JSON) マッピング用のJSONを受け付けます
API設定

いよいよmicroCMSのAPI情報を入力していきます。

APIノードのHeaders内のX-MICROCMS-API-KEYをご自身の値で置換します。
合わせて、URLノードもご自身のドメインで置換します。

APIノードについて
  • アウトプット
アウトプット名 内容
JSON JSONを出力します
  • 本体
設定名 内容
Method リクエスト時のメソッドを指定します
Headers リクエスト時のヘッダを指定します
Cached(In-Memory) オンにすると、レスポンス結果をキャッシュします
  • インプット
インプット名 内容
URL リクエスト先のURLを受け付けます
Query(JSON) リクエスト時のクエリをJSONで受け付けます
Expected(DummyJSON) 期待するレスポンス結果をDummyJSONとして受け付けます

記事単体

記事一覧については以上ですので、
ここでは画面上部の記事単体グループでmicroCMSのAPI情報を入力していきます。

エンドポイント設定

リクエストを受け付けるエンドポイントの設定です。
今回は/articleにGETでアクセスされた場合に記事単体を返します。

テンプレートとのマッピング

上述した記事一覧と同様です。

API設定

こちらも基本的には記事一覧と同様です。
microCMSのAPI情報を入力していきます。

APIノードのHeaders内のX-MICROCMS-API-KEYをご自身の値で置換します。
合わせて、URLWithPathParamノードもご自身のドメインで置換します。

さて、新しくでてきましたURLWithPathParamノードですが、
URLノードのパスパラメータ対応版となっております。

下記のようにパスとしてパラメータを指定する際に、

https://example.com/:id

PathParams(JSON)をマッピングして、

{"id":12345}

このようなURLを生成することができます。

https://example.com/12345
URLWithPathParamノードについて
  • アウトプット
アウトプット名 内容
URL URLを出力します
  • 本体
設定名 内容
Preview パスパラメータとのマッピング結果をプレビューします
- パスパラメータを:keyで表現したURLを記載します
  • インプット
インプット名 内容
PathParams(JSON) パスパラメータをJSONで受け付けます

また、このPathParams(JSON)内のidですが固定値ではなく可変にして、ユーザーからのリクエストに応じた特定の記事を取得したいはずです。
そこでRequestノードを利用してユーザーからのリクエストクエリを取得しています。

Requestノードについて
  • アウトプット
アウトプット名 内容
JSON JSONを出力します
  • 本体
設定名 内容
Type ユーザーのリクエスト（クエリ・クッキー・ボディ）から取得する項目を指定します
  • インプット
インプット名 内容
Expected(DummyJSON) 期待するユーザーのリクエストをDummyJSONとして受け付けます

2-1-3. microCMSのAPI情報を保存する

UI上のノードがない場所で右クリックすることで、メニューを表示できます。
Saveを選んで上記変更を保存します。

3. サーバーを起動し記事を取得する

tuna-mayonnaise.jsonのあるディレクトリで、tuna apiコマンドを実行します。

記事一覧を取得する

http://localhost:8080/articles


ブラウザでの記事一覧の表示

記事単体を取得する

http://localhost:8080/article?id=microCMSで生成される記事ID


ブラウザでの記事単体の表示

まとめ

いかがだったでしょうか？

説明で文章が多くなってしまいましたが、実際の作業としてはかなり少ないのを実感できたかと思います。
あとはデザインでええ感じにしてもろてーというところですね（てへぺろ

最後に、この記事を書こうと思った動機についてお話させてください。
ヘッドレスCMSを触ってみたかったというのがまず一点。

加えて、記事内でローコードツールとして利用したツナマヨですが、私が個人開発しております。
様々なWEBフレームワーク・言語で同じ処理を書くのであれば、いっそデータフローだけ表現して使いまわしたい。
いっそ皆でデータフローを共有して使いまわしたい。

そんな怠惰な未来に向けての概念実証として開発しているのですが、
そのユースケースとして足りない機能は何だろう？という確認が2点目でございました。

共感していただけましたら、スターいただけますと励みになります。
https://github.com/solaoi/tuna-mayonnaise

お読みいただきありがとうございました！

Discussion