microCMSのリッチエディタの内容をHTMLとして表示する方法は？
APIから取得した記事本文の文字列を、どのようにWebサイト上で整形されたHTMLとして描画すればよいのでしょうか。
microCMSのリッチエディタで作成した文章は、APIを通じてHTML形式の文字列として取得できます。そのため、表示側で「これはHTMLとして描画する」と指定する書き方が別に用意されています。
| 表示側 | 書き方 | 補足 |
|---|---|---|
| React・Next.js | <div dangerouslySetInnerHTML={{ __html: body }} /> | __htmlを持つオブジェクトを渡す |
| Astro | <Fragment set:html={body} /> | 余分な囲みのdivが増えない |
| Vue・Nuxt | <div v-html="body"></div> | 中に書いたVueのテンプレート構文は動かない |
デザインの適用にも少し注意を払いましょう。リッチエディタ側で設定したカスタムclassは表示側の装飾に活用できますが、Vueの単一ファイルコンポーネントでscoped CSSを使っている場合、v-htmlの内部要素にはスタイルが届きません。CSS Modulesを使うか、記事表示エリアに範囲を限定したグローバルCSSを用意して見た目を整えます。
リッチエディタの見出しから目次を自動生成するには？
長文の解説記事などで、冒頭に各章のタイトルが並び、読みたい見出しをクリックすると該当の位置まで滑らかに移動する目次はよく見かける機能です。
Studioではリッチテキストのプロパティごとに見出しと連動した目次が自動で挿入されていましたが、microCMSに移行した後は、取得したHTMLを解析して自前で目次データを組み立てる仕組みをとります。幸いなことに、microCMSのリッチエディタではh1からh5までの見出しに対して、テキスト内容をハッシュ化したid属性が自動で割り振られます。テキストそのものを変更しない限りidの値は固定されるため、ページ内リンクの飛び先としてそのまま利用できるわけです。逆に、公開後に見出しの文言を直すとidも変わり、外部から貼られた見出しへのリンクは外れてしまいますね。
作り方の流れは次の3段階です。
- APIで取得した本文HTMLをCheerioで読み込む
- h2とh3を取り出し、id・見出しの文字・タグ名を配列にまとめる
- 配列から「#id」へのリンク一覧を作り、本文の前に置く
h2とh3に絞っているのは、記事タイトルにh1を使う前提の実装例だからです。
自分でCheerioの処理を書くのが手間なら、microCMSが出しているmicrocms-rich-editor-handlerを使う方法もあります。公式処理ツールのREADMEでも解説されている通り、extractorsにtocExtractor()を指定して本文HTMLを処理すれば、目次リストのデータをまとめた配列を取り出せます。ただ、これはデータを取り出すところまでで、画面に並べる部分は自分で書きましょう。
リッチエディタに入れたコードをシンタックスハイライトするには？
技術ブログなどに掲載するプログラムのコードを、見やすく色分けして表示するにはどのような仕組みを組み込めばよいでしょうか。
microCMSのリッチエディタでは、コードブロックを作成する際にファイル名と言語を指定できます。APIから返ってくるHTMLでは、ファイル名がdiv要素のdata-filename属性に、指定した言語がcode要素のlanguage-javascriptといったクラス名に反映される仕掛けです。ただし、このHTMLをブラウザでそのまま表示するだけでは文字の色付けは行われません。公開サイト側でコードを読みやすく装飾するには、専用のハイライト処理を挟む必要があります。
色付けを行う方法としては、Shikiやhighlight.jsといったライブラリの利用が定番です。microcms-rich-editor-handlerに含まれるsyntaxHighlightingByShikiTransformerを使えば、追加でshikiパッケージを導入することでコードブロックを綺麗に色分けできます。また、cheerioでpre要素やcode要素を抽出し、highlight.jsを通して変換されたHTMLへ置き換えるアプローチも広く使われてきました。言語を自動で判定してくれるので、言語指定のないコードにも色が付きます。
ここで意識したいのが処理を実行する場所です。ブラウザ側で大きなJavaScriptライブラリを読み込んで色付けを実行すると、ページの表示速度が落ちてしまいかねません。どちらの方法でも、処理はサーバー側やビルド時に済ませる形が勧められています。Next.jsならServer Component、Astroなどの静的生成ならビルドのタイミングで色付けまで終えておけば、ブラウザでShikiを動かさずに済みます。記事数が多いブログなら、ここは事前に処理する作りにしておきたいところですね。
microCMSの記事からsitemap.xmlを自動生成するには？
一般的なブログ専用サービスではボタン一つで検索エンジン用のサイトマップが出力されることも多い一方、microCMSにはWebサイト全体のサイトマップを自動生成する機能が備わっていません。記事データを保管・配信するヘッドレスCMSであるため、公開用のXMLファイルはフロントエンド側の仕組みで作り出す必要があります。
たとえばNext.jsのApp Routerを採用しているなら、app/sitemap.tsを作成してURLの配列を返す関数を定義します。microCMSから記事の一覧を取得し、スラッグから記事のURLを組み立てて返す形です。各URLにはlastModifiedも付けられます。
Astroでは@astrojs/sitemapを入れると、静的に生成したページを拾ってサイトマップを作ってくれますよ。getStaticPaths()で記事ページを書き出していれば、その記事も入ります。一方でSSRモードの動的ルートは自動では入りません。さらに、ビルドで出てくるファイルはsitemap-index.xmlとsitemap-0.xmlです。Studio時代に「/sitemap.xml」でSearch Consoleへ送っていた場合は、登録し直すことになります。
作ったサイトマップは、Search Consoleのサイトマップレポートから送信します。ただ、送信したからといってクロールされるとは限りませんね。
サイトマップ内の更新日時には重要な変更があった日時を正しく反映させることが大切です。フッターの著作権表記の年を変えただけの日は当てはまりません。Googleは、この値が正しいと確かめられるときに使います。
お知らせ欄や求人情報だけをmicroCMSで更新する使い方はできますか？
お知らせと求人だけ担当者が自分で書き換えられればいい。こういうサイトの一部だけをCMSにする使い方は、microCMSが得意とするところです。表示部分とデータを切り離せるので、トップページの「お知らせ」欄や採用ページの募集一覧だけをmicroCMSから読み込む形にできます。
もし既存のWebサイトをStudioで構築している場合でも、Data Connect APIを活用すればmicroCMSのデータを読み込んで動的リストや動的ページに反映させられます。StudioのmicroCMS API連携で使えるのはリスト形式のAPIだけです。お知らせも求人も複数の記事が並ぶものなので、リスト形式で作れば困りません。連携の設定と、表示する要素への紐付けは最初に済ませておきます。
料金は、小さな更新欄ならHobbyプランから始められますよ。
| 項目 | Hobbyプラン |
|---|---|
| 料金 | 無料 |
| API | 最大5個 |
| メンバー | 最大3名 |
| データ転送量 | 月20GBまで（超過するとAPI停止） |
お知らせと求人で2個、APIはまだ余ります。ただ転送量を超えるとAPIが止まり、お知らせ欄が表示されなくなるので、アクセスが多いサイトでは料金表で上のプランも見比べておきましょう。
初期の組み込みさえ済ませてしまえば、エンジニアの手を借りることなく、広報や採用の担当者だけで新しいコンテンツを投稿できるようになりますね。求人の項目を増やしたいなど、入力欄の作りを変えるときは、表示側の手直しも合わせて必要になります。