植物のミカタ

/** Geminiが自動生成した概要 **/
記事は、目の疲れ解消のサプリメント成分、ルテインについて解説しています。 ルテインは緑黄色野菜に含まれるカロテノイドの一種ですが、豊富に含む食材は限られるため、日常的な摂取は難しいとされています。 ルテインは体内で生成できないため、食事やサプリメントから摂取する必要があります。 ヨモギはルテインを豊富に含み、アルツハイマー病予防効果も期待されています。 鉄分不足解消には鉄分の多い食品を食べる必要があり、野菜だけでは不十分です。

/** Geminiが自動生成した概要 **/
著者は、Chromecast with Google TVでSteam Linkを使ってゲームができるか検証しました。しかし、ゲーム動作がカクカクしてしまい、原因を調査。ネットワーク速度を向上させるためにイーサネットアダプターを導入しましたが改善されず、Chromecastのスペック不足が原因と推測しました。そこでRaspberry Pi 4Bで試したところ、スムーズに動作。Chromecastのメモリ容量が影響している可能性を指摘し、他のスペックのマシンでの検証を希望しています。 追記として、Chromecastの後継機であるGoogle TV Streamerでも同様の検証を行った記事へのリンクが掲載されています。

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

/** Geminiが自動生成した概要 **/
記事では、PokitMeterという小型測定器を用いて、Micro:bit(マイクロビット)が出力するPWM信号の周波数を測定しています。 PokitMeterは測定結果をスマホで確認できるため非常にコンパクトで、Chromebookでも使用可能です。 マイクロビットのP0ピンから出力されるPWM信号をPokitMeterのオシロスコープモードで測定した結果、デューティ比50%で、周期20msの矩形波が観測されました。 このことから、マイクロビットのPWM周波数は標準で50Hzであることが分かります。 今後はPokitMeterを活用して、より深くマイクロビットの機能を探求していく予定です。

/** Geminiが自動生成した概要 **/
「Soil & Geoロガー」がOpenStreetMap APIを使って改良されました。以前はGoogle Maps APIを使用していましたが、OpenStreetMap APIに切り替え、地図表示と位置情報の取得を簡素化しました。これにより、地図上の任意の場所をクリックするだけで、その地点の緯度経度を取得し、土壌情報と地質情報へのリンクを生成します。さらに、オフライン機能を提供していたIndexedDBとサービスワーカーAPIは、インターネット接続環境の向上により廃止されました。この改良により、土壌情報と地質情報へのアクセスが容易になり、施肥設計や地域資源の活用に役立ちます。

/** Geminiが自動生成した概要 **/
プログラミング教育の格差解消には、安価で高性能なARMアーキテクチャ搭載PCが有効である。Raspberry PiはDebian系OSとPythonを標準サポートし、電子工作から本格的な開発まで対応可能なため、ChromebookやMicro:bitよりも優れている。ARM対応ソフトの充実が課題だが、低価格でDebianやPythonに触れられる環境は、OSSやサーバー学習へのハードルを下げ、将来的なIT人材育成に貢献する。

/** Geminiが自動生成した概要 **/
SOY Shopで、クレジットカード決済は完了したのに注文が未完了となる問題が発生。原因はスマホのWiFiとセッションの喪失によるもので、決済モジュールのリダイレクト処理中に発生すると注文受付処理が失敗する。この問題に対処するため、決済成功＆注文未完了の状態(仮登録＆支払確認済)の注文を管理画面の新着ページにエラー通知として表示する機能を追加。通知機能は「新着注文一覧表示プラグイン」の一部として実装。この対応で、注文の見落としを防ぎ、問題発生時の早期発見を目指す。ただし、注文数の少ないサイトでは有効性低いため、更なる改善が必要。

/** Geminiが自動生成した概要 **/
センセイトークは、学校関係者の協働促進を目的とした対話型カードゲームをオンライン化したものです。Zoom等の画面共有機能を活用し、参加者はスマホ等でアバターを操作しながら、共有デッキ上のトークテーマに基づき会話を行います。テストプレイでは、デッキ上の文章が話の整理に役立ち、画面共有に視線が集中することで、ストレスなく話せるという意見がありました。これは、スタンフォード大が指摘する「Zoom疲れ」の原因、「視線の多さと顔サイズの大きさ」「自分自身を見続けること」「大げさなジェスチャーの必要性」を同時に解決する可能性を示唆しています。センセイトークは、Web会議を円滑にするアイデアを秘めているかもしれません。

