ブログ内検索

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

SOY CMSのブログ記事JSON出力プラグインで記事一覧の出力に必要な値を取得できるようにしました

/** Geminiが自動生成した概要 **/
SOY CMSのブログ記事JSON出力プラグインがアップデートされ、記事一覧の出力が容易になりました。 今回のアップデートにより、JSON出力に以下の値を含めることが可能になりました。 * 記事のパーマネントリンク * 本文の一部または冒頭数文字 * サムネイル画像のパス * カスタムフィールドの値 これらの値はGETパラメータで出力の有無を指定できます。これにより、JavaScriptでJSONを取得し、記事一覧を動的に生成することが可能になります。 例えば、記事のURL、本文の冒頭50文字、サムネイル画像のパスを含めたJSONを取得する場合は、以下のようなURLでアクセスします。 ``` https://example/site/1.json?limit=1&content=50&is_url=1&thumbnail ``` アップデート版のプラグインは、以下のサイトからダウンロードできます。 https://saitodev.co/soycms/

 

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対策に繋がります。

 

ハッシュテーブルのチェイン法を見る

/** Geminiが自動生成した概要 **/
PHPのハッシュテーブルの実装であるチェイン法を、単方向連結リストを用いて再現した。ハッシュテーブルへの要素追加、検索、初期化、リサイズの関数をPHPで作成し、衝突が発生するケース(アズキとショウブ)で動作を確認した。結果、インデックス2にアズキとショウブが連結リストで格納され、検索関数も正しく動作することを確認できた。この実装はPHPのzvalや変数登録の仕組みを理解する上で役立つ。ただし、PHPのチェイン法は双方向連結リストを用いており、また、連結リストではなく配列を用いる実装もある。

 

データ構造のハッシュテーブルを見る

/** Geminiが自動生成した概要 **/
PHPの関数はハッシュテーブルというデータ構造で管理される。ハッシュテーブルは高速な検索が可能だが、ハッシュ値の衝突という問題がある。この記事では、簡単なハッシュ関数とハッシュテーブル操作関数を作成し、文字列を登録する例を通してハッシュテーブルの基本的な動作を説明する。複数の文字列を登録する際に、ハッシュ値の衝突が発生し、一部の文字列が登録されないことを示し、衝突回避のための方法としてハッシュテーブルのリサイズやハッシュ関数の改良、そしてチェイン法の存在を示唆している。

 

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

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

 

SOY Inquiryでアップロード(複数)カラムを追加しました

/** Geminiが自動生成した概要 **/
SOY Inquiryに複数ファイルアップロードカラムが追加されました。現在試作段階で、サーバー設定に依存した無制限アップロードや、一部ファイルのエラー発生時の個別エラー表示未対応などの課題が残っています。画像リサイズ機能は実装済みです。アップロード枚数制限の設定は2019年8月16日に追加されました。ダウンロードはsaitodev.co/soycms/soyinquiry/ から可能です。

 

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

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

 

SOY Inquiryのアップロードカラムで画像のリサイズを追加しました

/** Geminiが自動生成した概要 **/
SOY Inquiryでアップロードフォームを設置した際、確認メールに画像を表示するには、PHPのメール送信機能では画像を直接埋め込めないため、HTMLメールで画像のURLを指定する必要がある。 送信メール設定でHTMLメールを利用し、メール本文にアップロードファイルへのURLを記述するSmartyタグを追加する。ただし、このURLは管理画面からのみアクセス可能なので、.htaccessでBasic認証を設定してセキュリティを確保する。 画像のURLは、SOY Inquiryのバージョンによって記述方法が異なり、古いバージョンではファイルIDを直接URLに含める方法、新しいバージョンでは専用のSmartyタグを使用する方法があるため、バージョンに合わせて適切な方法を選択する必要がある。

 

SOY Shopで注文番号をCODE39規格でバーコードを作成してみる

/** Geminiが自動生成した概要 **/
SOY Shopで注文番号をバーコード化できるプラグインを開発。CODE39規格を採用し、ハイフンを含む注文番号に対応。生成されたバーコードはCCDバーコードリーダーで読み取り可能だが、初期設定では長すぎて認識エラーが発生。リサイズで対応。プラグインはsaitodev.coからダウンロード可能。バーコード生成にはPHP Barcode Generatorを使用。現時点ではSOY Shop標準機能としての用途は未定だが、活用アイディア募集中。

 

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

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

 

