植物のミカタ

/** Geminiが自動生成した概要 **/
この記事は、Ubuntu 22.04 LXDE環境でデスクトップにFirefoxのアイコンを設置できない問題を解決する方法を解説しています。 問題はsnap版Firefoxをインストールした場合に発生し、デスクトップエントリを作成することで解決できます。 手順としては、 1. `/usr/share/applications/firefox.desktop` ファイルを作成し、必要な情報を記述します。 2. メニューからFirefoxを見つけて右クリックし、「デスクトップに追加」を選択します。 これにより、デスクトップにFirefoxのアイコンが設置されます。記事ではデスクトップエントリの詳細についても触れています。

/** Geminiが自動生成した概要 **/
## プログラミング教育におけるARM+Debian+Pythonの可能性（要約） 記事は、高性能化・低価格化したRaspberry Piに代表されるARMデバイスが、プログラミング教育に最適であると主張しています。 その理由は以下の3点です。 1. **安価で入手しやすい:** Raspberry Piは数千円で入手でき、故障時のリスクも低い。 2. **DebianベースのOS:** 安定性・信頼性が高く、豊富なソフトウェアが利用可能。 3. **Pythonの標準搭載:** 初心者に優しく、実用的なプログラミング言語として人気が高い。 これらの要素により、ARMデバイスは教育現場におけるプログラミング学習のハードルを下げ、生徒の学習意欲向上に貢献できると結論付けています。

/** Geminiが自動生成した概要 **/
SOY CMSがWebP画像形式のアップロードに対応しました。WebPはGoogleが開発した次世代画像フォーマットで、JPEGやPNGと比べてファイルサイズが小さく、画質を落とさずにWebサイトの表示速度を向上できます。現在では世界中の95%のブラウザでサポートされており、SOY CMSでもこのフォーマットに対応することで、より高速なWebサイト構築が可能になりました。最新版は公式サイトからダウンロードできます。

/** Geminiが自動生成した概要 **/
NodeMCU(ESP8266)をWebサーバにする実験。MicroPythonのサンプルコードを参考に、GPIOピンの状態をWebページに表示する仕組みを作成。NmapでNodeMCUのIPアドレスを特定しブラウザからアクセスした結果、GPIOピンの状態がリアルタイムに確認できた。HTTP通信の基礎を学ぶ良い機会となり、今後は外部からのリクエストに応じて処理を行う仕組みも試したい。

/** Geminiが自動生成した概要 **/
SOY Shopのアクセス制限プラグインが開発され、標準機能として同梱されました。このプラグインは、特定のブラウザからのみアクセス可能なページを作成し、IPアドレスと紐づけた固有の鍵をクッキーで管理することで実現しています。管理画面でブラウザを登録すると鍵が生成され、クッキーに保存。SOY Shop側は鍵とIPアドレスをデータベースに格納し、有効期限を設定します。これにより、鍵の偽装や不正アクセスを防ぎ、セキュリティを高めています。このプラグインは、タブレット等で特定機能を利用する際の利便性向上に役立ちます。最新版はsaitodev.co/soycms/soyshop/からダウンロード可能です。

/** Geminiが自動生成した概要 **/
ARM版ChromebookでLinuxアプリのDropboxを使うには、.debパッケージが使えないためDbxfsを利用する。pip3でDbxfsをインストール後、Dropboxフォルダを作成し、dbxfsコマンドを実行。表示されるURLにアクセスし、Dropboxにログインして認証コードを取得、端末に入力する。パスフレーズを設定すれば、Linuxファイル配下でDropboxのファイルが操作可能になる。Android版DropboxはChromebookのFilesのLinux共有に対応していないため、この方法が必要。

/** Geminiが自動生成した概要 **/
ChromebookのLinux環境でPENを動かすための手順を紹介した記事の続きで、日本語入力の設定方法を解説している。PENはJava製のため、LinuxにJavaをインストールする必要がある。インストールコマンド `sudo apt install default-jre`、バージョン確認コマンド `java -version` を紹介。その後、`java -jar PEN.jar` でPENを起動できるが、日本語入力ができないため、フォント設定が必要となる。この設定は次の記事で詳しく解説する、と予告している。

/** Geminiが自動生成した概要 **/
SOY CMS/SOY ShopでクッキーとセッションのSameSite属性を変更する方法について解説されています。標準ではLaxに設定されていますが、Strictに変更したり、SameSite=None; Secure=true;にすることができます。設定は /CMSインストールディレクトリ/common/config/session.config.php 内の $sessCnf["samesite"] の値を編集することで行います。例えば、Strictに変更する場合は "Strict" を設定します。この変更はSOY CMSとSOY Shop全体に反映されます。変更後のパッケージはsaitodev.co/soycms/からダウンロード可能です。

/** Geminiが自動生成した概要 **/
Let's Encryptを用いて、wwwあり(www.example.com)なし(example.com)両方のドメインでhttpsアクセスを実現する方法。Ubuntu 18.04、Apache2環境を前提とする。 まず、certbotをsnapでインストールし、example.comのhttps化を行う。その後、www.example.comの証明書取得のため、`certbot certonly --webroot`コマンドを実行(webroot-pathはドキュメントルート)。最後に、Apacheの設定ファイル(000-default-le-ssl.conf)にwww.example.comのVirtualHost設定を追加し、example.comへのリダイレクトを設定、Apacheを再起動する。

/** Geminiが自動生成した概要 **/
SOY CMSとSOY ShopにJavaScript製のコードエディタ「Ace」が導入されました。導入箇所は両CMSのテンプレート、HTMLモジュール、PHPモジュールの編集画面です。以前の色付きエディタはブラウザの進化への対応と動作の不安定さを理由に廃止されましたが、block:idタグの視認性向上のため、Aceが採用されました。現在はHTML/PHPモードのみですが、今後便利な機能の有効化を検討中です。最新版はsaitodev.co/soycms/からダウンロード可能です。

/** Geminiが自動生成した概要 **/
Android版ChromeでPHPセッションが突然切れる問題への対応についての記事を要約します。問題は、特定のAndroid版ChromeのバージョンでSameSite属性のないcookieがアクセス拒否されることに起因していました。解決策として、PHPで`session_set_cookie_params`関数を使用し、`SameSite=None`と`Secure`属性をcookieに設定することで、HTTPS通信時にのみcookieが送信されるようにしました。この変更により、Android版Chromeでのセッション維持が可能になりました。さらに、データベーススキーマの見直しやマイページの処理最適化を行い、表示速度の向上も実現しました。関連情報として、Webブラウザセキュリティに関する書籍の紹介や、cookie属性の詳細を解説するMDNのドキュメントへのリンクが掲載されています。

/** 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を使って地図上にカスタムアイコンを表示する方法を紹介しています。 シンプルなマーカー設置では、L.icon()でアイコンオブジェクトを作成し、L.marker()のオプションで指定します。 L.geoJSONを使う場合は、GeoJSONデータのpropertiesにiconオブジェクトを追加し、pointToLayerオプションで条件分岐することで、特定のマーカーのみカスタムアイコンに変更できます。 記事では、摂津峡のマーカーにnature.pngというカスタムアイコンを設定する例を示しています。

/** Geminiが自動生成した概要 **/
OpenStreetMapとLeafletを用いて地図上に複数のマーカーを設置する方法について解説されています。以前の記事ではマーカー一つずつにクリックイベントを設定していましたが、今回は複数のマーカーをまとめて表示する方法を説明しています。 具体的には、位置情報オブジェクトを配列で定義し、L.geoJSON関数の第一引数に渡すことで実現しています。配列内の各オブジェクトは、マーカーの名称、リンク先のURL、緯度経度情報を持ちます。 以前のコードではオブジェクトが一つしか扱えず、複数マーカー設置には非効率でした。今回の変更により、配列に要素を追加するだけで簡単にマーカーを増やせるようになりました。記事では摂津峡と山水館の二つのマーカーを設置する例を示し、山水館へのリンクも掲載しています。