/** Geminiが自動生成した概要 **/
SOY Shopのカートで、Android Chrome利用時にセッションが突然切れ、カートの中身が消える問題が発生した。原因はCSRF対策で毎回`session_regenerate_id()`を実行していたこと。モバイルネットワークは不安定なため、`session_regenerate_id()`実行でセッション消失が起こる可能性があることがPHPマニュアルに記載されていた。対処として、スマホからのアクセス時は`session_regenerate_id()`を実行しないように変更した。 関連記事「SOY CMSでSameSite cookiesの対応を追加しました」では、SameSite属性を設定することで、クロスサイトリクエストフォージェリ（CSRF）攻撃への対策を強化している。具体的には、CookieにSameSite=Lax属性を設定することで、クロスサイトでのCookie送信を制限し、セキュリティを向上させている。これにより、SOY CMSを利用するサイトのセキュリティが強化され、ユーザーの情報がより安全に保護される。

/** 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が自動生成した概要 **/
SOY CMS向けに、スマホからのブログ投稿プラグインが開発されました。SOY CMS 3系で既に可能だったスマホからの投稿機能に加え、本プラグインはスマホでアップロードする画像を自動でリサイズ・最適化し、サーバーへの負荷を軽減します。 特に、Guetzliが導入されていれば、最適化により画像データの転送量が削減され、Core Web VitalsなどSEO対策にも貢献します。UIはまだ改善の余地があるものの、日常使いしながらブラッシュアップしていく方針で、UI変更への協力も呼びかけています。このプラグインは指定URLから利用可能です。

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

/** Geminiが自動生成した概要 **/
Chrome 85からCSSの`content-visibility: auto;`が導入され、画面外コンテンツの遅延読み込みが可能に。表示速度向上とSEO対策が目的です。筆者は自身のサイトで、`.content-lazy-always`で常時遅延、`.content-lazy`でPCとスマホで表示/遅延を切り替える形で実装。記事一覧の下部や詳細ページのフッターなどに適用しました。しかし、元々読み込みが速かったため、具体的な速度改善効果は確認できなかったとのことです。

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

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

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

/** Geminiが自動生成した概要 **/
さくらのメールボックスからGmailへメール送信時、送信元認証がされていないため「？」アイコンが表示される問題を解決する方法。お名前.comで取得したドメインのDNS設定で、さくらのメールボックスのホスト名を用いてSPFレコード `v=spf1 a:ホスト名 mx ~all` をTXTレコードとして追加する。設定後、mxtoolbox.comでSPFレコードを確認し、Gmailで受信したメールのアイコンが「？」から人物アイコンに変われば成功。

