この記事では、ブラウザでZIPファイルを解凍する方法を説明します。JavaScriptのライブラリであるJSZipとjQueryを使用して、簡単にZIPファイルの解凍を実行できます。
必要なライブラリ
まず、以下の2つのライブラリが必要です。
実装
以下は、.zip ファイルを選択できる input file タグと、選択されたファイルを解凍するボタンがあります。ファイルが選択されると、解凍ボタンが有効になり、クリックするとファイルが解凍され、データがコンソールに表示されます。ただし、この例ではファイルの内容はブラウザのコンソールに表示され、実際にファイルとして保存はされません。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZIP File Decompression with JSZip and jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
</head>
<body>
<input type="file" id="file-input" accept=".zip">
<button id="decompress-button" disabled>Decompress</button>
<script>
$(document).ready(function () {
const $fileInput = $('#file-input');
const $decompressButton = $('#decompress-button');
$fileInput.on('change', function () {
if (this.files.length > 0) {
$decompressButton.prop('disabled', false);
} else {
$decompressButton.prop('disabled', true);
}
});
$decompressButton.on('click', async function () {
const file = $fileInput[0].files[0];
if (!file) {
alert('No file selected.');
return;
}
try {
const fileContent = await file.arrayBuffer();
const zip = new JSZip();
await zip.loadAsync(fileContent);
for (const fileName in zip.files) {
const file = zip.files[fileName];
if (!file.dir) {
const content = await file.async('text');
console.log(`File: ${fileName}\nContent:\n${content}\n`);
}
}
alert('Decompression complete. Check console for output.');
} catch (error) {
console.error('Error decompressing file:', error);
alert('Error decompressing file. Check console for details.');
}
});
});
</script>
</body>
</html>
使い方
- 上記のHTMLコードをindex.htmlなどのファイル名で保存して、ブラウザで開きます。
- ".zip"ファイルを選択するためのinput type="file"エレメントが表示されます。適切なZIPファイルを選択してください。
- ファイルが選択されると、「Decompress」ボタンが有効になります。ボタンをクリックすると、ZIPファイルが解凍され、コンソールにファイルの内容が表示されます。
注意点
この実装では、ブラウザのコンソールに解凍されたファイルの内容が表示されるだけで、実際にファイルとして保存はされません。ローカルファイルシステムへのアクセスはブラウザのセキュリティ制限により制限されているため、解凍されたファイルをローカルに保存するには、サーバーサイドのプログラムやブラウザのFile System APIを使用する必要があります。
まとめ
JSZipとjQueryを使用して、ブラウザでZIPファイルを簡単に解凍できることを確認しました。この実装は、ファイルの内容を確認したり、クライアントサイドでデータの前処理を行う際に便利です。ただし、解凍されたファイルの保存には追加の手順が必要です。