ブログ内検索

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

Raspberry PiをChromebookから操作する

/** Geminiが自動生成した概要 **/
プログラミング教室でキーボード・ディスプレイ無しにRaspberry Piを使うため、ChromebookからVNC接続を試みた。Raspberry PiでVNCサーバーを有効化し、ChromebookにVNC Viewerをインストール、IPアドレス指定で接続に成功。しかし、ディスプレイ未接続時は起動時にウィンドウシステムが立ち上がらずエラー発生。解決策として、raspi-configで画面解像度を設定することで、ディスプレイ無しでもVNC接続できるようになった。

 

SOY Shopでメンテナンスページ設置プラグインを作成しました

/** Geminiが自動生成した概要 **/
SOY Shop用のメンテナンスページ設置プラグインが開発されました。このプラグインを使用すると、ショップサイトがメンテナンス中の際に簡単にメンテナンスページを表示できます。設定は、404NotFoundページと同様の方法でメンテナンスページを作成するだけで完了します。プラグインを有効化すると、管理画面のホームに設定の有無と設定画面へのリンクが表示され、メンテナンスページの表示を簡単に切り替えられます。現状は全ページがメンテナンスページに切り替わりますが、将来的にはカートやマイページのみの切り替えといった機能追加も検討されています。プラグインはsaitodev.co/soycms/soyshop/から入手可能です。

 

SOY CMSでカスタムフィールドデータ移行プラグインを作成しました

/** Geminiが自動生成した概要 **/
SOY CMSの長年の利用者から、既存記事のユーザビリティ向上のため、カスタムフィールドのデータをカスタムサーチフィールドに移行したいという要望があり、対応プラグインを開発しました。カスタムサーチフィールドは、検索性向上のためデータ型を最適化しており、プラグインはデータ型の差異を考慮した移行を実現します。設定画面で双方のカラム対応を設定し、実行ボタンで移行完了。文字列型のみ対応の現時点でのパッケージはsaitodev.co/soycms/からダウンロード可能です。

 

SOY ShopでFacebookページショップと連携する

