植物のミカタ

/** Geminiが自動生成した概要 **/
SOY CMSで構造化データプラグインを開発。AI進化でブログ訪問者が減少したため、SEO対策として記事リライト時の更新日を明記する仕組みを追加。構造化データでJSON形式の更新日時を自動挿入し、HTTPヘッダーにもLast-Modifiedを挿入（HTMLキャッシュプラグインとの併用時は構造化データに委託）。パッケージはサイトからダウンロード可能。

/** Geminiが自動生成した概要 **/
この記事は、鮮やかな紅色の花を咲かせるつる性植物「マルバルコウ」について考察しています。著者はマルバルコウの見た目の特徴からヒルガオ科に属する植物と推測し、その花弁の色素について「ペラルゴニジン」というアントシアンの可能性を探っています。しかし、マルバルコウの花弁の色素に関する研究は少なく、結論には至っていません。また、「縷紅」という名前の由来についても考察し、紅色の花を咲かせるつる性植物であることに由来すると推測しています。

/** Geminiが自動生成した概要 **/
SOY CMSのブログ記事JSON出力プラグインがアップデートされ、記事一覧の出力が容易になりました。 今回のアップデートにより、JSON出力に以下の値を含めることが可能になりました。 * 記事のパーマネントリンク * 本文の一部または冒頭数文字 * サムネイル画像のパス * カスタムフィールドの値 これらの値はGETパラメータで出力の有無を指定できます。これにより、JavaScriptでJSONを取得し、記事一覧を動的に生成することが可能になります。 例えば、記事のURL、本文の冒頭50文字、サムネイル画像のパスを含めたJSONを取得する場合は、以下のようなURLでアクセスします。 ``` https://example/site/1.json?limit=1&content=50&is_url=1&thumbnail ``` アップデート版のプラグインは、以下のサイトからダウンロードできます。 https://saitodev.co/soycms/

/** Geminiが自動生成した概要 **/
この記事は、Minecraft: Pi Edition: Reborn (MCPI++) のSDKを使って、ゲームに「ゴールデンシャベル」を追加する方法を解説しています。 まず、MCreatorを使って16x16ピクセルのゴールデンシャベルのアイコン画像を作成し、既存のitems.pngに挿入します。次に、C++で書かれたgoldenshovel.cppを作成し、アイテムの追加、アイコンの設定、ゲーム内での表示名などを定義します。最後に、CMakeを使ってコードをコンパイルし、生成されたライブラリファイルをmodsディレクトリに配置することで、ゴールデンシャベルがゲームに追加されます。 記事では、コードの各部分がどのような役割を持っているか、また画像ファイルやCMakeLists.txtの設定方法などが詳しく解説されています。

/** Geminiが自動生成した概要 **/
療育施設に通う子供とその保護者を対象に、micro:bitとレゴを使ったプログラミング体験イベントを実施しました。サーボモーターを付けたレゴ作品に、ビジュアル言語でコードを書いてmicro:bitと接続し、回転動作をプログラミングしました。子供たちは馬や車など思い思いの作品を動かし、プログラミングの楽しさに触れました。キーボード操作やコード変更にも挑戦し、笑顔溢れるイベントとなりました。

/** Geminiが自動生成した概要 **/
SOY CMSのファイルアップロード制限をページごとに設定できるようになりました。記事投稿画面とファイルマネージャで許可するMIMEタイプを分けたいという要望に応え、設定ファイルにELFINDER_MODEという定数を追加。これにより、例えば記事投稿画面では画像ファイルのみ、ファイルマネージャではCSSやJSファイルのみ許可するといった設定が可能になりました。設定は /CMSインストールディレクトリ/common/config/upload.config.php 内でELFINDER_MODEの条件分岐を用いて$mimetypes配列を定義することで行います。最新のパッケージは公式サイトからダウンロードできます。

/** 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をプラグイン詳細画面に貼り付けて更新することでカスタマイズ完了。

/** Geminiが自動生成した概要 **/
SOY ShopのGoogleログインプラグインが、Google Sign-In for WebsitesからSign In With Googleにアップデートされました。変更に伴い、HTMLタグやスクリプトを修正する必要があります。 以前は`googleUser.getBasicProfile()`でユーザー情報が取得できていましたが、現在はJWTが返却されるため、Base64デコードが必要です。`parseJwt`関数でJWTをデコードし、`json.email`でメールアドレスを取得します。 詳細はプラグイン詳細画面とサイト(saitodev.co/soycms/soyshop/)を参照してください。

/** Geminiが自動生成した概要 **/
Micro:bitとサーボモーターを用いて環境制御学習の第一歩を踏み出した著者は、サーボモーターの動作原理を学ぶため、LEGOブロックとミニフィグを使った回転実験を行った。MakeCodeで作成したコードでMicro:bitからサーボモーターに角度指令を送ると、90度を基準に、大きい値では反時計回り、小さい値では時計回りに回転する。しかし、指定角度で停止せず、一回転し続けるという問題に直面。これは、指令値が目標角度ではなく、一定時間内の回転角度を表すためであった。 著者は、サーボモーターの停止方法について疑問を抱いている。

