いつもSpearly CMSをご利用いただきありがとうございます。
Spearly運営より、アップデートのお知らせです。
今回はSpearly CMSのおすすめ機能の一つである、「埋め込みタグ」について大幅アップデートのお知らせです！
現在ご利用頂いている方も、これから利用を検討されている方も、ぜひチェックしてください！
Spearly CMSの埋め込みタグとは？
Spearly CMSとは
Spearly CMSとは、WEBサイトの記事や画像など皆様のコンテンツを簡単、かつ便利に管理・配信することが可能なヘッドレスCMSです。
詳しくは公式サイトへ
Spearly CMSの埋め込みタグとは
API不要でヘッドレスCMSから配信されたコンテンツを表示できるSpearly CMS独自の機能です。
埋め込みタグはHTMLのように記述ができ、HTML / CSSのみでコンテンツの表示が可能です。
ヘッドレスCMSを使いたくてもJavaScriptやAPIを使うのは難しいという方におすすめをしています。
そんな便利な埋め込みタグがパワーアップ！
いままでの埋め込みタグでいただいた声
Spearly CMSユーザーの方にも大変好評いだだいている埋め込みタグですが、以下のようなお声もありました。
- 一覧を表示するとき、埋め込みタグから変換されるHTMLタグが ul > liタグのみなので自由度が少ない
- 絞り込みや検索などの機能の実現が難しい
これらの問題に対応をする場合、いままでは埋め込みタグではなくAPIによるコンテンツ取得を利用いただく必要がありました。
しかし今回のアップデートにより、埋め込みタグでもより高度なサイトの構築が実現できるようにパワーアップいたしました！
新しい埋め込みタグで自由度がアップ！
まず、今回のアップデートでSperly CMSの埋め込みタグは2つの埋め込みタイプがお選びいただけるように変更されました。
- シンプル埋め込み（今までの埋め込みタグ）
- カスタム埋め込み（今回のアップデートで追加された埋め込みタグ）
シンプル埋め込みでは、従来の方法でシンプルかつ簡単にコンテンツを埋め込むことができます。
そして、今回追加されたカスタム埋め込みはより自由度の高い記述が可能となっており、いままでできなかったことの多くが実現可能となっております。
「カスタム埋め込み」でできることの例
それでは今回追加された「カスタム埋め込み」の一部をご紹介いたします。
カスタム埋め込みの特長としてHTML属性を使ってコンテンツの埋め込みを操作できます。
任意のHTMLタグで一覧表示が可能に
例えば、コンテンツの一覧を表示したい場合は、HTMLタグに cms-loopという属性をつけることでそのタグがコンテンツごとにループして表示されるようになります。
以下のコードの例だと、 liタグがコンテンツ数の分、繰り返し描画されます。
<ul>
<!-- articleはコンテンツタイプに設定したID -->
<!-- cms-loopを指定したliタグが、コンテンツ数分ループして表示される -->
<li cms-loop cms-content-type="article">
<h2 class="title">{%= article_{タイトルのフィールドID} %}</h2>
<img src="{%= article_{画像のフィールドID} %}" alt="" />
<p class="description">{%= article_{概要文のフィールドID} %}</p>
<span class="tag">{%= article_{タグのフィールドID} %}</p>
</li>
</ul>
↓↓↓ 以下のように変換されます
<ul>
<li cms-content-type="article">
<h2 class="title">コンテンツ１</h2>
<img src="image1.jpg" alt="" />
<p class="description">コンテンツ1の概要です</p>
<span class="tag">information</span>
</li>
<li cms-content-type="article">
<h2 class="title">コンテンツ2</h2>
<img src="image2.jpg" alt="" />
<p class="description">コンテンツ2の概要です</p>
<span class="tag">blog</span>
</li>
<li cms-content-type="article">
<h2 class="title">コンテンツ3</h2>
<img src="image3.jpg" alt="" />
<p class="description">コンテンツ3の概要です</p>
<span class="tag">information</span>
</li>
....以下コンテンツ数分ループ
</ul>cms-loop は任意のHTMLタグに対して使用することができるため、 divタグや table > tr タグなど、サイトの構造に合わせて自由に設計可能です。
URLパラメーターによる絞り込みも可能
一覧画面では、コンテンツを検索で絞り込んだり、記事に設定しているタグをクリックしたらタグで絞り込んだりする動作があるサイトも多いと思います。
そのような場合は、 cms-use-url-param属性をつけることによりURLパラメーターをもとに絞り込みを行うことができます。
<!-- URL:https://your-site.com/list?filter_by=tag&filter_value=informa -->
<ul>
<!-- URLパラメーターをもとに絞り込みを行い、コンテンツが表示される -->
<li cms-loop cms-content-type="article" cms-use-url-param>
<h2 class="title">{%= article_{タイトルのフィールドID} %}</h2>
<img src="{%= article_{画像のフィールドID} %}" alt="" />
<p class="description">{%= article_{概要文のフィールドID} %}</p>
<span class="tag">{%= article_{タグのフィールドID} %}</p>
</li>
</ul>その他にも便利な機能がたくさん！
もちろんこれだけではなく、
- ページング
- 1ページあたりの記事数（limit）制御
- ソート機能
- 公開日絞り込み（指定日以前や以後の記事のみ取得）
など、実際のサイト構築に必要な機能を実現できるように機能を提供しています。
さらに詳しい使い方は管理画面内でも確認できます
埋め込み方法については、Spearly CMSにログイン後、コンテンツタイプの管理画面からいつでも確認することができます。
まだSpearly CMSをご利用でない方も、まずは無料から利用いただけます。
API不要でサイトにコンテンツ表示が可能なSpearly CMSの埋め込みタグ、ぜひ体験してみてください！
Spearlyは日々改善を行っています！
Spearly CMSでは最高のサイト制作・運用の体験をお届けするべく、日々改善を行っています。
今回のようにユーザーの方からのお声をもとに機能をアップデートするなど成長を続けています！
これからもSpearly CMSをよろしくお願いします。
