microCMSの簡単なやり方…さえ分からない

HTMLやCSSしか分からないのにヘッドレスCMSに手を出そうとしている身の程知らずですが、そんな身の程知らずでもmicroCMSに投稿できそうな解説ページを見つけ、そこで学習しています。

https://note.com/koushikagawa/n/ndf35cc9de82a

上記のページの説明からすると
microCMSのドメイン（URL）
投稿する記事のコンテンツID（記事のURL末尾部分）
API KEY
さえあればHTMLだけでも記事の表示ができるそうですが、できませんでした。

コンテンツIDやAPI KEYを間違っているのであれば何も表示されないはずですが、
なぜか本文だけ表示されません。（タイトルは表示されます）

microCMS公式のチュートリアルは私の技量だと敷居が高すぎて
ようやく簡単なものを見つけたのに、まさかのつまづきに戸惑っております。

なぜ本文だけが非表示になるのか、また、どうすれば直せるのか
ご教授いただけましたら幸いです。

Lhankor_Mhy

2024/02/13 08:34

コードをご提示ください

YYBa257

2024/02/13 09:07

参考にしたページほぼそのままですが… <html lang="ja"> <body> <main> <h1 id="title"></h1> <hr> <div id="body"></div> </main> <script> fetch("https://[microcmsのドメイン]/api/v1/blog/[コンテンツid]", { headers: { "X-API-KEY": "[API KEY]" } }) .then(res => res.json()) .then(json => { document.getElementById("title").innerHTML = json.title; document.getElementById("body").innerHTML = json.body; }) </script> </body> </html> これで記事のタイトルだけは出てきます

Lhankor_Mhy

2024/02/13 09:21

なるほど。JSONをご提示いただけますか？

YYBa257

2024/02/13 09:38

.innerHTML = json.title;　〜とコードに出てくるからには必要なものかと思うのですがさきほど提示したHTML以外のものは存在してないのです。参考にしたページに、歯抜けや手落ちがあったのでしょうか？それさえよく分かってない身ですみません…

Lhankor_Mhy

2024/02/13 09:42

ご提示の note の手順で言うと、ここです。 https://note.com/koushikagawa/n/ndf35cc9de82a#21c4b08c-77ef-487b-b260-c3cde909a130 こちらでJSONを確認されているはずですから、このテキストを差支えなければご提示ください。

YYBa257

2024/02/13 10:40

https://note.com/koushikagawa/n/ndf35cc9de82a 従来のアドレスがこれですから https://note.com/koushikagawa/n/ndf35cc9de82a#21c4b08c-77ef-487b-b260-c3cde909a130 の『#21c4b08c-77ef-487b-b260-c3cde909a130』に当たる部分を聞いてるわけですね？その調べ方すら分からず申し訳ないです… 文字数であてはまりそうなのがAPI KEYくらいしか思いつきませんが一応書いておきますコンテンツID blog/pf9tbcd5 API KEY SoWqGuB5HddJ9jD0ShXxj4NHPfcWBHCAr3es 違ってたら、すみません

Lhankor_Mhy

2024/02/14 00:12

そうではないです。 2024/02/13 18:42 のコメントで示したURLは、このリンク先を見てほしいだけです。つまり、 https://note.com/koushikagawa/n/ndf35cc9de82a#21c4b08c-77ef-487b-b260-c3cde909a130 ↑これをクリックして開いたページを見てほしいのです。ここにJSONの参照の仕方が書いてあるのです。

YYBa257

2024/02/14 08:29

本当に分かってなくて申し訳ないです指定されたアドレスを開いても、curlでAPIを参照する方法しか出てこず前回記載したコンテンツIDやAPI KEY以上の情報が見当たりません。もしかして{endpoint}のことですか？（対象のページではnews/となってる箇所）それともドメインのことでしょうか？（対象のページではresinc.microcms.ioとなってる箇所）対象ページの「API確認」ではなく、別の箇所を見るべきでしょうか？「json」でページ内検索をかけてもHTMLで記載されてる（サンプルコードの）分しかヒットしないため何処を探せばいいかもわかりません。

Lhankor_Mhy

2024/02/14 08:34

『curlでAPIを参照する方法』のお話をさせていただいています。その手順のスクリーンショットにもJSONが写っていますよね？　curl でテストしたのであれば、レスポンスのJSONを取得できていますよね？　それを見せてください、と申し上げています。

Lhankor_Mhy

2024/02/14 09:44 編集

もしかして、JSONとはなんのことであるのか分からないですか？このリンク先で表示されるような文字列データのことです。 https://jsonplaceholder.typicode.com/todos/1 この説明がわかりやすいかもしれません。 https://wa3.i-3-i.info/word13798.html

YYBa257

2024/02/14 11:24

APIプレビューでcURLを選んだ状態で「取得」をクリックしたときに表示される、この一式がJSONなんですか？ { "id": "pf9tbcd5", "createdAt": "2024-02-08T09:30:41.210Z", "updatedAt": "2024-02-09T10:21:48.489Z", "publishedAt": "2024-02-08T09:30:41.210Z", "revisedAt": "2024-02-09T10:21:48.489Z", "title": "Test", "content": "<p>サンプル表示になります</p><figure><img src=\"https://images.microcms-assets.io/assets/a71ab32d2f3148d0bb9803d8d6c7a30b/6a0fece1e47646c9907b2edb8e67f50e/0001.jpg\" alt=\"\" width=\"200\" height=\"300\"></figure>", "tags": [], "writer": null } まだ練習用なので、タイトルや本文がそういったものになってますが…コードはこんな感じです。そして最初にも書いたように、このままだとなぜか本文だけが非表示（undefined）になります。

Lhankor_Mhy

2024/02/15 00:35

ご提示の note で示されているJSONとの違いは、body という項目の有無ですね。おそらく、YYBa257 さんが note の手順を忠実に追っているつもりでも、項目の名前などが note の記述と異なってしまっているのだろうと思います。 note の手順で言うとこのあたりですね。 https://note.com/koushikagawa/n/ndf35cc9de82a#e5bb124f-00b1-4ee1-beb3-0a0a3fc18041 スクリーンショットでは body というフィールドIDが見えますが、YYBa257 さんのインターフェースではこれが存在しないのではないかな、と想像しています。今一度APIのインターフェースを確認をしてみるか、またはもしごちゃごちゃになってしまっているのであれば、いっそのこと初めから手順をよく見てやり直してみてはいかがでしょうか。

YYBa257

2024/02/15 10:31

基本設定のAPIスキーマでbodyを設定していないのだから、JSONにもbodyは存在しない… サンプル通りにHTMLを組んでも、それじゃ出てくるわけがない …そんな簡単なことを、幾度となく説明を受けて、ようやく理解できましたおかげさまで、本文も表示され、やりたいことに近づけた気がしますベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

Lhankor_Mhy

2024/02/17 00:23

ご解決されて何よりです。お手数をおかけしますが、自己解決でご対応願えますか。 https://teratail.com/help#resolve-myself