Spearly CMSの埋め込みタグで、Webサイトに公開期間のあるイベントバナーをCMS管理する


Spearly CMSの埋め込みタグを使うと、以下の画像のようなバナーが簡単に10分くらいで実装、期間や画像や文言もCMSで管理できそうと思ったので実装してみます

例えばこんなのですね。
![スクリーンショット 2022-12-14 3.49.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/b8d1cc5a-e456-ab4b-91db-deef5f10eea7.png)
画像などの情報をCMSで管理し、開催期間の間だけ表示され、開催期間が終了次第非表示、もしくは次の期間のバナーに切り替える仕組みを作ります

Spearly CMSをつかうと、実装の手間がすごい少なく１回の実装ですみ、またバナーはCMS管理できるなど、実装も運用も簡単なので、興味を持った方は、実際に試してみるなりエンジニアさんにこの記事見せてみるといいかもです。

# 仕様
今回作成するのはこんな感じのバナー
予約投稿や、公開締め切りを設定することで、表示非表示をCMS上からスケジューリングできるｲｲｶﾝｼﾞ-な仕組み
![スクリーンショット 2022-12-14 3.49.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/89253fe9-76b4-c99d-c6f0-a161e63ca6a4.png)


今回は仮のサイトとして、下記リンクで配布されているテンプレサイトに埋め込んでいきます

https://html5up.net/

今回はQiitaみたいな記事コンテンツがメインのテンプレートである`future-imperfect`をお借りしました！
(ライセンスを守れば本格利用も無料だそうです)

(future-imperfect)
![スクリーンショット 2022-12-14 4.28.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/eac6a084-7202-1ccd-67d3-9ae6c4c1d196.png)

# 実装
実装の流れとしては以下の通りです
1. Spearly CMSに登録する
1. コンテンツタイプ設計
1. イベントバナーの情報をSpearly CMSで作成
1. 埋め込みタグでバナーをwebサイトに表示
1. オプションを指定する
1. 完成

## 1.Spearly CMSに登録する
今回バナーを管理するCMSとしてSpearly CMSを用いるのは、埋め込みのしやすさと、上記のような仕様であれば、API呼び出しなど行わずに、Spearly CMSの埋め込みタグの機能で十分だったからです。

イベントの開始と終了に合わせて、表示を切り替える作業するのはめんどくさいので、CMSの予約投稿と、公開終了時間を設定する機能を利用して、自動で切り替わる仕組みを作ります。



https://note.com/monan0417/n/n3134a1d074c1?magazine_key=m8b506eb045bc

### Spearly CMSとは
すごい簡単に使えるヘッドレスCMS。
APIと埋め込みタグでコンテンツを取得でき、埋め込みタグはAPIなどのつなぎ込みもいらずに、ブログや画像のコンテンツを簡単に埋め込めサイト設置もできるｲｲｶﾝｼﾞなサービス。

無料から利用できるので、ぜひ試してみてください:point_down:

https://cms.spearly.com/

1. 「無料でCMSを始める」から新規登録画面を開きます
   ![スクリーンショット 2022-12-14 4.45.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/4b5ada00-d45c-704d-f5a6-0a0bc41c34a1.png)


2. GoogleかGitHubの情報でログインできます。
   私はGoogleでしました
   ![スクリーンショット 2022-12-14 4.46.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/0510e7fe-5900-08f8-50b8-260c06449da1.png)

3. 利用規約などに同意したら完了です。CMSを利用できるようになりました

## 2. コンテンツタイプ設計
テーブル設計みたいなものです
タイトルや画像、リッチテキストなど、何の要素からコンテンツが構成されているか設定します

例えばブログなら次の6つの要素からなるデータの集まりと考えられます。

|  | 型 |
| - | - |
| タイトル | テキスト |
| サムネイル | 画像 |
| 本文 | リモートワーク |
| 日付 | 日付 |
| タグ | タグ |
| 筆者 | 参照 |

今回は、単純な画像のバナーを作成するので次の構成で作成します