/** Geminiが自動生成した概要 **/
SOY Shopの商品をFacebookページショップ/Instagramショッピングで販売する手順は以下の通り。 1. SOY ShopのFacebookページショップ用XMLプラグインを有効化し、XMLページを作成する。 2. Facebookページを作成し、ショップタブを追加。 3. 別のウェブサイトでチェックアウトを選択し、ダミー商品を登録。 4. カタログマネージャでXMLページのURLを登録。一括アップロードで「スケジュール設定したフィードを利用」を選択し、XMLページURLを設定。 5. エラーがなければ連携完了。Instagramショッピングは別途申請が必要。 最新版はサイト(https://saitodev.co/soycms/soyshop/)からダウンロード可能。

 

SOY InquiryでParsley.jsを利用する

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

 

さくらのVPSにUbuntu18.04を入れてSOY CMSを動かした時のメモ

/** Geminiが自動生成した概要 **/
SOY CMSでMySQL 8系に接続できない場合、認証方式の違いが原因です。MySQL 8系は`caching_sha2_password`がデフォルトですが、SOY CMSは`mysql_native_password`で接続します。解決策は、MySQLの設定ファイル`mysqld.cnf`の`[mysqld]`セクションに`default_authentication_plugin=mysql_native_password`を追加し、MySQLを再起動します。新規インストール時はインストール時に`mysql_native_password`を指定できます。既存ユーザの場合は、MySQLにログインし`ALTER USER 'ユーザ名'@'localhost' IDENTIFIED WITH mysql_native_password BY 'パスワード';`を実行し、`FLUSH PRIVILEGES;`で変更を適用します。

 

ApacheでLet's Encryptの自動更新する為にCertBotを導入した

/** Geminiが自動生成した概要 **/
Let's Encryptの証明書更新を自動化するため、CertBotを導入した。以前設定したcronでの自動更新が機能せず期限切れメールが届いたため、新しい仕組みに切り替えた。CertBot公式サイトの手順でインストール後、Ubuntu 18.04環境でcronを設定し、毎日2時半に`certbot renew --force-renew`を実行するようにした。Apacheの停止と起動を更新前後に行うように設定し、起動は少し遅らせて実行するようにした。

 

SOY CMSのブログの説明でWYSIWYGエディタに対応しました

/** Geminiが自動生成した概要 **/
SOY CMSのブログ説明欄がWYSIWYGエディタに対応しました。従来はHTML編集ができなかったブログの説明文を、リッチテキストで記述できるようになりました。 これを実現する「ブログ説明WYSIWYGプラグイン」が新たに開発され、HTMLを許可する`b_block:id="blog_description_raw"`タグも追加されました。このプラグインにより、ブログページの設定画面で、説明文入力欄がWYSIWYGエディタに切り替わり、より表現力豊かなブログ説明を作成できます。 ダウンロードはsaitodev.co/soycms/から可能です。この改良は、以前のカテゴリー詳細表示プラグインへのWYSIWYGエディタ対応に続くものです。

 

SOY ShopでSTORES決済(旧Coineyペイジ支払い)モジュールを作成しました

/** Geminiが自動生成した概要 **/
SOY ShopにCoineyペイジ決済モジュールが追加されました。Coineyは、カードリーダー(Coineyターミナル)を用いた決済に加え、Coineyペイジを利用したオンライン決済にも対応しています。モジュール導入により、SOY Shop上でCoineyペイジへの遷移によるクレジットカード決済が可能になります。実店舗とネットショップ両方でCoineyを利用したい場合に最適です。設定方法はモジュール設定画面に記載されています。Coineyは交通系電子マネー決済にも対応しており、導入によりSuica等の電子マネー決済を簡便に導入できます。Coineyペイジは新機能のため、現時点ではテスト環境は未対応ですが、順次対応予定です。

 

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でセレクトボックスを設置する - HTMLSelect編

/** Geminiが自動生成した概要 **/
SOY2HTMLのHTMLSelectクラスは、HTMLのセレクトボックスを生成する。`$this->addSelect()`で利用し、オプションは第二引数の配列で指定する。 `options`キーに配列を渡すとoptionタグが生成され、連想配列でない場合はvalue属性が設定されない。`indexOrder`をtrueにすると、数値インデックスがvalue属性となる。`selected`キーで選択状態を指定、複数選択には配列で渡す。多重配列でoptgroupも作成可能。`each`キーで各optionタグに属性を追加できる。

 

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

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

 

SOY Shopの各種プラグインの設定を保存する方法

/** Geminiが自動生成した概要 **/
SOY Shopのプラグイン設定を保存するには、SOYShop_DataSetsクラスのputメソッドを使用します。キーバリューストアのようにデータを保存でき、配列もシリアライズして文字列として保存できます。データの取得はgetメソッドで行い、指定したキーに対応する値を取り出します。第二引数で値がなかった場合の代替値を指定することも可能です。

 

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パラメータを追加してリダイレクトする際に使用します。

 

プラグイン毎の詳細画面へのリンクの拡張ポイントsoyshop.info.php

/** Geminiが自動生成した概要 **/
soyshop.admin.top.php拡張ポイントは、SOY Shop管理画面の新着情報欄にカスタム項目を追加できます。`getLink()`メソッドでリンクURL、`getTitle()`でタイトル、`getContent()`で本文、`getIcon()`でアイコンURLを返却することで項目が生成されます。`getLink()`では`SOY2PageController::createLink()`を使うことで環境に依存しないURLを作成可能です。例えば、特定の注文一覧ページへのリンクを追加する場合、`getLink()`で`SOY2PageController::createLink("Order.List?search[order_status]=5")`のように指定することで、注文ステータスが「発送済み」の注文一覧ページへのリンクを生成できます。

 

SOY Shopプラグインの拡張ポイントについて

/** Geminiが自動生成した概要 **/
SOY Shopプラグインの解説として、銀行振込モジュールを例に拡張ポイントが説明されている。プラグインはfeaturesディレクトリにmodule.iniで情報を定義し、pluginsディレクトリに機能を実装する。soyshop.config.php(設定画面)、soyshop.info.php(詳細ページへのリンク追加)、soyshop.order.mail.php(メールへの文章挿入)、soyshop.payment.php(支払い機能)といった拡張ポイントがあり、これらは/soyshop/webapp/src/logic/plugin/extensions/以下にインターフェース定義がある。

 

Google Apps ScriptのHTML ServiceでGoogle Calendarの予定を取得してみる

/** Geminiが自動生成した概要 **/
社会人・学生向けプログラミング教室で、Googleスプレッドシートの拡張機能開発に関する勉強会が開催されました。参加者はGoogle Apps Scriptを用いて、スプレッドシートの操作やWeb API連携を学ぶことで、業務効率化やデータ分析に役立つ実践的なスキルを習得しました。具体的には、HTML ServiceとSpreadsheet Serviceを活用し、スプレッドシートデータの取得・表示、カスタムメニューの追加、外部サービスとの連携などを実践。参加者からは、日々の業務に活かせる具体的な知識を得られたと好評を得ました。さらに、Google Apps Scriptの基礎から応用までを体系的に学べるため、プログラミング初心者でも安心して参加できたという声も寄せられました。

 

さくらVPSにJenkinsを入れて、Selenium + php-webdriverを動かせるようにする

/** Geminiが自動生成した概要 **/
さくらVPS(Ubuntu 16.04)にJenkinsを導入し、Seleniumとphp-webdriverでUIテストを自動化する方法を紹介。Jenkinsインストール後、初期設定、ジョブ作成、Git連携、ビルドトリガー設定、シェルスクリプト実行設定、メール通知設定を行い、Apacheの設定を調整してテスト実行環境を構築。15分毎にGitリポジトリをポーリングし、変更があれば自動的にテストを実行、結果をメールで通知。これにより、月700円のVPS費用で継続的なUIテストを実現。

 

SOY Shopの最近更新した商品表示プラグインで表示件数の設定を設けました

/** Geminiが自動生成した概要 **/
SOY Shopの管理画面の新着ページに表示される「最近更新した商品」の表示件数を変更できるプラグインが開発されました。従来は5件固定でしたが、プラグインの設定画面で自由に件数を設定可能になりました。また、更新履歴のない商品は表示されないよう改善されました。このプラグインは、新着ページのコンテンツをプラグイン化することで実現しており、表示内容のカスタマイズを容易にしています。ダウンロードはsaitodev.co/soycms/soyshop/ から可能です。

 

SOY ShopのPAY.JP定期課金モジュールで管理画面でプランの変更を追加しました

/** Geminiが自動生成した概要 **/
SOY ShopのPAY.JP定期課金モジュールがアップデートされ、管理画面から顧客の定期課金プラン変更が可能になりました。顧客詳細画面でプラン変更やキャンセル操作が行えます。プランは商品情報としてSOY Shop内で作成・管理します。ただし、商品情報の編集回数が多い場合、プラン一覧取得に不具合が生じる可能性があります。 このモジュールを活用することで、SOY CMSと連携した会員制有料ブログや、SOY Mailと連携した有料メルマガの運営が容易になります。最新版はsaitodev.co/soycms/soyshop/からダウンロード可能です。

 

Node.js製のアプリをforeverで永続化する

/** Geminiが自動生成した概要 **/
Node.jsアプリをサーバ再起動後も自動的に起動し、かつ実行中にエラーで停止しないようにする方法。foreverライブラリを利用し、`npm install -g forever`でインストール。`forever start /path/to/app.js`でアプリを起動・永続化。`@reboot /usr/local/bin/forever start /path/to/app.js`をcronに登録することで、サーバ再起動時に自動的にアプリが起動するようになる。

 

SOY Shopでお届け予定日の自動計算の置換文字列を追加しました

/** Geminiが自動生成した概要 **/
SOY Shopの発送メールでお届け予定日を自動計算する機能が追加されました。これまでお届け予定日未指定の顧客へのメールは手動で日付を入力する必要がありましたが、注文増加に伴う対応困難を解消するため、発送日から設定日数を加算した日付を自動挿入できるようになりました。標準配送モジュールの設定画面で「お届け日(自動)」の置換文字列を使用する設定を行い、メールテンプレート編集画面で当該置換文字列を挿入することで、管理画面からのメール送信時に自動計算されたお届け予定日(Y-m-d形式)が挿入されます。最新パッケージはsaitodev.co/soycms/soyshop/からダウンロード可能です。

 

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

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

 

SOY Mailで下書きの自動保存を追加しました

/** Geminiが自動生成した概要 **/
SOY Mailに下書き自動保存機能を追加しました。SOY Shopの利用増加に伴い、メルマガ作成の需要が高まる中で、長文になりがちなメルマガ編集時の利便性向上を図りました。設定画面の「サーバ設定」に追加されたチェックボックスを有効にすることで、メール作成・編集中に定期的に下書きが自動保存されます。この機能は試作段階のため、不備の可能性があることをご了承ください。ダウンロードはGitHubから可能です。

 

SOY Shopで複数カテゴリの様な設定を行う

/** Geminiが自動生成した概要 **/
SOY Shopでは複数カテゴリ機能はパフォーマンス低下のため廃止され、代替としてカスタムサーチフィールドプラグインが推奨されています。カスタムサーチフィールドでは、チェックボックス形式で複数の「タグ」を商品に設定可能。管理画面で項目を追加し、商品詳細ページでタグを選択、商品一覧ページには専用ページを作成し、CustomSearchFieldItemListモジュールを適用することでタグによる絞り込みを実現します。URLは「http://ドメイン/ショップID/ページのURL/フィールドID/タグ値」となります。ただし、管理画面の商品検索ではカスタムサーチフィールドによる検索は不可。その対策として、各フィールドに一括設定ページが用意され、簡易的な商品検索フォームが利用可能です。

 

WordPressのウィジェットを作ってみた2

/** Geminiが自動生成した概要 **/
WordPressウィジェット作成の続きで、設定画面を追加する方法を解説。前回作成したウィジェットにフォームを追加し、入力値を`$instance`に格納、`update`メソッドで保存、`widget`メソッドで表示する処理を実装。フォームの追加は`form`メソッド内でHTMLを記述、`update`メソッドでは入力値のサニタイズを行い、`widget`メソッドで`$instance`から値を取得し表示。管理画面と公開側で動作確認を行い、意図通り表示されることを確認し、簡易的なウィジェット作成が完了した。

 

WordPressのウィジェットを作ってみた1

/** Geminiが自動生成した概要 **/
WordPressプラグインのPHP記述を簡略化するため、ウィジェットを作成する方法を紹介。ウィジェットとは、プラグイン的な機能をサイドバーなどに挿入できる機能。HogeWorldウィジェットを作成し、hoge_world_widget.phpにWP_Widgetクラスを継承したコードを記述。プラグインを有効化し、ウィジェットをサイドバーに挿入することで"hoge world!!"と表示されることを確認。設定画面の追加については次回へ続く。

 

WordPressのプラグインを作ってみた2

/** Geminiが自動生成した概要 **/
WordPressプラグイン開発の続き。プラグイン用の管理画面を作成し、設定値を反映させる方法を紹介。add_action('admin_menu')で管理画面へのメニュー登録、add_menu_page()でメニュー表示設定、hoge_world_option_page()で管理画面のHTMLを記述。get_option()で設定値取得、update_option()で設定値保存。フォームからの入力値を保存し、更新メッセージを表示する処理を追加。最後に、保存した設定値(名前)をプラグインの出力に反映させ、公開側で表示を確認した。

 

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

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

 

SOY CMSの記事投稿画面で絵文字を使いたい

/** Geminiが自動生成した概要 **/
SOY CMSの記事投稿画面にYouTube動画の挿入ボタンを追加する方法を紹介します。TinyMCEのプラグインを自作することで実現できます。まず、プラグイン用のJavaScriptファイルを作成し、動画URLの入力フィールドと挿入ボタンを配置します。次に、ボタンクリック時の処理を記述し、入力されたURLから埋め込みコードを生成、エディタに挿入します。この際、正規表現を用いてURLの形式を検証し、不正なURLは受け付けないよう実装することで安全性を高めます。作成したJavaScriptファイルをTinyMCEの設定ファイルに読み込み、ツールバーに自作プラグインのボタンを追加することで、記事投稿画面から手軽にYouTube動画を埋め込めるようになります。

 

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

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