Help us understand the problem. What is going on with this article?

zlibjsのUnzipを使用してブラウザ上でzipファイルを展開する

More than 3 years have passed since last update.

ブラウザで複数ファイルをxhrで取得したいときや、数メガのファイルを取得したいとき、これらを纏めて1リクエストで済ませたい場合があります。

zlib.jsのUnzipを使用すると、xhrで取得したzipをその場で展開し、直ぐに中のファイルを使用することが出来ます。

ファイル名一覧の取得

zlib-example
tree files
# files
# ├── bar.png
# └── foo.json

zip -r files files
# adding...

上記のような確認用の zipファイル を作成します。

package.json
{
  "name": "zlibjs-test",
  "dependencies": {
    "zlibjs": "^0.2.0"
  },

  "scripts": {
    "start": "beefy index.js --open"
  },
  "devDependencies": {
    "beefy": "^2.1.5"
  }
}

上記package.jsonを使用して、browserify環境を作成します。

index.js
var Unzip= require('zlibjs/bin/unzip.min').Zlib.Unzip

var url= 'files.zip'
var xhr= new XMLHttpRequest
xhr.open('GET',url,true)
xhr.responseType= 'arraybuffer'
xhr.send()

xhr.addEventListener('load',function(){
  var unzip= new Unzip(new Buffer(xhr.response))
  var filenames= unzip.getFilenames()

  console.log(filenames)
})

unzip.getFilenamesメソッドから、読み込んだzipファイル名の一覧を取得できます。

上記3ファイルを用意すれば、下記のように動作を確認できます。

tree .
# .
# ├── files.zip
# ├── index.js
# └── package.json

npm install
# ...
npm start
# beefy (v2.1.5) is listening on http://127.0.0.1:9966

スクリーンショット 2015-12-21 10.04.30.png

解凍

unzip.decompressメソッドに、解凍したいファイル名を指定すると、指定したファイルのUint8Arrayを返します。

JSONであれば、下記のようにパースできます。

var Unzip= require('zlibjs/bin/unzip.min').Zlib.Unzip

var url= 'files.zip'
var xhr= new XMLHttpRequest
xhr.open('GET',url,true)
xhr.responseType= 'arraybuffer'
xhr.send()

xhr.addEventListener('load',function(){
  var unzip= new Unzip(new Buffer(xhr.response))
  var filenames= unzip.getFilenames()

  var filename= filenames[2]// foo.json
  var buffer= new Buffer(unzip.decompress(filename))
  var object= JSON.parse(buffer.toString())

  console.log(object)
  // {foo: "i am json"}
})

画像であれば、下記のようにdatauriに変換可能です。

var Unzip= require('zlibjs/bin/unzip.min').Zlib.Unzip

var url= 'files.zip'
var xhr= new XMLHttpRequest
xhr.open('GET',url,true)
xhr.responseType= 'arraybuffer'
xhr.send()

xhr.addEventListener('load',function(){
  var unzip= new Unzip(new Buffer(xhr.response))
  var filenames= unzip.getFilenames()

  var filename= filenames[1]// bar.png
  var buffer= new Buffer(unzip.decompress(filename))
  var dataURI= 'data:image/png;base64,'+buffer.toString('base64')

  console.log(dataURI)
  // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAEDWlDQ1BJQ0MgUHJvZmlsZQAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VVBg/m8AAAAdSURBVBgZY2RgYPgPxAQBE0EVUAWjCvGGFNHBAwCmFwEThd/6KQAAAABJRU5ErkJggg==
})

さいごに/成果物

ハースストーンの5MB超の翻訳データがjsonで配布されており、これをgit管理せず利用する方法を考えたところ、当ライブラリに行き着きました。

実際にReactLodashと併用して、コレクション可能なカードをフリーワードで検索できるツールを作成してみました。

ハースストーンカード日本語検索 - jsdo.it

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした