ブログ内検索

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

SOY CMS / SOY ShopでライブラリをCDN経由にする設定を追加しました

/** Geminiが自動生成した概要 **/
SOY CMS/Shopの管理画面で利用するjQueryやBootstrapをCDN経由で読み込む設定が追加されました。これにより、管理画面で読み込むファイル数を減らし、サーバー負荷を軽減します。設定方法は、`/CMSインストールディレクトリ/common/config/user.config.php`を作成し、`define("SOYCMS_READ_LIBRARY_VIA_CDN", true);`を有効にするだけです。リンク色の変更など、一部表示に影響が出る可能性がありますが、順次修正予定です。最新のパッケージはサイト(saitodev.co/soycms/)からダウンロードできます。

 

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

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

 

【SEO対策】Lazy Load

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

 

SOY ShopのオーダーカスタムフィールドでjQueryのDatepickerを使ってみる

/** Geminiが自動生成した概要 **/
SOY Shopで配送と店舗受け取りを同時選択できるよう、オーダーカスタムフィールドで対応する方法を紹介。標準機能にはないカレンダーを、jQuery Datepickerを用いて実装する手順を解説。オーダーカスタムフィールドを作成後、カートページテンプレートにjQueryを読み込み、Datepickerを適用するコードを追加。オプション設定で日付範囲も指定可能。複数フィールドへの適用方法や、直接入力を防ぐreadonly属性の追加についても触れている。

 

SOY2HTMLで軽微なカスタマイズを加える為の機能を追加しました

/** Geminiが自動生成した概要 **/
SOY CMS/ShopのSOY2HTMLに、軽微なカスタマイズを容易にする隠し機能が追加されました。クラスファイルと同名のHTMLファイル名の頭にアンダースコア「_」を付けると、そのHTMLファイルが優先的に読み込まれます。これにより、プラグインのバージョンアップ時の上書きを回避できます。例えば、配送モジュールの文言変更など、PHP知識を必要とせず容易にカスタマイズできます。標準配送モジュールなら `delivery_normal/cart/_DeliveryNormalCartPage.html` を配置し、元のHTMLの内容をコピー・編集することで実現できます。SOY Shop 2系以降で利用可能、1系は `soy2_build.php` の修正が必要です。新パッケージはsaitodev.coからダウンロードできます。

 

SOY InquiryでParsley.jsを利用する

/** Geminiが自動生成した概要 **/
SOY InquiryにParsley.jsを組み込むと、見栄えの良い入力内容チェックが利用できます。フォームテンプレートにParsley.jsのスクリプトを挿入し、SOY Inquiryのフォーム設定画面で各項目にdata-parsely-triggerとrequired属性を設定します。さらに、data-parsely-required-message属性を追加すると、エラーメッセージをカスタマイズできます。これにより、各項目に合わせたエラーメッセージが表示され、ユーザーフレンドリーなフォームが作成できます。

 

pickadate.jsでHTML5のrequired属性を使いたい

/** Geminiが自動生成した概要 **/
pickadate.jsでHTML5のrequired属性を使うには、`editable: true`オプションを設定する必要がある。ただし、これによりページ読み込み時にrequiredチェックが実行され、未入力エラーが表示される問題が発生する。これを回避するには、フォームにIDを付与し、クリックイベントでpickadateを初期化するよう変更する。さらに、カレンダー表示のために`pickr.pickadate('open')`も追加する必要がある。これにより、フォームクリック時に初めて初期化とバリデーションが行われるようになり、初期エラー表示の問題が解決する。

 

SOY InquiryでjQuery UIのDatepickerを利用してみる

/** Geminiが自動生成した概要 **/
SOY Inquiryで日付入力にカレンダー形式を追加するには、jQuery UIのDatepickerを利用します。まず、フォーム設置ページのテンプレートにjQueryとjQuery UI、日本語化ファイルのCDNを読み込むscriptタグを追加します。次に、SOY Inquiryで日付のカラムを作成し、属性に`id="datepicker"`を設定します。これにより、フォームにフォーカスを当てるとカレンダーが表示され、日付を選択できるようになります。Datepickerは日付選択の制限等、高度な設定も可能です。詳細はjQuery UIの公式ドキュメントを参照ください。

 

SOY CMSのブログで年毎に月別アーカイブのリンクを出力するブログブロックを追加しました

