HTML、CSS初心者の私がSpearly CMSのチュートリアルで 躓いたところを改めて理解してみた
はじめに
皆さんはじめまして！Tといいます。私は自分のポートフォリオサイトに無料で導入できるSpearly CMSというヘッドレスCMSがあると知り、まずはチュートリアルから始めてみました。
そんな私がSpearly CMSのチュートリアルで詰まったり、理解できていない箇所がありました。
具体的には以下の２つです
・Spearly CMSは一体どんなことをしようとしているのかわからない
・コードがたくさん出てくるがどのコードを使えばいいのかわからない
ちなみに私のスキルはこんな感じです。
・HTML、CSSは基本の基本がわかる
・Javascriptは全くわからない
こんな私ですがこれらの疑問点を理解し、私なりに解決したので同じような疑問を持っている人の役に立てればいいなと思ってこの記事を書きました。
Spearly CMSチュートリアルのリンクはこちらです。
Spearly CMSは一体どんなことをしているのか
Spearly CMSでは埋め込みタグと呼ばれる {%= articke_text %} のような少し変わったコードが出てきます。はじめは見慣れないコードが出てきて難しく感じてしまったのですが、理解してみるとやっていることはシンプルで、まず表示したいコンテンツをSperly CMSで作成します。そして埋め込みタグを用いてHTMLの一部分を文字や画像などSperly CMSに保存したコンテンツに置き換えるということです。
具体的にはこのようにコンテンツを表示したいところにSpearly CMSのコードを書いて使用します。
<p>{%= article_text %}</p>
↓
<p>Spearly CMS上で入力した文章</p>
するとSperly CMSで作成したコンテンツが表示される仕組みとなっています。
Spearly CMSのリンクはこちらです。
文章ではちょっとわかりにくいかもしれませんね、実際に置き換え試してみたときのキャプチャとともに説明していきます！
実際に簡単なコードを動かしながら理解してみた
1. まずはHTMLだけで表示してみる
ここではシンプルなコードを使って皆さんに説明していきます。
今回はまずHTMLだけで「こんにちは」を表示させます。
コードはこちらです。
ブラウザに表示してみましょう。
2. タイトルを置き換えるためのコンテンツをSpearly CMSに作成する
この「こんにちは」をSperly CMSで置き換えていこうと思います。
まずはSperly CMSで「こんにちは」を置き換えるためのコンテンツを作成しましょう。
コンテンツタイプの設定はこのように行いました。
そしてこのようにフィールドを作成しました。
コンテンツ作成についてはこちらの公式チュートリアルを参考にしてみてください。
チュートリアル「コンテンツタイプを追加しよう」
URL：https://docs.spearly.com/cms/tutorial/c-aQ01pUIdVLnGwvs8iAWf
そして作成したコンテンツがこちらになります。
ではこのコンテンツを表示するためのタグをHTMLに埋め込んでいきましょう。
埋め込みタグは「埋め込み方法→コンテンツの表示」のページに記載しています。
このコードからみて分かるように{%= description_hello %}の部分で作成したコンテンツを表示します。
それではこのコードを先程のHTMLの中で置き換えていきましょう。
埋め込みタグではPタグになっていたのでh1タグに変更しました。
するとこのようになります。
これで埋め込みタグへの置き換えは完了です。あとはSpearlyを動作させるための共通スクリプトタグを追記していきましょう。
この記載はSperly CMSにアクセスするために必要で、これがないと動作しません。
共通スクリプトタグは「埋め込み方法→共通スクリプトタグの設置」のページに記載しています。
この用意されているタグを <head> タグ内にコピペするだけでOKです。
では記載していきましょう。
これで準備は整いました。ブラウザで確認してみましょう。
しっかりと表示されましたね。試しに「こんばんは」にSperly CMSで変更してみましょう。
そしてもう一度ブラウザを表示すると
変更されましたね。この際にはHTMLは一度も扱っていません。Sperly CMS内で変更しただけ反映されました。
このように一度コードを置き換えておけばあとはSperly CMSで変更すればよいだけなので、とても便利です。
おわりに
皆さんSperly CMSの役割が理解できましたでしょうか。
簡単に言ってしまうとHTMLの表示したいコンテンツが置き換わっているだけなんですよね。
なので（今回は書いてないですが）元からあるCSSはそのままで大丈夫ですし、デザインも自由に設定できます。ここも魅力の一つですね。
この記事で私が一番何を言いたいかというと難しいことは何もやってないということです。
私も最初は難しく感じたのですが、一つ一つ理解しながら進めてみたらすごく簡単にコンテンツの置き換えができました。
もしチュートリアルで「コードがたくさん出てきて難しそう」となってやめてしまいそうな人はこの記事を読んでもぜひう一度チュートリアルに戻ってみてください。
この記事が参考になれば幸いです！
Sperly CMSを使いこなして自分だけの素敵なサイトを作ってみてください！
参考：Sperly CMSチュートリアルURL：https://docs.spearly.com/cms/tutorial
Discussion