# バッチ設計書 47-Makefile.emscripten (example_sdl3_opengl3)

## 概要

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

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

このMakefileは、SDL3をウィンドウシステムとして、OpenGL3をグラフィックスバックエンドとして使用するImGuiサンプルアプリケーションをEmscriptenコンパイラでWebAssemblyにコンパイルし、ブラウザ上で実行可能な形式に変換する処理を行う。ただし、EmscriptenのSDL3サポートは開発中であり、現時点では機能しない可能性がある。

**業務上の目的・背景**：SDL3は次世代のSDLライブラリであり、Web環境での動作も期待されている。ImGuiをSDL3ベースでWebブラウザ上で動作させるための将来的な実装を先行して提供している。現時点（2023年5月30日時点のコメントに基づく）ではEmscriptenがSDL3をサポートしていないため、このMakefileは将来のサポート追加に備えたものである。

**バッチの実行タイミング**：開発者による手動実行（make -f Makefile.emscripten）。主にEmscriptenのSDL3サポート追加後のテスト用途として使用される予定。

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

**前後の処理との関連**：単独で実行可能。Emscripten SDK（emsdk）のセットアップが事前に必要。EmscriptenのSDL3サポートが必要。

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

## バッチ種別

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

## 実行スケジュール

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

## 実行条件

### 前提条件

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

### 実行可否判定

Emscripten環境がロードされており、SDL3サポートが利用可能であること。現時点ではEmscriptenがSDL3をサポートしていないため、ビルドは失敗する可能性が高い。

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | デフォルト値 | 説明 |
|-------------|-----|-----|-------------|------|
| 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_sdl3.cpp | C++ソース | SDL3バックエンド実装 |
| ../../backends/imgui_impl_opengl3.cpp | C++ソース | OpenGL3バックエンド実装 |
| ../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. オブジェクトファイルのコンパイル
   └─ 各.cppファイルを.oファイルにコンパイル（em++使用）
4. リンク処理
   └─ オブジェクトファイルをリンクしてHTML/JS/WASMを生成
5. ビルド完了メッセージの出力
   └─ "Build complete for web/index.html"
```

### フローチャート

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

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

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

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

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

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

## エラー処理

### エラーケース一覧

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

### リトライ仕様

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

### 障害時対応

ビルドエラー発生時は、コンパイラ出力のエラーメッセージを確認し、該当するソースファイルを修正後、再度makeを実行する。SDL3サポートエラーの場合は、Emscriptenの更新を待つ。

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

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

## パフォーマンス要件

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

## 排他制御

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

## ログ出力

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

## 監視・アラート

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

## 備考

- **重要**: 2023年5月30日時点でEmscriptenはSDL3をサポートしていない（ファイル先頭のコメント参照）
- USE_SDL=3を使用（Emscriptenサポート追加時に動作予定）
- USE_FILE_SYSTEM=1を指定すると、misc/fontsフォルダを/fontsとしてプリロード可能
- serveターゲット（make serve）でPython3の簡易HTTPサーバーを起動可能
- cleanターゲットでwebディレクトリごと削除される（rm -rf）
- シェルテンプレートはshell_minimal.htmlを使用
- 将来のEmscripten SDL3サポート追加に備えたMakefile