/** Geminiが自動生成した概要 **/
株式会社フィールド＆マウンテン様の山小屋グッズECサイト「ヤマトリップショップ」(https://yamatrip.com/shop/)を制作しました。既存顧客基盤を持つ「やまどうぐレンタル屋」の緑白カラーを基調としたスマホ向けデザインを採用し、リリース後すぐに注文が続々と入っています。 特徴的な機能として、商品詳細ページに100円～5000円を選択できる投げ銭ボタンを実装。商品と投げ銭の同時購入も可能です。また、複数の商品を同時にカートに追加する隠し機能も搭載しています。 ボトル、手ぬぐい、Tシャツなど魅力的な商品が揃っており、やまどうぐレンタル屋が築き上げてきた顧客との信頼関係が、ECサイトの初期の成功に繋がっていると感じています。

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

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

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

/** Geminiが自動生成した概要 **/
SOY Shopの顧客管理機能を活用し、キャンセル発生頻度の高い就学前児童向けWebサービスの予約カレンダーを開発。Googleアカウントログイン機能、仮登録による会員限定アクセス制限、運営者による本登録承認フローを実装。スマホで空き状況確認・予約を簡素化し、クリック操作で予約完了までスムーズな導線を構築。Bootstrapテンプレートのカスタマイズにより操作性を向上。兄弟利用を想定した予約時情報入力機能も搭載。キャンセル発生時の迅速な空き状況更新にも対応。

/** Geminiが自動生成した概要 **/
SOY Shopの予約サイト構築用プラグインに、レスポンシブ対応のカレンダー表示機能が追加された。PCでは1ヶ月分のカレンダー、スマホでは今日から2週間分の縦型カレンダー表示となり、Bootstrap 4ベースでUIが改善。この機能は「予約カレンダースマホ拡張プラグイン」で利用可能。開発案件のニーズに応え、予約アプリ導入コスト削減を目指し開発された。更新版パッケージはsaitodev.co/soycms/soyshop/からダウンロードできる。

/** Geminiが自動生成した概要 **/
SOY Inquiryで長い項目名によってメール表示が崩れる問題を解決する方法です。フォームテンプレートディレクトリ（例：default）にmail.admin.phpを作成し、PHPでメール内容を整形します。 提供されたコードは、メール本文の各行を処理し、コロン以降の空白文字を削除して出力します。これにより、項目名と入力値の間のスペースが詰まり、コンパクトな表示になります。管理者宛メールのみ変更され、公開側の表示は変わりません。

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

/** Geminiが自動生成した概要 **/
植物の生育には二価鉄が重要で、安山岩・玄武岩質火山由来の土壌が適している。しかし、海底火山の痕跡がある山周辺の土壌も生育に良い可能性がある。海底火山はプレート移動で隆起し、玄武岩質になるため鉄分が豊富。高槻市の山で実例を確認。水源に海底火山の地質がある土地は特に恵まれている。三波川変成岩帯も鉄分に富む。徳島のある地域は海底火山由来の地質で、土地の優位性を裏付けている。地質と栽培の関係を理解するため、GPSで地質を確認できるツール「Soil & Geo Logger」を作成。周辺の地形や地質への意識で、新たな発見があるかもしれない。

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

/** Geminiが自動生成した概要 **/
Ubuntu 18.04でAndroid Debug Bridge (ADB) を使用してAndroidアプリをデプロイする方法を紹介しています。ADBをインストール後、Go Mobileのサンプルコードをエミュレータと実機(ZTE Blade V580, Android 5.1)にデプロイしました。エミュレータではバージョン不一致でアプリは起動しませんでしたが、実機では開発者モードを有効化し、USBデバッグをONにすることで、`gomobile install`コマンドでアプリのデプロイと起動に成功しました。

/** Geminiが自動生成した概要 **/
Ubuntu 18.04にAndroidエミュレータを導入する方法。必要なライブラリをインストール後、Android Studioをダウンロード、インストールし、パスを通す。次に、KVM関連のライブラリをインストールし、ユーザーにKVMの使用権限を与える。Android Studioを再起動し、AVDマネージャーから好みのエミュレータを作成、実行することで、開発機上でAndroidアプリの動作確認が可能になる。

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

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

/** Geminiが自動生成した概要 **/
ビットコインの信用は、ブロックチェーンという技術に基づいています。取引記録をブロックにまとめ、暗号技術を用いて安全性を確保し、世界中のコンピュータに分散保存することで改ざんを防ぎます。マイナーと呼ばれる人々がトランザクションを検証しブロックチェーンに追加することで、ビットコインが生成されます。この検証作業には高度な計算が必要で、成功したマイナーは報酬としてビットコインを受け取ります。この報酬システムと分散管理によって、ビットコインの信用と不正防止が実現されています。

/** Geminiが自動生成した概要 **/
SOY CMSでサーバサイド画像リサイズを実装後、PageSpeed Insightsで「ロスレス圧縮で容量削減可能」と指摘されたため、jpegoptimを導入した。Ubuntuに`sudo apt-get install jpegoptim`でインストール後、`/CMSインストールディレクトリ/common/im.inc.php`の`imagejpeg`実行後に`jpegoptim $savepath`を実行するよう改修。これにより、ロスレス圧縮の指摘が解消され、PageSpeed Insightsのモバイルスコアが93から96に向上した。変更コードはフォーラムで配布されている。

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

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

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

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