/** Geminiが自動生成した概要 **/
OpenStreetMapとLeafletを用いて地図上にマーカーを設置し、クリックイベントを追加する方法について解説しています。 まず、Leafletで地図上にマーカーを設置する基本的なコードを示し、クリックイベントを追加するために`L.geoJSON`を使用する方法を説明しています。`L.geoJSON`の第二引数に`onEachFeature`オプションを渡すことで、マーカーごとにクリックイベントを設定できます。 記事では、クリックイベント発生時に任意のURLへ遷移する例を挙げており、PCとスマホそれぞれでクリックとタップイベントに対応するコードを記述しています。

/** Geminiが自動生成した概要 **/
この記事では、Google Maps JavaScript APIの代わりにOpenStreetMapとLeafletを使って地図を表示する方法を紹介しています。OpenStreetMapは無料で利用でき、Leafletは簡単に地図を表示できるJavaScriptライブラリです。 記事では、大阪府高槻市の摂津峡を例に、緯度経度を指定して地図を表示し、マーカーを設置する手順をコード付きで解説しています。結果として、少ないコードで簡単に地図上にマーカーを表示することができました。

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

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

/** Geminiが自動生成した概要 **/
HTMLScriptElement は `<script>` タグを制御するインターフェース。`src` 属性で外部スクリプトを読み込み、`async` 属性を設定すると解析を妨げずに非同期でスクリプトを実行、`defer` 属性はHTML解析完了後に実行、`type` 属性でスクリプト言語を指定。`text` 属性に直接コードを記述も可能。`onload` イベントで読み込み完了を検知、`onerror` でエラー処理。`crossorigin` 属性はCORSリクエストを制御。`integrity` 属性はSubresource Integrity を使用し、読み込んだスクリプトの整合性を検証。`referrerpolicy` はリファラーヘッダーを制御。`nomodule` はES Modulesをサポートしないブラウザでスクリプトを実行。

/** Geminiが自動生成した概要 **/
SOY CMSのCore Web Vitals改善用プラグイン「Cumulative Layout Shift」にpicture要素設定が追加されました。 picture要素はレスポンシブ画像を実現するHTMLタグで、画面幅に応じて最適な画像を出力します。プラグインでは、imgタグにsize属性を自動挿入するか、pictureタグで囲うかを選択できます。ただし、既にHTMLテンプレートでpictureタグを使用している場合は正常に動作しないため注意が必要です。この機能はsaitodev.co/soycms/で提供されるパッケージに含まれています。画像のwidthが小さい場合はsize属性が自動挿入されます。

/** Geminiが自動生成した概要 **/
SOY Shopのクレジットカード決済では、カード入力前に在庫を確保するため、入力を中断すると在庫が減ったまま注文が確定しない問題があった。これを解決するため、自動注文無効プラグインを作成。 設定した時間より前の仮登録注文を無効化し在庫を戻すことで、カード入力中断による在庫の減少を防ぐ。プラグインは仮登録から無効化までの時間を設定可能。クレジットカード決済特有の問題への対策として、在庫管理の精度向上に貢献する。

/** Geminiが自動生成した概要 **/
SOY CMSの管理画面UIをカスタマイズするには、該当HTMLファイルを見つける必要があります。例としてページテンプレート編集画面(URL例: `http://example.com/cms/soycms/index.php/Page/Detail/3`)を挙げます。 HTMLファイルは`cms/soycms/webapp/pages`ディレクトリ以下に配置されています。URLの`Page/Detail`部分がディレクトリとファイル名に対応します。まず`pages`ディレクトリ内の`Page`ディレクトリを探します。次に`Detail`ディレクトリを探しますが、存在しない場合は`DetailPage.html`が目的のファイルです。通常、`DetailPage.class.php`というPHPファイルも対で存在します。これらはSOY2HTMLの仕組みを利用しており、より深く理解するには関連の記事を参照ください。

/** Geminiが自動生成した概要 **/
Google Analyticsのスクリプトをページ読み込み直後に移動することで、Core Web Vitals、特にFID(First Input Delay)を改善する方法を解説しています。通常、Google Analyticsのスクリプトは</body>直前に配置されますが、これだとスクリプトのダウンロードと実行が完了するまでブラウザが他の操作を受け付けず、FIDが悪化します。記事では、async属性を追加し<head>内に移動することで、スクリプトを非同期で読み込み、ブラウザのレンダリングを妨げないようにする方法を紹介。async属性はIEでは機能しないため、IE用に条件分岐で対応する必要性も説明しています。さらに、Google Tag Managerを使用している場合は、設定変更だけで対応可能であることも解説しています。これらの修正により、FIDが大幅に改善され、ユーザーエクスペリエンスの向上が期待できます。

/** Geminiが自動生成した概要 **/
XdebugはPHPのデバッグとプロファイリングツールです。`xdebug_debug_zval()`関数は、変数の内部表現であるzvalの情報を表示します。出力には、参照カウント(refcount)、参照かどうか(is_ref)、そして変数の型と値が含まれます。zvalの情報は、PHPのガベージコレクションの仕組みや変数の挙動を理解する上で重要です。Xdebugのドキュメントでは、`xdebug_debug_zval()`以外にも様々なデバッグ関数が紹介されています。これらを利用することで、PHPコードの実行状況を詳細に把握し、問題の特定やパフォーマンスの改善に役立てることができます。

/** Geminiが自動生成した概要 **/
Chrome 85から導入されたCSSプロパティ`content-visibility: auto;`を利用してコンテンツの遅延読み込みを試みた。このプロパティは、コンテンツが画面に表示されるまでレンダリングを遅延させることでパフォーマンス向上に繋がる。 具体的には、`<head>`タグ内にスタイルを記述し、遅延させたい要素に`.content-lazy`クラスを付与した。ファーストビューとなるPC表示時は`content-visibility: visible;`、スマホ表示時はメディアクエリで`content-visibility: auto;`を適用することで、表示状況に応じて遅延読み込みを制御している。 さらに、常に遅延読み込みさせたい要素には`.content-lazy-always`クラスを付与し、`content-visibility: auto;`を適用した。 サイトの読み込み速度が元々速かったため、今回の変更による効果測定は明確ではなかった。

/** Geminiが自動生成した概要 **/
さくらのVPSにUbuntu 18.04を導入し、SOY CMSを稼働させる手順を解説した記事の要約です。まず、OSインストール後、Apache、PHP、必要なPHP拡張機能、MySQLをインストールします。次に、MySQLにSOY CMS用のデータベースとユーザーを作成し、ファイアウォールでHTTPとHTTPSを許可します。SOY CMSのzipファイルをダウンロードし、ドキュメントルートに展開後、ブラウザからインストールを実行します。SQLite版ではなくMySQL版を利用するため、データベースの設定が必要です。最後に、サイトURLと管理者情報を入力してインストールを完了します。記事ではコマンド操作の詳細やトラブルシューティングも紹介されています。

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

/** Geminiが自動生成した概要 **/
SheetJSは、ブラウザ上でHTMLテーブルから簡単にExcelファイルを生成できるJavaScriptライブラリです。デモを改修し、テーブル要素を指定して`XLSX.utils.table_to_book`でブックオブジェクトを生成、`XLSX.writeFile`でExcelファイル(xlsx)として出力する簡単なコードで実装できます。 表示されたHTMLテーブルのダウンロードボタンをクリックするだけで、テーブル構造を保持したExcelファイルがダウンロードされます。著者は従来PHPのPhpSpreadSheetを使用していましたが、SheetJSも選択肢に加えるとのことです。

