# あなたのファイルアップロード処理がユーザーを苦しめているかもしれない ## 見過ごされがちな、でも深刻な問題こんにちは、とちです。「アップロードに失敗しました」このエラーメッセージを見て、時間をかけて準備した200枚の写真をもう一度選び直したユーザーの気持ちを想像したことはありますか？昨今のAIブームにより個人開発者は増え続けています、深く考えず「ストレージサーバーへファイルを送るだけ」という認識でアップロード機能を実装しがちです。そして、その実装がユーザーに大きなストレスを与えているかもしれません。 ## ユーザーが直面している現実 ### 📱 モバイルユーザーの悲劇スマートフォンから100MBの動画をアップロードしようとしたユーザーA子さん： ``` 18:30 アップロード開始（電車内） 18:45 75%完了... トンネルに入る 18:46 「ネットワークエラー」→ 0%に戻る 18:47 もう一度最初から... 19:05 90%完了... 駅でWi-Fiが切り替わる 19:06 「アップロードに失敗しました」 19:07 アプリを閉じる（二度と使わない） ``` **データ通信量**: 300MB消費（成功0回） **消費時間**: 37分 **結果**: サービス離脱 ### 🏢 ビジネスユーザーの時間損失プレゼン資料（500MB）を共有しようとした営業担当B男さん： ``` 09:00 クライアント訪問前にアップロード開始 09:15 アップロード中... 進捗バーが動かない 09:20 不安になってページ更新 → 最初から 09:35 やっと完了... と思ったら「ファイルサイズが大きすぎます」 09:40 別の方法を探し始める ``` **損失**: 商談に遅刻、信頼失墜 ### 🎨 クリエイターの創作意欲を奪う作品集をアップロードしようとしたデザイナーC美さん： ``` 深夜02:00 50作品を一つずつアップロード開始深夜03:30 32個目でメモリ不足によりブラウザクラッシュ深夜03:31 どこまで完了したか分からない深夜04:00 諦めて就寝 ``` **結果**: ポートフォリオ公開を断念 ## なぜこんなことが起きるのか ### 1. 従来の実装の根本的な問題 ```javascript // よくある実装 async function uploadFile(file) { const formData = new FormData() formData.append('file', file) try { await fetch('/upload', { method: 'POST', body: formData }) alert('アップロード完了！') } catch (error) { alert('エラーが発生しました') // ユーザー: で？どうすればいいの？ } } ``` この実装の問題点： - **全か無か**: 99%完了していても、エラーなら0%に戻る - **メモリ食い**: ファイル全体をメモリに載せる - **進捗不明**: いつ終わるか分からない不安 - **再開不可**: 中断したら最初から ### 2. ユーザーの期待と現実のギャップユーザーが期待すること： - ✅ 中断しても続きから再開したい - ✅ あとどれくらいで終わるか知りたい - ✅ 失敗したら理由を教えてほしい - ✅ 大きなファイルでも安定して送りたい現実： - ❌ エラーになったら最初から - ❌ プログレスバーが止まったまま - ❌ 「エラーが発生しました」だけ - ❌ 大きいファイルは諦めるしかない ## ユーザーフレンドリーなアップロードの実現方法 ### 解決策1: チャンク分割でメモリとネットワークに優しく大きなファイルを小さく分割して送信することで、様々な問題を解決できます。 ```javascript class UserFriendlyUploader { constructor(file, options = {}) { this.file = file this.chunkSize = this.calculateChunkSize(file.size) this.chunks = this.createChunks() this.uploadedChunks = this.loadProgress() || new Set() // ユーザーへのフィードバック用 this.onProgress = options.onProgress || (() => {}) this.onStatusChange = options.onStatusChange || (() => {}) } calculateChunkSize(fileSize) { // ファイルサイズとネットワーク状況に応じて最適化 const connection = navigator.connection if (connection?.effectiveType === '4g' && fileSize < 100 * 1024 * 1024) { return 10 * 1024 * 1024 // 4Gで小さいファイル: 10MB } else if (connection?.effectiveType === '3g' || !connection) { return 1 * 1024 * 1024 // 3Gまたは不明: 1MB（安全重視） } else { return 5 * 1024 * 1024 // デフォルト: 5MB } } createChunks() { const chunks = [] let position = 0 let index = 0 while (position < this.file.size) { const endPosition = Math.min(position + this.chunkSize, this.file.size) chunks.push({ index, start: position, end: endPosition, size: endPosition - position }) position = endPosition index++ } return chunks } async upload() { this.onStatusChange('アップロードを開始しています...') for (const chunk of this.chunks) { if (this.uploadedChunks.has(chunk.index)) { continue // 既にアップロード済み } try { await this.uploadChunk(chunk) this.uploadedChunks.add(chunk.index) this.saveProgress() this.updateProgress() } catch (error) { await this.handleError(error, chunk) } } await this.complete() } updateProgress() { const progress = { uploaded: this.uploadedChunks.size, total: this.chunks.length, percentage: (this.uploadedChunks.size / this.chunks.length * 100), // 残り時間の推定 estimatedTime: this.estimateRemainingTime() } this.onProgress(progress) // 分かりやすいステータスメッセージ if (progress.percentage < 30) { this.onStatusChange('アップロード中... まだしばらくかかります☕') } else if (progress.percentage < 70) { this.onStatusChange('順調に進んでいます！もう少しです💪') } else if (progress.percentage < 100) { this.onStatusChange('もうすぐ完了します！✨') } } async handleError(error, chunk) { if (error.name === 'NetworkError') { this.onStatusChange('ネットワークが不安定です。自動的に再試行します...') await this.delay(5000) return this.uploadChunk(chunk) // リトライ } else if (error.status === 413) { this.onStatusChange('ファイルが大きすぎます。圧縮してから再度お試しください。') throw error } else { this.onStatusChange('一時的な問題が発生しました。少々お待ちください...') await this.delay(3000) } } // 進捗の保存と復元 saveProgress() { const data = { fileName: this.file.name, fileSize: this.file.size, uploadedChunks: Array.from(this.uploadedChunks), timestamp: Date.now() } localStorage.setItem(`upload_${this.file.name}`, JSON.stringify(data)) } loadProgress() { const saved = localStorage.getItem(`upload_${this.file.name}`) if (!saved) return null const data = JSON.parse(saved) // 同じファイルか確認 if (data.fileSize === this.file.size) { return new Set(data.uploadedChunks) } return null } } ``` ### 解決策2: ユーザーの不安を解消するUI ```javascript // 詳細な進捗表示 class UploadProgressUI { constructor(container) { this.container = container this.render() } render() { this.container.innerHTML = `