Googleの圧縮アルゴリズムBrotliを試してみた

/** Geminiが自動生成した概要 **/
Brotli圧縮を試した結果、gzipよりも高い圧縮率を実現できることが分かり、サーバーでの利用を検討。Ubuntu 18.04ではaptでbrotliをインストール可能。画像ファイルの圧縮テストでは、オリジナル870.3kBに対し、Brotliは856.8kB、gzipは861.0kBと、Brotliが僅かに優れていた。圧縮コマンドは`brotli 元ファイル -o 圧縮ファイル`、解凍は`brotli -d 圧縮ファイル -o 元ファイル`。次の記事では、ApacheサーバーでBrotliを利用する方法を解説する。

 

PHPでPythonの機械学習のライブラリを利用してみる

/** Geminiが自動生成した概要 **/
PHPでPythonの機械学習ライブラリを利用する方法を検証。サンプルデータを使用してk近傍法によるアイリスの品種判定を実施。Pythonスクリプトで学習と判定を行い、PHPスクリプトでデータを送受信することで、PHPでPythonの機械学習機能を活用できることを確認した。

 

SOY CMSのサムネイルプラグインで加工前の画像も出力できるようにした

/** Geminiが自動生成した概要 **/
SOY CMSのサムネイルプラグインが、加工前の画像も出力できるよう機能拡張されました。従来はリサイズ・トリミング後の画像のみ出力でしたが、`cms:id="upload"`でオリジナル画像、`cms:id="trimming"`でトリミング後リサイズ前の画像を出力できます。`cms:id="thumbnail"`は従来通りサムネイル画像を出力します。また、画像の状態に応じて表示を切り替える`cms:id="is_upload"`、`cms:id="is_trimming"`、`cms:id="is_thumbnail"`も追加されました。更新版プラグインはsaitodev.co/soycms/からダウンロード可能です。

 

SOY CMSのブログで地図アプリを作ろう2

/** Geminiが自動生成した概要 **/
SOY CMSのブログ機能を利用した地図アプリ作成の第2弾では、マーカークリック時のインフォウィンドウ表示を実装しました。前回設定したカスタムフィールド(サムネイル、緯度経度)に加え、ブログ記事のタイトルとリンクをインフォウィンドウに表示するようにテンプレートを修正。具体的には、JavaScriptでインフォウィンドウの内容を生成し、マーカークリックイベントで表示する処理を追加しました。これにより、地図上のマーカーから各店舗の詳細ページへ遷移できるようになりました。将来的にはSOY Shopと連携させ、カテゴリを店舗名として地図上に店舗を表示するショップページの作成も構想されています。

 

SOY CMSのサムネイルプラグインでpng形式のファイルに対応しました

/** Geminiが自動生成した概要 **/
SOY CMSのサムネイルプラグインがアップデートされ、複数の不具合修正と機能強化が行われました。主な変更点は、サイトIDとドキュメントルート内の文字列が重複した場合のリサイズ不具合の修正、サムネイル未登録時のアップロードウィンドウ表示不具合の修正、PNG/GIF形式の画像対応、`cms:id="thumbnail_path_text"`の追加です。さらに、サーバーにjpegoptimがインストールされている場合は、トリミング時にJPEGのロスレス圧縮が適用されるようになりました。これらの更新はGitHubで公開されているパッケージに反映されています。

 

SOY CMSのサムネイルプラグインでhttpからはじまる絶対パスで登録出来ない不具合を修正しました。

/** Geminiが自動生成した概要 **/
SOY CMSのサムネイルプラグインで、httpから始まる絶対パスで画像を登録できない不具合を修正。従来、httpで始まるパスを登録するとプレビューで画像が表示されない問題があったが、パスからhttp://ドメイン部分を削除することで修正。修正版はGitHubで配布中。サムネイルプラグインを使わずにサムネイル画像を生成する方法としては、表示直前で画像のリサイズを行う方法がある。

 

SOY CMSで利用しているelFinderでjsファイルのアップロードを許可する