/** Geminiが自動生成した概要 **/
この記事はUbuntu 19.10環境でGoogle Ads APIを使用するためのgRPC for PHPのインストール手順を解説しています。PEAR/PECL、Composerをインストール後、`pecl install grpc`、`pecl install protobuf`コマンドでgRPCとprotobufをインストールします。その後、`/etc/php/7.4/cli/php.ini`と`/etc/php/7.4/fpm/php.ini`両方に`extension=grpc.so`と`extension=protobuf.so`を追加し、`phpinfo()`や`php -m`でインストールを確認します。記事ではComposerのインストール手順も解説していますが、gRPCのインストール自体はComposerを使わずPECL経由で行っています。

/** 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/)からダウンロード可能。

/** Geminiが自動生成した概要 **/
CSSの読み込み方を変えることでSEO対策とページ表示速度の高速化を実現する方法を紹介。従来headタグ内に記述していた外部CSSをbody閉じタグ後へ移動することでレンダリングブロックを回避し、表示速度を向上させる。さらに、HTTP/2環境下ではファイル数削減が有効となるため、CSSをHTML内に直接記述する方法も提示。ただし、保守性向上のためにCMSのモジュール機能を活用し、HTML末尾にCSSを挿入する手法を推奨。この際、モジュールファイルの読み込みによる速度低下を防ぐため、最終HTMLのキャッシュ機構を併用することが重要となる。

/** Geminiが自動生成した概要 **/
IPv6はSEO対策に有効な通信速度改善策。IPv4アドレス枯渇問題を解決する後発の規格で、理論上アドレス割り当ては無限大。16ビット単位の16進数表記で、IPv4より最適化されている。saitodev.coのようなWebサイトアクセスでは、DNSサーバでドメイン名からIPv4/IPv6アドレスを取得し、サイトサーバへアクセスする。IPv6設定はサーバ会社ごとに異なるが、DNS設定ではIPv4をAレコード、IPv6をAAAAレコードに登録する。設定確認は`ping -4/-6 ドメイン名`コマンドで可能。

/** Geminiが自動生成した概要 **/
SQLiteを採用するSOY CMSでサイト表示を高速化するため、最終生成HTMLのキャッシュ化機能を導入した。データベースやファイル読み込みを省略することでPageSpeed Insightsのスコアが大幅に向上。この機能はHTMLキャッシュプラグインをインストール後、index.php内のexecute_site()をexecute_site_static_cache()に変更することで有効になる。ただし、カート内容の表示など動的なコンテンツはキャッシュ化できないため、リッチなサイト構成との両立は難しい。高速化とSEO対策には見栄えよりも内容重視の割り切りが必要となる。SOY Shopでも同様のキャッシュプラグインが開発されている。

/** Geminiが自動生成した概要 **/
SOY Shopのデータベースパフォーマンス改善にはインデックスの見直しが効果的です。 商品点数やアクセス数の増加に伴い、データベースへの負荷が増大し表示速度が低下することがあります。 特に商品検索や絞り込み機能は複雑なクエリを実行するため、適切なインデックスが設定されていないとパフォーマンスに大きな影響を与えます。 インデックスはデータベース内の特定の列に付与されることで、データ検索の高速化を実現します。 SOY Shopでは、商品コードや商品名、公開状態など、頻繁に検索される項目にインデックスを設定することが推奨されています。 しかし、不要なインデックスは更新処理のオーバーヘッドとなるため、適切なインデックスを選択することが重要です。 記事では、phpMyAdminを用いたインデックスの確認方法、SOY Shop管理画面からのインデックス設定方法、そしてインデックス設定の注意点が解説されています。 インデックスを適切に設定することで、データベースの負荷を軽減し、表示速度の向上、ひいてはユーザーエクスペリエンスの向上に繋がるとしています。

/** Geminiが自動生成した概要 **/
PageSpeed Insightsでスコア100を目指すため、サーバー側の処理速度向上に取り組んだ。SEO対策として、PHP製CMSを使う場合、PHPバージョンを最新に保つことが重要。PHP7系はOPCacheにより高速化されており、バージョンアップだけでスコア向上も期待できる。VPSサーバでのバージョンアップ方法は過去記事を参照。PHP8ではJitコンパイラ導入で更なる高速化が見込まれる。かつてGo言語への移植も検討したが、PHPでスコア100達成できたため中止した。

/** Geminiが自動生成した概要 **/
SEO対策として、データ転送量削減のためブラウザキャッシュを活用する方法を解説。HTML以外のファイルは一度取得すれば再取得不要なため、ApacheのExpiresモジュールでブラウザにキャッシュさせる。Ubuntu環境でApache2.4を前提に、a2enmod expiresコマンドでモジュールを有効化し、.htaccessにファイルタイプごとにキャッシュ期間を設定する記述を追加すれば完了。HTMLは即時、CSS/JavaScriptは10日間、画像は15日間キャッシュされるようになる。

/** Geminiが自動生成した概要 **/
この記事では、ウェブサイトのSEO対策として画像ファイルサイズの削減に焦点を当てています。GoogleのJPEGエンコーダGuetzliを導入することで、画像品質を維持しながらファイルサイズを大幅に削減できることを実例で示しています。具体的には、115.8kbの画像がGuetzliによって9.4kbまで圧縮され、80%以上の削減に成功しています。また、PageSpeed InsightsによるWebP等の次世代フォーマットの推奨についても触れつつ、Safari非対応やPageSpeed Module導入によるパフォーマンス低下を理由に現状では採用を見送っていることを説明しています。

/** Geminiが自動生成した概要 **/
HTTP/2は、HTTP/1.1以前のバージョンに比べて、複数のファイルを並列でダウンロードできるため、ウェブサイトの表示速度を大幅に向上させます。これにより、リクエスト回数とインターネット全体の回線使用量が削減されます。しかし、一度に送受信されるデータ量が増えるため、画像サイズの最適化が重要になります。ApacheサーバーでHTTP/2を有効にする方法は、別記事で紹介されています。より詳細な情報は、オライリーの"Real World HTTP"で学ぶことができます。現在、LiteSpeedのようなサーバーでは、さらに高速なHTTP/3(QUIC)が利用可能ですが、当サイトはApacheのHTTP/3対応を待っています。

/** Geminiが自動生成した概要 **/
個人事業主がSEO対策として行ったデータ転送量削減策を紹介。コンテンツの充実を最優先としつつ、今回はデータ圧縮に着目。GoogleのPageSpeed Insightsを参考に、Brotliアルゴリズムを用いてデータ転送量の削減を試みた。Brotliは対応サーバーが限られるため、Deflateやgzipも選択肢として提示。HTMLや画像のデータ量削減は今後の課題とし、データ転送に関する更なる改善策を予告している。

/** Geminiが自動生成した概要 **/
SOY CMSのページ毎表示制限プラグインは、サイト運営中に追加するページを、管理画面ログイン時のみ表示可能にする機能を提供します。CMS組み込み時の全ページ非表示機能を、個別のページに適用できる形にしたものです。設定したページは、管理画面ログイン中であれば、別タブでも表示制限が有効です。このプラグインを含むパッケージはsaitodev.co/soycms/からダウンロードできます。

/** Geminiが自動生成した概要 **/
SOY CMSで異なるドメインの複数サイト(example.kyoto, other.example.kyoto)をさくらVPS上の単一サーバーで運用する手順を記述。Let's Encryptでワイルドカード証明書(*.example.kyoto)を取得し、既存証明書を削除後、お名前.comのDNS設定でTXTレコードを追加。SOY CMSでサイト毎にURLを設定し、Apacheのドキュメントルートにindex.phpと.htaccessを設置、ドメインに応じてサイトを切り替えるよう設定。ワイルドカード証明書の更新は、お名前.comでは自動化できないため手動、またはさくらのクラウドDNSへの移管が必要。

