diff --git a/docs/archive.md b/docs/archive.md
index bc4d9e0..3facd59 100644
--- a/docs/archive.md
+++ b/docs/archive.md
@@ -1,6 +1,17 @@
# [Node.js]ファイルをZIP圧縮してダウンロードする方法
+- [\[Node.js\]ファイルをZIP圧縮してダウンロードする方法](#nodejsファイルをzip圧縮してダウンロードする方法)
+ - [圧縮処理について](#圧縮処理について)
+ - [方法1:フロンサイドで圧縮データを処理しファイルを保存する(JSZip)](#方法1フロンサイドで圧縮データを処理しファイルを保存するjszip)
+ - [方法2:サーバサイドで圧縮処理しファイルを出力する](#方法2サーバサイドで圧縮処理しファイルを出力する)
+ - [方法3:サーバサイドで圧縮処理しフロントでBlobによりファイルを取得する](#方法3サーバサイドで圧縮処理しフロントでblobによりファイルを取得する)
+ - [サンプルソース](#サンプルソース)
+ - [Blobを使用してZIPファイルを処理する(フロント側の処理)\*\*](#blobを使用してzipファイルを処理するフロント側の処理)
+ - [gcloudにあるファイルをzip形式でファイルを出力するサンプルソース](#gcloudにあるファイルをzip形式でファイルを出力するサンプルソース)
+ - [Zipダウンロードサーバを構築する(gcloud + express)](#zipダウンロードサーバを構築するgcloud--express)
+
+
## 圧縮処理について
* 方法1:フロンサイドで圧縮データを処理しファイルを保存する(JSZip)
@@ -113,7 +124,7 @@ fetch("https://example.com/sample.zip")
```
-#### Gloudにあるファイルをzip形式でファイルを出力するサンプルソース
+#### gcloudにあるファイルをzip形式でファイルを出力するサンプルソース
(スクリプト)
```js
@@ -154,3 +165,46 @@ async function downloadAndZip() {
downloadAndZip().catch(console.error);
```
+#### Zipダウンロードサーバを構築する(gcloud + express)
+(サーバ)
+
+```js
+const { Storage } = require('@google-cloud/storage');
+const express = require('express');
+const archiver = require('archiver');
+
+const storage = new Storage();
+const bucketName = 'your-bucket-name';
+
+const app = express();
+const port = 3000;
+
+app.get('/download-zip', async (req, res) => {
+ const filesToDownload = ['file1.csv', 'file2.csv']; // 圧縮したいファイルリスト
+
+ res.setHeader('Content-Type', 'application/zip');
+ res.setHeader('Content-Disposition', 'attachment; filename="compressed_files.zip"');
+
+ const archive = archiver('zip', { zlib: { level: 9 } });
+ archive.pipe(res); // レスポンスに直接圧縮データを送る
+
+ for (const fileName of filesToDownload) {
+ const file = storage.bucket(bucketName).file(fileName);
+ const [exists] = await file.exists();
+
+ if (exists) {
+ console.log(`Adding ${fileName} to archive...`);
+ archive.append(file.createReadStream(), { name: fileName });
+ } else {
+ console.warn(`File not found: ${fileName}`);
+ }
+ }
+
+ archive.finalize(); // ZIP 圧縮を完了
+});
+
+app.listen(port, () => {
+ console.log(`Server running at http://localhost:${port}`);
+});
+```
+
diff --git a/src/front/assets/downloadFromServer.js b/src/front/assets/downloadFromServer.js
new file mode 100644
index 0000000..177194c
--- /dev/null
+++ b/src/front/assets/downloadFromServer.js
@@ -0,0 +1,72 @@
+/**
+ * @description downloadボタンを押下したらCSVファイルをzip圧縮してダウンロードする
+ */
+
+
+// ダウンロードボタン
+const downloadButtonServer = document.getElementById('download-button-server');
+
+// ダウンロードボタンを押下した時の処理を記載する
+downloadButtonServer.addEventListener('click', async () => {
+ // Blobで取得する方法
+ console.log('downloadButtonServer');
+ // ダウンロードボタンを無効化する
+ downloadButtonServer.disabled = true;
+ // ダウンロード処理を実行する
+ try {
+ // localhost:3000/downdload にリクエストを送る
+ const response = await fetch('http://localhost:3000/downdload');
+ if (!response.ok) throw new Error('Failed to fetch');
+
+ // ZIPファイルを取得
+ const zipBlob = await response.blob();
+ const a = document.createElement("a");
+ a.href = URL.createObjectURL(zipBlob);
+ a.download = "serverFile.zip";
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ } catch (e) {
+ // エラーが発生した場合
+ console.error(e);
+ alert('ダウンロードに失敗しました');
+ } finally {
+ // ダウンロードボタンを有効化する
+ downloadButtonServer.disabled = false;
+ }
+});
+
+// ダウンロードボタン(アップロード)
+const downloadButtonUpload = document.getElementById('download-button-upload');
+
+// ダウンロードボタンを押下した時の処理を記載する
+downloadButtonUpload.addEventListener('click', async () => {
+ console.log('downloadButtonUpload');
+ // ダウンロードボタンを無効化する
+ downloadButtonUpload.disabled = true;
+ // サーバーにアップロード処理APIを送信する
+ try {
+ // localhost:3000/generate-zip にリクエストを送る
+ const response = await fetch('http://localhost:3000/generate-zip');
+ if (!response.ok) throw new Error('Failed to fetch');
+
+ // レスポンスからURLを取得
+ const { url } = await response.json();
+ // 取得したURLを開く
+ window.open(url);
+
+ } catch (e) {
+ // エラーが発生した場合
+ console.error(e);
+ alert('ダウンロードに失敗しました');
+ } finally {
+ // ダウンロードボタンを有効化する
+ downloadButtonUpload.disabled = false;
+ }
+
+});
+
+
+
+
+
diff --git a/src/front/download.html b/src/front/download.html
index 9b8ffd5..778f801 100644
--- a/src/front/download.html
+++ b/src/front/download.html
@@ -11,6 +11,10 @@
Zip File Download
+ Server
+
+
+