/** Geminiが自動生成した概要 **/
SOY CMSのファイルマネージャelFinderでJSファイルのアップロードを許可する方法。`/CMSのインストールディレクトリ/soycms/js/elfinder/php/connector.php`内の`uploadAllow`配列にJSファイルのMIMEタイプ `text/javascript` を追加することで実現できる。デフォルトではセキュリティのためJSファイルのアップロードは禁止されているが、この設定変更によりアップロードと編集が可能になる。ただし、不正ログイン時に悪意あるコード実行のリスクも高まるため、注意が必要。

 

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

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

 

SOY CMS/Shopのブロックで最初とそれ以外のデータで表示を変えたい

/** Geminiが自動生成した概要 **/
SOY CMS/Shopのブロックで、記事一覧表示の際に最初の要素とそれ以降で表示を変える方法を紹介しています。HTMLListクラスの`soy:id="at_first"`と`soy:id="not_first"`を用いることで、最初の記事ではサムネイルを200px、2つ目以降の記事では150pxで表示する例を挙げています。具体的なコードも示されており、画像のサイズ変更にはサーバサイドの画像圧縮機能を活用しています。さらに、`cms:id="content" cms:length="250"`で記事本文を250文字に要約して表示する方法にも触れています。

 

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種類があります。出力キャッシュはページ全体をキャッシュし、ブロックキャッシュはページの一部のブロックをキャッシュ、データキャッシュはデータベースへのアクセス結果をキャッシュします。それぞれのキャッシュモードは管理画面から簡単に設定でき、サイトのアクセス状況や更新頻度に合わせて最適な設定を選択することで、サーバー負荷を軽減し、表示速度を向上させることができます。特に、頻繁に更新されない静的なページやアクセス数の多いページでは、出力キャッシュが効果的です。キャッシュのクリアも管理画面から簡単に行えます。

 

SOY CMSのサムネイルプラグインでラベル毎に標準画像の設定を追加しました

/** Geminiが自動生成した概要 **/
SOY CMSで記事投稿時に毎回サムネイル画像を用意するのは手間がかかる。特に、カテゴリ毎に同じようなサムネイルを使い回したい場合、作業効率が悪い。そこで、サムネイルプラグインの設定画面でラベル毎に画像を設定できるように機能拡張した。記事投稿時に該当ラベルにチェックを入れるだけで、予め設定した画像パスがアップロードフォームに挿入される。異なる画像を使いたい場合は、通常通りアップロードフォームから画像を指定すれば良い。この改良により、カテゴリ毎に共通のサムネイル画像を設定する場合の作業負荷が大幅に軽減される。尚、サムネイルプラグインを使わずとも、記事本文の画像をリサイズ表示する方法もある。

 

SOY CMSで表示直前で画像のリサイズ表示を行う

/** Geminiが自動生成した概要 **/
SOY CMSでサイト表示を高速化するために、表示直前にサーバ側で画像リサイズを行う方法を紹介しています。Google PageSpeed Insightsで低評価を受けた画像サイズの問題を解消するため、サムネイルプラグインではなく、SOY CMSの隠し機能を活用。 具体的には、カスタムフィールドに画像パスを入力し、imgタグのsrc属性に`im.php?src=[画像パス]&width=[幅]`を指定することで、動的にリサイズされた画像を表示。従来のHTMLのwidth属性による縮小表示よりもパフォーマンスが向上し、PageSpeed Insightsのスコアも改善。 記事では、設定変更前後の具体的なコード例やスクリーンショットを交えながら解説。リサイズ処理はJPEG、PNG、GIFに対応し、作業フローを簡略化しつつサイト高速化を実現。次回、CSSや画像のキャッシュ設定について解説予定。

 

さくらのVPSでSOY CMSを動かした時のメモ

/** Geminiが自動生成した概要 **/
Apacheサーバのバージョン表示はセキュリティリスクとなるため、非表示にすることが推奨されています。本記事では、Apacheの設定ファイル`httpd.conf`または`apache2.conf`を編集することで、バージョン情報を隠す方法を解説しています。具体的には、`ServerTokens`ディレクティブを`Prod`に設定することで、公開されるサーバ情報を最小限に抑えられます。また、`ServerSignature`ディレクティブを`Off`にすることで、エラーページなどからサーバのバージョン情報が削除されます。これらの設定変更後、Apacheを再起動することで変更が反映されます。さらに、セキュリティ対策としてmod_securityなどのセキュリティモジュール導入も推奨しています。


Powered by SOY CMS   ↑トップへ