/** Geminiが自動生成した概要 **/
SOY2HTMLでセキュアなフォームを設置するには、csrf_tokenを利用する。HTMLFormクラスでformタグを出力すると自動的にトークンが埋め込まれる。トークンはセッションに保存され、送信時に検証されるため、クロスサイトリクエストフォージェリを防げる。 独自にformタグを作成する場合は、soy:id="csrf"でトークンを埋め込む必要がある。また、JavaScriptで非同期通信を行う場合も、トークンをヘッダーやパラメータに含める必要がある。トークンの有効期限は短いため、フォームの送信に時間がかかる場合は注意が必要。これらの対策により、安全なフォームを実現できる。

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

/** Geminiが自動生成した概要 **/
Ubuntu 19.10でSnap版Bracketsのライブプレビューが「ファイルへのアクセスが拒否されました」エラーで動作しない問題の対処法。Brackets 1.14 (snap経由)、Chromium 79.0.3945.79 (snap)環境で、GitHubのIssueを参考に解決。解決策は、Bracketsのメニュー「File」→「Enable Experimental Live Preview」を有効にすること。これにより、設定済みのブラウザ（ChromiumやFirefox）でライブプレビューが正常に動作するようになった。

/** Geminiが自動生成した概要 **/
Ubuntu 19.10でGoogleフォトにUSB接続のデジカメ画像をアップロードしようとしたら、「Permission denied」エラーが発生。原因はChromiumブラウザの設定でリムーバブルメディアへのアクセスが許可されていなかったため。UbuntuソフトウェアからChromiumの詳細設定を開き、「リムーバブルストレージデバイスのファイルの読み取り/書き込み」を有効化することで解決。

/** Geminiが自動生成した概要 **/
Google Analytics APIの承認取得に苦労した著者が、その過程を詳述。OAuth同意画面の設定から始まり、Googleからの度重なるメールでの指摘に対応していく。 ホームページ、プライバシーポリシーの設置、アプリ操作動画の提出を求められ、動画はクライアントIDの表示や言語設定など細かい指示に従い作成し直した。最終的に承認を得るまで、動画の翻訳やスコープ設定の不備など、多くの修正を余儀なくされた。

/** Geminiが自動生成した概要 **/
Ubuntu 19.10環境でPHPからMeCab形態素解析エンジンを使用する手順をまとめたメモです。MeCab、辞書(mecab-ipadic-utf8, mecab-ipadic-neologd)、php-mecabをインストールし、PHPからMeCabを呼び出すテストコードを実行しています。 php-mecabインストールでは、phpize、configure、make、installを行い、mecab.iniを作成、ApacheとCLIで有効化しました。テストコードは"今日は晴天なり"を解析し、結果を配列で出力しています。ブラウザと端末の両方から実行し、期待通りの解析結果が得られました。

/** Geminiが自動生成した概要 **/
SOY Shop用のプラグインで、複数カテゴリの商品一覧を1ページに表示できる機能を追加しました。標準のナビゲーションページではカスタムサーチフィールド等のプラグインとの連携が難しいため、簡易的に商品ブロックと同等の機能を実現するプラグインを開発。管理画面で生成個数を指定すると、`<shop:module>`と`<block:id="item_list">`を使った記述が生成され、`category`属性にカテゴリIDを指定することで各カテゴリの商品一覧が表示されます。カテゴリIDはカテゴリ詳細画面のURL末尾の数字で確認できます。今後はカスタムサーチフィールドにも対応した商品ブロック作成プラグインを開発予定です。現在はカテゴリと表示件数、カスタムサーチフィールドに対応したプラグインを公開中です。

/** Geminiが自動生成した概要 **/
SOY Shopで注文状態の並び順を設定できるプラグインが開発されました。 管理画面の注文一覧表示で、標準の状態遷移に沿わない並び順への変更ニーズに応えるものです。プラグインを有効化すると、設定画面で自由に注文状態の表示順をドラッグ＆ドロップで変更できます。これにより、ショップ独自のワークフローや業務の優先順位に合わせた表示が可能になり、作業効率の向上が期待できます。例えば、「入金待ち」を「発送待ち」より前に表示するなど、柔軟なカスタマイズが可能です。設定は簡単で、直感的な操作で変更できます。このプラグインは、SOY Shopの標準機能では実現できなかった注文状態の表示順のカスタマイズを可能にし、より効率的な受注管理を実現するツールとなります。

/** Geminiが自動生成した概要 **/
Windows10のApache2.4でバーチャルホストを設定する方法。httpd.confの`#Include conf/extra/httpd-vhosts.conf`の#を外し、httpd-vhosts.confを編集する。既存の`<VirtualHost *:80>`の設定に加え、新たな`<VirtualHost *:81>`ブロックを追加し、DocumentRootに任意のディレクトリを指定、アクセス許可を設定する。追加のバーチャルホストは、Listenポートと`<VirtualHost>`ブロックを追加することで設定可能。コマンドプロンプトで`httpd -k restart`を実行しApacheを再起動後、ブラウザで`localhost:81`等にアクセスし、意図したファイルが表示されれば設定完了。

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

/** Geminiが自動生成した概要 **/
Ubuntu 18.04にGo言語とQtをインストールし、GoでQtアプリケーションを開発する手順を記録した記事です。Go 1.11、Qt 5.11.1をインストールし、QtのサンプルWebブラウザの実行を確認後、GoのQtバインディングパッケージ`github.com/therecipe/qt`をインストールしました。`qtsetup`コマンドでパッケージの準備中に問題が発生しましたが、`generate`終了時点で中断し、サンプルプログラムを実行したところ、正常に動作することを確認しました。

/** Geminiが自動生成した概要 **/
BiquadFilterNodeは、2次セクションを持つデジタルフィルターで、オーディオ信号の変更に使用されます。`type`プロパティでフィルターの種類を指定し、`frequency`でカットオフ周波数または中心周波数を設定します。`Q`プロパティはフィルターの帯域幅を制御します。`gain`は特定のフィルタータイプでのみ使用されます。主なフィルタータイプは、ローパス、ハイパス、バンドパス、バンドストップ、ローシェルフ、ハイシェルフ、ノッチ、オールパスです。ローパスは指定周波数以下の周波数を通過させ、ハイパスは指定周波数以上の周波数を通過させます。バンドパスは特定の周波数帯域を通過させ、バンドストップはその帯域を減衰させます。シェルフフィルターは特定の周波数以上または以下のゲインを調整し、ノッチフィルターは特定の周波数を除去します。オールパスフィルターはすべての周波数を通過させますが、位相を変化させます。

/** Geminiが自動生成した概要 **/
Web Audio APIを用いてマイク入力の音声の周波数を可視化するJavaScriptコード例を紹介している。AnalyzerNodeでFFTを行い、得られた周波数データをcanvasにグラフとして描画する。コードでは、マイクへのアクセス、AudioContextとAnalyserNodeの作成、周波数データの取得と描画処理を解説。実行すると音声入力に応じてリアルタイムに周波数グラフが変化するが、ハウリングが発生しやすい点についても言及している。

/** Geminiが自動生成した概要 **/
この記事は、JavaScriptで音の周波数を可視化する方法を学ぶための導入部分です。音のデジタル化に不可欠なフーリエ変換の概念を、三角関数のグラフを用いて分かりやすく解説しています。sin波、cos波、そしてそれらの合成波のグラフを示し、複雑な波形も三角関数の組み合わせで表現できることを説明。式の係数を配列データとして取り出すことで、音をデジタルデータとして扱えるようになることを示しています。最後に、高速フーリエ変換(FFT)に触れ、次回JavaScriptでの実装を示唆しています。記事には、HTML5 Canvasを使ったsin波を描画するコード例も掲載されています。

/** Geminiが自動生成した概要 **/
Web Audio APIを用いて録音機能を実装した。navigator.getUserMediaでマイクアクセス権を取得し、MediaRecorderで録音、10秒後に停止しsample.wavとしてダウンロードさせる。 現状は問答無用で録音開始・停止する仕様だが、将来的には取得した音の周波数を解析し、音に合わせた処理を実現したい。

