【JS無し】Spearly CMSで、完全な静的サイトに画像ギャラリーを導入してみた

HTMLとCSSだけで作られたサイトに動的コンテンツを追加したい

LPや、企業サイトなどで、今は全て静的なコンテンツだけど、後からお知らせや、ギャラリーなどの動的なコンテンツを追加したくなること、ありますよね。
エンジニアはともかく、HTMLやCSSの知識のないクライアントにコンテンツを管理してもらう場合、何かしらのシステムを導入する必要があります。

パッと思いつく解決策だと「Wordpress化して、動的なコンテンツを作成できるようにする」ことだと思います。（シェア6割超えてるしね。）

しかし、Wordpress化する場合、以下のような問題があります。

• Wordpress化するために工数が発生
• PHP、MySQLが動くサーバを準備・メンテナンスする必要がある
• サーバのお引越しが必要
• （ちゃんとした対策をしないと）大量のアクセスに弱い

しかも「できるだけ安くしてほしい」なんて言われたら、エンジニア的には辛いです...

そこで、JSを使わずに、動的なコンテンツをサイトに導入できる機能を持った、Spearly CMSを使って、静的なサイトに動的なコンテンツを導入してみます。

TL;DR

• Spearly CMS使うとJS一切書かずに動的なコンテンツ埋め込める
• ここからアカウント作成して無料で始められるからとりあえず使ってみよ
• コンテンツタイプを作成して、コンテンツ作って、埋め込みタグを既存サイトに追加するだけ
• 楽勝にギャラリー追加できたぞ

Spearly CMSってなに？

Spearly CMSは、現在急成長している国産のヘッドレスCMSです。

APIでのコンテンツ取得はもちろん可能ですが、「埋め込みタグ」と呼ばれている、HTMLの記述だけで動的なコンテンツをサイトに埋め込む事ができる機能を提供しています。

最近は、Spearly CLOUDという名前の、ホスティングサービスもリリースされました。（Netlify的なやつですね）
Githubと連携して、とても簡単にサイトをホスティングできます。

実際にやってみる

では、実際に、HTMLとCSSだけで作成された完全な静的サイトに、動的なコンテンツを導入してみます。
今回は、以下のような静的なサイトを準備しました。

See the Pen Untitled by Okkun@about 11:19 (@yuta_spade) on CodePen.

カードで表示している静的な部分を、埋め込みタグを使って動的化してみます。

アカウントを作成する

まずはSpearlyのアカウントを作成します。こちらからSpearlyにアクセスして、Google、Githubアカウントでログインします。

ログインすると、自分のメールアドレスのチームが自動的に作成されます。

コンテンツタイプを作成する

Spearly CMSでは、Wordpressとは異なり、記事のカテゴリのようなものであるコンテンツタイプを作成する必要があります。

コンテンツタイプは、そのコンテンツが、どんな入力フィールド（情報）を持つかを定義したものです。必要なフィールドを、組み合わせてコンテンツタイプを作成することができます。
フィールドにはテキスト、リッチテキスト、数値などの種類があり、そのフィールドの持つ情報に合わせて作成していきます。

といってもピンとこないかもなので、具体例を上げてみます。

今回はギャラリーを作成してみることにしましょう。まずは基本情報を入力します。

シンプルなギャラリーには、以下の情報が必要です。

• タイトル
• 概要
• 画像

それぞれが、どんなフィールドになるかを考えて、整理するとこんな感じになります。

フィールド	種類（フィールドタイプ）
タイトル	テキスト
概要	テキスト
画像	画像

これでコンテンツタイプの準備は完了です！

コンテンツの作成

次にコンテンツを作成します。コンテンツを追加からコンテンツをポチポチと追加していきます。

編集画面を開くと、先程作成したフィールド達が並んでいるのがわかると思います！

データを入れていきます。

そして忘れずに公開します！

サイトへの埋め込み

コンテンツは準備できたので、サイトに埋め込んでみましょう！

（埋め込みの方法は、Spearly CMSでも確認できます。）

埋め込みタグには2つ種類があります。(フォームも埋め込めるので、それも入れると3つ)

