microCMSとローコードツール、HTMLテンプレートだけでブログを作ろう
背景
様々なWEBフレームワークが栄枯盛衰してますが、温故知新。
いったん初心に返ってみませんか？
表示したいデータと、それを埋め込むHTMLのテンプレートさえあれば、
WEBサイトは作れるはずっ・・・
というわけで、なるべくHTMLだけでブログを表現しました。
準備するもの
1. microCMS
いわゆるヘッドレスCMSです。
利用するデータは、ここに入稿していきます。
2. 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という名前で保存します。
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点目でございました。
共感していただけましたら、スターいただけますと励みになります。
お読みいただきありがとうございました！
Author And Source
この問題について(microCMSとローコードツール、HTMLテンプレートだけでブログを作ろう), 我々は、より多くの情報をここで見つけました https://zenn.dev/aota/articles/e1319d7e892d14著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol