ブログ内検索

micro:bitページ
とにかく速いブログサイトを目指す
検索キーワード:「デザイン」
 

SOY CMSで静的テンプレートプラグインを作成しました

/** Geminiが自動生成した概要 **/
SOY CMSの静的テンプレートプラグインは、HTMLファイルから直接テンプレートを読み込むことで、同じデザインの複数ページ管理を簡素化します。従来、URL構造の違い(例:/soycms/soycms/tutorial/1 と /soycms/soyshop/tutorial/1)により、同じデザインでも別ページとして管理が必要でした。このプラグインは静的テンプレートを利用することでこの問題を解決し、管理の手間を削減します。SOY Shopでは標準機能ですが、SOY CMSではプラグインとして提供されます。ダウンロードはsaitodev.co/soycms/ から可能です。

 

ヒトの進化における尿酸の役割

/** Geminiが自動生成した概要 **/
植物は、水中生活から陸上生活に移行する際に、過剰な光エネルギーへの対策として様々な進化を遂げました。その一つが、光合成の補助色素であるカロテノイドの獲得です。カロテノイドは、強光下で発生する活性酸素から植物自身を守る役割を担っています。水中は光が届きにくいため、水中生活を送っていた祖先は、光合成に必要な光エネルギーを得ることに苦労していました。しかし、陸上進出に伴い光が豊富に得られるようになると、今度は過剰な光エネルギーが細胞に損傷を与えるという問題が生じました。そこで、植物はカロテノイドを進化させることで、過剰な光エネルギーを吸収し、熱エネルギーに変換することで無害化することを可能にしました。

 

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のブログ記事にプレビュー機能を追加するプラグインが開発されました。記事投稿画面にプレビュー用のURL設定欄が追加され、確認ボタンを押すと、稼働中のブログページのデザインそのままに記事の内容を確認できます。プレビュー中はGoogle Analyticsのタグは出力されません。このプラグインにより、これまでプレビュー用の別ページを用意する必要があった手間が省けます。ダウンロードは開発元のサイトから可能です。

 

AppImage形式のMinecraft: Pi Edition: Rebornでスキンを変更してみた

/** Geminiが自動生成した概要 **/
この記事は、AppImage形式になったMinecraft: Pi Edition: Rebornでスキンを変更する方法を解説しています。 まず、AppImageファイルを実行する準備として、`chmod`コマンドで実行権限を与え、`fuse`パッケージをインストールします。 スキンの変更は、`~/.minecraft-pi/overrides/images/mob/`ディレクトリに`char.png`という名前でスキンファイルを配置します。 ただし、このままだとスキンが崩れてしまうため、`minecraft_skin_fixer.py`というスクリプトを使って修正します。 最後に、AppImageファイルを`/usr/local/bin`に移動して`mcpi`というコマンド名で実行できるように設定しています。

 

Minecraft: Pi Edition: Rebornでスキンを変更してみた

/** Geminiが自動生成した概要 **/
この記事は、Minecraft: Pi Edition: Rebornでスキンを変更する方法を解説しています。 まず、好みのスキンをダウンロードします。次に、標準のスキンのPNGファイル(char.png)をバックアップし、ダウンロードしたスキンで置き換えます。この際、ファイルパスに注意が必要です。 スキンを変更後、デザイン崩れが発生する場合は、Pythonスクリプト(minecraft_skin_fixer.py)を使用して修正します。スクリプト内のファイルパスを自身の環境に合わせて変更する必要があります。 修正後、Minecraft: Pi Edition: Rebornを再起動すると、スキンが変更されているはずです。

 

SOY ShopのSign In With Googleプラグインでボタンをカスタマイズする

/** Geminiが自動生成した概要 **/
SOY ShopのSign In With Googleプラグインのボタンカスタマイズ方法について解説。Googleが提供するジェネレータを使用し、クライアントID、Data Context、ID token nonce、Callback functionを設定。Nextボタンをクリック後、Enable Sign in with Google buttonをチェックし、ボタンデザインを設定後、Get codeボタンを押下。生成されたHTMLをプラグイン詳細画面に貼り付けて更新することでカスタマイズ完了。

 

