// タッチイベントの統一処理
function getEventCoordinates(event) {
    // マウスとタッチの両方に対応
    if (event.touches && event.touches.length > 0) {
        // タッチイベントの場合
        return {
            x: event.touches[0].clientX,
            y: event.touches[0].clientY
        };
    } else {
        // マウスイベントの場合
        return {
            x: event.clientX,
            y: event.clientY
        };
    }
}

// タッチ開始の処理
canvas.addEventListener('touchstart', (e) => {
    e.preventDefault(); // スクロール等の既定動作を防止
    const coords = getEventCoordinates(e);
    startDrawing(coords);
}, { passive: false });

// タッチ移動の処理（パフォーマンス最適化）
let lastTouchTime = 0;
canvas.addEventListener('touchmove', (e) => {
    e.preventDefault();
    
    // フレームレート制限（60FPS）
    const now = Date.now();
    if (now - lastTouchTime < 16) return;
    lastTouchTime = now;
    
    const coords = getEventCoordinates(e);
    draw(coords);
}, { passive: false });

// メモリ効率を考慮した画像処理実装
class MobileOptimizedMosaic {
    constructor() {
        this.imageDataCache = new Map(); // ImageDataの再利用キャッシュ
        this.processingQueue = []; // 処理待ちキュー
    }
    
    // メモリ使用量を制限した処理
    processImageRegion(x, y, width, height) {
        // 大きな領域は分割処理
        const maxChunkSize = 500; // モバイル環境での推奨最大サイズ
        
        if (width > maxChunkSize || height > maxChunkSize) {
            return this.processInChunks(x, y, width, height, maxChunkSize);
        }
        
        // 通常処理
        const imageData = this.getOrCreateImageData(width, height);
        this.ctx.getImageData(x, y, width, height, imageData);
        
        // 処理実行
        this.applyMosaic(imageData);
        this.ctx.putImageData(imageData, x, y);
        
        // メモリ使用量の監視
        this.monitorMemoryUsage();
    }
    
    // メモリ監視とクリーンアップ
    monitorMemoryUsage() {
        // Performance API での概算メモリ使用量チェック
        if (performance.memory && 
            performance.memory.usedJSHeapSize > 100 * 1024 * 1024) { // 100MB
            this.forceGarbageCollection();
        }
    }
    
    forceGarbageCollection() {
        // キャッシュクリア
        this.imageDataCache.clear();
        
        // 明示的な参照削除
        this.processingQueue.length = 0;
        
        // GC の誘発（間接的）
        if (window.gc) window.gc(); // Chrome DevTools でのみ利用可能
    }
}

// Web Worker を使用した非同期画像処理
class AsyncImageProcessor {
    constructor() {
        // Web Worker の初期化
        this.worker = new Worker('/js/image-worker.js');
        this.worker.onmessage = this.handleWorkerMessage.bind(this);
    }
    
    // 非同期でモザイク処理を実行
    async processMosaicAsync(imageData, mosaicSize) {
        return new Promise((resolve, reject) => {
            const requestId = Date.now();
            
            // コールバック登録
            this.pendingRequests.set(requestId, { resolve, reject });
            
            // Worker に処理を依頼
            this.worker.postMessage({
                type: 'mosaic',
                requestId: requestId,
                imageData: imageData,
                mosaicSize: mosaicSize
            }, [imageData.data.buffer]); // Transferable Objects で効率的転送
        });
    }
    
    handleWorkerMessage(event) {
        const { requestId, result, error } = event.data;
        const request = this.pendingRequests.get(requestId);
        
        if (request) {
            this.pendingRequests.delete(requestId);
            
            if (error) {
                request.reject(new Error(error));
            } else {
                request.resolve(result);
            }
        }
    }
}

// image-worker.js (Web Worker)
self.onmessage = function(event) {
    const { type, requestId, imageData, mosaicSize } = event.data;
    
    try {
        if (type === 'mosaic') {
            const result = processMosaic(imageData, mosaicSize);
            
            self.postMessage({
                requestId: requestId,
                result: result
            }, [result.data.buffer]);
        }
    } catch (error) {
        self.postMessage({
            requestId: requestId,
            error: error.message
        });
    }
};

