Zenn
🔌

StudioのCMSでショートコードを実現した話

に公開
JavaScript
WordPress
studio
CMS
shortcode
idea

StudioのCMSでショートコードを実現した話

最近やったStudioを使ったサイトリニューアルでやった細かい工夫を紹介していきたいと思います。

Studioでの構築は何度か経験があるのですが、
ほぼ新規が中心で、既存のコンテンツをがっつり移行するのはほぼ初でした。

ノーコードツールでいろいろできて便利なStudioですが、
2023年6月にカスタムコードというjsやcssを追記できる機能がついてから
表現の幅がさらに広がりました。

今回もいろいろ工夫していたりするのですが、
その一つ、CMSでショートコードを実現したアイデアを紹介したいと思います。

StudioのCMS機能の制限

事前に調べていなかった私が悪いのですが、
レイアウトの自由度がかなり高いStudioの編集機能を想像していると、
CMSはかなり制限が多いです。
WordPressのエディタに慣れている身としてはできないことが多いなーという印象でした。
例えばこんなことができません。

  • 文字色の変更
  • 文字のセンタリングや右寄せ
  • 画像の横にテキストを回り込ませる
  • 画像を横並びにする

いわゆるお知らせのようなテキスト中心のものであれば特に問題ないのですが、
今回の移行対象のサイトでは細かいレイアウトが入っている記事が多く、
現状のCMSの機能では既存記事の移行が難しいと感じました。

そこで何とかしたいなと思い、たどり着いたのがショートコード風の実装でした。

ショートコードとは？

ショートコードとは、簡単な記述で複雑なHTMLやCSSを生成する仕組みです。WordPressでは標準機能として搭載されており、例えば[marker]重要な部分[/marker]のように閉じタグ付きで記述することで、特定のテキストをハイライト表示するなど、コンテンツ作成者が簡単に高度な表現を実現できるようになっています。

今回はStudioのCMS内で同様の機能を実現するために、JavaScriptを使ってショートコード風の記法を解釈し、HTMLに変換する仕組みを実装しました。

実際にやったこと

StudioのCMSでテキスト1行に[xxx]aaa[/xxx]と書くと
<p><span class="xxx">aaa</span></p>
と生成されるようにしたい
※<p>タグはStudioの仕様で自動でつきます

自分で書いてもいいですが、ここまで決まったら
生成AIとの対話で作った方が楽なので生成してもらいました。

<script>
  function convertDynamicTags(text) {
    return text.replace(/\[([a-zA-Z0-9_]+)\](.*?)\[\/\1\]/gs, (_, tag, content) => {
      return `<span class="${tag}">${content}</span>`;
    });
  }

  // .richText 内のすべての <p> を対象に処理
  setTimeout(() => {
    document.querySelectorAll('.richText p').forEach(p => {
      p.innerHTML = convertDynamicTags(p.innerHTML);
    });
  }, 1000); // 1秒後に実行
</script>

このコードは</body>の直前に置きます。

1秒後に実行としているのは、コンテンツのボリュームによっては
表示が完了するのに時間がかかるからです。

cssはCMSテンプレートの中に
Embed＞Blankで設置するか、
カスタムコードでもいいと思いますのでわかりやすい場所に設置してください。

使用例

このショートコード機能を使って、以下のようなスタイリングが可能になります。

文字色の変更

[text-red]赤い文字にしたいテキスト[/text-red]

センタリング

[text-center]中央寄せにしたいテキスト[/text-center]

ボックスデザイン

[info-box]お知らせボックスのコンテンツ[/info-box]

CSSの例

ショートコードに対応するCSSの例
※これは記事用に作ったもので実際に使っているわけではないです

/* 文字色 */
span.text-red { color: #ff0000; }
span.text-blue { color: #0000ff; }

/* テキスト配置 */
span.text-center { 
  display: block;
  text-align: center;
}
span.text-right {
  display: block;
  text-align: right;
}

/* ボックスデザイン */
span.info-box {
  background-color: #f0f8ff;
  border-left: 5px solid #4682b4;
  padding: 15px;
  margin: 15px 0;
  display: block;
}

<span>で生成しているので、ブロック要素のスタイルを適用させたいときは
display: block;をつけるのがポイントです。

まとめ

StudioCMSの標準機能では実現できない柔軟なレイアウトも、
JavaScriptとCSSを組み合わせることで、
WordPressのようなショートコード機能を実現できました。

この方法を使えば、制限の多いStudioCMSでも
簡単な記法で様々なスタイリングを適用できるようになります。

既存サイトからの移行時においても、
元のデザインやレイアウトを維持しつつ、
StudioのCMS機能を活用することができるようになりました。

StudioのCMS機能が物足りない方は、ぜひ活用してみてください！

Discussion