initial commit

Author: oosugi20

.gitignore

@@ -0,0 +1,28 @@
+# Dependencies
+node_modules/
+
+# Logs
+*.log
+
+# Build outputs (generated files)
+public/
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# Temporary files
+*.tmp
+*.temp

README.md

@@ -0,0 +1,72 @@
+# Shift-JIS Web Example
+
+## 概要
+
+現代のフロントエンド開発ワークフローとShift-JISを共存させるための実装サンプルです。
+
+UTF-8で書かれたソースコードから、Shift-JISの静的HTMLをビルドし、Shift-JISとUTF-8の両方を返すAPIサーバーと連携させる、複雑なエンコーディング混在環境を再現しています。
+
+## このサンプルが示すこと
+
+- **ビルド時のエンコーディング変換**:
+  - UTF-8で書かれたEJSテンプレートからShift-JIS（CP932）のHTMLファイルを生成する方法。
+  - iconv-liteライブラリを使った、文字列からバイナリデータへのエンコード変換。
+- **サーバーサイドでのShift-JIS対応**:
+  - Shift-JISのデータファイルを読み込んでWebAPIとして提供する実装方法。
+  - 円マーク問題の実装レベルでの対処（`\` → `¥` 変換）。
+  - Shift-JISでJSONレスポンスを返すための適切なヘッダー設定とエンコード処理。
+- **クライアントサイドでのShift-JISの扱い**:
+  - Shift-JISのHTMLページ上で、UTF-8のJavaScriptを実行する方法（`<script charset="utf-8">`）。
+  - Shift-JISでエンコードされたAPIレスポンスを、文字化けさせずに扱うための3つの異なる実装方法の比較。
+
+## 技術スタック
+
+- **ビルド**: Node.js, EJS, iconv-lite, fs-extra
+- **APIサーバー**: Python 3 (http.server)
+- **クライアントサイド**: Vanilla JavaScript, axios
+
+## ディレクトリ構成
+
+```
+sjis-web-example/
+├── build/         # ビルドスクリプト (`build.js`)
+├── public/        # Webサーバーの公開ディレクトリ（ビルド後の成果物）
+├── server/        # APIサーバーのスクリプト (`api_server.py`)
+├── src/           # 開発用のソースファイル（すべてUTF-8）
+├── data/          # DBの代わりとなるデータソース（Shift-JIS）
+└── package.json   # ビルドスクリプトの依存関係
+```
+
+## 実行手順
+
+### 1. 前提条件
+- Node.js と npm がインストールされていること。
+- Python 3 がインストールされていること。
+
+### 2. 依存パッケージのインストール
+プロジェクトのルートディレクトリで、以下のコマンドを実行します。
+
+```bash
+npm install
+```
+
+### 3. サーバーの起動
+以下のコマンドで、ビルドとPython製Webサーバーの起動を同時に実行します。
+このサーバーは`public/`ディレクトリのファイルを配信し、`/api`へのリクエストを処理します。
+
+```bash
+npm start
+```
+
+ビルドのみ実行したい場合：
+
+```bash
+npm run build
+```
+
+### 4. ブラウザで確認
+サーバーが起動したら、Webブラウザで以下のURLにアクセスしてください。
+
+[http://localhost:8000](http://localhost:8000)
+
+3つのShift-JIS API呼び出しパターンと、比較用のUTF-8 API呼び出しの結果が、すべて文字化けせずに表示されるはずです。

build/build.js

@@ -0,0 +1,57 @@
+const fs = require('fs-extra');
+const path = require('path');
+const ejs = require('ejs');
+const iconv = require('iconv-lite');
+
+const projectRoot = path.resolve(__dirname, '..');
+const srcDir = path.join(projectRoot, 'src');
+const publicDir = path.join(projectRoot, 'public');
+const templatesDir = path.join(srcDir, 'templates');
+
+async function build() {
+  try {
+    console.log('Starting build...');
+
+    // publicディレクトリを空にする
+    await fs.emptyDir(publicDir);
+    console.log('Cleaned public directory.');
+
+    // 1. EJSテンプレートをHTML文字列にレンダリング（UTF-8）
+    const templatePath = path.join(templatesDir, 'index.ejs');
+    const templateStr = await fs.readFile(templatePath, 'utf-8');
+    const htmlUtf8 = await ejs.render(templateStr, {}, { async: true });
+    console.log('Rendered EJS template to HTML.');
+
+    // 2. HTML文字列をShift-JIS（CP932）バッファに変換
+    const htmlSjisBuffer = iconv.encode(htmlUtf8, 'cp932');
+    console.log('Converted HTML to Shift-JIS (CP932) buffer.');
+
+    // 3. Shift-JISバッファをindex.htmlに書き出し
+    await fs.writeFile(path.join(publicDir, 'index.html'), htmlSjisBuffer);
+    console.log('Wrote index.html (Shift-JIS).');
+
+    // 4. CSSとJSファイルをコピー
+    await fs.copy(path.join(srcDir, 'css'), path.join(publicDir, 'css'));
+    await fs.copy(path.join(srcDir, 'js'), path.join(publicDir, 'js'));
+    console.log('Copied CSS and JS files.');
+
+    // 5. node_modulesからaxiosをコピー
+    // require.resolve('axios')はpackage.jsonを指すので、そのディレクトリを取得
+    const axiosPackageJsonPath = require.resolve('axios/package.json');
+    const axiosRootDir = path.dirname(axiosPackageJsonPath);
+    await fs.ensureDir(path.join(publicDir, 'js', 'vendor'));
+    await fs.copy(
+      path.join(axiosRootDir, 'dist', 'axios.min.js'),
+      path.join(publicDir, 'js', 'vendor', 'axios.min.js')
+    );
+    console.log('Copied axios library.');
+
+    console.log('Build completed successfully!');
+
+  } catch (error) {
+    console.error('Build failed:', error);
+    process.exit(1);
+  }
+}
+
+build();

data/users.csv

@@ -0,0 +1,5 @@
+id,displayName,note
+1,①㈱サンプル社,価格は\1000
+2,②髙サンプル名,パスはC:\temp
+3,③サン﨑プル社,note-3
+4,④℡テスト名,note-4