EatSmartシステム部ブログ

ウェブサイトの開発や運営に関する情報です。

複数ファイルのダウンロード

運用メンバーが利用するページを、イートスマートでは"バックエンド"と呼んでいます。 バックエンドでは、商品データの操作やクチコミの監視、ニュースの編集等の業務が行われています。 それらの業務のなかで、CSVをダウンロードするものがあります。 今回は、このCSVダウンロードを改修した話をきます。

複数のCSVを一括でダウンロードしたい

こんな要望が運用メンバーからあがりました。 もぐナビにはプレゼントの企画がありますが、プレゼントの数を増やしたことで増えた業務を効率化したいとこのとでした。 現状のダウンロードは以下のような流れになります

[プレゼント一覧]→[プレゼントを選択]→[CSVをダウンロード]

以前は問題ありませんでしたが、プレゼントの数が増えたことで問題になりました。 解決策として以下の3つが候補になりました。

  • 複数CSVをエクセルのシートにして1度にダウンロード
  • 複数CSVをZIPにアーカイブして1度にダウンロード
  • 複数CSVを1度にダウロード

複数CSVを1度にダウンロードする

1と2はCSVを出力するAPIに改修が必要なので、今回は3を選びました。 既存のAPIは1つのCSVを出力するので、これを複数リクエストすることにします。 方法としては、チェックボックスで選択されたプレゼントのCSVをダウンロードするAPIを、動的に作成したiframeで実現します。

jQuery('body').append('<iframe src="' + [APIエンドポイント]+ '" width="1" height="1"></iframe>');

以上で、フロントエンドの改修のみで複数CSVのダウンロードを実現できました。