# バッチ設計書 43-Makefile.emscripten (example_sdl2_wgpu)

## 概要

本ドキュメントは、ImGuiライブラリのSDL2 + WebGPUサンプルをEmscriptenでWebAssemblyにビルドするためのMakefileについて記述したバッチ設計書である。

### 本バッチの処理概要

このMakefileは、SDL2をウィンドウシステムとして、WebGPUをグラフィックスバックエンドとして使用するImGuiサンプルアプリケーションをEmscriptenコンパイラでWebAssemblyにコンパイルし、ブラウザ上で実行可能な形式に変換する処理を行う。

**業務上の目的・背景**：WebGPUは次世代のWeb向けグラフィックスAPIであり、WebGL/OpenGLに代わる高性能なGPUアクセスを提供する。ImGuiをWebブラウザ上でWebGPUを使用して動作させることで、最新のWeb技術を活用した高性能なGUIアプリケーションの開発が可能となる。このMakefileは、SDL2とWebGPUを組み合わせたEmscriptenビルドを提供し、開発者がWebGPU対応のImGuiアプリケーションをWeb上で実行・テストできるようにする。

**バッチの実行タイミング**：開発者による手動実行（make -f Makefile.emscripten）。主にWebGPUバックエンドの開発・テスト時、WebGPU対応デモサイトの更新時に実行される。

**主要な処理内容**：
1. Emscripten環境の設定読み込み（emcc/em++コンパイラの使用）
2. main.cppおよびImGuiコアソースファイルのコンパイル
3. SDL2およびWebGPUバックエンドファイルのコンパイル
4. Dawn-based WebGPUポートまたはレガシーWebGPU実装の選択
5. WebAssemblyへのリンクとHTML生成
6. webディレクトリへのindex.html/index.js/index.wasmの出力

**前後の処理との関連**：単独で実行可能。Emscripten SDK（emsdk）のセットアップが事前に必要。Emscripten 4.0.10以上ではDawn-based WebGPUポートを使用。

**影響範囲**：webディレクトリに出力されるindex.html、index.js、index.wasmファイル。オブジェクトファイル（.o）も作業ディレクトリに生成される。

## バッチ種別

ビルド処理 / WebAssemblyコンパイル

## 実行スケジュール

| 項目 | 内容 |
|-----|------|
| 実行頻度 | 随時（手動実行） |
| 実行時刻 | 任意 |
| 実行曜日 | 任意 |
| 実行日 | 任意 |
| トリガー | 手動（make -f Makefile.emscripten） |

## 実行条件

### 前提条件

| 条件 | 説明 |
|-----|------|
| Emscripten SDKインストール済み | emcc/em++コンパイラが利用可能であること |
| Emscripten環境のロード | emsdk_env.bat/.shの実行によりパスが設定されていること |
| ImGuiソースコード | ../..の位置にImGuiのソースコードが存在すること |
| シェルテンプレート | ../libs/emscripten/shell_minimal.htmlが存在すること |
| WebGPUサポート | Dawn-based WebGPUポート（Emscripten 4.0.10以上）またはレガシーWebGPU |

### 実行可否判定

Emscripten環境がロードされており、emcc/em++コマンドが実行可能であること。

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | デフォルト値 | 説明 |
|-------------|-----|-----|-------------|------|
| USE_FILE_SYSTEM | 整数 | No | 0 | ファイルシステム有効化フラグ（0:無効、1:有効） |

### 入力データソース

| データソース | 形式 | 説明 |
|-------------|------|------|
| main.cpp | C++ソース | サンプルアプリケーションのメインソースファイル |
| ../../imgui.cpp | C++ソース | ImGuiコアソースファイル |
| ../../imgui_demo.cpp | C++ソース | ImGuiデモソースファイル |
| ../../imgui_draw.cpp | C++ソース | ImGui描画ソースファイル |
| ../../imgui_tables.cpp | C++ソース | ImGuiテーブルソースファイル |
| ../../imgui_widgets.cpp | C++ソース | ImGuiウィジェットソースファイル |
| ../../backends/imgui_impl_sdl2.cpp | C++ソース | SDL2バックエンド実装 |
| ../../backends/imgui_impl_wgpu.cpp | C++ソース | WebGPUバックエンド実装 |
| ../libs/emscripten/shell_minimal.html | HTML | 出力HTMLのシェルテンプレート |

## 出力仕様

### 出力データ

