/** Geminiが自動生成した概要 **/
SOY CMSとSOY ShopでHTMLモジュールの仕様を見直し、PHPファイルでHTMLモジュールを呼び出し可能に。HTMLモジュールの出し分けや複数出力、処理後のHTML出力などが可能になり、柔軟性が向上。詳細は公式サイト(saitodev.co/soycms/)で確認ください。
とにかく速いブログサイトを目指す
検索キーワード：「HTMLモジュール」
SOY CMSとSOY ShopでHTMLモジュールの見直しを行いました
SOY CMSのカスタムフィールドアドバンスドの見直しで表示速度の改善
/** Geminiが自動生成した概要 **/
SOY CMSのカスタムフィールドアドバンスドとサムネイルプラグインの表示速度改善に関する記事の要約です。
記事では、多数の記事を表示する際に発生する表示速度の低下について、その原因と解決策が解説されています。
主な原因は、記事ごとにカスタムフィールドの値を取得する際に、データベースへのアクセスが繰り返されるためでした。
解決策として、記事に紐づくカスタムフィールドの値を全記事分一度に取得し、必要な値のみに絞り込むことで、データベースアクセスを削減しました。
この改善により、特に記事数が50件や100件といった大量に表示する場合に、表示速度の向上が期待できます。
SOY CMSとSOY ShopにAceコードエディタを設置しました
/** Geminiが自動生成した概要 **/
SOY CMSとSOY ShopにJavaScript製のコードエディタ「Ace」が導入されました。導入箇所は両CMSのテンプレート、HTMLモジュール、PHPモジュールの編集画面です。以前の色付きエディタはブラウザの進化への対応と動作の不安定さを理由に廃止されましたが、block:idタグの視認性向上のため、Aceが採用されました。現在はHTML/PHPモードのみですが、今後便利な機能の有効化を検討中です。最新版はsaitodev.co/soycms/からダウンロード可能です。
SOY CMSで外部CSSファイルを自動でインライン化する
/** Geminiが自動生成した概要 **/
この記事では、SOY CMSで外部CSSを自動的にインライン化し、ページ表示速度を向上させる方法を紹介しています。通常、外部CSSファイルは別途リクエストが必要ですが、これをHTML内に直接埋め込むことでHTTPリクエスト数を減らし、レンダリング速度を改善します。
具体的には、cms:moduleタグとPHPを組み合わせた手法を用います。通常表示時は<link>タグで外部CSSを読み込みますが、SOY CMS経由での出力時は、PHPでCSSファイルの内容を読み込み、圧縮・整形した上で<style>タグ内に埋め込みます。これにより、SOY CMSを通さない場合は外部ファイル、SOY CMSを通す場合はインラインCSSと表示方法を自動で切り替えます。
この方法の利点は、CSSの管理を外部ファイルで行いつつ、出力時にはインライン化のメリットを享受できる点です。さらに、PHPでCSSの内容を操作できるため、ページごとに必要なCSSのみを出力するなど、転送量を最適化することも可能です。結果としてCore Web Vitalsの改善にも繋がります。
SOY CMS / Shopで別サイトのモジュールを読み込む
/** Geminiが自動生成した概要 **/
SOY CMS/Shopで、別サイトのHTMLモジュールを読み込む新機能が追加されました。サイトIDをプレフィックスとして`{siteId}.moduleName`のように指定することで、HTMLのみで構成されたモジュールを別サイトから呼び出せます。例えば、`{otherSite}.html.sample`と記述すれば、siteIdが"otherSite"のサイトにある"html.sample"モジュールが表示されます。ただし、SOY CMSとSOY Shop間でのモジュールの相互利用は不可で、データベースを参照するモジュールも使用できません。この機能は、最新版のSOY CMS/Shopパッケージで利用可能です。
【SEO対策】CSSの読み込み方の変更で高速化
/** Geminiが自動生成した概要 **/
CSSの読み込み方を変えることでSEO対策とページ表示速度の高速化を実現する方法を紹介。従来headタグ内に記述していた外部CSSをbody閉じタグ後へ移動することでレンダリングブロックを回避し、表示速度を向上させる。さらに、HTTP/2環境下ではファイル数削減が有効となるため、CSSをHTML内に直接記述する方法も提示。ただし、保守性向上のためにCMSのモジュール機能を活用し、HTML末尾にCSSを挿入する手法を推奨。この際、モジュールファイルの読み込みによる速度低下を防ぐため、最終HTMLのキャッシュ機構を併用することが重要となる。
SOY Shopで商品毎パーツモジュール選択読み込みプラグインを作成しました
/** Geminiが自動生成した概要 **/
SOY Shopの商品詳細ページで商品ごとに異なる定型文を表示するプラグインが開発されました。 通常、プラグインで定型文を設定するところを、このプラグインはパーツモジュール内で他のパーツモジュールを呼び出すことで実現しています。商品情報に設定したモジュールIDに対応するパーツモジュールを`shop:module="common.fixed_form_module"`で呼び出すと、商品に応じた定型文が表示されます。HTMLだけでなくPHPのモジュールも使用可能なので、動的な表示にも対応できます。このプラグインを含むパッケージはsaitodev.co/soycms/soyshop/からダウンロード可能です。
SOY CMSのラベル一覧でアコーディオンの機能を追加しました
/** Geminiが自動生成した概要 **/
SOY CMSのラベル一覧画面が見やすくなりました！ラベル数が増えると管理画面が煩雑になる課題に対し、ユーザーからの改修提案を元にアコーディオン機能が実装されました。分類ごとにラベルを折り畳めるようになり、UIが大幅に改善。 HTMLモジュールで共通部分を管理する等の対策も紹介しつつ、ユーザー参加型の開発を推進していることが伺えます。GitHubでのプルリクエストや問い合わせフォームからの連絡を歓迎しており、最新版はsaitodev.co/soycms/からダウンロード可能です。
SOY CMSの404NotFoundページをカスタマイズしてみよう
/** Geminiが自動生成した概要 **/
SOY CMSのデフォルト404 Not Foundページはシステムが判別できるため、カスタマイズしてみた。外部サイトからのリンクで404 Not Foundにアクセスした場合、そのまま離脱される可能性を考慮し、サイト内のよく読まれている記事一覧を表示するように変更。これにより、偶発的な404アクセスでも他の記事に興味を持ってもらい、離脱防止を図る。