Spaces:

MakiAi
/

icon-sheet-splitter

Runtime error

File size: 31,400 Bytes

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon Sheet Splitter</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kaisei+Decol&display=swap" rel="stylesheet">
    <style>
        .kaisei-decol-regular {
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary-color: #2c3e50;
            --accent-color: #e74c3c;
            --gold-color: #f39c12;
            --paper-color: #faf8f5;
            --charcoal: #34495e;
            --muted-red: #c0392b;
            --warm-gray: #95a5a6;
            --shadow: rgba(52, 73, 94, 0.1);
        }
        
        body {
            font-family: "Kaisei Decol", serif;
            background: linear-gradient(135deg, var(--paper-color) 0%, #f5f3f0 100%);
            min-height: 100vh;
            padding: 20px;
            color: var(--charcoal);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 8px 32px var(--shadow);
            overflow: hidden;
            border: 1px solid #e8e6e3;
        }
        
        .header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--charcoal) 100%);
            padding: 40px;
            text-align: center;
            position: relative;
        }
        
        .header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: var(--accent-color);
            border-radius: 2px;
        }
        
        .header h1 {
            color: white;
            font-size: 2.8em;
            font-weight: 400;
            margin-bottom: 10px;
            letter-spacing: 4px;
            font-family: "Kaisei Decol", serif;
        }
        
        .header .subtitle {
            color: rgba(255, 255, 255, 0.9);
            font-size: 1.2em;
            font-weight: 400;
            letter-spacing: 1px;
            font-family: "Kaisei Decol", serif;
        }
        
        .content {
            padding: 50px;
        }
        
        .upload-area {
            border: 2px dashed var(--warm-gray);
            border-radius: 12px;
            padding: 60px 40px;
            text-align: center;
            margin-bottom: 40px;
            transition: all 0.3s ease;
            cursor: pointer;
            background: #fafafa;
            position: relative;
        }
        
        .upload-area:hover {
            border-color: var(--accent-color);
            background: #fff5f5;
            transform: translateY(-2px);
        }
        
        .upload-area.dragover {
            border-color: var(--gold-color);
            background: #fffbf0;
            box-shadow: 0 4px 20px rgba(243, 156, 18, 0.2);
        }
        
        .upload-icon {
            font-size: 4em;
            color: var(--warm-gray);
            margin-bottom: 20px;
        }
        
        .upload-text {
            font-size: 1.3em;
            color: var(--charcoal);
            margin-bottom: 15px;
            font-weight: 400;
            font-family: "Kaisei Decol", serif;
            letter-spacing: 1px;
        }
        
        .upload-hint {
            color: var(--warm-gray);
            font-size: 0.9em;
        }
        
        .settings-panel {
            background: var(--paper-color);
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 40px;
            border: 1px solid #e8e6e3;
        }
        
        .settings-title {
            font-size: 1.6em;
            font-weight: 400;
            color: var(--primary-color);
            margin-bottom: 25px;
            border-bottom: 2px solid var(--accent-color);
            padding-bottom: 10px;
            font-family: "Kaisei Decol", serif;
            letter-spacing: 1px;
        }
        
        .settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 25px;
        }
        
        .setting-item {
            display: flex;
            flex-direction: column;
        }
        
        .setting-item label {
            font-weight: 500;
            color: var(--charcoal);
            margin-bottom: 8px;
            font-size: 0.95em;
        }
        
        .setting-item input {
            padding: 12px 15px;
            border: 2px solid #e8e6e3;
            border-radius: 8px;
            font-size: 1em;
            transition: all 0.3s ease;
            background: white;
        }
        
        .setting-item input:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
        }
        
        .preview-section {
            margin: 40px 0;
        }
        
        .preview-title {
            font-size: 1.5em;
            font-weight: 400;
            color: var(--primary-color);
            margin-bottom: 20px;
            font-family: "Kaisei Decol", serif;
            letter-spacing: 1px;
        }
        
        .preview-container {
            border: 1px solid #e8e6e3;
            border-radius: 12px;
            padding: 20px;
            background: white;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80%;
            margin: 0 auto;
        }
        
        .preview-grid {
            display: grid;
            gap: 2px;
            border: 2px solid var(--accent-color);
            background: var(--accent-color);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .preview-cell {
            background: white;
            min-width: 40px;
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8em;
            color: var(--warm-gray);
        }
        
        .action-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 40px;
        }
        
        .btn {
            padding: 15px 35px;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: inherit;
            min-width: 150px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--accent-color) 0%, var(--muted-red) 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
        }
        
        .btn-secondary {
            background: var(--paper-color);
            color: var(--charcoal);
            border: 2px solid var(--warm-gray);
        }
        
        .btn-secondary:hover {
            background: var(--charcoal);
            color: white;
            border-color: var(--charcoal);
        }
        
        .hidden {
            display: none;
        }
        
        .progress-bar {
            width: 100%;
            height: 6px;
            background: #e8e6e3;
            border-radius: 3px;
            overflow: hidden;
            margin: 20px 0;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-color), var(--gold-color));
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .result-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            margin-top: 30px;
        }
        
        .result-item {
            border: 1px solid #e8e6e3;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            background: white;
            transition: all 0.3s ease;
        }
        
        .result-item:hover {
            box-shadow: 0 4px 15px var(--shadow);
            transform: translateY(-2px);
        }
        
        .result-item img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        
        .result-item button {
            background: var(--gold-color);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .result-item button:hover {
            background: #e67e22;
        }
        
        @media (max-width: 768px) {
            .content {
                padding: 30px 20px;
            }
            
            .settings-grid {
                grid-template-columns: 1fr;
            }
            
            .action-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .header h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Icon Sheet Splitter</h1>
            <p class="subtitle">アイコンシートを個別ファイルに分割</p>
        </div>
        
        <div class="content">
            <div class="upload-area" id="uploadArea">
                <div class="upload-icon">📄</div>
                <div class="upload-text">アイコンシートをここにドロップ</div>
                <div class="upload-hint">または クリックしてファイルを選択</div>
                <input type="file" id="fileInput" accept="image/*" class="hidden">
            </div>
            
            <div class="settings-panel">
                <div class="settings-title">分割設定</div>
                <div class="settings-grid">
                    <div class="setting-item">
                        <label for="columns">列数</label>
                        <input type="number" id="columns" value="4" min="1" max="20">
                    </div>
                    <div class="setting-item">
                        <label for="rows">行数</label>
                        <input type="number" id="rows" value="4" min="1" max="20">
                    </div>
                    <div class="setting-item">
                        <label for="format">出力形式</label>
                        <select id="format" style="padding: 12px 15px; border: 2px solid #e8e6e3; border-radius: 8px; font-size: 1em;">
                            <option value="png">PNG</option>
                            <option value="jpg">JPG</option>
                            <option value="webp">WebP</option>
                        </select>
                    </div>
                    <div class="setting-item">
                        <label for="prefix">ファイル名プレフィックス</label>
                        <input type="text" id="prefix" value="icon" placeholder="icon">
                    </div>
                </div>
                <!-- オフセット設定 -->
                <div class="settings-title" style="margin-top:30px;">オフセット設定</div>
                <div class="settings-grid">
                    <div class="setting-item">
                        <label for="offsetLeft">左オフセット(px)</label>
                        <input type="number" id="offsetLeft" value="0" min="0" style="margin-bottom:8px;">
                        <input type="range" id="offsetLeftSlider" value="0" min="0" max="500">
                    </div>
                    <div class="setting-item">
                        <label for="offsetRight">右オフセット(px)</label>
                        <input type="number" id="offsetRight" value="0" min="0" style="margin-bottom:8px;">
                        <input type="range" id="offsetRightSlider" value="0" min="0" max="500">
                    </div>
                    <div class="setting-item">
                        <label for="offsetTop">上オフセット(px)</label>
                        <input type="number" id="offsetTop" value="0" min="0" style="margin-bottom:8px;">
                        <input type="range" id="offsetTopSlider" value="0" min="0" max="500">
                    </div>
                    <div class="setting-item">
                        <label for="offsetBottom">下オフセット(px)</label>
                        <input type="number" id="offsetBottom" value="0" min="0" style="margin-bottom:8px;">
                        <input type="range" id="offsetBottomSlider" value="0" min="0" max="500">
                    </div>
                </div>
            </div>
            
            <div class="preview-section">
                <div class="preview-title">プレビュー</div>
                <div class="preview-container" id="previewContainer">
                    <div style="color: var(--warm-gray);">画像を選択してください</div>
                </div>
            </div>
            
            <div class="progress-bar hidden" id="progressBar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            
            <div class="action-buttons">
                <button class="btn btn-primary" id="splitButton" disabled>アイコンを分割</button>
                <button class="btn btn-secondary" id="downloadAllButton" disabled>すべてダウンロード</button>
            </div>
            
            <div class="result-grid" id="resultGrid"></div>
        </div>
    </div>

    <script>
        let originalImage = null;
        let splitImages = [];
        
        // DOM要素の取得
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const previewContainer = document.getElementById('previewContainer');
        const splitButton = document.getElementById('splitButton');
        const downloadAllButton = document.getElementById('downloadAllButton');
        const resultGrid = document.getElementById('resultGrid');
        const progressBar = document.getElementById('progressBar');
        const progressFill = document.getElementById('progressFill');

        // オフセットスライダー要素取得
        const offsetLeftInput = document.getElementById('offsetLeft');
        const offsetLeftSlider = document.getElementById('offsetLeftSlider');
        const offsetRightInput = document.getElementById('offsetRight');
        const offsetRightSlider = document.getElementById('offsetRightSlider');
        const offsetTopInput = document.getElementById('offsetTop');
        const offsetTopSlider = document.getElementById('offsetTopSlider');
        const offsetBottomInput = document.getElementById('offsetBottom');
        const offsetBottomSlider = document.getElementById('offsetBottomSlider');

        // input <-> slider 双方向同期
        function bindOffsetSync(input, slider) {
            input.addEventListener('input', () => {
                slider.value = input.value;
                updatePreview();
            });
            slider.addEventListener('input', () => {
                input.value = slider.value;
                updatePreview();
            });
        }
        bindOffsetSync(offsetLeftInput, offsetLeftSlider);
        bindOffsetSync(offsetRightInput, offsetRightSlider);
        bindOffsetSync(offsetTopInput, offsetTopSlider);
        bindOffsetSync(offsetBottomInput, offsetBottomSlider);

        // プレビューセクションの幅を80%に
        previewContainer.style.width = "80%";
        previewContainer.style.margin = "0 auto";

        // ファイルアップロード処理
        uploadArea.addEventListener('click', () => fileInput.click());
        uploadArea.addEventListener('dragover', handleDragOver);
        uploadArea.addEventListener('drop', handleDrop);
        uploadArea.addEventListener('dragleave', handleDragLeave);
        fileInput.addEventListener('change', handleFileSelect);

        // 設定変更時のプレビュー更新
        ['columns', 'rows'].forEach(id => {
            document.getElementById(id).addEventListener('input', updatePreview);
        });

        splitButton.addEventListener('click', splitImage);
        downloadAllButton.addEventListener('click', downloadAll);
        
        function handleDragOver(e) {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        }
        
        function handleDragLeave(e) {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
        }
        
        function handleDrop(e) {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                processFile(files[0]);
            }
        }
        
        function handleFileSelect(e) {
            const file = e.target.files[0];
            if (file) {
                processFile(file);
            }
        }
        
        function processFile(file) {
            if (!file.type.startsWith('image/')) {
                alert('画像ファイルを選択してください。');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = new Image();
                img.onload = function() {
                    originalImage = img;
                    updatePreview();
                    splitButton.disabled = false;
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
        
        function updatePreview() {
            if (!originalImage) return;
            
            const columns = parseInt(document.getElementById('columns').value);
            const rows = parseInt(document.getElementById('rows').value);
            const offsetLeft = parseInt(document.getElementById('offsetLeft').value) || 0;
            const offsetRight = parseInt(document.getElementById('offsetRight').value) || 0;
            const offsetTop = parseInt(document.getElementById('offsetTop').value) || 0;
            const offsetBottom = parseInt(document.getElementById('offsetBottom').value) || 0;

            // オフセットを考慮した分割範囲
            const splitWidth = originalImage.width - offsetLeft - offsetRight;
            const splitHeight = originalImage.height - offsetTop - offsetBottom;

            // プレビューcanvasサイズ
            // プレビュー最大幅を80%に
            const previewMaxWidth = previewContainer.offsetWidth > 0 ? previewContainer.offsetWidth * 0.8 : 600;
            const previewScale = Math.min(1, previewMaxWidth / originalImage.width);
            const canvasWidth = originalImage.width * previewScale;
            const canvasHeight = originalImage.height * previewScale;

            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;

            // 画像全体を描画
            ctx.drawImage(originalImage, 0, 0, canvasWidth, canvasHeight);

            // オフセット範囲を半透明で強調
            ctx.save();
            ctx.fillStyle = "rgba(231,76,60,0.08)";
            // 上
            if (offsetTop > 0) {
                ctx.fillRect(0, 0, canvasWidth, offsetTop * previewScale);
            }
            // 下
            if (offsetBottom > 0) {
                ctx.fillRect(0, canvasHeight - offsetBottom * previewScale, canvasWidth, offsetBottom * previewScale);
            }
            // 左
            if (offsetLeft > 0) {
                ctx.fillRect(0, offsetTop * previewScale, offsetLeft * previewScale, canvasHeight - offsetTop * previewScale - offsetBottom * previewScale);
            }
            // 右
            if (offsetRight > 0) {
                ctx.fillRect(canvasWidth - offsetRight * previewScale, offsetTop * previewScale, offsetRight * previewScale, canvasHeight - offsetTop * previewScale - offsetBottom * previewScale);
            }
            ctx.restore();

            // グリッド線を描画
            ctx.save();
            ctx.strokeStyle = '#e74c3c';
            ctx.lineWidth = 2;

            // 垂直線
// --- オフセットラインをcanvas上でドラッグ操作するための処理 ---
// ドラッグ対象: left, right, top, bottom
const DRAG_MARGIN = 10; // ハンドルの感知範囲(px)
let dragging = null; // 'left'|'right'|'top'|'bottom'|null
let dragStart = {x:0, y:0};
let dragOffsetStart = {left:0, right:0, top:0, bottom:0};

// プレビューcanvasが存在する場合のみイベントを付与
canvas.style.cursor = "crosshair";
canvas.addEventListener('mousedown', function(e) {
    const rect = canvas.getBoundingClientRect();
    const x = (e.clientX - rect.left) / previewScale;
    const y = (e.clientY - rect.top) / previewScale;

    // どのラインが近いか判定
    if (Math.abs(x - offsetLeft) < DRAG_MARGIN) {
        dragging = 'left';
        dragStart = {x, y};
        dragOffsetStart = {
            left: offsetLeft,
            right: offsetRight,
            top: offsetTop,
            bottom: offsetBottom
        };
        canvas.style.cursor = "ew-resize";
    } else if (Math.abs(x - (originalImage.width - offsetRight)) < DRAG_MARGIN) {
        dragging = 'right';
        dragStart = {x, y};
        dragOffsetStart = {
            left: offsetLeft,
            right: offsetRight,
            top: offsetTop,
            bottom: offsetBottom
        };
        canvas.style.cursor = "ew-resize";
    } else if (Math.abs(y - offsetTop) < DRAG_MARGIN) {
        dragging = 'top';
        dragStart = {x, y};
        dragOffsetStart = {
            left: offsetLeft,
            right: offsetRight,
            top: offsetTop,
            bottom: offsetBottom
        };
        canvas.style.cursor = "ns-resize";
    } else if (Math.abs(y - (originalImage.height - offsetBottom)) < DRAG_MARGIN) {
        dragging = 'bottom';
        dragStart = {x, y};
        dragOffsetStart = {
            left: offsetLeft,
            right: offsetRight,
            top: offsetTop,
            bottom: offsetBottom
        };
        canvas.style.cursor = "ns-resize";
    } else {
        dragging = null;
    }
});

window.addEventListener('mousemove', function(e) {
    if (!dragging) return;
    const rect = canvas.getBoundingClientRect();
    const x = (e.clientX - rect.left) / previewScale;
    const y = (e.clientY - rect.top) / previewScale;
    if (dragging === 'left') {
        let delta = x - dragStart.x;
        let val = dragOffsetStart.left + delta;
        val = Math.round(val);
        val = Math.max(0, Math.min(originalImage.width - offsetRight - 1, val));
        offsetLeftInput.value = val;
        offsetLeftSlider.value = val;
    } else if (dragging === 'right') {
        let delta = dragStart.x - x;
        let val = dragOffsetStart.right + delta;
        val = Math.round(val);
        val = Math.max(0, Math.min(originalImage.width - offsetLeft - 1, val));
        offsetRightInput.value = val;
        offsetRightSlider.value = val;
    } else if (dragging === 'top') {
        let delta = y - dragStart.y;
        let val = dragOffsetStart.top + delta;
        val = Math.round(val);
        val = Math.max(0, Math.min(originalImage.height - offsetBottom - 1, val));
        offsetTopInput.value = val;
        offsetTopSlider.value = val;
    } else if (dragging === 'bottom') {
        let delta = dragStart.y - y;
        let val = dragOffsetStart.bottom + delta;
        val = Math.round(val);
        val = Math.max(0, Math.min(originalImage.height - offsetTop - 1, val));
        offsetBottomInput.value = val;
        offsetBottomSlider.value = val;
    }
    updatePreview();
});

window.addEventListener('mouseup', function(e) {
    if (dragging) {
        dragging = null;
        canvas.style.cursor = "crosshair";
    }
});

// ハンドルを太く描画
ctx.save();
ctx.strokeStyle = "#e74c3c";
ctx.lineWidth = 6;
// left
ctx.beginPath();
ctx.moveTo(offsetLeft * previewScale, offsetTop * previewScale);
ctx.lineTo(offsetLeft * previewScale, (originalImage.height - offsetBottom) * previewScale);
ctx.stroke();
// right
ctx.beginPath();
ctx.moveTo((originalImage.width - offsetRight) * previewScale, offsetTop * previewScale);
ctx.lineTo((originalImage.width - offsetRight) * previewScale, (originalImage.height - offsetBottom) * previewScale);
ctx.stroke();
// top
ctx.beginPath();
ctx.moveTo(offsetLeft * previewScale, offsetTop * previewScale);
ctx.lineTo((originalImage.width - offsetRight) * previewScale, offsetTop * previewScale);
ctx.stroke();
// bottom
ctx.beginPath();
ctx.moveTo(offsetLeft * previewScale, (originalImage.height - offsetBottom) * previewScale);
ctx.lineTo((originalImage.width - offsetRight) * previewScale, (originalImage.height - offsetBottom) * previewScale);
ctx.stroke();
ctx.restore();
            for (let i = 1; i < columns; i++) {
                const x = offsetLeft + (i * splitWidth) / columns;
                const xScaled = x * previewScale;
                ctx.beginPath();
                ctx.moveTo(xScaled, offsetTop * previewScale);
                ctx.lineTo(xScaled, (originalImage.height - offsetBottom) * previewScale);
                ctx.stroke();
            }
            // 水平線
            for (let i = 1; i < rows; i++) {
                const y = offsetTop + (i * splitHeight) / rows;
                const yScaled = y * previewScale;
                ctx.beginPath();
                ctx.moveTo(offsetLeft * previewScale, yScaled);
                ctx.lineTo((originalImage.width - offsetRight) * previewScale, yScaled);
                ctx.stroke();
            }
            // オフセット範囲の枠
            ctx.strokeStyle = '#e74c3c';
            ctx.lineWidth = 2;
            ctx.strokeRect(
                offsetLeft * previewScale,
                offsetTop * previewScale,
                splitWidth * previewScale,
                splitHeight * previewScale
            );
            ctx.restore();

            previewContainer.innerHTML = '';
            previewContainer.appendChild(canvas);
        }
        
        async function splitImage() {
            if (!originalImage) return;
            
            const columns = parseInt(document.getElementById('columns').value);
            const rows = parseInt(document.getElementById('rows').value);
            const format = document.getElementById('format').value;
            const prefix = document.getElementById('prefix').value || 'icon';
            
            splitImages = [];
            resultGrid.innerHTML = '';
            progressBar.classList.remove('hidden');
            progressFill.style.width = '0%';
            
            // オフセット値取得
            const offsetLeft = parseInt(document.getElementById('offsetLeft').value) || 0;
            const offsetRight = parseInt(document.getElementById('offsetRight').value) || 0;
            const offsetTop = parseInt(document.getElementById('offsetTop').value) || 0;
            const offsetBottom = parseInt(document.getElementById('offsetBottom').value) || 0;

            // 分割範囲
            const splitWidth = originalImage.width - offsetLeft - offsetRight;
            const splitHeight = originalImage.height - offsetTop - offsetBottom;
            const cellWidth = splitWidth / columns;
            const cellHeight = splitHeight / rows;
            const total = columns * rows;
            let processed = 0;
            
            for (let row = 0; row < rows; row++) {
                for (let col = 0; col < columns; col++) {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    
                    canvas.width = cellWidth;
                    canvas.height = cellHeight;
                    
                    ctx.drawImage(
                        originalImage,
                        offsetLeft + col * cellWidth, offsetTop + row * cellHeight, cellWidth, cellHeight,
                        0, 0, cellWidth, cellHeight
                    );
                    
                    const mimeType = format === 'jpg' ? 'image/jpeg' : `image/${format}`;
                    const quality = format === 'jpg' ? 0.9 : undefined;
                    const dataUrl = canvas.toDataURL(mimeType, quality);
                    
                    const filename = `${prefix}_${row + 1}_${col + 1}.${format}`;
                    splitImages.push({ dataUrl, filename });
                    
                    // 結果グリッドに追加
                    const resultItem = document.createElement('div');
                    resultItem.className = 'result-item';
                    resultItem.innerHTML = `
                        <img src="${dataUrl}" alt="${filename}">
                        <div style="font-size: 0.8em; margin-bottom: 10px;">${filename}</div>
                        <button onclick="downloadSingle(${processed})">ダウンロード</button>
                    `;
                    resultGrid.appendChild(resultItem);
                    
                    processed++;
                    progressFill.style.width = `${(processed / total) * 100}%`;
                    
                    // UIの更新を待つ
                    await new Promise(resolve => setTimeout(resolve, 50));
                }
            }
            
            downloadAllButton.disabled = false;
            progressBar.classList.add('hidden');
        }
        
        function downloadSingle(index) {
            const item = splitImages[index];
            const link = document.createElement('a');
            link.download = item.filename;
            link.href = item.dataUrl;
            link.click();
        }
        
        function downloadAll() {
            splitImages.forEach((item, index) => {
                setTimeout(() => {
                    const link = document.createElement('a');
                    link.download = item.filename;
                    link.href = item.dataUrl;
                    link.click();
                }, index * 100);
            });
        }
    </script>
</body>
</html>