|  | フィールドタイプ | 備考 |
| - | - | - |
| イベントタイトル | テキスト |  |
| イベントバナー画像 | 画像 |  |
| イベントバナー画像のalt | テキスト |  |
| イベント特設ページへのリンク | テキスト |  |
| (イベント開始日) | (フィールドタイプとしては持たなくて良い) | 公開予約日, 公開日 |
| (イベント終了日) | (フィールドタイプとしては持たなくて良い) | 公開終了日 |

### Spearly CMSでコンテンツタイプを設定する。
コンテンツタイプは、Spearly CMSの用語で、コンテンツの型を意味します。
コンテンツがどのようなフィールドの構成かやオプションなどの設定を行えます

### 2-1. コンテンツタイプを作成する
   「コンテンツタイプ一覧」の「コンテンツタイプ作成」から、新規作成画面を開きます。
   ![スクリーンショット 2022-12-14 5.18.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/aac216a8-ee8a-4bb2-2894-8873c9e9b7ff.png)
### 2-2. 必要な情報を入力しましょう
   コンテンツタイプの名前やIDを設定しましょう。

   コンテンツタイプIDは埋め込みタグの接頭語になります。
   私は`banner`としましたので、埋め込みタグは`{%= banner_(フィールドID) %}`となります
   ![cms.spearly.app_teams_01GC884YT6HCPPEF3F7S94JWBM_content_types_new (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/a7bb6f5a-b43e-5269-3656-115fed1e7403.png)
   他の項目については、複数のコンテンツタイプや、チームでの運用の際に使う項目ですので、必要に応じて記入してください。
   例えば、「コンテンツタイプ説明」や、後述の「フィールド説明」に記入した内容は、コンテンツタイプ一覧やコンテンツ作成画面で、コンテンツ作成時のドキュメントとして利用できます。
    ![スクリーンショット 2022-12-14 8.10.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/93274e04-43a0-2cd6-b727-8768028c24a1.png)

   記述のルールや説明などもCMS上で確認できるので便利なので良く使ってます
### 2-3. フィールドタイプの設定を行う。
   コンテンツタイプの作成が完了したら、先程作成した表をもとにフィールドの設定を行いましょう
   4つのフィールドを用意してそれぞれIDやタイプを入力すればよさそうです。

| フィールド名 | フィールドID | フィールドタイプ | 備考 |
| - | - | - | - |
| イベントタイトル | title | テキスト |  |
| イベントバナー画像 | image | 画像 |  |
| イベントバナー画像のalt | image_alt | テキスト |  |
| イベント特設ページへのリンク | link | テキスト |  |
| (イベント開始日) |  | (フィールドタイプとしては持たなくて良い) | 公開予約日, 公開日 |
| (イベント終了日) |  | (フィールドタイプとしては持たなくて良い) | 公開終了日 |


デフォルトのフィールドは消して大丈夫なので、必要なフィールドを作成していきましょう

![cms.spearly.app_content_types_1611_field_types.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/9ef683cd-c004-8545-4594-ac8bb60c617b.png)



## 3. イベントバナーの情報をSpearly CMSで作成
イベントバナーの情報をSpearly CMSに入力します。
マーケ担当の方やデザイナーさんの手を借りましょう。

私は仮のサイトなので、とりあえずcanvaの力を借りました
(Spearly CMSもcanvaも無料で十分利用できるので、お試しで導入しやすいのほんと良いと思う。)

適当に作ったバナー
![クリスマス Canvasのバナー (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/0db07fc9-5641-65b6-d286-77ed54a652f0.png)

### 3-1. コンテンツ作成画面を開く。
上部タブの「コンテンツ一覧」の「コンテンツを追加」からコンテンツの新規作成画面を開きます

![cms.spearly.app_content_types_1611_contents.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/2c1d48ee-dd2f-2714-99a7-2c752f37c110.png)


### 3-2. コンテンツを保存する
生成されたフォームをもとに、コンテンツの内容を入力します
![cms.spearly.app_content_types_1611_contents (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/d39a7bf7-9aa7-e79d-e0d3-464b59f6decf.png)

### 3-3. コンテンツを公開する

次の「4. 埋め込む」の作業のために一時的にコンテンツを公開しておきましょう。
公開設定を「公開」にして保存しましょう。

公開していないと、コンテンツが描画されないため、埋め込まれたか確かめられません。

![cms.spearly.app_content_types_1611_contents (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/8fd73ca4-7b77-cd5a-9e13-251b7d25497c.png)


## 4. 埋め込みタグでバナーをwebサイトに表示
Spearly CMSの埋め込みタグを用いて、webサイトにバナーを設置していきましょう。

1. Spearly CMSの共通スクリプトタグを設置
2. 埋め込みタグを設置
3. スタイルを整える

### 4-1. Spearly CMSの共通スクリプトタグを設置
埋め込みタグの機能を有効化するために、2行のコードをheadタグ内にコピペします
共通スクリプトタグはチームごとに一つです。

1. 「埋め込み方法 > カスタム埋め込み」から、埋め込み方法画面を開きます
   ![cms.spearly.app_content_types_1611_contents (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/62ed26e5-e1ed-1ba8-dd3c-525525095045.png)
2. 「共通スクリプトタグの設置」から、共通スクリプトタグをコピーします
   ![cms.spearly.app_content_types_1611_contents (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/e425fb10-724e-6ebf-5285-627560cbd7a1.png)
3. バナーを表示したいサイトのheadタグ内にコピペします。
   ![スクリーンショット 2022-12-14 6.41.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/050d80e2-e4aa-b159-07df-34ec961cef59.png)

これで、埋め込みタグ機能が利用できるようになりました！

### 埋め込みタグの概要
コンテンツの埋め込み方は、以下のように`cms-content-type`でidをもとに指定し、繰り返し表示したい場合は`cms-loop`を、content-idを指定して単体で埋め込みたい時は、`cms-item`のオプションを入れます。

このオプションを指定したタグ内に書かれた`{%= コンテンツタイプID_フィールドID %}`の部分が、CMSで登録した情報に置換されます。

```html
<!-- cms-loopを用いた、繰り返しの埋め込み -->
<ul>
    <li cms-loop cms-content-type="コンテンツタイプID">{%= コンテンツタイプID_フィールドID %}</li>
</ul>

<!-- cms-itemを用い、コンテンツのエイリアスを指定した単体の埋め込み -->
<div cms-item cms-content-type="コンテンツタイプID" cms-content="[コンテンツのエイリアス]">
    {%= コンテンツタイプID_フィールドID %}
    例: {%= article_title %}
</div>
```
例えば、画像を埋め込みたければ、`{%= banner_image %}`を、本文を埋め込みたければ`{%= banner_contetn %}`のように、設計したidから生成された埋め込みタグを設置していきます。

埋め込みタグの使い方の詳細については、埋め込み方法を参考にしてください　

また、この記事も参考になると思われます:point_down:

https://note.com/monan0417/n/n4a5db22adeed?magazine_key=m8b506eb045bc


### 4-2. 埋め込みタグを設置
バナーを表示したい部分に埋め込みタグを設置しましょう。

1. 埋め込みタグを記述する。
    普段通りhtmlをマークアップし、埋め込みたい部分のタグにオプションと、埋め込みタグを記述します。
    今回は、cms-loopを用いて実装します。理由は仕組みとともに後で説明します。

    次のように記述し、プレビューを確認すると、
    ```html:index.html
    <!-- cms-loopを用いた、繰り返しの埋め込み -->
    <div>
        <div cms-loop cms-content-type="banner">
            {%= banner_title %}
        </div>
    </div>
    ```
     CMSで入力したタイトルが描画されました！
    ![スクリーンショット 2022-12-14 7.08.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/2a9f58d6-0b8b-f9b2-24bd-b60dd5eb8fdd.png)

    あとは、最終的な形にマークアップしてあげると、以下のようになりました
    ```html:index.html
    <div class="banner-wrapper">
    	<div cms-loop cms-content-type="banner" class="banner">
            <a href="{%= banner_link %}">
                <img src="{%= banner_image %}" alt= "{%= banner_image_alt %}"/>
            </a>
    	</div>
    </div>
    ```
    ![スクリーンショット 2022-12-14 7.16.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/3c1748f7-61b0-07ac-4105-a9c171ac9f66.png)
2. スタイルを整える
    最後に軽くスタイルを整えてあげましょう。

    Spearly CMSはヘッドレスCMSという、もともとのスタイルを持たないCMSです。
    プレーンな状態からcssなどスタイルを構築できます。
    ![スクリーンショット 2022-12-14 7.23.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/0963d5ea-a105-cd6c-d157-d6a2e9bf7d1d.png)

    ｲｲｶﾝｼﾞ-

## 5. オプションを指定する。
仕様を実現するためにオプションを指定しましょう。
> 予約投稿や、公開締め切りを設定することで、表示非表示をCMS上からスケジューリングできるｲｲｶﾝｼﾞ-な仕組み

### 埋め込みタグのオプションの概要
Spearly CMSの埋め込みタグにはたくさんのオプションがあり、例えば`cms-option-limit=3`を指定すると3件のみ繰り返して表示し、`cms-option-order_by=popular`とすると、人気順にソートします。
これらのオプションを組み合わせることで、さまざまなカスタマイズがjsなしで可能になります。

```html
<!-- cms-loopのoptionを用いた、人気記事上位3件のタイトルを表示 -->
<ul>
    <li 
        cms-loop
        cms-content-type="article"
        cms-option-limit=3
        cms-option-order_by=popular
    >
        {%= article_title %}    
    </li>
</ul>
```

### 5-1. 埋め込みタグのオプションを記述する
利用するオプションは2つ
- `cms-option-limit=1`
- `cms-option-order_by=latest`

`cms-option-limit=1`によって、リスト表示にもかかわらず単体埋め込みのように一見目のみを表示させます。
`cms-option-order_by=latest`によって、公開日順にソートすることにより、今のバナーが終了し、別のバナーが公開された場合、バナーの表示が切り替わります。

この2つのoptionの併用により、「公開中の最新のバナーを一件表示する」ことができます。

```html
<div class="banner-wrapper">
    <div cms-loop cms-content-type="banner" cms-option-limit="1" cms-option-order_by="latest" class="banner">
        <a href="{%= banner_link %}">
            <img src="{%= banner_image %}" alt= "{%= banner_image_alt %}"/>
        </a>
    </div>
</div>
```

これで機能は完成しました！:tada:

#### 詳細な仕様

- 表示中のバナーを「下書き」に変更した時、すでに公開中のものが代わりに描画されます
    ![スクリーンショット 2022-12-14 7.42.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/248d378a-8598-3d64-877f-e25a1c5c7dc8.png)
    
    ![スクリーンショット 2022-12-14 7.43.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/c024a2bb-7553-be24-dfc2-ff0607c83fcd.png)

- 「公開中」のバナーがない場合、バナーは表示されません。
    ![スクリーンショット 2022-12-14 7.45.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/81856ceb-f087-0fc0-1542-16b01041f17d.png)
    
    ![スクリーンショット 2022-12-14 7.46.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/7c66de59-c3e6-693a-7f23-9e38416056be.png)


## 6.完成
実装としては完了したので、運用方法を記します。

### 予約投稿の仕方
コンテンツの入力画面の下部の、公開設定を「予約中」にすると「投稿を予約する」「公開停止設定」が、公開設定を「公開」にすると「公開停止設定」が表示されます。

あとはコンテンツに合わせた公開期間を入力してください。

![スクリーンショット 2022-12-14 7.52.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/053e03c3-7154-c67b-3728-5f85108c8eb7.png)



## まとめ
今回はバナーを設置しただけですが、Spearly CMSの埋め込みタグを用いることで、ブログ機能やフォーム機能など、手軽に実装することができます。

応用次第で色々なことが手軽に試せて楽しいので皆さんも試してみてください！

形を変えて下の画像のようなバナーも簡単にCMS管理できるので、工数もかからずおすすめします:rocket:

![スクリーンショット 2022-12-14 3.55.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/26083613-8ab1-ed03-7ed8-0831b4f88075.png)
![スクリーンショット 2022-12-14 3.54.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2357479/0140b3d0-322f-5087-8e7d-6eaf76b60276.png)



APIでもデータを取得できるのでJamStackな開発とCMS利用もできるので、
皆さんのサイトに合わせたCMS利用ができるサービスと思いますので是非是非



## 参考リンク

https://cms.spearly.com/

https://html5up.net/

https://www.canva.com/