準備中...

` } update(progress, speed) { // プログレスバー更新 this.container.querySelector('.progress-bar').style.width = `${progress.percentage}%` this.container.querySelector('.progress-text').textContent = `${Math.round(progress.percentage)}%` // 残り時間 if (progress.estimatedTime) { const minutes = Math.ceil(progress.estimatedTime / 60) this.container.querySelector('.time-remaining').textContent = `残り約${minutes}分` } // アップロード速度 if (speed) { const mbps = (speed / 1024 / 1024).toFixed(1) this.container.querySelector('.upload-speed').textContent = `${mbps} MB/秒` } // データ量 const uploaded = (progress.uploaded * this.chunkSize / 1024 / 1024).toFixed(0) const total = (this.file.size / 1024 / 1024).toFixed(0) this.container.querySelector('.data-uploaded').textContent = `${uploaded}MB / ${total}MB` } } ``` ### 解決策3: エラーに対する適切な対処 ```javascript class SmartErrorHandler { constructor(uploader) { this.uploader = uploader this.retryCount = {} this.maxRetries = 3 } async handle(error, context) { const errorType = this.classifyError(error) switch(errorType) { case 'NETWORK_UNSTABLE': return this.handleNetworkError(error, context) case 'SERVER_BUSY': return this.handleServerError(error, context) case 'QUOTA_EXCEEDED': return this.handleQuotaError(error, context) case 'INVALID_FILE': return this.handleValidationError(error, context) default: return this.handleUnknownError(error, context) } } async handleNetworkError(error, context) { // ネットワーク回復を待つ this.uploader.onStatusChange( '📶 ネットワークが不安定です。接続が回復したら自動的に再開します。' ) // オンラインになるまで待機 await this.waitForNetwork() this.uploader.onStatusChange('接続が回復しました！アップロードを再開します。') return { action: 'retry', delay: 1000 } } async handleServerError(error, context) { const retryKey = `chunk_${context.chunkIndex}` this.retryCount[retryKey] = (this.retryCount[retryKey] || 0) + 1 if (this.retryCount[retryKey] <= this.maxRetries) { const delay = Math.pow(2, this.retryCount[retryKey]) * 1000 this.uploader.onStatusChange( `⏳ サーバーが混雑しています。${delay/1000}秒後に再試行します... (${this.retryCount[retryKey]}/${this.maxRetries})` ) return { action: 'retry', delay } } else { this.uploader.onStatusChange( '❌ サーバーへの接続が続けて失敗しました。しばらく時間をおいてから再度お試しください。' ) return { action: 'abort' } } } async handleQuotaError(error, context) { this.uploader.onStatusChange( '📦 ストレージ容量が不足しています。不要なファイルを削除してから再度お試しください。' ) // 容量情報を表示 const quotaInfo = await navigator.storage.estimate() const usedGB = (quotaInfo.usage / 1024 / 1024 / 1024).toFixed(1) const quotaGB = (quotaInfo.quota / 1024 / 1024 / 1024).toFixed(1) this.uploader.onStatusChange( `現在の使用量: ${usedGB}GB / ${quotaGB}GB` ) return { action: 'abort' } } async waitForNetwork() { return new Promise(resolve => { const checkConnection = () => { if (navigator.onLine) { resolve() } else { setTimeout(checkConnection, 1000) } } checkConnection() }) } } ``` ### 解決策4: 複数ファイルの効率的な処理 ```javascript class BatchUploader { constructor(files, options = {}) { this.files = Array.from(files) this.options = options this.queue = this.createQueue() this.completed = [] this.failed = [] } createQueue() { return this.files.map((file, index) => ({ id: `${Date.now()}_${index}`, file, status: 'pending', progress: 0, error: null })) } async uploadAll() { // 全体の進捗UI表示 this.showBatchProgress() // 3つずつ並列でアップロード const concurrent = 3 const inProgress = [] for (const item of this.queue) { // 同時実行数の制限 if (inProgress.length >= concurrent) { await Promise.race(inProgress) } const uploadPromise = this.uploadItem(item) .then(() => { inProgress.splice(inProgress.indexOf(uploadPromise), 1) }) inProgress.push(uploadPromise) } // 残りを待つ await Promise.all(inProgress) this.showSummary() } async uploadItem(item) { item.status = 'uploading' this.updateBatchProgress() try { const uploader = new UserFriendlyUploader(item.file, { onProgress: (progress) => { item.progress = progress.percentage this.updateBatchProgress() } }) await uploader.upload() item.status = 'completed' this.completed.push(item) } catch (error) { item.status = 'failed' item.error = error this.failed.push(item) } } showBatchProgress() { // バッチアップロード専用のUI this.container.innerHTML = `

