ブログ内検索

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

SOY Inquiry2.3以降のバージョンにバージョンアップする際の注意点

/** Geminiが自動生成した概要 **/
SOY Inquiry 2.3以降にバージョンアップする際、カスタマイズしたフォームテンプレート(`form.php`と`confirm.php`)の修正が必要です。 具体的には、両ファイルの先頭に`$dummyFormObj = new SOYInquiry_Form();`を追加し、`$column->getColumn();`を`$column->getColumn($dummyFormObj);`に置換します。 これはPHPの厳格化に対応するための変更です。

 

SOY CMSで複数ページフォームプラグインを作成しました

/** Geminiが自動生成した概要 **/
SOY CMS向け複数ページフォームプラグインが開発されました。このプラグインは、管理画面でページ構成と遷移を設定し、公開側でフォームを表示します。各ページの設定、完了ページでのSOY Inquiry連携、高度なページでのSOY2HTML利用、フォームデザイン変更といった機能を提供します。これにより、複雑な複数ページフォームの作成コストを大幅に削減できます。プラグインはsaitodev.co/soycms/からダウンロード可能です。

 

SOY InquiryでParsley.jsを利用する

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

 

SOY Inquiryでお問い合わせフォームの確認画面で指定の箇所までジャンプしたい

/** Geminiが自動生成した概要 **/
SOY Inquiryで確認画面をフォームの先頭に表示する方法です。まず、form.phpの`<form>`タグに`action="#confirm"`を追加します。次に、confirm.phpの入力内容確認箇所の直前に`<div id="confirm"></div>`を挿入します。これで、確認画面表示時にフォームの先頭にジャンプします。完了画面にも適用する場合は、complete.phpでも同様の操作を行います。ただし、この方法ではURLに#confirmが残ります。URLを綺麗にしたい場合は、PHPでaction属性を動的に指定する必要があります。

 

Webでの肥料の販売の開始です

/** Geminiが自動生成した概要 **/
京都農販のWebサイトが公開されました。SOY Shopで構築されたこのサイトは、現在は商品カタログですが、将来的にはネットショップとして運用予定です。開発者はSOY Shopに5年間携わっており、そのノウハウを活かし、特に商品詳細ページに注力しています。商品情報に加え、「この肥料を使うために、これは知っておきたい!」セクションでは、SOY CMSで作成した関連コラム記事を自動表示。肥料の使用方法や実際の栽培事例を学ぶことができます。これにより、ショップ管理者は商品情報に集中し、営業担当者はブログ投稿でサイトを盛り上げることが可能になります。スマホ対応も実装済みです。今後はコンテンツ拡充に注力していきます。

 

SOY InquiryのレスポンシブとHTML5対応

/** Geminiが自動生成した概要 **/
SOY Inquiryを使ってレスポンシブデザインのお問い合わせフォームを作成する方法を紹介しています。レスポンシブデザインとは、PCとスマートフォンでそれぞれ見やすい表示になるよう自動調整されるWebデザイン手法です。設定は、フォーム設定で「responsive」を選び、スタイルシートを読み込むをチェックするだけ。HTML5のrequired属性にも対応し、必須項目の未入力時に警告を表示できます。設定はカラム設定で「required属性を利用する」をチェックするだけ。pattern属性も利用可能で、入力パターンの指定ができます。フォームの属性にpattern="正規表現"を追加するだけで設定できます。ただし、住所検索機能とは競合するため注意が必要です。ダウンロードやフォーラムへのリンクも記載されています。以前の記事「スマホ対応のお問い合わせフォームを作ってみた」の内容を元に、更に機能が追加されています。

 

スマホ対応のお問い合わせフォームを作ってみた

/** Geminiが自動生成した概要 **/
SOY Inquiryでスマホ対応のレスポンシブなお問い合わせフォームを作成する方法を紹介。標準のフォームはスマホで表示が崩れるため、新しいテンプレートを作成し、HTMLを`<dl>`タグに変更することで解決。`/cmsインストールディレクトリ/app/webapp/inquiry/src/template/`以下にresponsiveディレクトリを作成し、サンプルファイルをコピー。form.phpのテーブル表示を`<dl>`に変更。設定画面でデザインをresponsiveに変更することで、PC・スマホ両対応のフォームが完成。確認画面(confirm.php)と完了画面(complete.php)も同様に`<dl>`タグを用いて修正することで、一貫したデザインを実現。


Powered by SOY CMS   ↑トップへ