植物のミカタ

/** Geminiが自動生成した概要 **/
WSL2上のUbuntuにApache2とPHPで構築したSOY CMS環境に、VirtualHostを追加する方法を解説しています。`/etc/apache2/sites-available/`にある`000-default.conf`を`demo.conf`にコピーし、ポートを8080、DocumentRootを`/home/ryoko/workspace/demo`に変更、アクセス許可の設定を追加します。`a2ensite`コマンドで有効化し、Apache2を再起動後、`localhost:8080`でSOY CMSの管理画面が表示されれば成功です。

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

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

/** Geminiが自動生成した概要 **/
記事では、インターネット上のパケットを傍受して中身を確認する方法を解説しています。使用ツールはWiresharkで、無線LANに接続するPCと、傍受対象のスマホを同じネットワークに接続します。スマホと通信するパケットはPCも受信するため、Wiresharkでフィルタリングしてスマホの通信のみを抽出します。HTTP通信の場合は、パスワードなどの重要な情報が平文で送信されていることが確認できます。HTTPS通信の場合は暗号化されているため、傍受しても内容は解読できません。この実験を通して、HTTP通信の危険性とHTTPS通信の重要性を示しています。

/** 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が自動生成した概要 **/
SOY CMSのブログ機能を利用した地図アプリ作成の第2弾では、マーカークリック時のインフォウィンドウ表示を実装しました。前回設定したカスタムフィールド（サムネイル、緯度経度）に加え、ブログ記事のタイトルとリンクをインフォウィンドウに表示するようにテンプレートを修正。具体的には、JavaScriptでインフォウィンドウの内容を生成し、マーカークリックイベントで表示する処理を追加しました。これにより、地図上のマーカーから各店舗の詳細ページへ遷移できるようになりました。将来的にはSOY Shopと連携させ、カテゴリを店舗名として地図上に店舗を表示するショップページの作成も構想されています。

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

/** Geminiが自動生成した概要 **/
Go製WebアプリをHTTP/2で運用するために、Let's EncryptでSSL証明書を取得した。取得手順は、letsencryptコマンドで証明書を作成し、Goのコードに証明書のパスを指定するだけ。`http.ListenAndServe`を`http.ListenAndServeTLS`に変更し、fullchain.pemとprivkey.pemのパスを設定することでHTTPS化。証明書取得後、サイトはHTTP/2で動作するようになった。

/** Geminiが自動生成した概要 **/
さくらのVPSにGo環境を構築し、アプリケーションサーバを起動した際のメモ。UbuntuにGit, Go, MySQLをインストールし、アプリをビルド、実行した。ポート80での起動はroot権限が必要だったため、`sudo ./app -addr=:80`で実行。バックグラウンド実行は`&`を追加し、停止は`kill -KILL プロセスID`を使用。セキュリティ設定は別途必要。

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