🚀 Thymeleaf AI Migrator

完全ガイド - AI駆動型HTML変換ツール

Version 1.0.0 | 2026年1月

📑 目次

1. 概要p.3
2. システム構成p.4
3. 処理フロー詳細p.5
4. セットアップ方法p.7
5. 使用方法p.9
6. 変換ルールp.11
7. 変換例p.13
8. トラブルシューティングp.15
9. 付録p.16

1. 概要

1.1 ツールの目的

Thymeleaf AI Migratorは、Figmaからエクスポートされた静的HTMLを、Spring Boot + Thymeleafテンプレートに自動変換するAI駆動型ツールです。UI刷新プロジェクトにおける手作業を大幅に削減し、開発効率を飛躍的に向上させます。

1.2 主な特徴

✅ 5つの主要機能

AI駆動の高精度変換 - Claude / OpenAI APIによる賢い変換
現行パターン学習 - 既存Thymeleafテンプレートから自動学習
バッチ処理対応 - 複数ファイルの一括変換
プロキシ環境対応 - 社内ネットワークでも使用可能
バリデーション自動追加 - エラー表示を自動挿入

1.3 期待される効果

項目	手作業	AI自動化	削減率
1ページ変換時間	30分	1分	97%削減
100ページ変換	50時間	2時間	96%削減
エラー率	5-10%	1-2%	品質向上

2. システム構成

2.1 全体アーキテクチャ

現行HTML
(Thymeleaf)

刷新HTML
(Figma)

↓

パターン抽出
フィールド名・コードリスト

↓

AI API
Claude / OpenAI

↓

変換済みHTML
Thymeleaf対応

2.2 2つの実行環境

項目	ブラウザ版	Node.js版
実行環境	Webブラウザ	コマンドライン
インストール	不要	npm install
ファイル数	少数向け	大量向け
出力先	ダウンロードフォルダ	output/フォルダ
プロキシ	ブラウザ設定	.env設定

3. 処理フロー詳細

3.1 Phase 1: 準備フェーズ

Step 1-1: ファイル準備

現行ファイル（input/current/）

既存のThymeleafテンプレート
th:field、th:each等の属性を含む
パターン学習に使用

刷新ファイル（input/new_ui/）

Figmaからエクスポートした新デザインHTML
静的HTML（Thymeleaf属性なし）
変換対象

Step 1-2: APIキー取得

Claude API（推奨）

URL: https://console.anthropic.com/
形式: sk-ant-api03-...
料金: 入力 $3/1M tokens、出力 $15/1M tokens

OpenAI API

URL: https://platform.openai.com/
形式: sk-...
料金: モデルにより変動

3.2 Phase 2: 実行環境選択

📊 どちらを選ぶべき？

ブラウザ版を選ぶ場合：

変換ファイル数が10件以下
手軽に試したい
GUIが好き
インストール作業をしたくない

Node.js版を選ぶ場合：

変換ファイル数が20件以上
定期的に実行したい
バッチ処理を自動化したい
CIに組み込みたい

3.3 Phase 3: AI変換処理（自動実行）

Step 3-1: ファイルペアリング

同名のファイルを自動的にマッチング

page1.html (現行) + page1.html (刷新) = ペア
page2.html (現行) + page2.html (刷新) = ペア
page3.html (現行) + page3.html (刷新) = ペア

Step 3-2: パターン抽出

現行HTMLから以下を自動抽出：

フィールド名:フィールド名1, フィールド名2, フィールド名3
コードリスト: コードリスト
th:属性: th:field, th:each, th:text, th:if

Step 3-3: AI APIに送信

抽出したパターンと刷新HTMLをAIに送信

        プロンプト構成
        システムプロンプト（Thymeleaf専門家として）
現行HTML（2000文字まで）
抽出されたパターン
刷新HTML（全体）
変換ルール（9カテゴリの詳細ルール）

      

Step 3-4: 変換適用

AIが以下の変換を実行：

静的ラジオボタン → th:eachループ
固定テキスト → th:text
name属性 → th:field
バリデーションエラー表示追加

3.4 Phase 4: 出力

実行環境	出力先	ファイル名
ブラウザ版	C:\Users\[ユーザー名]\Downloads\	元のファイル名維持
Node.js版	C:\thymeleaf-ai-migrator\output\	元のファイル名維持

3.5 Phase 5: 確認・導入

⚠️ 必須の確認事項

目視確認
- th:fieldが正しく設定されているか
- バリデーションエラー表示があるか
- デザインが崩れていないか
Spring Bootプロジェクトに配置
- src/main/resources/templates/にコピー
動作テスト
- フォーム送信
- バリデーション
- データバインディング
微調整
- 必要に応じて手動で調整

4. セットアップ方法

4.1 ブラウザ版のセットアップ

手順

thymeleaf-ai-migrator.htmlを任意の場所に保存
ファイルをダブルクリックして開く
APIプロバイダーを選択（Claude or OpenAI）
APIキーを入力（自動保存される）
モデルを選択

完了！すぐに使用可能です。

4.2 Node.js版のセットアップ

Step 1: プロジェクトフォルダ作成

mkdir C:\thymeleaf-ai-migrator
cd C:\thymeleaf-ai-migrator
mkdir input\current input\new_ui output

Step 2: ファイル配置

以下のファイルを配置：

package.json
index.js
.env
.gitignore
README.md

Step 3: 依存関係インストール

npm install

Step 4: .envファイル設定

# OpenAI API設定
OPENAI_API_KEY=sk-your-api-key-here
OPENAI_MODEL=gpt-5.2

# プロキシ設定（必要な場合のみ）
# HTTPS_PROXY=http://proxy.company.com:8080

5. 使用方法

5.1 ブラウザ版の使い方

Step 1: HTMLファイルを開く

thymeleaf-ai-migrator.htmlをダブルクリック

Step 2: API設定

APIプロバイダーを選択（Claude推奨）
APIキーを入力
モデルを選択

※ 設定は自動的にlocalStorageに保存されます

Step 3: ファイルアップロード

現行HTML（Thymeleaf）をアップロード
- クリックまたはドラッグ&ドロップ
- 複数ファイル選択可能
刷新HTML（Figma）をアップロード
- 現行HTMLと同じファイル名にする

Step 4: 変換実行

「Thymeleaf変換を実行」ボタンをクリック
進捗が表示される
変換完了まで待機

Step 5: 結果ダウンロード

個別ダウンロード: 各ファイルの「DL」ボタン
一括ダウンロード: 「全てダウンロード」ボタン
コピー: 「コピー」ボタンでクリップボードへ

5.2 Node.js版の使い方

Step 1: ファイル配置

現行HTMLを input/current/ に配置
刷新HTMLを input/new_ui/ に配置
ファイル名を統一する

Step 2: 実行

npm start

または

npm run convert

Step 3: 進捗確認

コンソールに表示される：

╔═══════════════════════════════════════════════════════════╗
║       Thymeleaf AI Migrator v1.0.0                       ║
╚═══════════════════════════════════════════════════════════╝

✓ プロキシなし