【Micro CMS】静的サイトを高く売る方法 ３/５【完全無料】

Micro CMSの解説記事、第3回目です。

今回からはいよいよ、投稿した記事をサイトに表示させますよ！

前回の記事はこちら↓

【Micro CMS】静的サイトを高く売る方法 2/５【完全無料】

APIキーを使ってデータを読み込もう

では前回作った、メニューコンテンツを表示させていきましょう！

まずはブラウザでAPIを表示させるために、sdkを読み込む必要があります。

これはごく普通に、HTMLファイルに記載すればいいだけですね。

ですが、公式のドキュメントにGetting Startedとして雛形が用意されていますので、それをまるっと使用しましょう。

service-domain というところと api-key というところは、自身の使用しているmicro CMSのドメイン、APIキーに書き換える必要があります。

※注　前回の記事でも記載しましたが、これから行う方法はブラウザ上でAPIキーを読み込む方法です。APIキーがそのままソースに表示されるため、実際にサイトとして公開することはセキュリティ上おすすめしません。理由等は前回の記事をご覧ください。

また次回の記事では、公開しても問題が内容にAPIキーを隠す方法を記載する予定です。

service-domain は XXXX.microcms.io の XXXX 部分をそのまま記載しておきます。シングルコーテーションは削除せず、残しておくよう気をつけてください。

APIキーの確認方法

作成したメニューコンテンツを表示し、表示させたい記事をクリックすると、右上に以下のような「APIプレビュー」という表示があるかと思います。

それをクリックします。

すると以下の画面になります。

キャプチャでは塗りつぶしてありますが、X-API-KEYと記載のある黒塗りの部分にAPIキーが表示されています。

それをコピーして貼り付ければOKです。

さらにもう一つ、endpoint:'hello' となっているhelloをmenuに書き換えます。これは前回の記事通りに作成していればmenuのはずですが、ご自身で別のものをつけた際は↑の画像の「取得」ボタンの左側に表示されているものになります。

ではここで一度、HTMLを上書きしてブラウザで表示してみましょう。

・・・どうでしょうか。何も表示されませんね（汗

その理由は、

document.querySelector('#text').textContent = res.text

の.textの部分が間違っているからです。

現状では、res という変数にリスト形式でメニューコンテンツのデータが丸ごと入っている状態です。

例えば

res.text を res.contents[0].category にしてみてください。

どうでしょうか？

画面に　パスタ　と表示されたのではないでしょうか？

[0]と付いているのは、パスタメニューが配列の番号0に格納されているからです。ここを[1]にしてみるとどうなりますか？

ピザ　と表示されましたね。

これをHTML、JavaScriptとうまく組み合わせることで↓

こんなふうに表示させることができました

もちろんcssで見た目を整えることで、とても立派なサイトになりますよね！

まとめ

いかがでしょうか。

JavaScriptの使い方などは覚える必要がありますが、一度覚えてしまえば汎用性の高さはとてつもなく高いです！

CMSに対して依存する部分が少ないのがいいですよね。

また既存のHTMLを使い回すことができますので、既存サイトのCMS化をするのにもワードプレスで組み直すよりもはるかに簡単にできることがお分かりではないでしょうか。

「HTMLサイトをCMS化します！」とココナラで売り出せばかなり需要はあるのではないでしょうか笑

私は今はもっぱらアプリ制作に情熱を持っているのでやりませんが、、、正直稼ぎたいならこっちをやりますね笑

では次回は、APIキーの隠し方に付いて解説しますね！

これを覚えれば実際にウェブに公開することができますよ〜！

今後の連載予定↓

第四回　APIキーの隠し方

第五回　より高いパフォーマンスで使用するための学習方法

鐘倉の出品しているサービス↓

↓こんなアプリが作れます。