サンプルの追加と説明の追加

Author: oosugi20

server/api_server.py

@@ -44,12 +44,22 @@ def do_GET(self):
                 api_type = query.get('api', ['users-utf8'])[0]
 
                 if api_type == 'users-sjis':
-                    # Shift-JISでレスポンス
+                    # Shift-JISでレスポンス（適切なヘッダー付き）
                     self.send_response(200)
                     self.send_header('Content-type', 'application/json; charset=Shift_JIS')
                     self.send_header('Access-Control-Allow-Origin', '*') # CORS
                     self.end_headers()
 
+                    json_utf8 = json.dumps(users, ensure_ascii=False)
+                    json_sjis = json_utf8.encode('cp932')
+                    self.wfile.write(json_sjis)
+                elif api_type == 'users-sjis-no-header':
+                    # Shift-JISでレスポンス（不適切なヘッダー - overrideMimeTypeテスト用）
+                    self.send_response(200)
+                    self.send_header('Content-type', 'application/json')  # charsetなし
+                    self.send_header('Access-Control-Allow-Origin', '*') # CORS
+                    self.end_headers()
+                    
                     json_utf8 = json.dumps(users, ensure_ascii=False)
                     json_sjis = json_utf8.encode('cp932')
                     self.wfile.write(json_sjis)

src/js/main.js

@@ -58,7 +58,7 @@ document.addEventListener('DOMContentLoaded', () => {
     .then(users => render('sjis-data-fetch', createTable(users)))
     .catch(error => renderError('sjis-data-fetch', error));
 
-  // --- 2. XMLHttpRequest ---
+  // --- 2. XMLHttpRequest (without overrideMimeType) ---
   const xhr = new XMLHttpRequest();
   xhr.open('GET', '/api?api=users-sjis');
   xhr.onload = () => {
@@ -76,6 +76,43 @@ document.addEventListener('DOMContentLoaded', () => {
   xhr.onerror = () => renderError('sjis-data-xhr', 'Request error');
   xhr.send();
 
+  // --- 2b. XMLHttpRequest (without overrideMimeType, no charset header) ---
+  const xhr2 = new XMLHttpRequest();
+  xhr2.open('GET', '/api?api=users-sjis-no-header');
+  xhr2.onload = () => {
+    if (xhr2.status >= 200 && xhr2.status < 300) {
+      try {
+        const users = JSON.parse(xhr2.responseText);
+        render('sjis-data-xhr-no-override', createTable(users));
+      } catch (e) {
+        renderError('sjis-data-xhr-no-override', e);
+      }
+    } else {
+      renderError('sjis-data-xhr-no-override', `Request failed: ${xhr2.status}`);
+    }
+  };
+  xhr2.onerror = () => renderError('sjis-data-xhr-no-override', 'Request error');
+  xhr2.send();
+
+  // --- 2c. XMLHttpRequest (with overrideMimeType) ---
+  const xhr3 = new XMLHttpRequest();
+  xhr3.open('GET', '/api?api=users-sjis-no-header');
+  xhr3.overrideMimeType('text/plain; charset=Shift_JIS');
+  xhr3.onload = () => {
+    if (xhr3.status >= 200 && xhr3.status < 300) {
+      try {
+        const users = JSON.parse(xhr3.responseText);
+        render('sjis-data-xhr-override', createTable(users));
+      } catch (e) {
+        renderError('sjis-data-xhr-override', e);
+      }
+    } else {
+      renderError('sjis-data-xhr-override', `Request failed: ${xhr3.status}`);
+    }
+  };
+  xhr3.onerror = () => renderError('sjis-data-xhr-override', 'Request error');
+  xhr3.send();
+
   // --- 3. axios ---
   // axiosはグローバルに読み込まれている前提
   if (window.axios) {

src/templates/index.ejs

@@ -9,21 +9,37 @@
   <h1>Shift-JIS Web サンプル</h1>
 
   <h2>API (Shift-JIS) - fetch + TextDecoder</h2>
+  <p><small>API: Shift-JISレスポンス + 適切なcharsetヘッダー<br>フロント: fetchでarrayBuffer取得 → TextDecoderで明示的にShift-JISデコード</small></p>
   <div id="sjis-data-fetch">
     <p>ロード中...</p>
   </div>
 
-  <h2>API (Shift-JIS) - XMLHttpRequest</h2>
+  <h2>API (Shift-JIS) - XMLHttpRequest (without overrideMimeType)</h2>
+  <p><small>API: Shift-JISレスポンス + 適切なcharsetヘッダー<br>フロント: XMLHttpRequest、ブラウザによる自動デコードに依存</small></p>
   <div id="sjis-data-xhr">
     <p>ロード中...</p>
   </div>
 
+  <h2>API (Shift-JIS) - XMLHttpRequest (without overrideMimeType, no charset header)</h2>
+  <p><small>API: Shift-JISレスポンス + charsetヘッダーなし<br>フロント: XMLHttpRequest、特別な処理なし → 文字化けのはず</small></p>
+  <div id="sjis-data-xhr-no-override">
+    <p>ロード中...</p>
+  </div>
+
+  <h2>API (Shift-JIS) - XMLHttpRequest (with overrideMimeType)</h2>
+  <p><small>API: Shift-JISレスポンス + charsetヘッダーなし<br>フロント: XMLHttpRequest + overrideMimeType()で明示的にcharset指定</small></p>
+  <div id="sjis-data-xhr-override">
+    <p>ロード中...</p>
+  </div>
+
   <h2>API (Shift-JIS) - axios</h2>
+  <p><small>API: Shift-JISレスポンス + 適切なcharsetヘッダー<br>フロント: axios、ブラウザによる自動デコードに依存</small></p>
   <div id="sjis-data-axios">
     <p>ロード中...</p>
   </div>
 
   <h2>API (UTF-8) - fetch</h2>
+  <p><small>API: UTF-8レスポンス + UTF-8ヘッダー<br>フロント: fetch + response.json()、通常の処理</small></p>
   <div id="utf8-data">
     <p>ロード中...</p>
   </div>