SOY CMSでページ切り替えプラグインを作成しました

/** Geminiが自動生成した概要 **/
SOY CMSのページ切り替えプラグインは、指定期間中に特定のURLでアクセスされた際に、別のページコンテンツを表示する機能を提供します。 例えば、キャンペーン期間中のみトップページをキャンペーン専用のデザインに切り替えることができます。 管理画面で切り替え期間と対象ページ、表示ページを設定するだけで、URLを変更することなくコンテンツを切り替えられます。 さらに、意図しないアクセスを防ぐため、切り替え先ページへの直接アクセスはリダイレクトで元のページへ戻されます。 ダウンロードはsaitodev.co/soycms/ から可能です。

 

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

 

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

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

 

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 Shop 2.0.0 β

/** Geminiが自動生成した概要 **/
SOY Shop 2.0.0βでは、管理画面のUIをSOY CMS 3系に刷新。開発元の停滞を受け、非公式ながらバージョンアップを実施。拡張性向上のため、デザイン崩れを防ぐ3系テンプレートを採用した。標準機能のUI変更は完了し、プラグイン対応を進めている。現在はカスタムフィールド系、初期プラグイン、PAY.JP/Coiney決済プラグインが対応済み。今後、予約カレンダーや伝票管理プラグインへの対応を予定。データベース構造は変更なし。ダウンロードはsaitodev.co/soycms/soyshop/ から可能。管理画面のみ使用モードの追加により、ECサイト構築だけでなく、会員管理システムなど多様な用途にも対応できるようになった。

 

