2026年9月9日

ライブプレビュー機能をリリース 🚀

Yuto Nakano

Yuto Nakano

pitcms 開発者

編集した内容が、実際のサイトでどう見えるのか。公開前に確認したい場面は多いはずです。

ヘッドレスCMSは文字どおり表示部分を持たないため、編集した内容が実際のサイトでどう見えるかを確認するには、ひと工夫が必要になります。

pitcmsは、これを解決するため、以前からプレビュー機能がありましたが、今回新たにライブプレビュー機能を追加しました。

新しいライブプレビュー機能

この機能は編集中の内容をすぐにサイトのデザインで確認できる機能です。

そのため、タイトルを少し変えたときの折り返し、本文の改行、画像を入れたときのバランスなどを、保存前にリアルタイムですぐ確認できます。

ただし、従来のプレビューとは違い、サイト側にプレビュー専用ページの実装が必要ですが、サイトの構成やホスティングサービスに依存せず、SSR・SPA・静的サイトのどれでも使えるようになります。

このあたりの面倒な実装は、是非、pitcmsのドキュメントのURLを渡し、LLMに実装を頼んでみてください。 おそらく簡単にこなしてくれるはずです。

編集セッションを使わないプロジェクトでもプレビューが使えるように

以前、pitcmsでは編集セッションを使うかどうかをプロジェクトごとに選べるようにしました。

編集セッションを使わない場合は、コンテンツを開いて直接編集し、保存するとすぐ公開されるシンプルなワークフローで、従来のプレビューは編集セッションを前提としていたため、この運用では利用できないのが問題でした。

このライブプレビューなら、編集セッションを使わないプロジェクトでも、保存前の内容を確認できます。

まとめ

書いた内容をそのまますぐにプレビューできるというのはやはり便利です。

そしてこの機能はWordPress等のサーバーを持ったCMSでは、当たり前の機能です。

Jamstack(もはや死語ですが…)と呼ばれるような構成のサイトでは、このようなプレビュー機能の実現が面倒なことが気になり試していなかった人も多いのではないでしょうか?

実装コストがかかるのは確かですが、今は実装の大部分がAIに任せられる時代です。

実際にトップの動画のプレビュー機能も、pitcmsのドキュメントをLLMに渡して作ってもらったものです。

このように、現代ではこうした実装も以前よりかなり手軽に導入できるようになっています。

ぜひ使ってみてください!