/** Geminiが自動生成した概要 **/
Android端末で現在地の土壌と地質を調べるWebアプリをHTML5、Service Worker、IndexedDBを用いて開発。GPSで緯度経度を取得し、オフラインでも動作。取得した情報は農研機構の土壌図、産総研の地質図、Googleマップへのリンク生成に利用。現在Android Chromeのみ対応で、ログは10件保持。Service Worker使用による位置情報取得の不具合調査中。開発中のロガー機能の一部公開で、正式版は非公開。機能追加要望や不具合報告は受け付けていない。Githubでソースコード公開中。

/** Geminiが自動生成した概要 **/
自作PHPアプリでGoogle検索結果を集計する際、cURLで検索を実行したところ「503 Service Unavailable」エラーが発生した。Googleはスクリプトからの自動検索を制限しており、エラーメッセージは異常トラフィックの検出を示していた。解決策として、`curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER["HTTP_USER_AGENT"]);`をcURLに追加し、ブラウザのユーザーエージェントを送信するように変更した。これによりエラーが解消し、検索結果の集計が可能になった。単に適当なユーザーエージェントを設定するだけでは解決せず、実際に使用しているブラウザの情報を送ることが重要だった。

/** Geminiが自動生成した概要 **/
iPhoneで電子書籍を読むには、「植物のミカタ」サイトで書籍をカートに入れ、購入手続き（メールアドレス、氏名、クレジット情報入力）を完了します。購入後、送られてくるURLはChromeブラウザで開いてください。Safariがデフォルトブラウザの場合は、Chromeに変更するか、Chromeをインストールする必要があります。ダウンロード後は、既存のiBooksアプリで書籍を読むことができます。

/** Geminiが自動生成した概要 **/
Go言語でSeleniumとAgoutiを使ってChromeブラウザを自動操作する方法を解説しています。まずJavaとSelenium Serverをインストールし、起動確認を行います。次にChromeドライバーをインストールし、環境変数Pathにドライバのパスを追加します。Go言語のパッケージ管理ツールgo getでAgoutiパッケージを取得後、サンプルコードを作成・実行します。サンプルコードでは、AgoutiでChromeDriverを起動し、新しいページを開いてGoogleのトップページに遷移させる処理を行っています。実行結果として、Chromeブラウザが起動しGoogleのトップページが表示されます。

/** Geminiが自動生成した概要 **/
SOY2HTMLのIgnoreプラグインの使い方を解説。index.phpに`SOY2HTMLPlugin::addPlugin("ignore", "IgnorePlugin");`を追加することで、HTMLテンプレート内で`<!-- soy:ignore="***" --><!-- /soy:ignore="***" -->`で囲まれた部分がSOY2HTMLによるレンダリング時に無視される。ブラウザで直接HTMLファイルを開いた場合は、無視された部分がそのまま表示される。これにより、SOY CMSに組み込む前のテンプレートファイルにおいて、デザイナ向けの説明文などを記述し、CMS組み込み時には表示させないといった使い方ができる。

/** Geminiが自動生成した概要 **/
Go言語でlocalhost:8889で動作するシンプルなWebサーバを作成する手順と動作確認方法の説明です。 `server.go` はルートパスへのアクセスに対し、リクエスト内容をコンソールに出力し、"hello world"を含むHTMLをレスポンスとして返します。`httputil.DumpRequest`でリクエスト内容をダンプし、`fmt.Println`でコンソールに表示、`io.WriteString`でレスポンスを書き込みます。`http.ListenAndServe`でサーバを起動し、ブラウザでアクセスすると"hello world"が表示されます。同時にコンソールにはリクエストヘッダ情報（例：GETメソッド、Host、User-Agentなど）が出力されます。

/** Geminiが自動生成した概要 **/
Jenkinsの動作が遅くなった場合、まずジョブの実行履歴を確認し、遅いジョブを特定します。次に、そのジョブの設定やビルド手順を見直し、不要な処理やリソースを消費する操作がないか確認します。 Jenkins自体の負荷が高い場合は、プラグインの無効化、古いビルドの削除、ディスク容量の確保などを行います。それでも改善しない場合は、Jenkinsの再起動や、リソースの増強を検討します。 パフォーマンス監視ツールを利用し、CPU、メモリ、ディスクI/Oなどを監視することで、ボトルネックの特定に役立ちます。

/** Geminiが自動生成した概要 **/
SOY Shopの管理画面からの注文機能に、見積もり作成業務向けに自動バックアップ機能が追加されました。見積もり作成は商品数が多く、登録に時間がかかるため、作業中にセッションが切れてしまう可能性があります。この機能は、商品の内訳に変更がある度に自動でバックアップを作成し、セッション切れ後にバックアップから復元できるようにすることで、作業中断によるデータ損失を防ぎます。バックアップデータはJSON形式で保存されます。この機能追加を含むパッケージはsaitodev.coからダウンロード可能です。

/** Geminiが自動生成した概要 **/
Google Apps Script (GAS) のHTML Serviceを利用して、HTMLファイルとGASのコードを連携させる方法を紹介しています。 具体的な手順として、Googleドライブ上にGASプロジェクトを作成し、index.htmlファイルに"Hello, World!"と記述、コード.gsファイルにはdoGet関数でHTMLファイルを読み込むコードを記述します。 その後、ウェブアプリケーションとして公開することで、ブラウザでHTMLの内容が表示されることを確認しています。 さらに、GASを学ぶ上でJavaScriptの知識が重要であることを補足し、関連技術としてNode.js、NW.js、GoogleドキュメントのOCR機能についても言及しています。

/** Geminiが自動生成した概要 **/
php-webdriverでconfirmダイアログのボタンをクリックする方法について解説。`$driver->switchTo()->alert()`でダイアログを取得し、`$dialog->accept()`でOKボタン、`$dialog->dismiss()`でキャンセルボタンをクリックできる。例として「退会する」リンククリック時に表示されるconfirmダイアログを操作するコードを紹介。`findElement`でリンク要素を取得し`click`でクリック、その後`switchTo()->alert()`と`accept()`でOKボタンクリックを処理する。

/** Geminiが自動生成した概要 **/
php-webdriverでセレクトボックスの値を選択するには、要素を指定してクリックし、キーボード操作で値を入力する。値はoptionタグ内のテキストで指定する。ただし、この方法では動作が不安定な場合があるため、要素を`$element`変数に格納し、クリック→入力→クリックの順で操作することで安定性を向上させる。この方法により、選択直後の画面遷移にも対応できる。

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

/** Geminiが自動生成した概要 **/
さくらVPS(Ubuntu 16.04)にSeleniumとphp-webdriverによるUIテスト環境を構築する方法。Selenium実行には仮想デスクトップ(Xvfb)とChromiumが必要で、手順はApache/PHP設定、Java8、Selenium、Xvfb、Chromium、ChromeDriverインストール、そしてSelenium起動スクリプト(load.sh)作成。load.shはXvfbとSeleniumを同時に起動し、ブラウザは仮想デスクトップ上で動作する。動作確認は http://(VPSのIPアドレス):4444 で行う。Jenkinsの設定とload.shの自動起動設定は今後の課題。

/** Geminiが自動生成した概要 **/
php-webdriverで`target="_blank"`のリンクをクリックした際、新しいタブにフォーカスを移すには`$driver->switchTo()->window(end($driver->getWindowHandles()));`ではなく、`$wins = $driver->getWindowHandles(); $driver->switchTo()->window(end($wins));`のように書く。 また、テスト終了時に単に`close()`を使うとセッションが残ってしまうため、タブが一つの場合は`quit()`を使う必要がある。これを考慮した`close()`関数を定義することで、複数タブでも単一タブでも適切にブラウザを閉じ、テストを終了できる。