/** Geminiが自動生成した概要 **/
SOY CMS/SOY Shopで、ファイルアップロード時のMIMEタイプ制限設定が追加されました。ユーザー要望に応え、記事作成、テンプレート、elFinderからのアップロード時に、JavaScriptファイルの許可やPDFの禁止等が可能になります。従来のバージョンアップでカスタマイズが消える問題も解消。設定は、`/CMSインストールディレクトリ/common/config/upload.config.php.sample`を`upload.config.php`にリネームし、許可するMIMEタイプを`$mimetypes`配列に追加するだけです。最新パッケージはサイト(https://saitodev.co/soycms/)からダウンロード可能です。

/** Geminiが自動生成した概要 **/
ChromebookでPythonの数学ライブラリNumPyと可視化ライブラリmatplotlibの動作検証を行いました。ASUS Chromebook Detachable CM3で、Linux環境を利用し、`sudo apt install`コマンドで必要なパッケージをインストールしました。TkinterのGUI表示、及び以前作成したmatplotlibを使ったコードの実行に成功。Windows10のWSL2環境ではGUI表示ができなかった一方で、Chromebookでは問題なく動作しました。今後はデータサイエンス向けプラットフォームAnacondaのChromebookでの動作検証も検討しています。

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

/** Geminiが自動生成した概要 **/
`executeScript`は、ChromeDriverでJavaScriptを実行するメソッドです。第一引数に実行するスクリプト、第二引数にオプションの引数配列を取ります。このメソッドは、ブラウザコンテキストでJavaScriptを実行し、その結果を返します。Aceエディタへの入力は、エディタオブジェクトの`setValue`メソッドをJavaScript経由で呼び出すことで実現できます。上記例では、`$script`に`setValue`呼び出しを定義し、`$html`をエディタに設定しています。`executeScript`の第二引数配列は、`$script`内の`arguments`オブジェクトにマッピングされます。これにより、PHPからJavaScript関数をパラメータ付きで実行できます。

/** Geminiが自動生成した概要 **/
このブログ記事では、菌（カビ）の生活環に有性生殖の「テレオモルフ」と無性生殖の「アナモルフ」という2つのステージがあることを解説しています。DNA解析がなかった時代、これらは別種とされ、異なる名前が付けられました。特に無性生殖のみを行うアナモルフは「不完全菌」と呼ばれていました。現在では同種と判明していますが、産業上の重要性などから呼び名が混在する現状です。この知識は、例えばトリコデルマの子実体から土壌微生物叢の現状を把握するなど、菌の理解を深める上で有用だと締めくくっています。

/** Geminiが自動生成した概要 **/
トリコデルマ理解のためには菌類の分類の歴史的変遷を学ぶ必要がある。トリコデルマ属など一部の菌類は、無性生殖段階で見つかった「不完全菌」として分類され、後に有性生殖段階が確認されたことで完全世代（子のう菌類のツノタケ属など）に分類し直された。しかし、歴史的に「不完全菌」として認識されていた名前も残っているため、トリコデルマのような菌は複数の学名を持つ。古い分類法と新しい分類法の両方を理解することで、トリコデルマのような菌の複雑な命名の理由が理解できる。例えば、アカボタンダケは不完全世代では*Trichoderma viride*、完全世代では*Hypocrea rufa*と呼ばれ、名前からは同一種と分かりづらい。国立科学博物館の『菌類のふしぎ 第2版』は、新旧の分類法を解説し、このような命名の経緯を理解するのに役立つ。

/** 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が自動生成した概要 **/
SOY CMSのブログとOpenStreetMapで地図アプリを作る手順は以下の通り。カスタムサーチフィールドで緯度(lat)・経度(lng)フィールドを作成し、地図ラベルを設定。地図出力ページを作成し、OpenStreetMap + LeafletのHTMLを貼り付ける。JavaScript内のマーカー情報をSOY CMSのタグに置き換え、記事タイトル、URL、緯度経度を動的に表示。標準ページに地図ラベルの記事一覧を表示する設定を行い、緯度経度情報付きの記事を投稿すれば、記事の位置にマーカーが設置された地図が自動的に生成される。

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

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

/** Geminiが自動生成した概要 **/
SOY2では、XSS対策としてhtmlspecialcharsを簡便に利用できるHTMLLabelを提供している。記事では、HTMLLabelの基本的な使い方と、soy:idを用いた動的な値の表示方法を解説。HTMLLabelはHTMLタグを自動的にエスケープし、安全に値を表示。例として、ブログ記事のタイトルを表示するコードを紹介し、HTMLLabelを用いることで、タイトルに含まれるHTMLタグがエスケープされ、XSS脆弱性を防ぐ様子を示している。また、HTMLLabelの子要素としてHTMLタグを記述することで、特定のタグを許可することも可能。記事は、HTMLLabelがSOY2でのXSS対策に効果的であることを示唆。

/** Geminiが自動生成した概要 **/
php-webdriverで`content-visibility:auto;`を使用したサイトのリンクをクリックする際、遅延読み込みにより要素が見つからない問題が発生する。`getLocationOnScreenOnceScrolledIntoView()`だけでは不十分で、一度スクロール後にページトップに戻り、再度徐々にスクロールすることで要素を確実に表示させクリックを成功させる方法を紹介。これはページ表示速度の高速化と遅延読み込みによる影響への対策。また、SeleniumによるアクセスをGoogle Analyticsから除外する方法についても言及し、誤った計測を防ぐための設定についても触れている。さらに、関連するelement click interceptedエラーへの対処法の記事へのリンクも提供。

/** Geminiが自動生成した概要 **/
SOY CMSでWebサイトの高速化のため、外部CSSを自動インライン化・圧縮する方法を解説。`cms:module`でのCSS直接記述による修正の課題を解決すべく、`link`タグを介し、PHPモジュールが外部CSSを読み込み・圧縮した上で`<style>`タグとしてインライン出力する手法を提案しています。 これによりSOY CMS経由では圧縮・インライン化されたCSSが出力され、ブラウザとサーバー間の転送量削減とSEO（Core Web Vitals）に貢献。外部ファイルでの管理によりCSS修正が容易になり、ページごとのCSS制御も可能となる点が大きなメリットです。

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

/** Geminiが自動生成した概要 **/
Windows起動時にWSL上のApacheを自動起動させる方法。まず、sudoers.dディレクトリにmy-auto-startファイルを作成し、Apache起動コマンドをパスワードなしで実行できるように設定する。次に、.bashrcファイルにApache再起動コマンドを追加。最後に、スタートアップフォルダにmy-auto-start.vbsファイルを作成し、WSLを起動するVBScriptを記述する。Windows再起動後、Apacheが自動的に起動する。

/** Geminiが自動生成した概要 **/
イネは品種改良を通してサイトカイニン含量が増加し、収量向上に繋がった。サイトカイニンは分げつ伸長や養分転流に関与する重要な植物ホルモンだが、根の伸長は抑制する。高校生物で学ぶ「サイトカイニンは根で合成」は少し不正確で、実際は地上部で合成されたiP型サイトカイニンが根に運ばれ、tZ型に変換されて地上部へ送られ作用する。根の栄養塩が豊富だとtZ型への変換が促進され、サイトカイニン活性が高まる。

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

/** Geminiが自動生成した概要 **/
SeleniumとJenkins、php-webdriver、ヘッドレスChromiumでテスト自動化中に、メモウィジェットが原因でelement click interceptedエラーが発生。ヘッドレスモードで画面サイズが不足し、対象ボタンが隠れていたのが原因。ウィンドウサイズを`1024x2048`に設定することで一時的に解決したが、ページサイズに依存するこの方法は最適ではない。スクロールによる解決策も検討されたが、最終的にはCSSを修正し、メモウィジェットが他のボタンと重ならないように調整することで根本解決した。

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

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

/** Geminiが自動生成した概要 **/
PageSpeed Insightsのスコア向上のため、公式SNSボタンを自作のものに置き換えた。公式ボタンはJavaScriptを使用し、ページ速度に悪影響を与えていた。記事詳細ページのTwitterボタンを例に、自作方法を紹介。HTMLでは`<a>`タグでツイートリンクを作成し、記事タイトルとURLを動的に設定。CSSでボタンのスタイルを定義。SOY CMSでは`cms:id="title_plain"`と`cms:id="entry_url"`を用いて記事タイトルとURLを取得し、JavaScriptを使わずにツイートボタンを実装。これにより、ページ読み込み速度が向上し、PageSpeed Insightsのスコアも改善された。

/** Geminiが自動生成した概要 **/
Google Mapsの遅延出力により、PageSpeed Insightsのスコアが80点台から100点に改善。iframeを隠して「地図を表示」ボタンを表示し、クリック後3秒後にGoogle Mapsをロードするコードを追加した。これにより、ページの読み込みが遅くなるGoogle Mapsの出力を遅らせ、ページのパフォーマンスを向上させた。

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

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

/** 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が自動生成した概要 **/
竹野海岸のグリーンタフ観察から土壌形成の過程を考察。グリーンタフは火山活動で生成された緑色の凝灰岩で、風化しやすい。風化によって粘土鉱物や金属イオンが放出され、土壌の母材となる。植物の根は土壌の固い部分を砕き、根の先端からは有機酸が分泌される。有機酸は鉱物の風化を促進し、根の表層から剥がれ落ちたペクチンなどの有機物は粘土鉱物と結合し、団粒構造を形成する。さらに、根から放出された二次代謝産物は微生物によって重合し、土壌に吸着される。このように、岩石の風化、植物の根の作用、微生物活動が複雑に絡み合い、土壌が形成される過程をグリーンタフ観察から推察できる。

/** Geminiが自動生成した概要 **/
SOY InquiryがGoogle reCAPTCHA v3に対応しました。reCAPTCHA v3は、ユーザーの行動を分析してボットを判別する仕組みで、従来の文字入力やチェックボックス操作は不要です。SOY CMSのプラグインとして提供され、有効化するとサイト右下にreCAPTCHAロゴが表示されます。v3は学習ベースで精度が向上するため、初期は精度が低い可能性があります. 現時点ではJavaScript無効環境への対策は未対応です。最新版は公式サイトからダウンロード可能です。関連記事では、同一IPからの連続問い合わせをブロックする方法を紹介しています。

/** Geminiが自動生成した概要 **/
SOY CMSブログ記事SEOプラグインがアップデート。記事詳細ページでメタ情報（キーワード、説明）未入力の場合、従来はトップページのメタ情報を継承していたが、新設定で継承の有無を選択可能に。また、記事にメタ情報がない場合はメタタグ自体を出力しない設定も追加（`b_block:id="is_entry_description"`等を使用）。これにより、メタ情報未入力の記事でも表示速度低下を回避できるようになった。新機能搭載パッケージはsaitodev.co/soycms/ からダウンロード可能。

/** Geminiが自動生成した概要 **/
さくらインターネットのVPSに追加ストレージ(NFS)を導入し、サイトのバックアップファイルを格納。Dropboxと同期するために、NFS上のバックアップファイル(/var/www/html/site/storage/backup/site.zip)へのシンボリックリンクをDropboxディレクトリ(/home/*****/Dropbox/backup/)に作成した。 DropboxのWebサイトで確認したところ、シンボリックリンク経由でファイルが同期されていた。ただし、リンク先のファイル更新をDropboxに認識させるには、シンボリックリンクのタイムスタンプを`touch -h /home/*****/Dropbox/backup/site.zip`で更新する必要がある。 ※ この方法はDropbox側で廃止されたため、現在はDropbox-Uploaderを利用して直接ファイル転送を行う方式に変更されている。

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

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

/** Geminiが自動生成した概要 **/
SOY CMS/Shopのバージョンアップ後、キャッシュ削除忘れによる不具合報告が相次いだため、自動削除機能が追加されました。バージョンアップで外部ファイルの読み込み箇所などが変更されると、古いキャッシュが残っているとJavaScriptが実行されないなどの問題が発生します。新機能では、管理画面を開いた際に古いキャッシュを自動で削除します。この機能を含む最新パッケージはsaitodev.co/soycms/からダウンロードできます。

/** 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;`で変更を適用します。

/** Geminiが自動生成した概要 **/
登山用品レンタルサイト「やまどうぐレンタル屋」では、返却完了メールにレビュー割引適用者への催促文面を自動挿入する機能を追加した。まず「メール送信種類追加プラグイン」で「返却完了メール」を作成。次に、`soyshop.order.mail`拡張ポイントを利用したプラグイン`notify_review_discount`を開発。このプラグインの`getMailBody`メソッドで催促文面を返し、`SOYShopPlugin::extension`の第一引数に`soyshop.order.mail.henkyaku` (henkyakuはメールID) を指定することで、返却完了メールへの挿入を実現した。この手法は特定メール種別へのカスタマイズを可能にする。他にも隠れた拡張ポイントが存在し、サイトの特殊な要件に対応できる可能性があるため、必要に応じて開発元に相談するのが良い。

/** Geminiが自動生成した概要 **/
SOY Shopでカテゴリごとに商品一覧の並び替え順を変える方法。カスタムフィールドで「使用人数」や「使用温度」などの項目を作成し、ソートに利用する設定にする。データベースのカラム型を数値に変更。soyshop.item.list拡張ポイントでプラグインを作成し、getSortメソッドでカテゴリごとに異なるソート条件を返す。テントなら使用人数の降順、シュラフなら使用温度の昇順など。標準設定は価格の昇順にする。URLを変えずに同一ページで並び替え順を変えられるため、SEOにも有効。

/** Geminiが自動生成した概要 **/
Go言語でJSONを扱う方法について解説されています。 `sample.json`ファイルにID、名前、読み仮名などのデータを保存し、`main.go`でそのデータを読み込んで利用する方法が示されています。 `ioutil.ReadFile`でJSONファイルを読み込み、`json.Unmarshal`でGoの構造体`Sample`に変換します。`Sample`構造体はJSONデータのキーに対応するフィールドを持ちます。変換後、`sample.Name`のようにアクセスすることで、JSONデータの値を取得できます。

/** Geminiが自動生成した概要 **/
妻にプログラミングを教えた動機は、事務職希望の女性こそプログラミングスキルを身につけるべきだという考えに基づいている。事務作業はルーティン化しやすい反面、変化への対応が求められる。プログラミングは論理的思考力や問題解決能力を養い、変化への対応力を高める。これらは事務職で役立つだけでなく、キャリアの幅を広げる可能性も秘めている。妻は最初の実験台であり、私自身にとっても新たな言語を教える貴重な経験となった。将来的には、プログラミング教育の普及を通じて、女性がより活躍できる社会を目指したいと考えている。

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

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

/** Geminiが自動生成した概要 **/
Web Audio APIのAnalyzerNodeを用いて、音声でアニメーションを制御する方法を紹介しています。 円が画面端で跳ね返る単純なアニメーションに、音声の周波数データ解析を組み込みました。 周波数データが一定閾値を超えると、円の進行方向がランダムに変化します。 音が途切れてもデータが残るため、setTimeoutを用いて一定時間反応しないように制御しています。 具体的には、`analyser.getByteFrequencyData(data)`で周波数データを取得し、`data[20]`の値が閾値を超えた場合に円の移動方向を反転させています。

/** 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が自動生成した概要 **/
kintoneとチャットワークを連携し、タスクを自動登録するアプリをGo言語で開発する過程を説明。kintoneにアプリを作成し、Go言語でkintoneのREST APIを使用してデータを取得するコードを紹介。APIキー、ID、パスワードを用いて認証し、JSON形式のデータを取得することに成功。今後の課題として、取得したJSONデータをGo言語で扱うための構造体の作成が挙げられている。

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

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

/** Geminiが自動生成した概要 **/
複合機のFAX受信をGoogleドライブと連携し、ChatWorkで通知する仕組みを紹介。複合機がFAXをPDFでGoogleドライブに共有する機能を活用し、Google Apps ScriptでPDFを特定フォルダに移動、ファイル名と共にChatWorkへ通知する。これにより、外出先でもFAX内容を即時確認でき、紙の無駄や転送の手間を省ける。5分間隔でスクリプトを実行することで、ほぼリアルタイムな通知を実現。設定には、複合機側のGoogleドライブ連携と、スクリプト内のChatWork API設定が必要。

/** Geminiが自動生成した概要 **/
ブラタモリ京都・東山編で比叡山と大文字山の成り立ちを知り、比叡山山頂のガーデンミュージアム比叡の展望台から大文字山を眺めた。両山は9000万年前のマグマ活動で形成された花崗岩とホルンフェルスから成る。大文字山を望むことで花崗岩の巨大さを体感し、山の風化による変化を想像しやすくなった。比叡山山頂からの景色は、地質学的スケールの大きさを感じさせる貴重な体験となった。

/** Geminiが自動生成した概要 **/
プログラマは、システム不具合の多くが「想定外の使い方」に起因するため、電話での口頭説明ではなく詳細な情報提供を求める。これは、プログラミングが物理法則に縛られず、思考がそのまま反映されるため、想定外の動作が顕著な不具合となる特性による。効率的な情報伝達と問題解決のため、プログラマはコーディング規約、高機能エディタ、テスト自動化、タスク管理ツール、オープンソースといった手段を活用し、思考すべき点とそうでない点を明確化し、再発防止と情報共有を促進する。妻にプログラミングを教えるのは、これらの思考プロセスと情報伝達の重要性を体験させ、世界中の資産を活用する術を学ばせるためである。

/** Geminiが自動生成した概要 **/
Googleドキュメントの音声入力とGoogle Apps Scriptを連携させ、チャットワークへの投稿を音声で行う方法を紹介。 「チャットワーク(投稿内容)終了」と話しかけると、内容がチャットワークに送信されるスクリプトを作成。1分毎にスクリプトが実行され、ドキュメントの内容をチェック、投稿後ドキュメントはクリアされる。APIトークン、ルームIDの設定が必要。音声入力はドキュメントのツールから利用可能。Androidスマホでは音声入力の設定を事前に確認する必要がある。この方法で、両手が塞がっている状況でもチャットワークに投稿可能。実用時はタスク登録ルールやToの指定が推奨される。

/** Geminiが自動生成した概要 **/
Go言語でChatWork APIを用いてマイチャットにメッセージをPOSTする手順を紹介。 `http.NewRequest`でPOSTリクエストを作成し、ChatWork APIトークンをヘッダーに設定、`http.DefaultClient.Do`でリクエストを送信する。記事では"GOからのテスト投稿"というメッセージを送り、レスポンスコード200を確認することで成功を確認している。 また、ChatWork APIのルームID、トークンの取得方法については別記事を参照している。

/** Geminiが自動生成した概要 **/
Google Apps Script (GAS)を使ってChatWorkに投稿する方法を紹介。ChatWorkClient for Google Apps Scriptライブラリを利用し、APIトークンとルームIDを指定することで簡単にメッセージを送信できる。GASのトリガー機能と組み合わせれば、Gmail受信やGoogleカレンダーの予定に基づいて自動投稿するなど、業務効率化に役立つアプリを簡単に作成可能。ChatWorkとG Suiteの連携で業務改善を実現できる。

/** Geminiが自動生成した概要 **/
妻にGo言語を教えることにした。プログラミングを教えることで、教える側も理解を深め、学習効率が上がるためだ。Go言語を選んだ理由は、初心者にも扱いやすい点が多いからである。go runでLL言語のように手軽に実行でき、go buildでコンパイルもできる。システムプログラミングにも触れられるため、コンピュータの仕組み理解に役立つ。go fmtやgo importによる自動整形・補完でコードの書き方に迷うことも少ない。また、オブジェクト指向がないため学習コストが低い。冗長になりやすい、他言語学習時に混乱する可能性があるという欠点はあるものの、プログラミング入門には最適だと考える。妻の変化が楽しみだ。

/** Geminiが自動生成した概要 **/
HTMLTextAreaクラスは、テキストエリア要素を生成します。name属性とテキストの内容を指定し、その内容をinnerTextとしてレンダリングします。getTextメソッドはテキストの内容を取得し、オブジェクトを取得するオブジェクトメソッドはHTMLエスケープされたテキストを改行で囲んで返します。

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

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

/** Geminiが自動生成した概要 **/
SOY Shopの配送拡張ポイント`soyshop.delivery.php`について解説。インターフェースは`onSelect`、`getName`、`getDescription`、`getPrice`など、支払い拡張ポイントと類似のメソッドを持つ。`onSelect`～`getPrice`はカートでの配送方法選択時の動作を定義し、`edit`と`update`はマイページの注文詳細編集で使用される。`edit`は編集フォームを出力するメソッドで、`update`はフォーム送信時の更新処理を行う。標準の配送モジュール(delivery_normal)のコードを読むことで、具体的な実装方法を理解できる。

/** Geminiが自動生成した概要 **/
SOY Shopの支払い拡張ポイント(soyshop.payment.php)は、`onSelect`、`getName`、`getDescription`、`getPrice`、`getMethod`、`hasOptionPage`、`getOptionPage`、`onPostOptionPage`などのメソッドを提供し、支払い方法のカスタマイズを可能にする。各メソッドは支払い方法名や説明、価格、追加ページの有無などを制御する。例として、クレジットカード決済では`hasOptionPage`でtrueを返し、`getOptionPage`で入力フォームを提供する。`getMethod`はカート内容に応じて支払い方法の表示を制御するが、最後のプラグインで全てのモジュールを制御する点に注意が必要。

/** 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/以下にインターフェース定義がある。

/** Geminiが自動生成した概要 **/
社会人・学生向けプログラミング教室で、Google Apps ScriptのHTML Serviceを使ったGoogleドキュメント連携の勉強会が行われました。前回のスプレッドシート拡張の勉強会に続き、今回はHTML Serviceを用いてGoogleドキュメントのUIをどこまでカスタマイズできるかを検証しました。これにより、業務改善に繋がる新たなアイディア創出を期待しています。 関連として、Google Apps ScriptでJPEG画像からOCRで文字列を取得する内容も扱われました。

/** Geminiが自動生成した概要 **/
Windows 10でGo言語開発環境を構築する手順をまとめた記事です。Git、Go、Atomエディタをインストールし、日本語化やGo開発に必要なパッケージを追加します。AtomでGoファイルを作成し、"hello world"を出力するサンプルコードの実行までを解説しています。Go言語のバージョンは1.9.4、Windowsは64bit版を使用しています。最後に、アンチウイルスソフトの設定が必要になる場合があることに触れています。

/** Geminiが自動生成した概要 **/
Google Apps Script (GAS)のHTML Serviceでファイルアップロード機能を実装する方法を紹介。サンプルコードでは、HTMLフォームでファイルを選択・送信し、GAS側でGoogleドライブに保存、生成されたURLをHTMLに返す非同期処理を行っている。`google.script.run.withSuccessHandler()`でGAS側の関数を実行し、成功時の処理をHTML側で記述。フォーム送信イベント`onsubmit`でこの処理を呼び出し、アップロード後のURL表示を実現。この仕組みにOCR処理を組み合わせることで、画像アップロードと文字列抽出を同一画面で行うWebアプリ開発が可能になる。

/** Geminiが自動生成した概要 **/
Google Apps ScriptでJPEG画像からOCRで文字列を取得する方法を検証。GoogleドキュメントでのOCRをGASで自動化する方法を紹介している。 Drive APIを有効化し、画像URLを指定して`Drive.Files.insert`メソッドでGoogleドライブに挿入、`ocr:true`オプションでOCRを実行。 生成されたGoogleドキュメントには画像とOCR結果のテキストが含まれる。日付や画像中の文字認識は難しいが、本文は高精度で取得できた。以前試したGoogleドキュメント直接OCRより精度は高い。

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

/** Geminiが自動生成した概要 **/
社会人・学生向けプログラミング教室で、Googleスプレッドシートの拡張機能開発をテーマにした勉強会が開催されました。内容はスプレッドシート操作の自動化をGASを用いて行うもので、参加者は「Google Apps Script完全入門」を教材に学習しました。勉強会では、GASの基本的な使い方、HTML Serviceを用いたWebアプリ作成、スプレッドシート操作、API連携、トリガー設定などを実践的に学びました。参加者からはGASの利便性や可能性を実感する声が上がり、業務効率化やデータ分析への応用について関心を示していました。

/** 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が自動生成した概要 **/
京都農販のTwitterで、酸素供給剤（過酸化石灰）を使った九条ネギのハウス栽培で成長に大きな差が出たことが報告された。酸素供給剤は水と反応し、消石灰と過酸化水素を発生させる。植物は過酸化水素からカタラーゼ反応で酸素を取り込み、同時に発生した消石灰は土壌pHを上昇させ、一部の微生物を殺菌する。これにより生育環境が改善され、肥料の吸収効率も高まる。酸素供給剤は土壌中で徐々に効果を発揮するため、大雨など病気になりやすい時期の予防にもなる。ただし、石灰であるため土壌中の石灰量に注意が必要で、過剰施用はカルシウム過剰による欠乏を引き起こす可能性があるため、pH調整には炭酸苦土などを代替利用すると良い。

/** Geminiが自動生成した概要 **/
社会人・学生向けプログラミング教室で、Googleスプレッドシートの拡張機能を活用した業務アプリ作成の勉強会を実施。備品管理表を作成し、GAS(JavaScript)で毎週金曜日に備品不足をチェック、関係者へ調達指示メールを自動送信する仕組みを構築した。Googleスプレッドシートの複数人管理機能とGASによるGmail連携で、備品調査とメール送信を自動化。GoogleドライブとGASで業務効率化を図り、クリエイティブな作業時間を増やすという狙い。

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

/** Geminiが自動生成した概要 **/
社会人・学生向けプログラミング教室で、GoogleフォームをGASでカスタマイズする勉強会を実施しました。前回に続き、今回はGoogleフォームで作成したお問い合わせフォームに、複数人への通知機能を追加しました。具体的には、Googleスプレッドシートの名簿に記載されたメールアドレス宛にも、お問い合わせ通知メールが送信されるようGASで機能拡張を行いました。次回は、お問い合わせ内容に基づきメール文面を動的に生成する方法を学ぶ予定です。

/** 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に登録することで、サーバ再起動時に自動的にアプリが起動するようになる。

/** Geminiが自動生成した概要 **/
Tera schoolで開催している社会人・学生向けプログラミング勉強会で、業務改善を目的としたGAS(Google Apps Script)入門講座を実施しました。今回はGoogle Driveの共有フォルダのアクセス権限者一覧をスプレッドシートに自動出力するスクリプトを作成。JavaScriptの知識を活かし、数行のコードで名簿作成を自動化し、大幅な生産性向上を体感しました。次回は、作成した名簿を活用し、スプレッドシートとGmailを連携させた定期通知メール送信機能の実装を予定しています。

/** 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が自動生成した概要 **/
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が自動生成した概要 **/
農研機構の「日本土壌インベントリー」は、緯度経度で土質を検索し、詳細情報を提供する画期的なWebサービスです。これにより、訪れたことのない地域の土壌特性を把握し、栽培計画に役立てることが可能になります。 さらに、産業技術総合研究所の「日本シームレス地質図」と組み合わせることで、土壌の母岩や地下水に溶け込む養分まで推測でき、より深い土壌理解に繋がります。記事では、土壌データのアプリケーション連携の課題に触れつつ、京都・京北地域の黒ボク土を例に、地質情報との連携による詳細な土質分析の可能性を具体的に考察しています。

/** Geminiが自動生成した概要 **/
常時SSL化はSEO上効果がある。GoogleはHTTPSをランキングシグナルとして使用しており、サイトのセキュリティ向上はユーザー体験の向上に繋がるため、間接的にSEO効果が見込める。ただし、HTTPS化自体が劇的なランキング上昇をもたらすわけではない。相対的にHTTPサイトより優位になる程度の影響と考えられる。また、サイト表示速度の向上も期待できるが、適切な設定が必要。常時SSL化は必須事項となりつつあり、SEO対策としてだけでなく、セキュリティ向上とユーザーへの信頼感醸成という観点からも重要である。

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

/** Geminiが自動生成した概要 **/
BracketsのBeautifyによるXMLファイルの自動整形を無効化する方法について解説されています。SOY CMS/Shop開発において、build.xmlがBeautifyによって整形され、Antビルドでエラーが発生する問題が発生しました。解決策として、brackets.jsonに`"language":{"xml":{"bb.beautify.onSave":false}}`を追加し、XMLファイルの自動整形を無効化することで、Antビルドが正常に動作するようになりました。

/** Geminiが自動生成した概要 **/
ブログ記事の要約です。 筆者は公開ページを持たない業務アプリ用サイトを立ち上げた直後、エラーログの急増に気づきました。確認すると、サイトがWordPressであると認識され、`wp-login.php`への総当たりログイン試行が繰り返されていることが判明。実際はWordPressではないにも関わらず、ターゲットとされたことに驚きとリソース消費への苛立ちを感じています。この記事は、WordPressがサイバー攻撃の「金の鉱床」であるほど狙われやすい現状を浮き彫りにし、その危険性を警鐘しています。また、安易なWordPress利用に疑問を呈し、素人が独自ドメインでブログを運営するならBloggerの利用を推奨しています。

/** Geminiが自動生成した概要 **/
オープンソースのネットショップパッケージは初期費用を抑え、自由にカスタマイズできるメリットがある一方、運用に伴う問題も存在する。軌道に乗り始めると、トラフィック増加への対応、セキュリティ対策、機能追加など、システムの拡張性と保守性が重要になる。これらの課題解決には専門知識が必要となる場合が多く、結果的にコスト増加につながる可能性もある。さらに、コミュニティベースのサポートは情報収集に役立つものの、迅速な問題解決には不向きな場合も。オープンソースは自由度と低コストで始められる魅力があるが、将来的な拡張性と運用コストを考慮した選択が必要となる。

/** Geminiが自動生成した概要 **/
D3.jsを3系から4系にバージョンアップして折れ線グラフを作成した際の変更点についての記事です。4系ではscale関連の記述方法が変わり、`d3.scale.linear()`が`d3.scaleLinear()`に、`d3.scale.ordinal().rangePoints()`が`d3.scalePoint()`に変更されました。特に`scalePoint()`を見つけるのに苦労したようです。また、`d3.axis.svg.axis()`が`d3.axisBottom()`のようにシンプルになりました。これらの変更点に苦労しつつも、無事にグラフ作成できたことが記述されています。

/** Geminiが自動生成した概要 **/
中学生向けプログラミング教室で、JavaScriptでアプリ制作をする生徒が出てきたため、デスクトップアプリ作成の選択肢としてNW.jsをUbuntuで試した。npmでnw.jsをインストール後、index.htmlとpackage.jsonを作成し、`npm start`で実行した結果、"Hello World!"とNode.jsのバージョンが表示された。ランチャーに登録したNW.jsアイコンからも同じ画面が起動できた。しかし、端末操作が必要なため、中学生には敷居が高いと判断し、他の方法を検討することにした。

/** Geminiが自動生成した概要 **/
SOY CMSのブログで地図アプリを作成する過程の記事です。前回はブログトップページに地図と詳細ページへのリンク付きインフォウィンドウを表示しました。今回は、詳細ページにも地図とGoogleマップへのリンクを表示する方法を解説しています。記事には、詳細ページに埋め込むHTMLコードが掲載されています。`cms:id="title_plain"`、`cms:id="lat"`、`cms:id="lng"`を使って記事のタイトル、緯度、経度を埋め込み、JavaScriptで地図を表示、Googleマップへのリンクを生成しています。これにより、詳細ページでも店舗の位置情報が確認できるようになりました。

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

/** Geminiが自動生成した概要 **/
Google Maps APIを用いてSOY CMSのブログに地図アプリを作成する手順の第一段階を解説した記事です。まずGoogle API ConsoleでAPIキーを取得し、SOY CMSにカスタムフィールド「lat（緯度）」と「lng（経度）」を追加します。ブログページを作成し、提供されたHTMLテンプレートを貼り付け、地図の中心座標とズームレベルを調整します。座標はGoogle Mapsで場所を検索し、右クリックメニューの「この場所について」から取得できます。最後に、ブログ記事を作成し、タイトルと本文に加え、カスタムフィールドに取得した緯度経度を入力して公開します。これにより、ブログトップの地図上にマーカーが追加され、訪問場所を視覚的に表示できます。次記事ではマーカーに詳細情報を表示する機能を追加する予定です。

/** Geminiが自動生成した概要 **/
SOY Shopのプラグイン複製は、対象ディレクトリ（例：payment_furikomi）を丸ごと複製し、名前を（例：payment_furikomi2）に変更する。ファイル名、クラス名、モジュールID（payment_furikomi→payment_furikomi2、PaymentFurikomi→PaymentFurikomi2など）を全て変更する。module.iniのモジュールIDも修正。拡張ポイントファイル(soyshop.***.php)やUtilクラスなども同様に置換。HTMLファイルは修正不要。PHPの知識があれば複製後、自由に修正可能。

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

/** Geminiが自動生成した概要 **/
SOY CMSのファイルマネージャelFinderでJSファイルのアップロードを許可する方法。`/CMSのインストールディレクトリ/soycms/js/elfinder/php/connector.php`内の`uploadAllow`配列にJSファイルのMIMEタイプ `text/javascript` を追加することで実現できる。デフォルトではセキュリティのためJSファイルのアップロードは禁止されているが、この設定変更によりアップロードと編集が可能になる。ただし、不正ログイン時に悪意あるコード実行のリスクも高まるため、注意が必要。

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

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

/** Geminiが自動生成した概要 **/
SOY CMS/Shopのブロックで、リストの最初と最後で表示を変える方法を紹介。`soy:id="at_last"`と`soy:id="not_last"`を使えば、最後の要素だけ、または最後以外の要素だけに特定のHTMLを出力できる。例えば、記事一覧で最後の記事の下にだけ太線を表示するといったことが可能。 さらに、`soy:id="at_first"`と`soy:id="not_first"`と組み合わせることで、より複雑な表示制御が可能になる。例えば、カテゴリ一覧で最初の要素にのみカテゴリタイトルと`<ol>`タグを出力し、最後の要素にのみ`</ol>`タグを出力することで、無駄なHTMLを出力せずに済む。

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

/** Geminiが自動生成した概要 **/
WordPressプラグイン作成の入門記事。REST APIサービスのWordPress対応のため、プラグイン「hoge_world」を作成する例を紹介。プラグインファイル（/wp-content/plugins/hoge_world/hoge_world.php）を作成し、コメントと`HogeWorld::call()`関数を定義。管理画面のプラグイン一覧に表示され、テーマファイル（例：sidebar.php）に`<?php HogeWorld::call(); ?>`を記述することで「hoge worldだー！」と表示されることを示している。

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

/** Geminiが自動生成した概要 **/
SOY CMS/Shopのセキュリティ強化のため、テンプレートエディタとPHPモジュールでのPHP実行に制限が加わりました。PHPの使用は、`user.config.php`で`SOYCMS_ALLOW_PHP_SCRIPT`を`true`にすることで許可されます。 PHPモジュールはさらに`SOYCMS_ALLOW_PHP_MODULE`を`true`にすることで利用可能になります。これらの設定により、テンプレートやモジュールでPHPコードの実行を制御し、セキュリティリスクを軽減します。アップデートはGitHubから入手可能です。

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

/** Geminiが自動生成した概要 **/
SOY Shopで非同期に商品をカートに入れる方法を解説。Ajaxを用いて、カートボタンクリック時にページ遷移なしでカートに追加する。まず、JavaScriptでカート操作URLへの非同期通信を行う関数を定義。次に、カートボタンのHTMLを書き換え、この関数を実行するように変更する。これによりカートへの追加自体は非同期で行われるが、画面上のカート情報は更新されない。次回、この点を改善し、カート追加をユーザーに分かりやすく表示する方法を解説予定。

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

/** Geminiが自動生成した概要 **/
小中学生向けに続き、社会人・学生向けプログラミング教室を開講しました。業務でHTMLやメール設定ができないことで損をしている人を多く見てきたため、その改善を支援したいと考えています。まずは、GoogleスプレッドシートのJavaScriptによる効率化、HTMLとJavaScriptを用いたLPページ改善を目標に指導を行います。内容が固まったら本格的に展開予定です。

/** Geminiが自動生成した概要 **/
中学生にプログラミングを教える中で、整数の割り算による正解率計算で予期せぬ結果になる例を紹介。C言語で整数の4割る5に100を掛けても、結果は0.000000%と表示される。これは整数演算で切り捨てが発生するため。また、0.2 + 0.12 の計算でも、結果は0.3200001と微妙にずれる。これはコンピュータが2進数で小数を表現する際の誤差によるもの。これらの例は、プログラミングを通して数学の理解を深める機会となるが、詳細な説明には数学的知識が必要となる。

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

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

/** Geminiが自動生成した概要 **/
SOY CMSのブロックで記事をランダム表示するスクリプトモジュールブロックのコードが紹介されています。指定したラベルの記事をランダムに並び替え、指定件数分出力します。 `/site(サイトID)/script/soycms_random.php` にPHPコードを記述し、テンプレートで `cms:label` にラベルID、`cms:count` に取得件数を指定することで利用できます。コードはフォーラムにもアップロードされています。記事の取得件数を指定しない場合は、該当ラベルのすべての記事を取得しランダムに表示します。

/** Geminiが自動生成した概要 **/
Apacheサーバのバージョン表示はセキュリティリスクとなるため、非表示にすることが推奨されています。本記事では、Apacheの設定ファイル`httpd.conf`または`apache2.conf`を編集することで、バージョン情報を隠す方法を解説しています。具体的には、`ServerTokens`ディレクティブを`Prod`に設定することで、公開されるサーバ情報を最小限に抑えられます。また、`ServerSignature`ディレクティブを`Off`にすることで、エラーページなどからサーバのバージョン情報が削除されます。これらの設定変更後、Apacheを再起動することで変更が反映されます。さらに、セキュリティ対策としてmod_securityなどのセキュリティモジュール導入も推奨しています。

/** Geminiが自動生成した概要 **/
Go言語で開発された土壌分析Webアプリ「soil2」の紹介。 入力された土壌分析値をグラフ化し、将来的にはサードパーティアプリとの連携も視野に入れている。Go言語採用理由は、コンパイル言語のためサーバー環境によるコード変更の手間を省き、処理速度の向上も見込めるため。REST APIと管理者機能を実装し、グラフ表示にはChart.jsを使用。当初は身内向け公開予定だったが、最終的にはSOY Shopのマイページ機能に統合された。

/** Geminiが自動生成した概要 **/
SOY CMSで検索機能を実装する方法を解説。`/site(サイトID)/script/soycms_search.php`に検索スクリプトを記述。SQLで記事タイトル、本文、追記フィールドを検索し、公開期間内の記事を抽出。結果はEntryオブジェクトに変換後、配列`$soycms_search_result`に格納。テンプレートには`<form method="get" action="/search">`で検索フォームを設置し、クエリパラメータ`q`で検索文字列を受け取るようにする。`$dao->getObject($row)`で検索結果をEntryオブジェクトに変換することで、テンプレートに記述した`<!-- block:id="result" -->`で表示可能になる。

/** Geminiが自動生成した概要 **/
記事「検索フォームと検索結果ページを作ってみた3」では、検索結果ページに記事一覧を表示する具体的な実装方法を解説しています。 前記事で準備した`entry_search`関数に検索ロジックを記述します。まず、`soycms_search.php`にデータベースへの接続設定を追加し、クエリ文字列から検索キーワードを取得します。取得したキーワードを元にデータベースを検索し、結果を配列に格納します。 記事一覧の表示には、取得した配列をループ処理で展開し、各記事のタイトルとURLを表示します。記事タイトルはリンクとして設定し、クリックすると詳細ページへ遷移するようにします。また、検索結果が0件の場合には「該当する記事は見つかりませんでした」と表示する処理も追加します。 これらの処理により、ユーザーが入力したキーワードに合致する記事一覧が検索結果ページに表示されるようになります。

/** Geminiが自動生成した概要 **/
スクリプトモジュールブロックを使用して記事検索機能をSOY CMSに追加する方法について説明しています。まず、user.config.phpでスクリプトモジュールを許可し、次にブロックタイプリストにScriptModuleBlockComponentを追加します。記事中の特定の文字列を検索したり、記事をグループ化したりできるようになります。このモジュールを使用することにより、ブログに検索機能を追加し、ユーザーが記事をより簡単に検索できるようにすることができます。