【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 ドメイン名`コマンドで可能。

 

SOY InquiryでParsley.jsを利用する

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

 

スパーク運動療育西京極スタジオ様サイトの制作を行いました

/** Geminiが自動生成した概要 **/
妻の亮子が、児童発達支援事業所スパーク運動療育西京極スタジオのWebサイトと予約アプリを制作しました。サイトのデザイン、予約アプリの開発は夫の齋藤毅が担当。運動療育は、発達障害のある子どもが運動を通してコミュニケーション能力や感情コントロール能力を育むもので、早期開始が効果的です。亮子は、子育て中の母親としての視点を取り入れ、安心して利用できるサイトを目指しました。西京極スタジオのオーナーは療育の効果を実感し、必要性を感じてスタジオを設立。亮子は今回の制作を通して新たな分野の知識を得ると共に、Webデザイナーの仕事のやりがいを再確認しました。

 

SOY ShopのGoogle Sign-In for Websitesプラグインでボタンの拡張設定を追加しました

/** Geminiが自動生成した概要 **/
SOY ShopのGoogle Sign-In for Websitesプラグインにボタン拡張設定が追加されました。従来のシンプルなログインボタンに加え、JavaScriptでカスタマイズ可能なボタンを実装できます。管理画面のサンプルコードを元に、大きさやデザインを自由に調整可能です。この拡張により、カートページ等のデザインとの調和が容易になり、より柔軟なサイト構築が可能になります。更新版プラグインはsaitodev.co/soycms/soyshop/からダウンロードできます。

 

SOY Inquiryで連番カラムを追加しました

/** Geminiが自動生成した概要 **/
SOY Inquiryにフォーム毎の通し番号を自動生成する機能が追加されました。この機能は、送信完了画面、自動返信メール、管理画面の受信一覧に表示可能です。通し番号は連番カラムで管理され、非表示設定も可能です。管理画面で連番カラムをフォームの最初に配置すれば、受信一覧での表示も実現できます。「次回お問い合わせ時に生成する番号」を設定することで、番号を飛ばすことも可能です。機能追加版はサイトからダウンロードできます。ただし、自作デザインのフォームを使用する場合は、PHPファイルの修正が必要です。修正方法の解説ページも用意されていますが、難しい場合はサイトから問い合わせも可能です。

 

SOY CMSでBootstrap4で作成したブログページ用のページ雛形を追加しました

/** Geminiが自動生成した概要 **/
SOY CMSにBootstrap4ベースのブログページ用テンプレートを追加しました。ダウンロードURL(https://github.com/inunosinsi/soycms/raw/master/cms/common/logic/admin/Site/TemplatePack/bootstrap4.zip)からテンプレートzipファイルをダウンロードし、管理画面からアップロード・インストールすることで利用可能です。手順は添付画像を参照ください。新規サイト作成時にはこのテンプレートがデフォルトで含まれるようになりました。同梱パッケージはsaitodev.co/soycms/ からダウンロードできます。

 

Inkscapeで家紋の練習

/** Geminiが自動生成した概要 **/
ロゴデザイン練習のため、Inkscapeで家紋に挑戦。株式会社京源の紋章上絵師、波戸場承龍氏のナデシコの紋を模写。上記URLの氏のサイトを参考に、Inkscapeでナデシコの紋を再現した。完成図は添付画像の通り。

 

SOY Appの管理画面のUIのレスポンシブウェブデザイン対応

/** 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/からダウンロードできます。

 

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

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

 

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を有効にする必要があります。

 

SOY CMSを介さずにSOY2HTMLを使ってみる

/** Geminiが自動生成した概要 **/
SOY CMSを使わずにそのテンプレートエンジンであるSOY2HTMLのみを利用する方法を解説。ルートディレクトリにindex.php、webappディレクトリ下に必要なファイルを設置する構成で、index.phpでSOY2ライブラリを読み込み、SOY2HTMLの設定を行う。HTMLファイル(TopPage.html)と対応するPHPファイル(TopPage.class.php)を作成し、soy:idを使った表示内容の変更例を示している。PHPファイルではWebPageクラスを継承し、コンストラクタでHTMLファイルを読み込み、addLabelでsoy:idに対応する値を設定することで、HTMLのsoy:id部分がPHPで指定した値に置き換わって表示される。

 

SOY2HTMLで繰り返し表示 - HTMLList編

/** Geminiが自動生成した概要 **/
SOY CMSのブロック内で繰り返し表示される記事に、一定の間隔で任意の文字列を表示するには、下記の手順に従います。 1. HTMLListクラスを継承したPHPクラスを作成し、populateItemメソッドで表示したい内容をHTMLタグで記述します。 2. HTMLファイルで、populateItemメソッドで作成したHTMLタグをsoy:idを使用して囲みます。 3. 表示する間隔をsoy:id="loop"に指定します。 4. 表示する文字列をsoy:id="index"に指定します。 これで、指定した間隔で任意の文字列が繰り返し表示されます。

 

SOY2HTMLでテキストフォームを設置する - HTMLInput編

/** Geminiが自動生成した概要 **/
SOY2HTMLを使用してテキストフォームを作成する方法を説明します。`HTMLInput`クラスを利用して、フォームにテキストフォームを追加できます。`addInput()`メソッドを使用して、フォーム要素のnameとvalue属性を設定します。これにより、PHPの記述混入を回避しつつ、デザインを崩さずにHTMLファイルを直接表示できます。テキストフォームの実際のコードは、`HTMLFormElement`クラスを継承した`HTMLInput`クラスで定義されています。

 

SOY2HTMLでセキュアなフォームを設置する - HTMLForm編

/** Geminiが自動生成した概要 **/
HTMLFormクラスは、HTMLのフォーム要素を生成するためのコンポーネントです。formタグを生成し、メソッド(デフォルトはPOST)やアクション、ターゲットなどの属性を設定できます。POSTメソッドの場合、CSRF対策としてsoy2_tokenという隠しフィールドを自動的に追加します。アクションが指定されていない場合は、現在のリクエストURIがアクションとして設定されます。また、JavaScriptのonSubmitイベントを設定することも可能です。disabled属性の設定も可能です。

 

プラグイン毎に詳細画面を持たせる拡張ポイントsoyshop.config.php

/** Geminiが自動生成した概要 **/
SOY Shopプラグインの拡張ポイントsoyshop.config.phpは、プラグイン毎に詳細設定画面を作成するための機能です。プラグインディレクトリにsoyshop.config.phpを設置し、インターフェース`SOYShopConfigPageBase`を実装することで、`http://ドメイン/CMSインストールディレクトリ/soyshop/index.php/Config/Detail?plugin=プラグインID` でアクセス可能な設定ページが生成されます。 主要なメソッドは`getConfigPage()`(設定画面のHTMLを出力)、`getConfigPageTitle()`(設定画面のタイトル)、`redirect()`(リダイレクト)です。`getConfigPage()`では、SOY2HTMLを用いてHTMLを生成するのが一般的です。PAY.JPクレジットカード支払いモジュールでは、`PayJpConfigPage`クラスとテンプレートファイルを使用して設定画面を構築しています。`redirect()`メソッドは、設定更新後などにURLパラメータを追加してリダイレクトする際に使用します。

 