| 出力先 | 形式 | 説明 |
|-------|------|------|
| web/index.html | HTML | ブラウザで実行可能なHTMLファイル |
| web/index.js | JavaScript | WebAssemblyローダー |
| web/index.wasm | WebAssembly | コンパイル済みバイナリ |

### 出力ファイル仕様

| 項目 | 内容 |
|-----|------|
| ファイル名 | index.html, index.js, index.wasm |
| 出力先 | web/ |
| 文字コード | UTF-8 |
| 区切り文字 | N/A |

## 処理フロー

### 処理シーケンス

```
1. 入力ソースファイルの確認
   └─ main.cpp、ImGuiソース、バックエンドソースの存在確認
2. webディレクトリの作成
   └─ 存在しない場合は mkdir で作成
3. WebGPUバックエンド選択
   └─ Dawn-based（Emscripten 4.0.10以上）またはレガシーWebGPU
4. オブジェクトファイルのコンパイル
   └─ 各.cppファイルを.oファイルにコンパイル（em++使用）
5. リンク処理
   └─ オブジェクトファイルをリンクしてHTML/JS/WASMを生成
6. ビルド完了メッセージの出力
   └─ "Build complete for web/index.html"
```

### フローチャート

```mermaid
flowchart TD
    A[make実行開始] --> B[環境確認]
    B --> C{webディレクトリ存在?}
    C -->|No| D[mkdir web]
    C -->|Yes| E[WebGPUバックエンド設定]
    D --> E
    E --> F[ソースファイルコンパイル]
    F --> G[main.oの生成]
    G --> H[imgui*.oの生成]
    H --> I[imgui_impl_*.oの生成]
    I --> J[リンク処理]
    J --> K[index.html/js/wasm生成]
    K --> L[ビルド完了]
```

## データベース操作仕様

### 操作別データベース影響一覧

本バッチはデータベースを使用しない。

### テーブル別操作詳細

N/A（データベース操作なし）

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| N/A | コンパイルエラー | ソースコードに構文エラーがある場合 | エラーメッセージを確認し、ソースコードを修正 |
| N/A | リンクエラー | シンボル未定義、ライブラリ不足の場合 | 依存関係を確認し、不足ファイルを追加 |
| N/A | Emscripten環境エラー | emcc/em++が見つからない場合 | emsdk_envを実行してEmscripten環境をロード |
| N/A | WebGPUサポートエラー | WebGPUポートが利用できない場合 | Emscriptenバージョンを確認、適切なWebGPU設定を選択 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | N/A（手動リトライ） |
| リトライ間隔 | N/A |
| リトライ対象エラー | N/A |

### 障害時対応

ビルドエラー発生時は、コンパイラ出力のエラーメッセージを確認し、該当するソースファイルを修正後、再度makeを実行する。

## トランザクション仕様

| 項目 | 内容 |
|-----|------|
| トランザクション範囲 | N/A（ファイルシステム操作のみ） |
| コミットタイミング | N/A |
| ロールバック条件 | N/A |

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定処理件数 | 8ソースファイル |
| 目標処理時間 | 数分程度 |
| メモリ使用量上限 | Emscriptenビルド時に数GB使用の可能性あり |

## 排他制御

同一ディレクトリで同時に複数のmakeプロセスを実行しないこと。オブジェクトファイルの競合が発生する可能性がある。

## ログ出力

| ログ種別 | 出力タイミング | 出力内容 |
|---------|--------------|---------|
| 進捗ログ | コンパイル時 | 各ソースファイルのコンパイルコマンド |
| 終了ログ | ビルド完了時 | "Build complete for web/index.html" |
| エラーログ | エラー発生時 | コンパイラ/リンカーのエラーメッセージ |

## 監視・アラート

| 監視項目 | 閾値 | アラート先 |
|---------|-----|----------|
| N/A | N/A | N/A（手動実行のため監視対象外） |

## 備考

- デフォルトでDawn-based WebGPUポート（--use-port=emdawnwebgpu）を使用（Emscripten 4.0.10以上）
- レガシーWebGPU実装を使用する場合は、コメントアウトされたUSE_WEBGPU=1オプションを有効化
- ASYNCIFY=1オプションが有効で、非同期処理に対応
- USE_FILE_SYSTEM=1を指定すると、misc/fontsフォルダを/fontsとしてプリロード可能
- serveターゲット（make serve）でPython3の簡易HTTPサーバーを起動可能
- cleanターゲットで.wasm.preファイルも削除される