/* モバイル優先のレスポンシブデザイン */
.container {
    display: grid;
    grid-template-areas: 
        "header"
        "nav"
        "main"
        "footer";
    grid-template-rows: auto auto 1fr auto;
    min-height: 100vh;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    padding: 15px;
}

/* タブレット向け調整 */
@media (min-width: 768px) {
    .container {
        grid-template-areas: 
            "header header"
            "nav main"
            "nav main"
            "footer footer";
        grid-template-columns: 200px 1fr;
    }
    
    .controls {
        gap: 20px;
        padding: 20px;
    }
}

/* デスクトップ向け調整 */
@media (min-width: 1200px) {
    .container {
        grid-template-areas: 
            "header header header"
            "nav main sidebar"
            "nav main sidebar"
            "footer footer footer";
        grid-template-columns: 200px 1fr 300px;
    }
}

/* タッチターゲットの最適化 */
.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 16px; /* iOS でのズーム防止 */
    touch-action: manipulation; /* タッチ時の遅延削減 */
}

/* ビューポート単位の活用 */
.canvas-container {
    width: min(90vw, 800px);
    height: min(60vh, 600px);
    margin: 0 auto;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
                              maximum-scale=1.0, user-scalable=no">


<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#007bff">


<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

// パフォーマンス測定のための実装
class PerformanceMonitor {
    constructor() {
        this.metrics = {
            processingTimes: [],
            memoryUsage: [],
            frameRates: []
        };
        
        this.startTime = null;
        this.frameCount = 0;
        this.lastFrameTime = 0;
    }
    
    // 処理時間測定
    startMeasurement(label) {
        this.startTime = performance.now();
        performance.mark(`${label}-start`);
    }
    
    endMeasurement(label) {
        const endTime = performance.now();
        performance.mark(`${label}-end`);
        performance.measure(label, `${label}-start`, `${label}-end`);
        
        const duration = endTime - this.startTime;
        this.metrics.processingTimes.push({
            label: label,
            duration: duration,
            timestamp: endTime
        });
        
        return duration;
    }
    
    // メモリ使用量監視
    measureMemory() {
        if (performance.memory) {
            const memInfo = {
                used: performance.memory.usedJSHeapSize,
                total: performance.memory.totalJSHeapSize,
                limit: performance.memory.jsHeapSizeLimit,
                timestamp: performance.now()
            };
            
            this.metrics.memoryUsage.push(memInfo);
            return memInfo;
        }
        return null;
    }
    
    // フレームレート測定
    measureFrameRate() {
        const now = performance.now();
        this.frameCount++;
        
        if (now - this.lastFrameTime >= 1000) {
            const fps = Math.round(this.frameCount * 1000 / (now - this.lastFrameTime));
            this.metrics.frameRates.push({
                fps: fps,
                timestamp: now
            });
            
            this.frameCount = 0;
            this.lastFrameTime = now;
            
            return fps;
        }
        
        return null;
    }
    
    // レポート生成
    generateReport() {
        return {
            averageProcessingTime: this.getAverageProcessingTime(),
            peakMemoryUsage: this.getPeakMemoryUsage(),
            averageFrameRate: this.getAverageFrameRate(),
            rawMetrics: this.metrics
        };
    }
    
    getAverageProcessingTime() {
        if (this.metrics.processingTimes.length === 0) return 0;
        const total = this.metrics.processingTimes.reduce((sum, m) => sum + m.duration, 0);
        return total / this.metrics.processingTimes.length;
    }
    
    getPeakMemoryUsage() {
        if (this.metrics.memoryUsage.length === 0) return 0;
        return Math.max(...this.metrics.memoryUsage.map(m => m.used));
    }
    
    getAverageFrameRate() {
        if (this.metrics.frameRates.length === 0) return 0;
        const total = this.metrics.frameRates.reduce((sum, m) => sum + m.fps, 0);
        return total / this.metrics.frameRates.length;
    }
}

// 使用例
const monitor = new PerformanceMonitor();

function processImage() {
    monitor.startMeasurement('mosaic-processing');
    
    // 画像処理実行
    applyMosaicToRegion(x, y, width, height);
    
    const processingTime = monitor.endMeasurement('mosaic-processing');
    monitor.measureMemory();
    
    console.log(`Processing time: ${processingTime.toFixed(2)}ms`);
}