Spearly CMSというサービスを使ってみたらサイトの文言変更がめちゃくちゃ楽になった件
はじめに
はじめまして。Tといいます。いきなりですが皆さん、こんな経験はありませんか？
「会社のHPの文言を変えたい！‥でもHTMLのコードを書き換えたり
エンジニアに頼むのは手間がかかるしお金もない‥どうにかならないかな。」と
私もエンジニアではありませんが会社のHPや個人のポートフォリオを作成しているときにこの２点にうんざりしていました。
変更の度にhtmlを触らないといけない
その変更をサーバーにアップロードしなきゃいけない
もっと簡単に修正およびアップロードができるような仕組みないかと常々思っていました。
そんなときにエンジニアの友人からSpearly CMSというサービスを教えてもらい、「一度コードを置き換えればあとはSpearly CMSのサービスのなかで管理、変更できるよ」といわれ、試しに使ってみると以下のような結果になりました。
・HTMLを何度も触る必要がなくなった
・頻繁にサーバーにアップロードする必要がなくなった
私と同じような悩みを持っている人にはかなりオススメだったので、どのように使っていくのか紹介します。ぜひ見ていってください
Spearly CMSとはなにか‥
まず、Spearly CMSというサービスが何なのか説明します。
Spearly CMSとはヘッドレスCMSというコンテンツ管理に特化したCMSです。
なのでユーザーは文言や記事などコンテンツづくりに集中できます。
Spearly CMSで解決できたこと
今回、Spearly CMSを使ってみて悩んでいた以下の2つが解決しました。
HTMLを直接を編集する必要がなくなった！
一度HTML内のコンテンツをSpearly CMSのコンテンツに置き換えるとあとはSpearly CMS内で変更ができるようになるためHTMLの記述が不要となります。
サーバーにアップロードする必要がなくなった！
ソースコードを触る必要がないので、文言修正だけならばサーバーにアップロードをすることがありません。そもそもアップロードという工程がなくなるからです。
では、実際にどうやったか説明していきます！
1.Spearly CMSを使ってみよう
まずはSpearly CMSにログインしますこちら からログインしてください Spearly CMSの使い方についてはこちらのチュートリアルもあるので参考にしてください
https://docs.spearly.com/cms/tutorial/c-xT7erQugo9O031PCZwaI
皆さんサインアップはできましたか？このような画面になれば完了です。
2.HPのコンテンツをSpearly CMSを使って書き換えよう
では実際にHP内のコンテンツを書き換えて行きましょう。
大まかなフローとしてはこのようになります。
Spearly CMS上でHPの文言を作成する
作成した文言のコンテンツでサイトの文言を置き換える
Spearly CMSのコンテンツ編集画面から文言を変更する
このような手順で進めていきます。
今回は実際のサイトの代わりにHTML5UPのテンプレートをお借りして作成します。
HTML5UP URL:https://html5up.net/
こちらが今回書き換えるHPになっています。
今回はこのキャッチコピーの説明部分の文言を変更していきます。
ではSpearly CMSを使ってコンテンツを作成しましょう。
まずコンテンツを管理するチームを作成する
Spearly CMSでチームを作成していきましょう。チームを作成しておけば簡単に開発メンバーを増やすことができますし、誰でもコンテンツの内容を変更、修正できるようになります。
チームはチュートリアルを参考に作ってみましょう。
Spearly CMSチュートリアル「チームを作成しよう」https://docs.spearly.com/cms/tutorial/c-5hyF498JXHlwtaYcNDpO
左上にチーム名が表示されれば完了です。今回のチーム名は「Team Movie」です。
メンバーを追加したい場合は、左下のメンバーを押して他のメンバーも追加しましょう。
3.コンテンツタイプを作成
ではまずSpearly CMSで「キャッチコピー」と「その説明」の2つのテキストフィールドからなるmain-visualというidのコンテンツタイプを作成します。
コンテンツタイプとは、テキストや画像など、どのような要素から成るコンテンツであるという、大枠を設定するものです。データベースのテーブルみたいなものですね。コンテンツタイプはチュートリアルを参考に作ってみてください。
今回どちらもフィールドタイプはテキストでいいと思います。
私はこんな感じで作りました。
4.コンテンツを作成
では実際に文言のコンテンツを入力していきます。
自分はこのように設定しました。
公開設定を「公開」にするのを忘れないでくださいね。これで投稿するだけです。
これさえ作成してしまえば、あとはこのコンテンツを編集するだけですので誰でも簡単に変更できます。
変更は後でするので、まずはこれをHPに反映させましょう。
Spearly CMSチュートリアル「コンテンツ作成」：https://docs.spearly.com/cms/tutorial/c-aQ01pUIdVLnGwvs8iAWf
5.HPに埋め込む
次に今あるHPにSpearly CMSで作成したコンテンツを埋め込んでいきましょう。
ここですることは２つ
headタグに共通スクリプトタグを入れる
bodyタグにコンテンツをカスタムタグとして貼り付ける
ほぼコピペだけで済むのでとっても簡単です！
APIキーやコンテンツIDが皆さんとは違うと思うので、参考に作成される時は、自身の「埋め込み方法」を確認しながら入力してくださいね。
埋め込み方法を確認する
共通スクリプトタグやコンテンツの埋め込みタグについては、画像のような埋め込み方法に書いてありますのでこちらを参考にしてください。
6.共通スクリプトタグを埋め込む
このコードをheadタグの一番下に記述します。これでSpearly CMSにアクセスできます。
このようにペーストしてください。
7.コンテンツを埋め込む
次にコンテンツを埋め込みます。
やることはとても簡単です。埋め込みコードをコピーして、表示したいところに貼り付けるだけです。
ここでも皆さんは自身の埋め込みコードを利用してくださいね。
ではまず埋め込む前のコードをお見せします。
・変更前
これをSpearly CMSを使って書き換えるとこうなります。
チュートリアルにどの埋め込みコードを使えばいいのかは書いてありますのでぜひ参考にしてみてください。
Spearly CMチュートリアルURL：https://docs.spearly.com/cms/tutorial
ちなみにこの埋め込みコードを利用しました。
では編集したファイルをブラウザで確認しましょう。
見た目は変わってないですね、成功です。
コード上ではSpealry CMSの埋め込みタグが書いてありますが、表示されるのはSpearly CMSで作成したコンテンツとなっています。
8.Spearly CMSを使って書き換え
では早速Spearly CMSで内容を書き換えていきましょう。
今回はキャッチコピーの文言を修正していきます。
たったこれだけの修正でOKです。簡単でしたね。
ではHPを再度確認してみましょう。
変わりました！これで誰でも好きなときに変更、修正ができるようになりました。
おわりに
このように画像なども簡単に変更することができるのでぜひ色々ためしてみてください。
他にもSpearly CMSはSpearlyCLOUDを一緒に用いれば簡単にネット上に公開できたりと便利な機能がたくさんあります。そういった機能も書いていきたいと思っているので他の記事もよろしくお願いします。ここまで見てくださった皆さんありがとうございました。
このSpearly CMSがなんと無料で利用できるので、以下のリンクからぜひ体験してみてください！
この記事が気に入ったらサポートをしてみませんか？