SOY2HTMLでsoy:idを作る - HTMLLabel編

/** Geminiが自動生成した概要 **/
SOY2HTMLでPHPの処理結果をHTMLに表示するには、`soy:id`を利用します。PHP側では`addLabel`メソッドを使い、`soy:id`と同じ名前を第一引数、表示する値を`text`か`html`プロパティに設定した配列を第二引数に渡します。`text`は文字列をエンコードし、`html`はHTMLタグをそのまま出力します。`addLabel`は`createAdd`メソッドの簡略形で、本来は第二引数に`HTMLLabel`クラスを指定します。`soy2prefix`を指定すれば`soy:`部分を変更できます。

 

SOY2HTMLで処理とデザインを切り分ける

/** Geminiが自動生成した概要 **/
SOY CMS/Shopのモジュール内でSQLを実行するには、SOY2DAOを利用します。データベースへの接続情報はSOYShop_DataSetsクラスで管理されており、`getDataSourceName()`でデータソース名、`getDatabaseUserName()`でユーザー名、`getDatabasePassword()`でパスワードを取得できます。データベースに接続するには、`SOY2DAOFactory::create("データソース名")`を使用します。createメソッドの引数は省略可能で、省略した場合はshopデータベースに接続します。SQLを実行するには、`query()`、`executeQuery()`、`execute()`メソッドを使用します。これらのメソッドは、`SOY2DAO`クラスのインスタンスメソッドとして呼び出します。

 

SOY CMSの開発秘話後編

/** Geminiが自動生成した概要 **/
オープンソースのネットショップパッケージは自由度が高い反面、軌道に乗るとカスタマイズの蓄積によりバージョンアップが困難になる。独自改修した部分を把握し続ける必要があり、アップデートコストが増大。さらに、開発者のスキル不足や多忙化で保守が滞るリスクも。結果として、セキュリティ脆弱性や機能追加の遅延といった問題に直面する。自由と引き換えに保守コストが増大し、最新版への追従が難しくなるジレンマが生まれる。

 

SOY CMSの開発秘話前編

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

 

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

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

 

SOY Shopで予約サイトを運営する

/** Geminiが自動生成した概要 **/
スパーク運動療育西京極スタジオ様のWebサイト制作では、SOY Shopを活用した予約システムが導入されました。これにより、保護者はサイト上で簡単に療育の予約を行うことが可能になり、スタジオ側の手間も軽減されました。サイトデザインは、子供たちの成長をイメージした明るい色使いと、スタジオの温かい雰囲気を伝える写真が特徴です。また、レスポンシブデザインを採用し、様々なデバイスで快適に閲覧できます。さらに、SEO対策も施され、検索エンジンからの集客向上も期待できます。ブログ機能も備え、スタジオの最新情報や療育に関する有益な情報を発信することで、保護者とのコミュニケーション強化にも繋がっています。このサイトは、SOY Shopの柔軟性と拡張性を活かした好例と言えるでしょう。

 

