読者です 読者をやめる 読者になる 読者になる

Akihiro's Programmer Blog

Technology Notes for Personal

JavaScriptのみでzipファイルを生成する -1

今回はjavascriptを使ってzipファイルの生成に挑戦した。

ある程度まで進んだのでまとめておこうかと。



既存ライブラリ

まず、JSでzipファイルを扱っているライブラリはあるのか調べてみるとJSZipというものを見つけた。

見てみると、まさに自分が使いたかった機能を持ったライブラリだ!これで良いじゃん!
と、思ったがサイトのホームにあるサンプルを動かしてみるとなんだかおかしい。


f:id:akihiro_0228:20130502105026j:plain


・・・・・

まぁ、これはこのライブラリが悪いのではないし別にいいんのだが、何となく見栄えが悪い。


作ってみた

ということでゴチャゴチャやって動くものを作ってみた。

ライブラリ名 Zipper.js (ver 1.0.0)
対応ブラウザ firefox,chrome
機能 ファイルやフォルダを作って、まとめてzipでダウンロード


使い方

何はともあれ使い方をご紹介。
と言ってもJSZipとほとんど変わらないんですけど。



  • Zipper.jsを追加したら
<script type="text/javascript" src="zipper.js"></script>


  • Zipperオブジェクトを生成!
var zipper = new Zipper("zipName");  //引数は生成するzipの名前


  • 後はファイルを生成、追加したり
zipper.file("file1.txt", "file1 data");  //第1引数はファイル名、第2引数は中身


  • フォルダを追加したりして
var f = zipper.folder("folderName");  //引数はフォルダ名
f.file("file2.txt", "file2 data");  //フォルダにファイルを追加


  • ダウンロード用のリンクをa要素に付与
var a = document.getElementById('download');  //a要素を
zipper.link(a);  //zipダウンロード用のリンクに


  • download()を実行すれば、そのままダウンロードも出来る!
zipper.download();  //ダウンロードを実行



使う方がいるかどうか疑問だが、とりあえずこちらに置いておく。
(追記 2014/04/10)現在公開しておりません。

さて

こういうまともな成果物を作るのが初めてで右往左往しているが、第一歩としてはまずまずかなと。


と言っても、お気づきの方はお気づきかと思うが、

パクリ95%

なのが現状。


JSZipからのコピペを多様しているし、Deflateは高度な JavaScript 技集のdeflate.jsを使わせてもらっているし。


ここから色々付け足してオリジナリティを高めていきたい。そうしなければ失礼だ。