/** Geminiが自動生成した概要 **/
php-webdriverを用いて、Selenium経由でSOY CMSにログインする手順を解説。ログイン画面で、ログインIDとパスワードの入力フィールドにそれぞれ「soycms」を入力後、ログインボタンをクリックしてログインするコードを紹介。`findElement`メソッドと`sendKeys`メソッドでフォームに値を入力し、`submit`メソッドでログインボタンをクリックすることでログイン処理を実現。ボタンもフォームも`findElement`で要素を取得し操作できることを示している。結果、SOY CMSの管理画面へログインできたことを確認。

/** Geminiが自動生成した概要 **/
Ubuntu 19.10のSnap版Chromiumでは、Seleniumのテスト自動化が実行できない場合があります。これは、Snapのセキュリティ制限により、SeleniumがChromiumを直接操作できないことが原因です。解決策は、ChromiumをSnap版ではなく、aptでインストールしたバージョンを使用することです。まず、`snap remove chromium`でSnap版を削除し、`sudo apt install chromium-browser`でapt版をインストールします。さらに、ChromeドライバーのバージョンとChromiumのバージョンが互換性があることを確認してください。これらの手順により、SeleniumはChromiumを正常に操作できるようになり、テスト自動化が実行可能になります。

/** Geminiが自動生成した概要 **/
UbuntuサーバーでNode.jsアプリを再起動する際、cronで@reboot時に実行するとデータベースファイルのパスがずれる問題が発生した。相対パス指定では実行ディレクトリが変わるため、`./_module/db.js` や `./db/sqlite.db` のような記述は`index.js`からの相対パスではなく、実行時のカレントディレクトリからの相対パスとして解釈されていた。これを解決するために、`__dirname` を使用して `index.js` のあるディレクトリを確実に取得し、`__dirname + '/_module/db.js'`、`__dirname + '/db/sqlite.db'` のように絶対パスを指定することで、どのディレクトリから実行してもデータベースに接続できるように修正した。

/** Geminiが自動生成した概要 **/
Socket.IOで作成したチャットアプリでXSS脆弱性対策を実施した。HTMLタグを入力するとエスケープされずに表示されてしまうため、`xss-filters`ライブラリを導入。`npm install xss-filters`でインストール後、サーバーサイドのメッセージ送信部分で`xssFilters.inHTMLData()`を用いて送信メッセージをフィルターした。その結果、HTMLタグがエスケープされて表示されるようになり、XSS攻撃を防ぐことができた。

/** Geminiが自動生成した概要 **/
Socket.IOで個別チャットを実現するため、namespacesを利用した検証が行われた。サーバー側では"hoge"と"huga"二つのnamespacesを作成し、クライアント側ではランダムにどちらかに接続するよう変更。結果、同じnamespaceに接続したクライアント間でリアルタイムなチャットが可能になった。namespacesによる個別チャットの可能性が示されたが、roomによる実現方法や動的なグループチャット作成機能の課題が残されている。

/** Geminiが自動生成した概要 **/
Socket.IOで個別チャットを作るための第一段階として、NamespacesとRoomsの概念を導入した。サーバー側(server.js)では、`io.of('/chat')`でchatというnamespaceを作成し、接続時に`socket.join("default")`で全ユーザーを"default" roomに所属させた。イベント発信時は`chatNS.to("roomName").emit()`を使用することでroom内限定の通信を実現。クライアント側(index.html)は、`io.connect("http://localhost:8080/chat")`のように接続URLにnamespaceを指定することで変更完了。これにより、複数ユーザーが同じチャットルームに参加できるようになったが、まだユーザー限定チャットにはなっていない。

/** Geminiが自動生成した概要 **/
Node.jsとSocket.IOで作ったチャットアプリに入力中表示を追加する方法を紹介しています。server.jsでは`start typing`と`stop typing`イベントを定義し、`socket.broadcast.emit()`で自身以外の全ユーザーに通知します。`index.html`では、これらのイベントをリスニングし、入力開始時に`start typing`イベントを発火、入力終了・送信時に`stop typing`イベントを発火します。受信したイベントに応じて、画面に「〇〇が入力中」と表示・非表示を切り替えます。これにより、リアルタイムな入力状況を共有できるチャットアプリが実現できます。

/** Geminiが自動生成した概要 **/
Node.jsとSocket.IOを用いたチャットアプリ構築後、Let's Encryptで常時SSL化する方法を解説。自己署名証明書ではブラウザ警告が出るため、無料のLet's Encryptを利用。Certbotによる証明書取得手順、Nginxの設定変更（SSL設定追加、httpトラフィックのhttpsリダイレクト）を説明。 Socket.IOのサーバー側コード修正では、httpsオプションを追加し、取得した証明書と秘密鍵を指定。これにより、チャットアプリがセキュアなhttps接続で利用可能になる。

/** Geminiが自動生成した概要 **/
Apache 2.4.27にアップグレード後、prefork設定ではHTTP/2が使えなくなったため、workerに変更した事例。preforkではHTTP/2が無効化される仕様変更が原因。Ubuntu 16.04環境で、PHPをFastCGI（php7.0-fpm）にし、`a2dismod`と`a2enmod`コマンドでMPMをworkerに切り替えた。`apachectl -V`で確認後、ブラウザでHTTP/2が有効化されたことを確認。ただし、画像はキャッシュの影響でHTTP/1.1だったが、キャッシュクリアで解決した。

/** Geminiが自動生成した概要 **/
Brotli圧縮を試した結果、gzipよりも高い圧縮率を実現できることが分かり、サーバーでの利用を検討。Ubuntu 18.04ではaptでbrotliをインストール可能。画像ファイルの圧縮テストでは、オリジナル870.3kBに対し、Brotliは856.8kB、gzipは861.0kBと、Brotliが僅かに優れていた。圧縮コマンドは`brotli 元ファイル -o 圧縮ファイル`、解凍は`brotli -d 圧縮ファイル -o 元ファイル`。次の記事では、ApacheサーバーでBrotliを利用する方法を解説する。

/** Geminiが自動生成した概要 **/
SOY Shopが多言語プラグインでスペイン語に対応しました。設定を追加したことでスペイン語ページの生成が可能になりましたが、翻訳作業はまだです。多言語サイト機能により、スペイン語設定のブラウザでアクセスした場合は自動でスペイン語ページへリダイレクトされます。手動切り替えも可能です。パッケージはサイトからダウンロードできます。スペイン語に堪能な方で翻訳協力可能な方は問い合わせフォームから連絡ください。

/** Geminiが自動生成した概要 **/
SOY Shopの顧客管理画面に、メール送信履歴表示機能と仮登録ユーザーの視認性向上のための機能追加が行われました。顧客詳細ページに送信済みメールとエラーメールの履歴を表示することで、仮登録メールのURLを管理者が確認しやすくなりました。また、仮登録ユーザーの顧客詳細ページでは、仮登録状態であることを強調表示することで、管理者の識別を容易にしました。これらの変更は、顧客へのメール再送や仮登録解除の手間を軽減することを目的としています。修正はGitHub上のSOY Shopパッケージで公開されています。

/** Geminiが自動生成した概要 **/
SOY CMSの記事編集中にブラウザを閉じると、入力内容が失われるのを防ぐため、確認アラートを表示するプラグインが開発されました。フォーラムで要望があり、記事タイトル編集中に限られますが「本当に閉じますか？」とアラートを表示します。下書き自動保存と併用すると効果的です。プラグインはフォーラム、またはGitHubで配布されています。改良版はGitHubにあり、`alert.js`を修正すれば他の箇所にも対応可能。修正後はフォーラムで共有が推奨されています。

/** Geminiが自動生成した概要 **/
Webサービスの利用者増加に備え、Ubuntu 16.04サーバにMuninを導入して監視環境を構築した。Apacheのインストールと設定、muninとmunin-nodeのインストール後、アクセス制限を解除し、Basic認証を設定した。最後にファイアウォールでポート80, 443, 4949を開放し、セキュリティを強化した。今回は監視サーバ自体の設定を行い、次回は監視対象サーバの設定を行う。

