From 78b78c7fa044c4823db59a24a35ad631aa6fb153 Mon Sep 17 00:00:00 2001
From: koide <koide@clawdbot.dev>
Date: Tue, 24 Feb 2026 01:31:22 +0000
Subject: [PATCH] =?UTF-8?q?Update:=20=E8=87=AA=E5=B7=B1=E7=BD=B2=E5=90=8D?=
 =?UTF-8?q?=E8=A8=BC=E6=98=8E=E6=9B=B8=E3=81=AE=E6=89=8B=E9=A0=86=E3=82=92?=
 =?UTF-8?q?=E8=A9=B3=E7=B4=B0=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs-tech/browser-secure-context/index.md | 110 ++++++++++++++++++++--
 1 file changed, 104 insertions(+), 6 deletions(-)

diff --git a/docs-tech/browser-secure-context/index.md b/docs-tech/browser-secure-context/index.md
index 69d1e63..8cdbad8 100644
--- a/docs-tech/browser-secure-context/index.md
+++ b/docs-tech/browser-secure-context/index.md
@@ -59,18 +59,116 @@ ssh -L 7860:localhost:7860 -L 8000:localhost:8000 user@192.168.1.100
 
 ### 方法3: 自己署名証明書でHTTPS化
 
-本格運用向け。サーバー側でHTTPSを有効化。
+チーム共有や本格運用向け。サーバー側でHTTPSを有効化。
+
+#### Step 1: 証明書を生成
+
+サーバー側で以下を実行：
 
 ```bash
-# 証明書生成
-openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes \
-  -subj "/CN=192.168.1.100"
+openssl req -x509 -newkey rsa:4096 \
+  -keyout key.pem \
+  -out cert.pem \
+  -days 365 \
+  -nodes \
+  -subj "/CN=192.168.1.100" \
+  -addext "subjectAltName=IP:192.168.1.100"
+```
 
-# Pythonの場合（例: Gradio）
+| オプション | 説明 |
+|-----------|------|
+| `-keyout key.pem` | 秘密鍵ファイル（サーバーが使う、外部に漏らさない） |
+| `-out cert.pem` | 証明書ファイル（クライアントに配布可能） |
+| `-days 365` | 有効期限（1年） |
+| `-nodes` | パスフレーズなし（サーバー自動起動用） |
+| `-subj "/CN=..."` | Common Name（IPアドレスまたはホスト名） |
+| `-addext "subjectAltName=..."` | SANs（最近のブラウザで必須） |
+
+**生成されるファイル：**
+```
+key.pem   # 秘密鍵（絶対に公開しない）
+cert.pem  # 証明書（クライアントに配布OK）
+```
+
+#### Step 2: サーバーで証明書を使う
+
+**Gradio：**
+```bash
 python app.py --ssl-keyfile key.pem --ssl-certfile cert.pem
 ```
 
-ブラウザで `https://192.168.1.100:7860` にアクセスし、証明書警告を許可。
+**FastAPI / Uvicorn：**
+```bash
+uvicorn main:app --host 0.0.0.0 --port 8000 \
+  --ssl-keyfile key.pem --ssl-certfile cert.pem
+```
+
+**Python http.server（簡易）：**
+```python
+import ssl
+import http.server
+
+context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
+context.load_cert_chain('cert.pem', 'key.pem')
+
+server = http.server.HTTPServer(('0.0.0.0', 8000), http.server.SimpleHTTPRequestHandler)
+server.socket = context.wrap_socket(server.socket, server_side=True)
+server.serve_forever()
+```
+
+**Node.js / Express：**
+```javascript
+const https = require('https');
+const fs = require('fs');
+const app = require('./app');
+
+https.createServer({
+  key: fs.readFileSync('key.pem'),
+  cert: fs.readFileSync('cert.pem')
+}, app).listen(8000);
+```
+
+#### Step 3: ブラウザでアクセス
+
+`https://192.168.1.100:8000` にアクセスすると警告が出る：
+
+**Chrome:**
+1. 「この接続ではプライバシーが保護されません」と表示
+2. 「詳細設定」をクリック
+3. 「192.168.1.100 にアクセスする（安全ではありません）」をクリック
+
+**Firefox:**
+1. 「警告: 潜在的なセキュリティリスクあり」と表示
+2. 「詳細」→「危険性を承知で続行」
+
+**Safari:**
+1. 「この接続はプライベートではありません」と表示
+2. 「詳細を表示」→「このWebサイトを閲覧」
+
+#### Step 4: 証明書を信頼済みに登録（オプション）
+
+毎回警告を出したくない場合、証明書をOSに登録。
+
+**macOS:**
+```bash
+sudo security add-trusted-cert -d -r trustRoot \
+  -k /Library/Keychains/System.keychain cert.pem
+```
+
+**Ubuntu/Debian:**
+```bash
+sudo cp cert.pem /usr/local/share/ca-certificates/myserver.crt
+sudo update-ca-certificates
+```
+
+**Windows:**
+1. `cert.pem` を `cert.crt` にリネーム
+2. ダブルクリック → 「証明書のインストール」
+3. 「ローカルマシン」→「信頼されたルート証明機関」に配置
+
+:::tip
+チームで共有する場合は `cert.pem` を配布し、各メンバーがOSに登録すると便利です。
+:::
 
 ### 方法4: ngrok / Cloudflare Tunnel