SOY Shopの注文一覧で表示する項目の設定を追加しました

/** Geminiが自動生成した概要 **/
SOY Shopの管理画面の注文一覧表示項目をカスタマイズできる機能が追加されました。従来、表示項目の変更はシステム破綻のリスクを伴うため推奨されていませんでしたが、要望の多さを受けて実装されました。管理画面の設定画面から表示/非表示を切り替えられます。ただし、全ての項目を表示すると画面が見づらくなるため、運営のスリム化も合わせて検討するよう促しています。変更はGitHub上のSOY Shopパッケージに反映されています。

 

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対策も容易で、有料ブログや有料メルマガへの拡張も容易である。

 

SOY Shopのマイページでログインの有無でテンプレートを分ける機能を追加しました

/** Geminiが自動生成した概要 **/
SOY Shopのマイページで、ログイン有無によるテンプレート切り替え機能が追加されました。従来はログイン前後で同じテンプレートを使用していましたが、ログイン前は1カラム、ログイン後は2カラムといったレイアウト変更の要望に応えるため、ログイン時に別のテンプレートを読み込む仕組みが実装されました。 具体的には、`mypage.html` というテンプレートを使用している場合、ログイン時は `mypage_no_login.html` と `mypage_no_login.ini` があればそちらが優先的に使用されます。これらのファイルは管理画面からは生成できず、手動でサーバーにアップロードする必要があります。機能の詳細はSOY CMSフォーラムとGitHubリポジトリで公開されています。

 

SOY Shopで非同期で商品をカートに入れたい2

/** Geminiが自動生成した概要 **/
SOY Shopで商品を非同期にカートに追加するJavaScriptのカスタマイズ方法。カートの表示部分にIDを付与し、JavaScriptで非同期通信(XMLHttpRequest)を使ってカート情報を更新する。非同期通信に対応していないブラウザのために同期処理へのフォールバックと、タイムアウト時の処理も追加。さらに、ボタンの連打防止策として実行中フラグを用いて多重リクエストを防いでいる。これらの機能をプラグイン化することも検討中。

 

そもそもSOY CMSを使っていると特定されないために

/** Geminiが自動生成した概要 **/
SOY CMS使用の痕跡を隠す方法を紹介。404 Not FoundページはCMS、ショップ共にデザイン変更可能。ブログ記事URLも設定で変更できる。お問い合わせフォームはCMSスタイルシートを停止すればSOY Inquiryタグは消える。ただし、フォーム設置プラグイン使用時はSOY CMS特有の文字列がソースコードに残るため、完全な隠蔽は難しい。

 

SOY CMSで記事の内容ごとに文末のリンクを出し分けたい

/** Geminiが自動生成した概要 **/
SOY CMSで記事の内容ごとに文末リンクを出し分ける方法を解説しています。テンプレートにPHPを記述せず、モジュール機能を利用することで実現しています。記事に設定されたラベルIDを取得し、条件分岐で表示するリンク内容を決定します。ラベルIDが9なら栽培系セミナー、5か16ならSOY CMS関連のリンクを表示します。モジュールタグをテンプレートに挿入するだけで、PHPを記述することなく、記事の内容に合わせた文末リンクの出し分けが可能です。

 

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

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

 

20年後の農業×教育というテーマのお話をさせていただきました

/** Geminiが自動生成した概要 **/
京都大学で開催の「LEGOでデザインする未来の教室」ワークショップにて、「20年後の農業×教育」をテーマに講演を行いました。講演では、ITを活用したスマート農業の前に優先すべき重要な点について論じました。これからの農業と教育の連携を展望し、テクノロジー導入だけでなく、人材育成や食農教育の重要性などを訴えました。参加者との質疑応答も活発に行われ、未来の農業と教育のあるべき姿を共に考える貴重な機会となりました。

 

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

/** 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   ↑トップへ