/** Geminiが自動生成した概要 **/
Dropboxへのバックアップ時に、個人情報を含むデータベースをzip圧縮する際のセキュリティ強化策として、パスワード付きzipファイルの作成方法を紹介している。 zipコマンドの-eオプションで暗号化が可能だが、対話式でパスワード入力を求められるため、crontabでの自動化にはexpectコマンドを使用する必要がある。サンプルスクリプトでは、expectでパスワード入力を自動化し、指定ディレクトリをパスワード付きzipファイルとしてDropboxにバックアップする方法を示している。 スクリプトの実行例として、Dropboxへのアップロードとダウンロード後の解凍時にパスワードが要求されることを確認し、セキュリティが向上したことを示している。さらに、パスワードの強度を高める方法や都度生成する仕組みの必要性にも言及している。

/** Geminiが自動生成した概要 **/
SOY CMSサイトのDropboxバックアップ方法を紹介。まずDropboxアカウントを作成し、サーバーに64ビット版CLI版Dropboxをインストール。サーバをDropboxアカウントにリンク後、バックアップスクリプト(dbbackup.sh)を作成し、cronで毎朝3時にサイトディレクトリをzip圧縮してDropboxへ同期させるよう設定。自動起動設定としてcrontabの@rebootを利用。debファイル経由のインストール方法も追記。再起動しない場合はdropbox start -iコマンドを試す。パスワード付きzip化などの関連記事へのリンクも掲載。

/** Geminiが自動生成した概要 **/
プログラミング教育の一環として、中学生にエラトステネスの篩を使わずに素数を求める課題を与えた。5が素数である理由を問うことで、生徒に思考過程を明確に説明させることを促した。生徒たちは、与えられた自然数以下の既知の素数で割り切れないことを確認することで素数判定ができることに気づき、JavaScriptでプログラムを実装した。2を初期素数として配列に格納し、3以上の自然数について、配列内の素数で割り切れるか確認し、割り切れなければ配列に追加していくことで、指定範囲内の素数を全て出力することに成功した。この経験を通して、プログラミング教育における論理的思考の重要性を再認識した。

/** Geminiが自動生成した概要 **/
SOY Shopの拡張機能で、運営者が顧客の購入を代行する際の手間を省く仕組みが開発されました。 公開側の商品ページに設置した注文ボタンから、管理画面へ特定の顧客情報で自動ログインする機能です。 ボタンにはGETパラメータが付与され、管理画面でログイン状態とパラメータを照合することで、指定顧客の自動ログインを実現しています。 これにより、購入代行時に顧客情報入力の手間が不要となり、電話注文の2回目以降の対応をスムーズに行えます。 この機能はGitHubで公開されているパッケージから利用可能です。

/** Geminiが自動生成した概要 **/
SOY Shopで電話注文時の商品オプション・規格対応のため、ダミーメールアドレス自動挿入機能を追加。管理画面で設定を有効化し、公開側で注文手続きを行うと、重複チェック済みのランダムな「...@dummy.soyshop.net」がメールアドレス欄に自動入力される。 このアドレスで注文すると確認メール等の送信が抑制され、メールボックスの圧迫を防げる。 パスワード設定で顧客情報の再利用も可能。 電話注文対応の課題を解決し、運営者の注文代行を効率化するアップデートとなっている。

/** Geminiが自動生成した概要 **/
IPアドレス隠蔽のため、StealthyというFirefoxアドオンでプロキシ接続を試した。結果、What Is My IP Address? で確認すると、所在地が隠蔽され「Hide IP」と表示された。仕組みは、プロキシサーバを中継することで、接続先サイトにはプロキシサーバのIPアドレスが表示されるというもの。体感として表示速度が遅くなったため、攻撃目的には不向きと感じた。また、海外のプロキシアクセスを禁止すればサイト攻撃のリスク軽減になる可能性も考えたが、企業のプロキシ利用も多いため、一概に禁止はできないと考察した。

/** Geminiが自動生成した概要 **/
IPアドレスから接続元の情報がどこまで特定できるか検証した結果、固定回線ではプロバイダと大まかな位置情報が判明し、身元の特定は容易であることが分かった。 Y!mobileのポケットWiFiを使用した場合、位置情報は偽装され東京と表示されたが、プロバイダ情報は依然として取得可能であり、プロバイダへの問い合わせで身元が特定される可能性は残る。 検証には「What Is My IP Address?」が使用され、プロバイダ情報に加え、地図上で位置情報まで表示された。OSやブラウザの種類も特定可能であると示唆されている。ポケットWiFiは位置情報の偽装に有効だが、プロバイダ情報から身元特定の可能性は排除できない。 筆者はプロバイダでの勤務経験がないため、詳細な情報提供はできないとしている。

/** Geminiが自動生成した概要 **/
SOY CMSサイトのPageSpeed Insightsスコアを99にするため、静的化プラグインを開発。標準ページをHTMLファイル化し、システムを経由せず直接読み込むことで高速化を実現。記事更新時はindex.html、ページ更新時は該当HTMLを削除し、即時反映を維持。DB接続回数を減らしサーバー負荷も軽減。内部SEO対策にも有効。プラグインはフォーラムで配布中だが、Google Analytics設置に関する提案への対応は未解決。

/** Geminiが自動生成した概要 **/
SOY CMSのキャッシュモードを利用することで表示速度を大幅に向上させることができます。キャッシュモードには、「出力キャッシュ」「ブロックキャッシュ」「データキャッシュ」の3種類があります。出力キャッシュはページ全体をキャッシュし、ブロックキャッシュはページの一部のブロックをキャッシュ、データキャッシュはデータベースへのアクセス結果をキャッシュします。それぞれのキャッシュモードは管理画面から簡単に設定でき、サイトのアクセス状況や更新頻度に合わせて最適な設定を選択することで、サーバー負荷を軽減し、表示速度を向上させることができます。特に、頻繁に更新されない静的なページやアクセス数の多いページでは、出力キャッシュが効果的です。キャッシュのクリアも管理画面から簡単に行えます。

/** Geminiが自動生成した概要 **/
SOY CMSでサイト表示を高速化するために、表示直前にサーバ側で画像リサイズを行う方法を紹介しています。Google PageSpeed Insightsで低評価を受けた画像サイズの問題を解消するため、サムネイルプラグインではなく、SOY CMSの隠し機能を活用。 具体的には、カスタムフィールドに画像パスを入力し、imgタグのsrc属性に`im.php?src=[画像パス]&width=[幅]`を指定することで、動的にリサイズされた画像を表示。従来のHTMLのwidth属性による縮小表示よりもパフォーマンスが向上し、PageSpeed Insightsのスコアも改善。 記事では、設定変更前後の具体的なコード例やスクリーンショットを交えながら解説。リサイズ処理はJPEG、PNG、GIFに対応し、作業フローを簡略化しつつサイト高速化を実現。次回、CSSや画像のキャッシュ設定について解説予定。

/** Geminiが自動生成した概要 **/
SOY CMSのインストーラを削除しないと、再インストールが可能になり、サイトデータが消去される危険性がある。攻撃者は用意したデータベース情報で再インストールし、初期管理者権限を奪取できる。管理画面URLが判明していれば、インストーラ経由でサイトを初期化・乗っ取りが可能。他CMSでもインストーラが残っていれば同様の危険があるため、インストール後は必ず削除する必要がある。

/** Geminiが自動生成した概要 **/
SOY CMSに不正ログイン後、ファイルマネージャからのPHPアップロードは不可だが、フロントコントローラ(index.php)に悪意あるPHPコードを埋め込み可能。これにより、サイト閲覧時に勝手にメール送信などの踏み台攻撃が可能になる。対策はindex.phpの書き込み権限を外すこと。SOY ShopのテンプレートやPHPモジュールも悪用されうる。