ファイルアップロード (${this.files.length}個)

0 / ${this.files.length}

${this.queue.map(item => `

${item.file.name} 待機中

`).join('')}

` } } ``` ## ユーザー体験を劇的に改善する実装のポイント ### 1. 透明性の確保 - **何が起きているか**を常に表示 - **なぜ時間がかかるか**を説明 - **いつ終わるか**の見込みを提示 ### 2. コントロールの提供 - **一時停止・再開**ボタン - **キャンセル**オプション - **優先順位**の変更 ### 3. 失敗への配慮 - **自動リトライ**機能 - **部分的な成功**の保存 - **明確なエラーメッセージ**と対処法 ### 4. パフォーマンスの最適化 - **適応的なチャンクサイズ** - **並列アップロード** - **帯域幅の効率的利用** ## まとめ：ユーザーの時間と感情を大切にするファイルアップロードは単なる技術的な機能ではありません。ユーザーの貴重な時間、データ通信量、そして感情が関わる重要なタッチポイントです。適切な実装により： - ⏰ **時間の節約**: 失敗による再試行がなくなる - 📱 **通信量の節約**: 完了した部分は再送信不要 - 😌 **ストレスの軽減**: 進捗が見え、中断も怖くない - 🎯 **目的の達成**: ユーザーがやりたいことを確実に実現エンジニアとして、私たちはユーザーの立場に立って、彼らの体験を第一に考えた実装を心がけるべきです。 --- あなたのサービスのファイルアップロード機能は、ユーザーに優しいですか？この記事で紹介した実装方法を参考に、ぜひ改善してみてください。

色指定して背景透明にするやつ