/** Geminiが自動生成した概要 **/
SOY CMSのブログで、長年の運用による月別アーカイブの増加でデザインが崩れる問題を解決するブログブロックが追加されました。従来の縦に長いアーカイブ表示を、年毎に折りたたみ可能な形式で出力します。 新しいブロック`b_block:id="archive_every_year"`は、`cms:id="year"`で年を、`cms:id="archive"`で各月のアーカイブリンクを生成し、年毎に異なるIDを割り当てます。これにより、jQuery等で年毎の折りたたみ表示を実装可能になります。表示例では2018年、2017年、2016年と年ごとに月別アーカイブをまとめて表示しています。新機能はパッケージに含まれ、サイト(https://saitodev.co/soycms/)からダウンロードできます。ただし、古いバージョンからのアップデートでは、ブログページ毎のブロック使用設定でarchive_every_yearを有効にする必要があります。

 

jQuery.uploadプラグインをjQuery3系でも動作するように修正してみた

/** Geminiが自動生成した概要 **/
jQuery.uploadプラグイン (v1.0.9) をjQuery 3.3.1で使用した際、「a.indexOf is not a function」エラーが発生。原因は`iframe.load()`の廃止。jQuery3以降では`.load()`メソッドがオブジェクトに対して使用できなくなっていた。解決策として、`iframe.on('load', function(){})`と書き換え、`load`イベントを`on`メソッドで登録することで動作するようになった。この修正は後にプルリクエストとして採用され、本家コードに反映済み。

 

kintoneのカレンダーの日付カラムで4件以上表示したい

/** Geminiが自動生成した概要 **/
kintoneで特定の領域だけを印刷範囲にする方法を紹介しています。kintoneの標準機能では印刷範囲の指定が難しいため、JavaScriptカスタマイズで対応します。具体的には、印刷時に特定の要素に"print-area"というクラスを追加し、CSSでこのクラスに`page-break-inside: avoid;`を指定することで、意図しない改ページを防ぎます。また、印刷ボタンのクリックイベントでJavaScriptを実行し、印刷後にクラスを削除する処理を追加することで、通常の画面表示への影響をなくします。この記事では、カレンダーの印刷を例に、日付行と予定行が分割されないように印刷範囲を制御する具体的なコードを解説しています。

 

kintoneで指定の個所だけ印刷範囲にしてみる

/** Geminiが自動生成した概要 **/
kintoneでカレンダーアプリを印刷する際、標準機能ではカレンダー部分のみを選択できない問題を、jQueryプラグイン「printElement」を用いて解決する方法を紹介。kintoneアプリにカレンダー形式の一覧ページを作成し、printElementとjQueryを読み込むよう設定。カスタマイズ用JavaScriptで印刷ボタンを配置し、クリックイベントにprintElementでカレンダー部分(id="view-list-data-gaia")を指定。これにより、ヘッダー/フッターを除くカレンダー部分のみが印刷範囲となる。kintoneのカスタマイズ性の高さとjQueryプラグインの活用例を示している。

 

SOY CMS3.0.1とSOY Shop1.18.1の差分をマージしました

/** Geminiが自動生成した概要 **/
開発元退職後もSOY CMS開発を続ける理由は、情熱、責任感、コミュニティへの貢献にあります。SOY CMSのシンプルさと柔軟性は魅力であり、ユーザーにとって使いやすいCMSであり続けることを目指しています。退職によって開発が停滞する不安を解消し、継続的な改善とサポートを提供することで、ユーザーの信頼に応えたいと考えています。また、オープンソースの精神に基づき、コミュニティと協力しながらSOY CMSを発展させ、貢献していくことが重要です。個人的な思い入れだけでなく、ユーザーとコミュニティのための開発を続けることが、私のモチベーションとなっています。

 

SOY CMS3.0.0とSOY Shop1.18.0の差分をマージしました

/** Geminiが自動生成した概要 **/
開発元退職後もSOY CMS開発を続ける筆者は、情熱と責任感から無償で活動を継続している。退職理由は、開発方針の違いや待遇への不満ではなく、新機能開発への強い思いとユーザーコミュニティへの貢献意欲によるもの。オープンソース化という選択もあったが、品質維持と開発継続性を重視し、現状維持を選択。個人開発の負担は大きいが、ユーザーからの感謝や機能改善要望がモチベーションとなり、SOY CMSの発展に尽力している。

 

SOY CMS3.0.0βの差分をマージしました

/** Geminiが自動生成した概要 **/
開発元退職後も私がSOY CMS開発を続ける理由は、情熱と責任感にあります。SOY CMSは私の人生の一部であり、ユーザーにとって無くてはならない存在だと認識しています。退職によって開発が滞り、ユーザーに迷惑をかけることは避けたい。オープンソース化という選択肢もありましたが、継続的な開発とサポートを提供するため、個人で開発を引き継ぎました。収益化は二の次で、ユーザーのニーズに応え、SOY CMSを成長させることが最優先です。この決断は私にとって大きな挑戦ですが、SOY CMSとユーザーへの愛着が原動力となっています。

 

SOY Shopの標準配送モジュールでカレンダー形式でお届け日指定を追加しました

/** Geminiが自動生成した概要 **/
SOY Shopの標準配送モジュールがアップデートされ、お届け日指定をカレンダー形式で入力できるようになりました。従来のセレクトボックス形式に加え、カレンダー形式を選択可能になり、日付の選択範囲も設定できます。 これは試作段階で、カートでのjQueryライブラリの読み込み状況に関わらず動作するよう改良中です。需要があれば、未対応箇所の開発も進められます。最新版はsaitodev.co/soycms/soyshop/ からダウンロード可能です。

 

SOY CMSのバージョンアップについて

/** Geminiが自動生成した概要 **/
SOY CMSを古いバージョンから最新版にバージョンアップするには、0.1ずつ段階的にバージョンアップし、公式サイトのバッチファイルを適用します。1.5系以降は一気にバージョンアップできますが、初期管理者でログインしてキャッシュをクリアしてください。1.11系以降のSOY Shopは自動バージョンアップに対応しています。


Powered by SOY CMS   ↑トップへ