/** Geminiが自動生成した概要 **/
Go言語で書かれたコードを用いて、SOY CMSへの総当たり攻撃を試行。パスワード候補の配列を定義し、ループ処理でログインを試みる。一致するパスワードが見つかった場合、処理を中断し「ログイン成功」とID、パスワードを表示する。今回は"********"でログイン成功。このコードはパスワード候補を増やすことで、複雑なパスワードでも突破可能。しかし、SOY CMS側では複数回ログイン失敗するとエラーが表示される対策が取られていることが確認された。

/** Geminiが自動生成した概要 **/
Go言語でSOY CMSへの総当り攻撃コードを改良した。前回はトークンチェックで攻撃が無効化されたため、今回はトークン取得とセッションキー保持の処理を追加した。具体的には、ログインページからトークン値を抽出し、自作のCookieJarを用いてセッションキーを保持することで、正規のログインと同様にトークンを送信できるようにした。この改良により、辞書攻撃が可能になった。 最後に、管理画面URLの特定の容易性と攻撃のしやすさを指摘し、URLを複雑にする、IDを辞書攻撃されにくいものにするなどの対策の必要性を訴えている。

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

/** Geminiが自動生成した概要 **/
Emacsでクリップボードの共有設定をしたが、GUI環境では動作するものの、端末(emacs -nw)では動作しない問題に直面。xclipをインストールし設定を追加することで端末上でもコピペが可能になった。しかし、tmux上でEmacsを起動した場合はxclipが機能せず、更なる設定が必要な状況に陥っている。

/** Geminiが自動生成した概要 **/
SOY CMSのブログ設定で、トップページ以外(記事、カテゴリ、月別アーカイブ)のURLを空にすると、表示はされるもののHTTPステータスが404になる不具合を修正。アクセス解析で該当ページが404エラーとして記録される問題が発生していた。修正ファイルはフォーラム(http://www.soycms.org/viewtopic.php?f=7&t=1775)に、修正版パッケージはGitHub(https://github.com/inunosinsi/soycms/tree/master/package/soycms)に公開。soycms_1.8.12p7.4以降で適用可能。

/** Geminiが自動生成した概要 **/
中学生にJavaScriptでプログラミングを教えるにあたり、canvasを使ったゲーム作成に興味を持つ生徒が多い一方、基礎習得の必要性を感じた筆者は、canvasの練習を通して、メソッドの活用、オブジェクトの理解、配列の利用という３つの重要項目を特定した。 これらの概念を「おまじない」として片付けず、生徒に楽しく理解してもらう方法を模索し、計算機、名簿、タイピングソフトの作成を通して、実践的にコードに触れさせながら習熟させる方針を立てた。

/** Geminiが自動生成した概要 **/
プログラミング未経験者がNPOで小中学生にプログラミングを教えることになった。教材選びでは、Scratchは力技での解決を招きやすく、PHPは環境構築が面倒、Javaは難易度が高いため却下。JavaScriptは環境構築が容易で、様々な可能性を秘めていることから採用。ただし、柔軟すぎるが故のコードの煩雑さを懸念し、自身もJavaScriptを改めて学び直すことにした。

/** Geminiが自動生成した概要 **/
Windows7にPHP7をインストールする方法を解説。PHP7をダウンロード・展開後、C:\php7に配置。Apacheの設定ファイル(httpd.conf)を編集し、PHPモジュールを読み込む設定や、index.phpをDirectoryIndexに追加。PHPの設定ファイル(php.ini)で必要な拡張モジュールを有効化し、タイムゾーンを東京に設定。Apacheを再起動後、phpinfo()を表示するinfo.phpを作成し、ブラウザで確認することでインストール完了となる。

/** Geminiが自動生成した概要 **/
楽天市場の商品登録作業効率化のため、PHPによるローカル検証環境構築を目指し、複数PCへのインストール手順を記録している。今回はApache2.4のインストール方法を紹介。まずPCが64ビットか確認後、Apache動作に必要なVisual C++再頒布可能パッケージをインストールする。次にApacheの64ビット最新版をダウンロード、解凍し、Apache24フォルダをCドライブ直下に配置。httpd.confのServerNameをlocalhost:80に修正する。Windows環境変数のPathにC:\Apache24\bin;を追加し、コマンドプロンプトでhttpd -k startを実行。ブラウザでhttp://localhostにアクセスし"It Works!"が表示されればApacheのインストールは完了。次回はPHPのインストールについて。

/** Geminiが自動生成した概要 **/
Sambaサーバに外部からSSH接続できるよう設定した手順の記録。まずSambaサーバにSSHをインストールし、プライベートIPアドレス(192.168.11.8)を設定、ルーターのIPアドレスをゲートウェイに設定した。次に外部からのSSH接続のため、rootログインを禁止し、無線LANルーターでポートフォワーディング(外部ポート71823→内部ポート22)を設定。外部IPアドレス(例：127.0.0.1)へポート71823を指定してSSH接続を確認した。パスワード認証はセキュリティ的に不安なので、次回は鍵認証を設定予定。

/** Geminiが自動生成した概要 **/
お名前.comドメインをさくらVPSとさくらのメールボックスに適用する方法。共有サーバーからVPSへの移行に伴い、メールサーバーは共有サーバーを継続利用するため、ドメインを両方に割り当てる必要がある。お名前.comのDNSレコード設定で、AレコードにVPSのIPアドレス、MXレコードに共有サーバーのメールサーバーのドメインを設定する。MXレコードにはIPアドレスではなくドメインを指定する点が重要。設定後、MX lookupサービスで確認し、さくらの共有サーバーのコントロールパネルでドメインを追加する。Aレコードの反映には時間がかかる場合がある。

/** Geminiが自動生成した概要 **/
GoでWebアプリを開発し、Ctrl+Zで停止した後に同じポートで再起動しようとしたら`address already in use`エラーが発生した。停止ではなく、プロセスが生きていたためポートが使用中だった。`ps`コマンドでプロセスIDを確認し、`kill -KILL [PID]`でプロセスを終了させた後、再起動に成功した。ブラウザでWebアプリの画面が表示され、サーバが正常に動作していることを確認。これは土壌分析アプリsoil2の開発中に遭遇した問題で、プロセスをkillすることで解決できた。

/** Geminiが自動生成した概要 **/
Docker Composeを用いて、PHP7/ApacheとMySQLのコンテナを連携させ、SOY CMSを動作させる方法を解説。MySQLコンテナでは`bind-address`を指定し、PHPコンテナでは`pdo_mysql`拡張をインストールする必要がある。データベース接続設定では、MySQLコンテナの内部IPアドレスとポート(3306)を指定。SOY CMSのデータベース設定ファイル(mysql.php)を適切に編集することで、コンテナ間のデータベースアクセスを実現。記事では、`docker-compose.yml`の設定例や、コンテナ内でのデータベース作成手順、SOY CMSの初期設定画面へのアクセス方法などを示している。また、PHP7環境でのSOY CMS動作に関する修正はGitHubで公開されている。

/** Geminiが自動生成した概要 **/
DockerでPHP7環境を構築し、ホスト側のディレクトリをコンテナにマウントしてファイル操作を容易にした。`-v`オプションで`/home/saito/workspace/docker/php7`をコンテナの`/var/www/html`にマウントし、ホスト側に配置した`hoge.php`をブラウザで実行できた。しかし、SOY CMSを導入したところ、`mb_language()`関数が未定義というエラーが発生。コンテナ内に`php.ini`が見つからず、設定が必要になったため、今後の課題とした。

/** Geminiが自動生成した概要 **/
Dockerを使ってPHP7環境を構築する方法を紹介しています。UbuntuへのDockerインストール手順、Dockerfileの作成、コンテナイメージのビルド、コンテナの起動、PHPバージョン確認、ブラウザでのphpinfo表示確認までを解説。Dockerを使うことで、簡単にPHP7環境を構築し、動作確認できることを示しています。ルートディレクトリ操作の課題は残っていますが、Apache設定などを省略できる手軽さがメリットです。