/** 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 CMSのCore Web Vitals改善用プラグイン「Cumulative Layout Shift」にpicture要素設定が追加されました。 picture要素はレスポンシブ画像を実現するHTMLタグで、画面幅に応じて最適な画像を出力します。プラグインでは、imgタグにsize属性を自動挿入するか、pictureタグで囲うかを選択できます。ただし、既にHTMLテンプレートでpictureタグを使用している場合は正常に動作しないため注意が必要です。この機能はsaitodev.co/soycms/で提供されるパッケージに含まれています。画像のwidthが小さい場合はsize属性が自動挿入されます。
/** Geminiが自動生成した概要 **/
pickadate.jsでHTML5のrequired属性を使うには、`editable: true`オプションを設定する必要がある。ただし、これによりページ読み込み時にrequiredチェックが実行され、未入力エラーが表示される問題が発生する。これを回避するには、フォームにIDを付与し、クリックイベントでpickadateを初期化するよう変更する。さらに、カレンダー表示のために`pickr.pickadate('open')`も追加する必要がある。これにより、フォームクリック時に初めて初期化とバリデーションが行われるようになり、初期エラー表示の問題が解決する。
/** Geminiが自動生成した概要 **/
Web Audio APIのAnalyzerNodeを用いて、音声でアニメーションを制御する方法を紹介しています。 円が画面端で跳ね返る単純なアニメーションに、音声の周波数データ解析を組み込みました。 周波数データが一定閾値を超えると、円の進行方向がランダムに変化します。 音が途切れてもデータが残るため、setTimeoutを用いて一定時間反応しないように制御しています。 具体的には、`analyser.getByteFrequencyData(data)`で周波数データを取得し、`data[20]`の値が閾値を超えた場合に円の移動方向を反転させています。
/** 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が自動生成した概要 **/
SOY Inquiryでお問い合わせがあった際にChatworkに通知する方法を紹介します。まず、フォーム設置ディレクトリ（例：default）にmail.admin.phpを作成します。このファイルに、Chatwork APIトークン、ルームID、お問い合わせ内容をPOSTするcURLコードを記述します。 APIトークンとルームIDは別途取得が必要です。コード内の`$mailBody[0]`にはお問い合わせ本文が入っています。 設置完了後、テスト送信すると、指定のChatworkルームに「【saitodev.co】お問合わせがありました。」に続いてお問い合わせ内容が通知されます。
/** Geminiが自動生成した概要 **/
Node.jsとSocket.IOを用いたチャットアプリ構築後、Let's Encryptで常時SSL化する方法を解説。自己署名証明書ではブラウザ警告が出るため、無料のLet's Encryptを利用。Certbotによる証明書取得手順、Nginxの設定変更（SSL設定追加、httpトラフィックのhttpsリダイレクト）を説明。 Socket.IOのサーバー側コード修正では、httpsオプションを追加し、取得した証明書と秘密鍵を指定。これにより、チャットアプリがセキュアなhttps接続で利用可能になる。
/** 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が自動生成した概要 **/
プログラミング未経験者がNPOで小中学生にプログラミングを教えることになった。教材選びでは、Scratchは力技での解決を招きやすく、PHPは環境構築が面倒、Javaは難易度が高いため却下。JavaScriptは環境構築が容易で、様々な可能性を秘めていることから採用。ただし、柔軟すぎるが故のコードの煩雑さを懸念し、自身もJavaScriptを改めて学び直すことにした。
/** Geminiが自動生成した概要 **/
Go言語で開発された土壌分析Webアプリ「soil2」の紹介。 入力された土壌分析値をグラフ化し、将来的にはサードパーティアプリとの連携も視野に入れている。Go言語採用理由は、コンパイル言語のためサーバー環境によるコード変更の手間を省き、処理速度の向上も見込めるため。REST APIと管理者機能を実装し、グラフ表示にはChart.jsを使用。当初は身内向け公開予定だったが、最終的にはSOY Shopのマイページ機能に統合された。
/** Geminiが自動生成した概要 **/
SOY Inquiryを使ってレスポンシブデザインのお問い合わせフォームを作成する方法を紹介しています。レスポンシブデザインとは、PCとスマートフォンでそれぞれ見やすい表示になるよう自動調整されるWebデザイン手法です。設定は、フォーム設定で「responsive」を選び、スタイルシートを読み込むをチェックするだけ。HTML5のrequired属性にも対応し、必須項目の未入力時に警告を表示できます。設定はカラム設定で「required属性を利用する」をチェックするだけ。pattern属性も利用可能で、入力パターンの指定ができます。フォームの属性にpattern="正規表現"を追加するだけで設定できます。ただし、住所検索機能とは競合するため注意が必要です。ダウンロードやフォーラムへのリンクも記載されています。以前の記事「スマホ対応のお問い合わせフォームを作ってみた」の内容を元に、更に機能が追加されています。