/** Geminiが自動生成した概要 **/
この記事は、Bootstrapを用いてWebサイトのCore Web Vitalsスコアを向上させる方法を解説しています。具体的には、BootstrapのボタンコンポーネントのCSSのみを抽出し、ページHTMLにインライン挿入する方法を紹介しています。
手順としては、Bootstrapのソースファイルから必要なSCSSファイルをサイトディレクトリに配置し、SOY CMS側でSCSSコンパイルの設定を行います。これにより、ボタン用のCSSがページに直接記述され、外部ファイルの読み込みが不要になります。
さらに、生成されたCSSを圧縮してインライン化することで、ページ表示速度の向上を目指します。ただし、毎回SCSSをコンパイルするのは非効率なので、CSSやページ全体のキャッシュ化が推奨されています。
/** Geminiが自動生成した概要 **/
SOY CMS/Shopの管理画面で利用するjQueryやBootstrapをCDN経由で読み込む設定が追加されました。これにより、管理画面で読み込むファイル数を減らし、サーバー負荷を軽減します。設定方法は、`/CMSインストールディレクトリ/common/config/user.config.php`を作成し、`define("SOYCMS_READ_LIBRARY_VIA_CDN", true);`を有効にするだけです。リンク色の変更など、一部表示に影響が出る可能性がありますが、順次修正予定です。最新のパッケージはサイト(saitodev.co/soycms/)からダウンロードできます。
/** Geminiが自動生成した概要 **/
SOY CMSブログの記事ページからSOY Inquiryで作成したお問い合わせフォームへ遷移する際、記事名を引き継ぎたいという要望に応えるため、SOY CMSとSOY Inquiry双方に機能追加を行いました。
SOY CMS側では「SOY Inquiry連携プラグイン」を追加。記事ページにフォームへのリンクを設置し、クリックすると記事名を渡しつつフォームへ遷移します。SOY Inquiry側では「記事名 [SOY CMSブログ連携]」カラムを追加し、受信した記事名を表示します。
プラグインの設定方法はSOY CMS側のプラグイン詳細画面に記載されています。記事名以外の項目連携も要望に応じて対応可能です。利用にはSOY CMSとSOY Inquiry両方のアップデートが必要です。
/** Geminiが自動生成した概要 **/
使い捨てURLのQRコードをBootstrapのモーダル内に表示する際、QRCode.jsで生成したQRコードのセンタリングに苦労した。QRCode.jsは簡単にQRコードを生成できるが、出力される<div>内の<img>タグの幅が100%になるため、`text-center`クラスが効かない。DOMで出力された<canvas>タグのサイズに合わせて、<div id="qrcode">に`style="width:128px;margin:0 auto;"`を指定することで、QRコードをモーダル中央に表示できた。
/** Geminiが自動生成した概要 **/
OpenStreetMapとLeafletを用いて地図上にマーカーを設置し、クリックイベントを追加する方法について解説しています。
まず、Leafletで地図上にマーカーを設置する基本的なコードを示し、クリックイベントを追加するために`L.geoJSON`を使用する方法を説明しています。`L.geoJSON`の第二引数に`onEachFeature`オプションを渡すことで、マーカーごとにクリックイベントを設定できます。
記事では、クリックイベント発生時に任意のURLへ遷移する例を挙げており、PCとスマホそれぞれでクリックとタップイベントに対応するコードを記述しています。
/** Geminiが自動生成した概要 **/
この記事では、Google Maps JavaScript APIの代わりにOpenStreetMapとLeafletを使って地図を表示する方法を紹介しています。OpenStreetMapは無料で利用でき、Leafletは簡単に地図を表示できるJavaScriptライブラリです。
記事では、大阪府高槻市の摂津峡を例に、緯度経度を指定して地図を表示し、マーカーを設置する手順をコード付きで解説しています。結果として、少ないコードで簡単に地図上にマーカーを表示することができました。
/** Geminiが自動生成した概要 **/
Google Analyticsのスクリプトをページ読み込み直後に移動することで、Core Web Vitals、特にFID(First Input Delay)を改善する方法を解説しています。通常、Google Analyticsのスクリプトは</body>直前に配置されますが、これだとスクリプトのダウンロードと実行が完了するまでブラウザが他の操作を受け付けず、FIDが悪化します。記事では、async属性を追加し<head>内に移動することで、スクリプトを非同期で読み込み、ブラウザのレンダリングを妨げないようにする方法を紹介。async属性はIEでは機能しないため、IE用に条件分岐で対応する必要性も説明しています。さらに、Google Tag Managerを使用している場合は、設定変更だけで対応可能であることも解説しています。これらの修正により、FIDが大幅に改善され、ユーザーエクスペリエンスの向上が期待できます。
/** Geminiが自動生成した概要 **/
非公式にメンテナンスされているSOY Shop 2.0.0βが公開されました。データベース構造は1系とほぼ変わらず、通常のバージョンアップ手順で適用可能です。主な変更点は、Bootstrapを使ったレスポンシブ対応の管理画面UIと、公開側ページの読み込み速度最適化です。後者は必要なクラスファイルのみを読み込むことでメモリ消費量を削減し、表示速度向上と同時アクセス耐性向上を実現しています。 HTMLキャッシュプラグインも同梱され、キャッシュ機能で更なるメモリ消費削減が可能です。ダウンロードはsaitodev.co/soycms/soyshop/ から。一部プラグインのUIはまだ2系に対応していませんが、順次修正予定です。
/** Geminiが自動生成した概要 **/
SOY Shopに顧客宛メール送信機能が追加されました。従来は注文関連の連絡のみでしたが、今回のアップデートで任意の用件でメールを送信できるようになりました。これは、別途追加されたマイページお問い合わせフォームへの返信機能を補完するものです。顧客はフォームから問い合わせ、管理者は今回追加された機能で返信できます。これにより、マイページ上での円滑な顧客対応が可能になります。Bootstrapテンプレート利用時、お問い合わせフォームと今回のメール機能で、問い合わせから返信までをマイページ内で完結できます。最新版はsaitodev.coからダウンロード可能です。
/** Geminiが自動生成した概要 **/
SOY Shopの簡易予約カレンダー機能拡張で、カスタムサーチフィールドに予約カレンダー検索項目が追加されました。これにより、旅行予約サイトなどで、ツアーの予約状況に基づいた絞り込み検索が可能になります。カスタムサーチフィールドタグ`csf:id`を利用することで、高度な検索フォームを構築できます。このアップデートは、キャンセルが多い事業向けの予約アプリ開発(記事へのリンクあり)などの背景も踏まえ、予約サイト構築の柔軟性を高めます。ダウンロードはサイト(saitodev.co/soycms/soyshop/)から可能です。関連情報として、Bootstrap4対応のカートとマイページ追加の記事も紹介されています。
/** Geminiが自動生成した概要 **/
SOY Shopの顧客管理機能を活用し、キャンセル発生頻度の高い就学前児童向けWebサービスの予約カレンダーを開発。Googleアカウントログイン機能、仮登録による会員限定アクセス制限、運営者による本登録承認フローを実装。スマホで空き状況確認・予約を簡素化し、クリック操作で予約完了までスムーズな導線を構築。Bootstrapテンプレートのカスタマイズにより操作性を向上。兄弟利用を想定した予約時情報入力機能も搭載。キャンセル発生時の迅速な空き状況更新にも対応。
/** Geminiが自動生成した概要 **/
SOY ShopにBootstrap 4ベースのカート・マイページテンプレートが追加されました。レスポンシブ対応はもちろん、予約カレンダー連携機能も強化されています。仕様の見直しにより、簡易予約カレンダープラグインとの連携で便利な機能が利用可能になりました。使用方法の詳細はプラグインページをご覧ください。ダウンロードはsaitodev.co/soycms/soyshop/から可能です。
/** Geminiが自動生成した概要 **/
SOY Shopの予約サイト構築用プラグインに、レスポンシブ対応のカレンダー表示機能が追加された。PCでは1ヶ月分のカレンダー、スマホでは今日から2週間分の縦型カレンダー表示となり、Bootstrap 4ベースでUIが改善。この機能は「予約カレンダースマホ拡張プラグイン」で利用可能。開発案件のニーズに応え、予約アプリ導入コスト削減を目指し開発された。更新版パッケージはsaitodev.co/soycms/soyshop/からダウンロードできる。
/** Geminiが自動生成した概要 **/
SOY CMSにBootstrap4ベースのブログページ用テンプレートを追加しました。ダウンロードURL(https://github.com/inunosinsi/soycms/raw/master/cms/common/logic/admin/Site/TemplatePack/bootstrap4.zip)からテンプレートzipファイルをダウンロードし、管理画面からアップロード・インストールすることで利用可能です。手順は添付画像を参照ください。新規サイト作成時にはこのテンプレートがデフォルトで含まれるようになりました。同梱パッケージはsaitodev.co/soycms/ からダウンロードできます。
/** Geminiが自動生成した概要 **/
SOY CMS ASP版運営プラグインに続き、SOY AppのUIをSOY CMS 3系のレスポンシブウェブデザインに合わせました。これにより、SOY Shopサイトの新規作成画面、SOY Mail、SOY InquiryのUIがBootstrapベースのレスポンシブデザインで表示されます。SOY Appのバージョンアップ前にSOY CMSのバージョンアップが必要です。最新のパッケージはsaitodev.co/soycms/からダウンロードできます。
/** Geminiが自動生成した概要 **/
SOY CMSのラベル一覧画面が見やすくなりました！ラベル数が増えると管理画面が煩雑になる課題に対し、ユーザーからの改修提案を元にアコーディオン機能が実装されました。分類ごとにラベルを折り畳めるようになり、UIが大幅に改善。 HTMLモジュールで共通部分を管理する等の対策も紹介しつつ、ユーザー参加型の開発を推進していることが伺えます。GitHubでのプルリクエストや問い合わせフォームからの連絡を歓迎しており、最新版はsaitodev.co/soycms/からダウンロード可能です。
/** Geminiが自動生成した概要 **/
開発元退職後も私がSOY CMS開発を続ける理由は、情熱と責任感にあります。SOY CMSは私の人生の一部であり、ユーザーにとって無くてはならない存在だと認識しています。退職によって開発が滞り、ユーザーに迷惑をかけることは避けたい。オープンソース化という選択肢もありましたが、継続的な開発とサポートを提供するため、個人で開発を引き継ぎました。収益化は二の次で、ユーザーのニーズに応え、SOY CMSを成長させることが最優先です。この決断は私にとって大きな挑戦ですが、SOY CMSとユーザーへの愛着が原動力となっています。