• リスト埋め込み（コンテンツリスト）
  • コンテンツを一覧で表示するために使うやつ。
• 単体埋め込み（コンテンツ）
  • 1つのコンテンツを表示するときに使うやつ。

今回は、とりあえず一覧的に出したいので、リスト埋め込みを使います。（単体はまた別の記事で）

まず最初に、スクリプトタグを設置する必要があるので、それを設置します。
スクリプトタグにはチームごとに発行されるAPIキーが含まれているので、自分のチームのものをコピーして貼り付けるようにしましょう。

次に、実際にコードを追加します。コンテンツリスト表示のサンプルコードがコピペできるようになっているので、とりあえずこれを持ってきましょう。

<gallery-list>
 　　　　 <!-- タイトル -->
    <h1>{%= gallery_title %}</h1>
  　　　　<!-- 画像 -->
    <img src="{%= gallery_image %}" alt= ""/>
    <div style="background: url('{%= gallery_image %}');"></div>
  　　　　<!-- 概要 -->
    <p>{%= gallery_description %}</p>
  　　　　<!--  単体ページへのリンク -->
    <a href="{%= gallery_#url %}">単体ページへのリンク</a>
</gallery-list>

埋め込みタグは、独自のタグ（上の例だとgallery-list）と、その中で使えるフィールドごとのタグ（{%= gallery_title %}とか）を使って書いていきます。
ぱっと見ると複雑そうに見えますが、実はとてもシンプルです。

まず、タグの名前になっているgallery-listは、作成したコンテンツタイプのID（gallery）に、リスト表示であることを示す-listがくっついたものです。

そして、その中で使えるフィールドごとのタグは、作成したコンテンツタイプのID（gallery）に、対応するフィールドのIDを（titleとかimageとか）をくっつけているだけです。（それを{%= %}で囲います）

ではこれを先程のソースにとりあえず追加してみましょう！！
こんな感じになります。

クラスを当てていないので見た目はあれですが、たったこれだけで動的なコンテンツを埋め込めました！
普通はAPIを使って、データ取得処理作成して、表示する処理を作成して…と結構面倒なので、これは便利。

見た目を整える

では最後に見た目を整えます。今回はBootstrapのカードを使っているので、これに合わせて変えていきます。

以下が今回の一つの記事のカードなので。。。

<div class="col my-3">
　　　　<div class="card" style="width: 18rem;">
　　　　　　　　<img src="https://placehold.jp/3d4070/ffffff/300x150.png" class="card-img-top" alt="...">
　　　　　　　　<div class="card-body">
　　　　　　　　　　　　<p class="card-text">静的なコンテンツです</p>
　　　　　　　　</div>
　　　　</div>
</div>

これに、埋め込みタグを合わせると、こんな感じになります。

<gallery-list>
  <div class="col-3 my-3">
    <div class="card" style="width: 18rem;">
      <img src="{%= gallery_image %}" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">{%= gallery_title %}</h5>
        <p class="card-text">{%= gallery_description %}</p>
      </div>
    </div>
  </div>
</gallery-list>

実際の表示がこんな感じになりました！ ほぼできてる！

現在の仕様として、Spearly CMSのリスト表示はul, liタグを自動的に生成しています。

なのでCSSでulにlist-style: none;を設定して、リストのドット表示を消して、さらにflex適用します。

  .gallery-list-wrapper ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
  }

きれいになりました

あとは、コンテンツをもう2つ追加してみると、、、

立派なギャラリーを追加できました！

Codepenでソース公開してます

See the Pen [try Spearly CMS] dynamic site by Okkun@about 11:19 (@yuta_spade) on CodePen.

まとめ

JSを1行も書かずに、動的なギャラリーをサイトに追加することができました！
コストを抑えつつ、静的なサイトに動的なコンテンツを追加する1つの手段として、Spearly CMSはとても便利です。

もちろん、一部ではなく、サイト全体をSpearly CMSを使って作成することもできます。
APIを使い、高度なサイト構築や、スマートフォンアプリなどへのコンテンツ配信なども可能なので、初心者から現役バリバリのエンジニアにも使えるヘッドレスCMSだと思います。

ぜひ皆さんも、1度触ってみてくださいね！