ブログ内検索

プログラミング教材開発
大阪府高槻市原地区で肥料教室を開いています
検索キーワード:「SEO」
 

SOY CMSの記事で作成日と更新日が異なる時に更新日を出力できる仕組みを設けました

/** Geminiが自動生成した概要 **/
SOY CMSで、記事の更新日と作成日が異なる場合に更新日を出力する機能を追加しました。SEO対策として更新日の表示が推奨される一方、作成日も残したいというニーズに応え、`cms:id="is_updated"`タグを実装。作成日と更新日が同じ場合は作成日のみ、異なる場合は両方を表示します。構造化データプラグインとの併用も想定。詳細・ダウンロードは[https://saitodev.co/soycms/](https://saitodev.co/soycms/) にて。

 

SOY CMSで構造化データプラグインを作成しました

/** Geminiが自動生成した概要 **/
SOY CMSで構造化データプラグインを開発。AI進化でブログ訪問者が減少したため、SEO対策として記事リライト時の更新日を明記する仕組みを追加。構造化データでJSON形式の更新日時を自動挿入し、HTTPヘッダーにもLast-Modifiedを挿入(HTMLキャッシュプラグインとの併用時は構造化データに委託)。パッケージはサイトからダウンロード可能。

 

【SEO対策】Bootstrapを利用しつつ、Core Web Vitalsのスコアを改善する

/** Geminiが自動生成した概要 **/
この記事は、Bootstrapを用いてWebサイトのCore Web Vitalsスコアを向上させる方法を解説しています。具体的には、BootstrapのボタンコンポーネントのCSSのみを抽出し、ページHTMLにインライン挿入する方法を紹介しています。 手順としては、Bootstrapのソースファイルから必要なSCSSファイルをサイトディレクトリに配置し、SOY CMS側でSCSSコンパイルの設定を行います。これにより、ボタン用のCSSがページに直接記述され、外部ファイルの読み込みが不要になります。 さらに、生成されたCSSを圧縮してインライン化することで、ページ表示速度の向上を目指します。ただし、毎回SCSSをコンパイルするのは非効率なので、CSSやページ全体のキャッシュ化が推奨されています。

 

【SEO対策】PageSpeed Insightsのユーザー補助のスコア100を目指す

/** Geminiが自動生成した概要 **/
記事では、PageSpeed Insightsのユーザー補助スコアを100点にするための取り組みが紹介されています。 具体的には、記事タイトル下のカテゴリ名のリンクで指摘されていた「背景色と前景色には十分なコントラスト比がありません」という問題を解決しています。 解決策としては、WebAIMのConstract Checkerを用いて、背景色と文字色のコントラスト比を調整しました。スライダーで色を調整し、Passになるまで繰り返した結果、問題を解消できました。 ただし、サムネイル画像の低解像度に関する指摘は未解決で、別の対応策を検討する必要があるとのことです。

 

SOY CMSの各プラグインのアイコンの変更方法について

/** Geminiが自動生成した概要 **/
2007年リリースのSOY CMSには、あまり知られていない機能が存在します。それは、プラグイン管理画面に表示される各プラグインのアイコンをカスタマイズできる機能です。 初期状態ではすべてのプラグインのアイコンが豆蔵アイコンになっていますが、128x128ピクセルのGIF画像を「icon.gif」というファイル名でプラグインディレクトリに配置することで、任意のアイコンに変更できます。 これはリリース当初から存在する機能でしたが、当時のプラグイン数は少なく、あまり活用されませんでした。しかし、10年以上経過しプラグイン数が増加した現在、この機能を活用することで、目的のプラグインを見つけやすくなる可能性があります。

 

SOY Shopで設定周りのデータベース参照回数を減らし表示速度を改善

/** Geminiが自動生成した概要 **/
SOY Shopの表示速度改善のために、データベース参照回数を減らす対策を行いました。 従来は各種設定状況やプラグインの有効状態確認の度にデータベースを参照していましたが、これを改善し、必要な設定を事前に取得・保持するように変更しました。具体的には、よく参照する設定はメモリ上に保持し、プラグインの有効状態は配列で管理することで、データベースへのアクセス回数を減らしています。 この結果、ページ表示の度に発生していたデータベースへのアクセスが減少し、表示速度の向上が期待できます。

 

SOY CMSのフロントコントローラで例外処理の大幅な削減

/** Geminiが自動生成した概要 **/
本記事では、SOY CMSのフロントコントローラにおける例外処理の効率化について解説しています。従来のtry-catchによる大域的な例外処理は、パフォーマンスに影響を与える可能性がありました。 そこで、例外処理を廃止し、エラー判定を明示的に行うことで、処理の軽量化を目指しました。具体的には、エラー発生時に変数にExceptionオブジェクトを格納し、処理の最後にエラーの有無を判定して対応する処理を行うように変更しました。 この変更による目立った速度向上は確認されませんでしたが、ブロックを多用した複雑なサイトでは効果を発揮すると期待されます。

 

SOY CMSとSOY ShopでPHP8.1系に対応しています

/** Geminiが自動生成した概要 **/
SOY CMSとSOY ShopがPHP8.1に対応しました。PHP8.1ではstrlen関数にnullを渡すとエラーになるなど、型の扱いが厳格化されました。そこでSOY CMSも内部のデータ型チェックを強化し対応しました。PHP7系でも動作しますが、不安な方はPHPのバージョンを据え置いてください。今回の修正によりPHP7系でも動作は高速化する可能性があります。 さらに高速化を狙う場合は、OPCacheの更新チェックの頻度を下げる設定が有効です。PHPファイルの更新頻度に合わせて、opcache.revalidate_freqの値を調整することで、無駄なチェックを減らしパフォーマンスを向上できます。

 

トリュフ型キノコのショウロ

/** Geminiが自動生成した概要 **/
ショウロはマツ林に生えるトリュフ型の高級キノコで、菌根菌のため人工栽培ができない。山火事などで生態系が撹乱された場所にいち早く生えるマツと共生する先駆的な性質を持つ。原始的なキノコに見える柄のない形状だが、DNA解析の結果、柄のあるキノコよりも後に進化したと考えられている。これは、森で生えるキノコが先に現れ、後に撹乱環境で生えるキノコが現れたという進化の流れを示唆している。ショウロは共生するクロマツに何らかの利益を与えている可能性がある。

 

様々な依頼からこれからの働き方を見た

/** Geminiが自動生成した概要 **/
新型コロナの影響で事業への影響を覚悟していた筆者は、逆に変化を見越した企業からのWeb開発依頼が殺到した。 非接触型の予約注文システムや、代理販売・寄付サイトなど、コロナ禍のニーズに応える開発が多かった。 また、SEO対策情報の需要も高まった。 特に印象的だったのは、テレワーク向け研修システムの開発だ。 音声チャットとWebアプリを組み合わせたボードゲーム形式で、セールスの模擬体験を行うもので、オフライン研修以上の価値を感じたという。 コロナ禍でWeb技術の活用が模索された一年であり、この流れは今後も加速し、Web技術を活用できない企業は淘汰されるだろうと予測している。

 

php-webdriverでcontent-visibility:auto;を利用しているページのリンクをクリックする

/** Geminiが自動生成した概要 **/
php-webdriverで`content-visibility:auto;`を使用したサイトのリンクをクリックする際、遅延読み込みにより要素が見つからない問題が発生する。`getLocationOnScreenOnceScrolledIntoView()`だけでは不十分で、一度スクロール後にページトップに戻り、再度徐々にスクロールすることで要素を確実に表示させクリックを成功させる方法を紹介。これはページ表示速度の高速化と遅延読み込みによる影響への対策。また、SeleniumによるアクセスをGoogle Analyticsから除外する方法についても言及し、誤った計測を防ぐための設定についても触れている。さらに、関連するelement click interceptedエラーへの対処法の記事へのリンクも提供。

 

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の改善にも繋がります。

 

【SEO対策】Google Analyticsのスクリプトをページ読み込み直後にする

/** Geminiが自動生成した概要 **/
HTMLScriptElement は `<script>` タグを制御するインターフェース。`src` 属性で外部スクリプトを読み込み、`async` 属性を設定すると解析を妨げずに非同期でスクリプトを実行、`defer` 属性はHTML解析完了後に実行、`type` 属性でスクリプト言語を指定。`text` 属性に直接コードを記述も可能。`onload` イベントで読み込み完了を検知、`onerror` でエラー処理。`crossorigin` 属性はCORSリクエストを制御。`integrity` 属性はSubresource Integrity を使用し、読み込んだスクリプトの整合性を検証。`referrerpolicy` はリファラーヘッダーを制御。`nomodule` はES Modulesをサポートしないブラウザでスクリプトを実行。

 

SOY CMSのCumulative Layout Shiftプラグインにpicture要素設定を追加しました

/** Geminiが自動生成した概要 **/
SOY CMSのCore Web Vitals改善用プラグイン「Cumulative Layout Shift」にpicture要素設定が追加されました。 picture要素はレスポンシブ画像を実現するHTMLタグで、画面幅に応じて最適な画像を出力します。プラグインでは、imgタグにsize属性を自動挿入するか、pictureタグで囲うかを選択できます。ただし、既にHTMLテンプレートでpictureタグを使用している場合は正常に動作しないため注意が必要です。この機能はsaitodev.co/soycms/で提供されるパッケージに含まれています。画像のwidthが小さい場合はsize属性が自動挿入されます。

 

SOY CMSとSOY ShopでPHP8.0系に対応しています

/** Geminiが自動生成した概要 **/
PHP 8.0への対応でSOY CMSとSOY Shopが高速化しました。主因はJITコンパイラですが、ビルドイン関数date、strlenの挙動変化に伴うコード修正も寄与しています。HTMLListのダミーオブジェクト処理で発生していたdate関数のエラーを修正。PHP7系でも動作します。プラグインの動作確認は順次実施予定。PHPのOPCache設定変更で更なる高速化も期待できます。OPcache.validate_timestampsを0にすると、PHPファイルのタイムスタンプ確認を無効化し、パフォーマンスが向上しますが、ファイル更新が反映されなくなるため、開発中は1、運用時は0にするのが推奨されます。opcache.revalidate_freqで更新頻度を設定できます。

 

SOY CMSでスマホでブログ投稿プラグインを作成しました

/** Geminiが自動生成した概要 **/
Core Web Vitalsは、ユーザーエクスペリエンスを測定する重要なSEO指標です。特にLargest Contentful Paint(LCP)はページの読み込み速度を、First Input Delay(FID)はインタラクティブ性、Cumulative Layout Shift(CLS)は視覚的な安定性を評価します。これらを改善することで、ユーザーの離脱率を減らし、SEOランキング向上に繋がります。画像最適化はCore Web Vitals改善の有効な手段で、Guetzliは高品質を維持しながらファイルサイズを大幅に削減できるツールです。Guetzliを用いることで、LCPの改善に大きく貢献し、結果としてWebサイトのパフォーマンス向上とSEO対策に繋がります。

 

【SEO対策】Core Web Vitals

/** Geminiが自動生成した概要 **/
Google Analyticsのスクリプトをページ読み込み直後に移動することで、Core Web Vitals、特にFID(First Input Delay)を改善する方法を解説しています。通常、Google Analyticsのスクリプトは</body>直前に配置されますが、これだとスクリプトのダウンロードと実行が完了するまでブラウザが他の操作を受け付けず、FIDが悪化します。記事では、async属性を追加し<head>内に移動することで、スクリプトを非同期で読み込み、ブラウザのレンダリングを妨げないようにする方法を紹介。async属性はIEでは機能しないため、IE用に条件分岐で対応する必要性も説明しています。さらに、Google Tag Managerを使用している場合は、設定変更だけで対応可能であることも解説しています。これらの修正により、FIDが大幅に改善され、ユーザーエクスペリエンスの向上が期待できます。

 

PHPのOPCacheで生成されるキャッシュを見る

/** Geminiが自動生成した概要 **/
PHPのオペコードを確認するにはVLD拡張モジュールを使用します。VLDはPHPスクリプトをコンパイルし、生成されたオペコードを人間が読める形式で出力します。出力には、各オペコードの行番号、オペコードの種類、オペランド、結果などが含まれます。これにより、PHPスクリプトの実行方法を詳細に理解し、パフォーマンスのボトルネックを特定するのに役立ちます。VLDのインストールはPECLを利用し、php.iniで`vld.active=1`などを設定することで有効化できます。関数`vld_dump()`で特定の関数のオペコードを出力することも可能です。

 

【SEO対策】PHPのOPCacheの更新チェックの頻度を下げる

/** Geminiが自動生成した概要 **/
PHPのOPCacheは、バイトコードをキャッシュしてパフォーマンスを向上させる機能。設定項目`opcache.revalidate_freq`はスクリプトの更新チェック頻度を制御する。デフォルトは2秒だが、CMSサイト等でPHPスクリプトの更新が少ない場合は、この値を大きくすることで更新チェックのオーバーヘッドを減らせる。設定変更は`php.ini`で`opcache.validate_timestamps`を有効化し、`opcache.revalidate_freq`を例えば86400(1日)に変更、サーバー再起動で行う。今回の検証ではパフォーマンスの顕著な差は見られなかった。

 

【SEO対策】content-visibility:auto;でコンテンツの遅延読み込み

/** Geminiが自動生成した概要 **/
Chrome 85から導入されたCSSプロパティ`content-visibility: auto;`を利用してコンテンツの遅延読み込みを試みた。このプロパティは、コンテンツが画面に表示されるまでレンダリングを遅延させることでパフォーマンス向上に繋がる。 具体的には、`<head>`タグ内にスタイルを記述し、遅延させたい要素に`.content-lazy`クラスを付与した。ファーストビューとなるPC表示時は`content-visibility: visible;`、スマホ表示時はメディアクエリで`content-visibility: auto;`を適用することで、表示状況に応じて遅延読み込みを制御している。 さらに、常に遅延読み込みさせたい要素には`.content-lazy-always`クラスを付与し、`content-visibility: auto;`を適用した。 サイトの読み込み速度が元々速かったため、今回の変更による効果測定は明確ではなかった。

 

SOY Shop版HTMLキャッシュプラグインを追加しました

/** Geminiが自動生成した概要 **/
SOY Shop 2にHTMLキャッシュプラグインが追加され、高速化が可能になった。カートウィジェットの問題は非同期通信で解決し、カート内商品数と合計金額をJSONで取得できる。ヤマトリップショップではこの機能とLazyLoadプラグイン、jpegoptimにより、ページ表示速度が3.3秒から1秒以下になり、PageSpeed InsightsのスコアもPCで90を超えた。スマホは90に届かなかったが、Gueztliによる画像最適化で改善が見込まれる。SOY Shop 2正式版は近日公開予定。

 

SOY CMSでLazyLoadプラグインを作成しました

/** Geminiが自動生成した概要 **/
SOY CMSのLazy Loadプラグインは、記事中の画像3枚目以降に`loading="lazy"`属性を付与し、遅延読み込みを実現することでSEO対策とPageSpeed Insightsスコア向上に貢献します。リソース消費を軽減するため、HTMLキャッシュプラグインとの併用が推奨されます。 関連するHTML圧縮の記事では、HTML、CSS、JavaScriptの圧縮によりファイルサイズを削減し、ページの読み込み速度向上によるSEO対策、ユーザーエクスペリエンス向上、サーバー負荷軽減などのメリットが得られると説明されています。gzip圧縮、minifyツール、SOY CMSのHTML圧縮プラグインの利用方法などが紹介されています。

 

【SEO対策】Lazy Load

/** Geminiが自動生成した概要 **/
SEO対策として、画像の遅延読み込み(Lazy Load)はページ表示速度の改善に有効です。ファーストビュー以外の画像は、ページ全体が表示されてから読み込まれます。重い画像や動画を遅延させることで、表示速度が向上します。 実装は、imgタグに`loading="lazy"`属性を追加するだけです。Chrome 75以降で対応しており、他ブラウザではjQueryプラグインが必要ですが、当サイトではjQueryによる速度低下を避けて使用していません。 PC表示では効果が見られませんでしたが、スマホ表示ではファーストビュー外に画像が配置されるため、Lazy Loadの効果が大きいです。 関連記事として、SOY CMSとSOY Shop向けにLazy Loadプラグインが紹介されています。

 

SOY InquiryのMySQL版でIPv6経由でのアクセスに対応しました

/** Geminiが自動生成した概要 **/
SOY InquiryのMySQL版がIPv6アクセスに対応しました。従来はIPv4アドレスのみ記録していたため、IPv6環境下ではエラーが発生し問い合わせが中断される問題がありました。今回のアップデートでIPアドレスカラムの文字数上限を拡張し、IPv6アドレスも記録可能になりました。同様の変更はSOY Shopのアクセスブロック機能にも適用されています。最新版は公式サイト(https://saitodev.co/soycms/soyinquiry、https://saitodev.co/soycms/soyshop)からダウンロード可能です。

 

【SEO対策】HTMLの圧縮

/** Geminiが自動生成した概要 **/
HTMLの圧縮は、Webページの表示速度向上とデータ転送量削減に効果的なSEO対策です。HTMLソースコードには、可読性向上のために改行やタブが含まれていますが、これらは表示には不要なため、転送前に削除することでデータ量を減らせます。SOY CMSでは、HTML圧縮プラグインを利用することで、テンプレート編集時の可読性を維持しつつ、転送時には自動的にHTMLを圧縮できます。このプラグインは、HTMLキャッシュプラグインや静的化プラグインと併用することで、圧縮処理の負荷を軽減し、更なる高速化を実現します。HTML圧縮プラグインを含むパッケージはsaitodev.co/soycms/からダウンロード可能です。

 

SheetJSを試してみた

/** Geminiが自動生成した概要 **/
SheetJSは、ブラウザ上でHTMLテーブルから簡単にExcelファイルを生成できるJavaScriptライブラリです。デモを改修し、テーブル要素を指定して`XLSX.utils.table_to_book`でブックオブジェクトを生成、`XLSX.writeFile`でExcelファイル(xlsx)として出力する簡単なコードで実装できます。 表示されたHTMLテーブルのダウンロードボタンをクリックするだけで、テーブル構造を保持したExcelファイルがダウンロードされます。著者は従来PHPのPhpSpreadSheetを使用していましたが、SheetJSも選択肢に加えるとのことです。

 

【SEO対策】サイトの滞在時間を増やす

/** Geminiが自動生成した概要 **/
SEO対策としてサイト滞在時間を増やす施策を行っている。記事の文量を増やすのではなく、一度のアクセスで複数記事を読んでもらうことを目指している。Google Analyticsでアクセス急上昇中の記事(例:「リン鉱石から考える未来のこと」)を分析し、記事末尾に関連する他記事へのリンクを追加することで、読者が他の記事にもアクセスする導線を増やし、サイト全体の平均滞在時間増加を狙う。アクセス増加の可視化は容易ではないが、読者の回遊促進による滞在時間増加を期待している。

 

SOY CMSの静的化プラグインで高速化

/** Geminiが自動生成した概要 **/
SOY CMSの静的化プラグインが改良され、ページ単位での静的化設定、全プラグイン実行後の静的化処理、ページ更新時の静的ファイル一括削除、サイトキャッシュ削除時の静的ファイル削除が可能になった。従来の静的化はフロントコントローラやRewriteモジュールの処理を回避することで高速化を実現していたが、今回の改良でさらに柔軟性と効率性が高まった。HTMLキャッシュプラグインと併用することで、標準ページは静的化、ブログページはHTMLキャッシュと使い分け、サーバー負荷軽減に効果的。改良版はsaitodev.coからダウンロード可能。高速化に加え、SEO対策にも有効。

 

SOY CMSのHTMLキャッシュプラグインで高速化

/** Geminiが自動生成した概要 **/
SOY CMSのHTMLキャッシュプラグインは、サイト高速化を実現する強力なツールです。従来の静的化プラグインの欠点を克服し、標準ページを含む全ページをキャッシュ対象としつつ、ページごとにキャッシュの有効/無効を設定できる柔軟性を備えています。これにより、SOY Shop連携など動的なコンテンツを含むページでも最適なパフォーマンスを実現できます。HTMLキャッシュは、PageSpeed Insightsのスコア向上に貢献するだけでなく、メディア露出時の急激なアクセス増加にも対応できる安定性を提供します。内部SEO対策としても有効で、情熱大陸放送後のアクセス集中を乗り切った事例からもその効果が実証されています。パッケージはsaitodev.coからダウンロード可能です。SEO対策に関する詳細はsaitodev.co/category/SEOをご覧ください。

 

【SEO対策】他のCMS向けの総当り攻撃を避ける

/** Geminiが自動生成した概要 **/
サイバー攻撃の増加は深刻な問題であり、特にCMSを狙った攻撃は増加傾向にある。記事ではSOY CMSへの攻撃事例を通して、その脅威を具体的に示している。攻撃者は管理画面へのログインを試みたり、脆弱性を突いて不正アクセスを試みる。対策としては、管理画面のURLを変更したり、.htaccessでアクセス制限をかけることが有効である。また、WAFの導入やセキュリティプラグインの活用も推奨されている。常に最新の情報に注意し、適切なセキュリティ対策を実施することで、被害を最小限に抑えることが重要である。

 

【SEO対策】SNS系のボタンを自作する

/** Geminiが自動生成した概要 **/
PageSpeed Insightsのスコア向上のため、公式SNSボタンを自作のものに置き換えた。公式ボタンはJavaScriptを使用し、ページ速度に悪影響を与えていた。記事詳細ページのTwitterボタンを例に、自作方法を紹介。HTMLでは`<a>`タグでツイートリンクを作成し、記事タイトルとURLを動的に設定。CSSでボタンのスタイルを定義。SOY CMSでは`cms:id="title_plain"`と`cms:id="entry_url"`を用いて記事タイトルとURLを取得し、JavaScriptを使わずにツイートボタンを実装。これにより、ページ読み込み速度が向上し、PageSpeed Insightsのスコアも改善された。

 

【SEO対策】CSSの読み込み方の変更で高速化

/** Geminiが自動生成した概要 **/
CSSの読み込み方を変えることでSEO対策とページ表示速度の高速化を実現する方法を紹介。従来headタグ内に記述していた外部CSSをbody閉じタグ後へ移動することでレンダリングブロックを回避し、表示速度を向上させる。さらに、HTTP/2環境下ではファイル数削減が有効となるため、CSSをHTML内に直接記述する方法も提示。ただし、保守性向上のためにCMSのモジュール機能を活用し、HTML末尾にCSSを挿入する手法を推奨。この際、モジュールファイルの読み込みによる速度低下を防ぐため、最終HTMLのキャッシュ機構を併用することが重要となる。

 

【SEO対策】IPv6

/** Geminiが自動生成した概要 **/
IPv6はSEO対策に有効な通信速度改善策。IPv4アドレス枯渇問題を解決する後発の規格で、理論上アドレス割り当ては無限大。16ビット単位の16進数表記で、IPv4より最適化されている。saitodev.coのようなWebサイトアクセスでは、DNSサーバでドメイン名からIPv4/IPv6アドレスを取得し、サイトサーバへアクセスする。IPv6設定はサーバ会社ごとに異なるが、DNS設定ではIPv4をAレコード、IPv6をAAAAレコードに登録する。設定確認は`ping -4/-6 ドメイン名`コマンドで可能。

 

【SEO対策】Google Mapsの遅延出力

/** Geminiが自動生成した概要 **/
Google Mapsの遅延出力により、PageSpeed Insightsのスコアが80点台から100点に改善。iframeを隠して「地図を表示」ボタンを表示し、クリック後3秒後にGoogle Mapsをロードするコードを追加した。これにより、ページの読み込みが遅くなるGoogle Mapsの出力を遅らせ、ページのパフォーマンスを向上させた。

 

【SEO対策】最終産物のHTMLのキャッシュで高速化

/** Geminiが自動生成した概要 **/
SQLiteを採用するSOY CMSでサイト表示を高速化するため、最終生成HTMLのキャッシュ化機能を導入した。データベースやファイル読み込みを省略することでPageSpeed Insightsのスコアが大幅に向上。この機能はHTMLキャッシュプラグインをインストール後、index.php内のexecute_site()をexecute_site_static_cache()に変更することで有効になる。ただし、カート内容の表示など動的なコンテンツはキャッシュ化できないため、リッチなサイト構成との両立は難しい。高速化とSEO対策には見栄えよりも内容重視の割り切りが必要となる。SOY Shopでも同様のキャッシュプラグインが開発されている。

 

【SEO対策】データベースチューニング

/** Geminiが自動生成した概要 **/
SOY Shopのデータベースパフォーマンス改善にはインデックスの見直しが効果的です。 商品点数やアクセス数の増加に伴い、データベースへの負荷が増大し表示速度が低下することがあります。 特に商品検索や絞り込み機能は複雑なクエリを実行するため、適切なインデックスが設定されていないとパフォーマンスに大きな影響を与えます。 インデックスはデータベース内の特定の列に付与されることで、データ検索の高速化を実現します。 SOY Shopでは、商品コードや商品名、公開状態など、頻繁に検索される項目にインデックスを設定することが推奨されています。 しかし、不要なインデックスは更新処理のオーバーヘッドとなるため、適切なインデックスを選択することが重要です。 記事では、phpMyAdminを用いたインデックスの確認方法、SOY Shop管理画面からのインデックス設定方法、そしてインデックス設定の注意点が解説されています。 インデックスを適切に設定することで、データベースの負荷を軽減し、表示速度の向上、ひいてはユーザーエクスペリエンスの向上に繋がるとしています。

 

【SEO対策】実行環境のバージョンを上げて高速化

/** Geminiが自動生成した概要 **/
PageSpeed Insightsでスコア100を目指すため、サーバー側の処理速度向上に取り組んだ。SEO対策として、PHP製CMSを使う場合、PHPバージョンを最新に保つことが重要。PHP7系はOPCacheにより高速化されており、バージョンアップだけでスコア向上も期待できる。VPSサーバでのバージョンアップ方法は過去記事を参照。PHP8ではJitコンパイラ導入で更なる高速化が見込まれる。かつてGo言語への移植も検討したが、PHPでスコア100達成できたため中止した。

 

【SEO対策】キャッシュの利用でデータ転送量を削減

/** Geminiが自動生成した概要 **/
SEO対策として、データ転送量削減のためブラウザキャッシュを活用する方法を解説。HTML以外のファイルは一度取得すれば再取得不要なため、ApacheのExpiresモジュールでブラウザにキャッシュさせる。Ubuntu環境でApache2.4を前提に、a2enmod expiresコマンドでモジュールを有効化し、.htaccessにファイルタイプごとにキャッシュ期間を設定する記述を追加すれば完了。HTMLは即時、CSS/JavaScriptは10日間、画像は15日間キャッシュされるようになる。

 

【SEO対策】Gueztliで画像のファイルサイズの削減

/** Geminiが自動生成した概要 **/
この記事では、ウェブサイトのSEO対策として画像ファイルサイズの削減に焦点を当てています。GoogleのJPEGエンコーダGuetzliを導入することで、画像品質を維持しながらファイルサイズを大幅に削減できることを実例で示しています。具体的には、115.8kbの画像がGuetzliによって9.4kbまで圧縮され、80%以上の削減に成功しています。また、PageSpeed InsightsによるWebP等の次世代フォーマットの推奨についても触れつつ、Safari非対応やPageSpeed Module導入によるパフォーマンス低下を理由に現状では採用を見送っていることを説明しています。

 

【SEO対策】HTTP/2

/** Geminiが自動生成した概要 **/
HTTP/2は、HTTP/1.1以前のバージョンに比べて、複数のファイルを並列でダウンロードできるため、ウェブサイトの表示速度を大幅に向上させます。これにより、リクエスト回数とインターネット全体の回線使用量が削減されます。しかし、一度に送受信されるデータ量が増えるため、画像サイズの最適化が重要になります。ApacheサーバーでHTTP/2を有効にする方法は、別記事で紹介されています。より詳細な情報は、オライリーの"Real World HTTP"で学ぶことができます。現在、LiteSpeedのようなサーバーでは、さらに高速なHTTP/3(QUIC)が利用可能ですが、当サイトはApacheのHTTP/3対応を待っています。

 

【SEO対策】データの転送量の削減の為の圧縮

/** Geminiが自動生成した概要 **/
個人事業主がSEO対策として行ったデータ転送量削減策を紹介。コンテンツの充実を最優先としつつ、今回はデータ圧縮に着目。GoogleのPageSpeed Insightsを参考に、Brotliアルゴリズムを用いてデータ転送量の削減を試みた。Brotliは対応サーバーが限られるため、Deflateやgzipも選択肢として提示。HTMLや画像のデータ量削減は今後の課題とし、データ転送に関する更なる改善策を予告している。

 

SOY CMSで記事詳細高速表示プラグインを作成しました

/** Geminiが自動生成した概要 **/
SEO対策として表示速度向上に取り組んでいるサイト運営者が、SOY CMSの記事詳細表示を高速化するプラグインを開発した。従来、柔軟性のため記事テーブルのエイリアスカラムにUNIQUEインデックスを貼っていなかったが、今回ユニーク制約を設けることで高速化を実現。同時に、記事の投稿時刻にもインデックスを追加し、アーカイブページの表示速度も向上させた。投稿時刻は同時刻投稿の場合、1秒ずらす仕様とした。このプラグインはダウンロード後、有効化することでデータベースに反映される。

 

SOY CMSのブログ記事SEOプラグインでメタタグの出力設定を追加しました

/** Geminiが自動生成した概要 **/
SOY CMSブログ記事SEOプラグインがアップデート。記事詳細ページでメタ情報(キーワード、説明)未入力の場合、従来はトップページのメタ情報を継承していたが、新設定で継承の有無を選択可能に。また、記事にメタ情報がない場合はメタタグ自体を出力しない設定も追加(`b_block:id="is_entry_description"`等を使用)。これにより、メタ情報未入力の記事でも表示速度低下を回避できるようになった。新機能搭載パッケージはsaitodev.co/soycms/ からダウンロード可能。

 

SOY Shopの商品一覧ページで変則的な並び順の対応をしてみる

/** Geminiが自動生成した概要 **/
SOY Shopでカテゴリごとに商品一覧の並び替え順を変える方法。カスタムフィールドで「使用人数」や「使用温度」などの項目を作成し、ソートに利用する設定にする。データベースのカラム型を数値に変更。soyshop.item.list拡張ポイントでプラグインを作成し、getSortメソッドでカテゴリごとに異なるソート条件を返す。テントなら使用人数の降順、シュラフなら使用温度の昇順など。標準設定は価格の昇順にする。URLを変えずに同一ページで並び替え順を変えられるため、SEOにも有効。

 

SOY CMSのキャッシュモードで表示の高速化

/** Geminiが自動生成した概要 **/
SOY CMSのブログでデータベースをMySQLからSQLiteに変更することで、パフォーマンス向上とデータ管理の簡素化が期待できます。特に共有サーバーなど、MySQLのチューニングが難しい環境では効果的です。変更手順は、まずphpMyAdmin等でMySQLのデータをエクスポートし、SQLite形式に変換します。次に、SOY CMSの設定ファイルでデータベース接続設定をSQLiteに変更し、変換したデータをインポートします。記事データが多い場合、変換とインポートに時間がかかるため、夜間などアクセスが少ない時間帯に行うのがおすすめです。また、SQLiteはMySQLと比べて同時アクセス性能が劣るため、高トラフィックのサイトには不向きです。変更前にデータベースのサイズやアクセス状況を確認し、SQLiteのメリット・デメリットを理解した上で検討することが重要です。

 

SOYCMSのブログでデータベースをMySQLからSQLiteに変更する

/** Geminiが自動生成した概要 **/
SOY CMSブログで表示速度低下に悩んでいたところ、MySQL版が遅い共有サーバ環境のため、SQLiteに移行するプラグインを開発しました。ベンチマークは1.3倍改善、表示速度は2秒以下に。MySQL→SQLite、SQLite→MySQLの切り替えが可能で内部SEO対策にも有効です。Gravatar連携など一部プラグインは未対応ですが、カスタムフィールド等は対応済み。使用前にバックアップと注意点記事の確認を推奨。ダウンロードはsaitodev.co/soycms/から。この開発を通して、MySQL専用CMSは共有サーバではSEO的に不利になりやすいと感じました。

 

SOY CMSのブログブロックの使用を制限して、ブログページの高速化

/** Geminiが自動生成した概要 **/
Googleは常時SSL化をランキング要因の一つとしています。つまり、サイトがHTTPSを使用しているかどうかは、検索結果の順位に影響を与えます。しかし、その影響は軽微であり、他のSEO対策と比べると優先度は低いと言えるでしょう。 常時SSL化の主なメリットはセキュリティの向上です。ユーザーの情報を暗号化することで、盗聴や改ざんのリスクを軽減できます。これはユーザーの信頼感向上に繋がり、間接的にSEO効果に繋がる可能性があります。 また、常時SSL化によってサイトの表示速度が向上する可能性も指摘されています。Googleはサイトの表示速度もランキング要因としているため、結果的にSEOに良い影響を与える可能性があります。 しかし、常時SSL化自体が劇的なSEO効果をもたらすわけではないので、他の重要なSEO対策を疎かにしてまで優先するべきではありません。コンテンツの質やユーザーエクスペリエンスの向上など、他のSEO対策と並行して行うことが重要です。

 

SOY CMSの開発秘話前編

/** Geminiが自動生成した概要 **/
SOY CMSは、WordPressとは異なり、Webデザイナーの負担軽減を主眼に開発されたCMSです。京都大学発のベンチャー企業で誕生したSOY CMSは、度重なる仕様変更に悩まされるWebアプリケーション開発の経験から、デザイナーとプログラマの作業を完全に分離する仕組みを考案しました。HTMLコメントや属性値を利用してプログラムを埋め込むことで、デザイナーはプログラマに相談することなくデザイン変更が可能になり、プログラマもデザイナーに影響を与えることなくプログラム修正を行えます。この仕組みを支えるのがSOY2フレームワークであり、SOY CMSはこのフレームワークを搭載したCMSとして誕生しました。サイト構築後のSEO対策やネットショップ運営において、デザイン変更の容易さは大きなメリットとなります。

 

Node.js、Socket.IOとLet's Encryptでチャットアプリの常時SSL化

/** Geminiが自動生成した概要 **/
記事では、インターネット上のパケットを傍受して中身を確認する方法を解説しています。使用ツールはWiresharkで、無線LANに接続するPCと、傍受対象のスマホを同じネットワークに接続します。スマホと通信するパケットはPCも受信するため、Wiresharkでフィルタリングしてスマホの通信のみを抽出します。HTTP通信の場合は、パスワードなどの重要な情報が平文で送信されていることが確認できます。HTTPS通信の場合は暗号化されているため、傍受しても内容は解読できません。この実験を通して、HTTP通信の危険性とHTTPS通信の重要性を示しています。

 

さくらインターネットの共有サーバでLet's Encryptを利用して常時SSL化してみた

/** Geminiが自動生成した概要 **/
さくらインターネットの共有サーバーでLet's Encryptを使って簡単に常時SSL化する方法が紹介されています。コントロールパネルから数クリックで設定でき、20分ほどで完了します。SOY CMS利用者は、追加の設定が必要です。記事内の画像パスがHTTPのままになっている場合、ブラウザで警告が表示されるため、SOY CMSの設定画面からサイトURLをHTTPSに変更する必要があります。 記事本文中の画像パスもHTTPSに書き換えるか、.htaccessでリダイレクト設定を行うことで対応できます。 これらの対応により、サイト全体をHTTPSでアクセスできるようになり、セキュリティとSEO効果の向上が期待できます。

 

VPSサーバでWebサーバ構築のハンズオンを行いました

/** Geminiが自動生成した概要 **/
アップラインの会議室にて、ネットメディア運営者向けにVPSサーバでのWebサーバ構築ハンズオンを実施。お名前.comドメインのVPSサーバへの紐付けから、Apache2.4、PHP7、Let's Encrypt(常時SSL)、HTTP/2を用いたWebサーバの構築までを体験。一見難解なVPSサーバも、手順に沿ってコマンドを実行すれば、SSL設定などはむしろ容易。この機会により高速・安全なWebサイト運営を目指せる。関連として、当サイトもHTTP/2対応で高速化を実現した事例を紹介。

 

SOY CMSで常時SSL化対応後の各記事内の画像のパスの対応

/** Geminiが自動生成した概要 **/
SOY CMSの常時SSL化後、記事内の画像パスがhttpのままとなり、エラーが発生する問題を解決するプラグインが作成されました。記事内の画像はhttpで始まる絶対パスで挿入されるため、手動またはデータベース操作で修正が必要ですが、このプラグインを使えば記事内の画像パスを一括でスラッシュから始まる絶対パス(例:/site/files/hoge.jpg)に変換でき、常時SSLに対応できます。プラグイン名は「画像URL変換プラグイン」で、saitodev.co/soycms/からダウンロード可能です。

 

ApacheサーバでBrotliを使用してみた

/** Geminiが自動生成した概要 **/
常時SSL化はSEO上効果がある。GoogleはHTTPSをランキングシグナルとして使用しており、サイトのセキュリティ向上はユーザー体験の向上に繋がるため、間接的にSEO効果が見込める。ただし、HTTPS化自体が劇的なランキング上昇をもたらすわけではない。相対的にHTTPサイトより優位になる程度の影響と考えられる。また、サイト表示速度の向上も期待できるが、適切な設定が必要。常時SSL化は必須事項となりつつあり、SEO対策としてだけでなく、セキュリティ向上とユーザーへの信頼感醸成という観点からも重要である。

 

常時SSL化はSEO上効果はあるか?

/** Geminiが自動生成した概要 **/
常時SSL化はSEOに効果があると考えられる。理由は、常時SSL化で利用可能になるHTTP/2がページ表示速度を劇的に向上させるため。Googleは表示速度をSEOの評価基準にしているため、HTTP/2対応は間接的にSEO向上に繋がる。著者のサイトもHTTP/2導入後、PageSpeed Insightsのスコアが99点を記録、PV数も右肩上がりだ。 HTTP/2の恩恵を受けるにはVPSや専用サーバー等が必要で、相応の知識も求められる。しかし、HTTP/2を抜きにしても、フォームからの情報漏洩防止の観点から、特にログインや問い合わせフォームを持つサイトは常時SSL化が推奨される。専門知識を持つユーザーはSSL化されていないサイトのフォームは利用しないだろう。つまり、常時SSL化はセキュリティ面でもユーザー獲得に繋がるため、SEO効果があると結論付けられる。

 

自由を求めてオープンソースのネットショップパッケージへ。軌道に乗った頃に遭遇する問題について

/** Geminiが自動生成した概要 **/
SOY CMSを利用したネットショップ運営において、初期段階では自由度の高さがメリットとなるが、注文データの増加に伴い表示速度の低下という課題に直面する。これはGoogle検索ランキングにも影響する。記事では、表示速度低下の原因としてデータベース設計の冗長化、特にTEXTカラムの多用を指摘。SOY CMS/Shopでは不要な機能をインストールしない、外部データベースの活用などで冗長化を回避しているものの、注文データテーブルでのTEXTカラム使用は課題として残る。解決策として、サイト高速化とデータベースチューニングの必要性を提示している。具体的な対策は後述としているが、別記事ではPageSpeed Insightsのスコア99達成についても言及している。

 

SOY Shopの商品詳細ページで商品コードの置換文字列を追加しました

/** Geminiが自動生成した概要 **/
SOY Shopの商品詳細ページでSEO対策と商品コード表示の課題を解決するため、タイトルフォーマット等のメタタグに商品コードとカテゴリ名の置換文字列を追加。商品名に商品コードを含めることで発生するデータベース肥大化や表示変更の煩雑さを解消。商品名は本来の役割に特化させ、商品コードはメタタグで管理することで、システムの効率化と柔軟な表示を実現。この変更はGitHub上の最新SOY Shopパッケージに含まれており、SEO効果の向上と運用コストの削減に貢献する。

 

SOY CMSとSOY Shopで会員制ブログを運営してみよう

/** Geminiが自動生成した概要 **/
SOY CMSはショップ系サイト開発に注力しているため、ブログ機能は弱いというイメージがあるが、ショップ特有のセキュリティ強化により、安全な会員制ブログ構築が可能になっている。方法は、SOY CMSとSOY Shopをそれぞれ顧客管理用とブログ投稿用に設置し、ブログ投稿サイトにSOY Shop連携プラグインとSOY Shopログインチェックプラグインを導入する。ログインチェックプラグインで顧客管理サイトを指定し、ブログ記事のテンプレートを編集。`cms:id="is_login"`でログイン時表示部分を、`cms:id="no_login"`で非ログイン時表示部分を囲むことで、閲覧制限を実現する。非ログイン時にはログインページへのリンクが表示され、ログイン後は制限されていたコンテンツが閲覧可能になる。この仕組みにSOY Mailを連携させれば、顧客情報に基づいたメルマガ配信も可能。HTMLのみで構築できるため、デザインの自由度やSEO対策も容易で、有料ブログや有料メルマガへの拡張も容易である。

 

インターネット内に流れているパケットを傍受してみる

/** Geminiが自動生成した概要 **/
WordPressなどのCMSは総当り攻撃の標的になりやすく、特にログインページがhttpの場合、IDとパスワードが傍受されやすい。Wiresharkのようなツールを使えば、ネットワーク上のパケットを解析し、http通信のログイン情報を簡単に盗み見ることが可能。httpsは通信を暗号化するため、傍受されても内容は解読できない。カフェなどのフリーWi-Fiでhttpのログインページを使うのは危険。https化はセキュリティ対策だけでなく、HTTP/2.0による高速化にも繋がるため重要。また、メールもhttpと同様に暗号化されていないと傍受される可能性があるため注意が必要。

 

SOY CMSのサイトでPageSpeed Insightsのスコアが99になりました

/** Geminiが自動生成した概要 **/
SOY CMSサイトのPageSpeed Insightsスコアを99にするため、静的化プラグインを開発。標準ページをHTMLファイル化し、システムを経由せず直接読み込むことで高速化を実現。記事更新時はindex.html、ページ更新時は該当HTMLを削除し、即時反映を維持。DB接続回数を減らしサーバー負荷も軽減。内部SEO対策にも有効。プラグインはフォーラムで配布中だが、Google Analytics設置に関する提案への対応は未解決。

 

SOY CMSの画像のリサイズでJPEGのロスレス圧縮を追加した

/** Geminiが自動生成した概要 **/
SOY CMSでサーバサイド画像リサイズを実装後、PageSpeed Insightsで「ロスレス圧縮で容量削減可能」と指摘されたため、jpegoptimを導入した。Ubuntuに`sudo apt-get install jpegoptim`でインストール後、`/CMSインストールディレクトリ/common/im.inc.php`の`imagejpeg`実行後に`jpegoptim $savepath`を実行するよう改修。これにより、ロスレス圧縮の指摘が解消され、PageSpeed Insightsのモバイルスコアが93から96に向上した。変更コードはフォーラムで配布されている。

 

SOY CMSの画像のリサイズ時にPNGの透過を無効にする

/** Geminiが自動生成した概要 **/
SOY CMSで画像リサイズを行う際、PNG画像の透過部分が黒くなる問題の解決策を紹介している。原因はアルファチャンネルの透過設定で、SOY CMSのリサイズ機能が透過に対応していないため。解決策として、`imagecreatetruecolor`後に`imagealphablending($dstImage, false);`と`imagesavealpha($dstImage, true);`を追加することで、透過PNGも正しくリサイズできる。修正はGDでのリサイズにのみ対応しており、ImageMagickは未対応。

 

ブラウザのキャッシュの設定

/** Geminiが自動生成した概要 **/
SOY CMSのキャッシュモードを利用することで表示速度を大幅に向上させることができます。キャッシュモードには、「出力キャッシュ」「ブロックキャッシュ」「データキャッシュ」の3種類があります。出力キャッシュはページ全体をキャッシュし、ブロックキャッシュはページの一部のブロックをキャッシュ、データキャッシュはデータベースへのアクセス結果をキャッシュします。それぞれのキャッシュモードは管理画面から簡単に設定でき、サイトのアクセス状況や更新頻度に合わせて最適な設定を選択することで、サーバー負荷を軽減し、表示速度を向上させることができます。特に、頻繁に更新されない静的なページやアクセス数の多いページでは、出力キャッシュが効果的です。キャッシュのクリアも管理画面から簡単に行えます。

 

サイバー攻撃が何と多いことか

/** Geminiが自動生成した概要 **/
知人の知人のWordPressサイトが乗っ取られ、攻撃サーバーとして悪用された事例を紹介。脆弱なCMSバージョン、簡単なパスワード、推測されやすい管理画面URLが原因だった。また、知人はトロイの木馬、他の知人は無害なファイル増産プログラムの被害に遭い、筆者自身もIEの設定を書き換えられる被害を受けた。攻撃者は無防備なサイトやPCを狙うため、セキュリティ対策は必須。対策学習として、攻撃者の心理を理解できる「サイバーセキュリティプログラミング」や、Webセキュリティの基礎知識を学べる「徳丸浩のWebセキュリティ教室」などを推奨。インターネットの危険性を常に意識し、無関係な人などいないことを認識すべきだと警告している。

 

パーツモジュールでカノニカルタグを作ってみた

/** Geminiが自動生成した概要 **/
SEO対策のカノニカルタグを、ページ毎に挿入する手間を省くため、パーツモジュールで自動生成する仕組みを作成した。 ブログページとそれ以外のページで処理を分け、ブログページでは記事、カテゴリ、月別アーカイブそれぞれのモードに応じてURLを生成。HTMLテンプレートに`<link rel="canonical" href="生成したURL">`を出力することで、どのページでも正しいカノニカルタグが自動で挿入されるようになった。 実際にカテゴリページで確認した結果、期待通りのURLが出力され、今後の作業効率化に繋がることが期待される。


Powered by SOY CMS   ↑トップへ