Q&A
「zip化する必要があるほど巨大な動的JavaScriptファイル」についてのイメージがわきません. （もしかして何らかのログが格納されたJSONファイル？）
###前提・実現したいこと
HTMLファイルとjavascriptファイルを使用して、ブラウザで表示できるHTMLレポートを生成するアプリを作成しています。
この生成したファイルサイズが大きくなりすぎる(主にjavascriptファイル)ため、ファイルサイズを小さくする目的でjavascriptファイルをzip化し、それをロードしたいと考えているのですが、zipファイルをロードする方法として、ファイル選択してもらうという方法(下記[試したこと]にコード記載しています)しかわかりませんでした。
可能であれば、ファイル選択を行う事無く、zip化していないjavascriptファイルと同じ様に自動でロードしたいのですが、そのようなことは可能でしょうか？
###該当のソースコード
html
1<html> 2 <script src="./test.js"></script> 3</html>
js
1// test.jsファイル例。このファイルサイズが大きくなりすぎるため、zip化してロードできればと考えています 2console.log('load test');
###試したこと
zip化したjavascriptファイルをロードするという目的で、下記の例が一番近いのですが、この例では「HTMLをブラウザで開く」→「zipファイルを選択する」という必要があるため、可能であれば「zipファイルを選択する」という手間をなくしたいです。
html
1<html> 2 <body> 3 <input type="file" id="file" name="file" multiple /><br /> 4 </body> 5 6 <script 7 src="https://code.jquery.com/jquery-3.2.1.min.js" 8 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 9 crossorigin="anonymous"></script> 10 <script type="text/javascript" src="./jszip.min.js"></script> 11 12 <script type="text/javascript"> 13 $("#file").on("change", function(evt) { 14 console.log('change file'); 15 function handleFile(f) { 16 console.log('handleFile call'); 17 var jszip = new JSZip(); 18 jszip.loadAsync(f) 19 .then(function(zip) { 20 console.log(zip); 21 zip.forEach(function (relPath, zipEntry) { 22 jszip.file(zipEntry.name).async("string") 23 .then(function(content) { 24 console.log("eval run") 25 eval(content); 26 }); 27 }) 28 }); 29 } 30 var files = evt.target.files; 31 for (var i = 0; i < files.length; i++) { 32 handleFile(files[i]); 33 } 34 }); 35 </script> 36</html>
###補足情報(言語/FW/ツール等のバージョンなど)
- サーバーを立てることはできません。
- 目的はファイルサイズの縮小のため、zipである必要はありません。
はい。ご指摘の通りログが格納された情報のファイルで、そのログでは数値データの文字列が単純に多いというものです。
HTMLファイルもローカルに存在するのでしょうか。ローカルファイルとするなら、ローカルファイルへのアクセス手段はfile:///, http://127.0.0.1/ のどちらでしょうか。
はい。HTMLファイルもローカルに存在し、アクセス手段は「file:///」です。
回答4件
0
ベストアンサー
PNGにjsを埋め込むという手法はいかがでしょうか。
ググれば（js png 圧縮）実装方法がいくつか出てきます。
これならFile Apiの制約である「ユーザーによるファイル指定」が不要となり、
画像読み込み時に自己解凍、実行が可能となるでしょう。
zipと同じdeflate圧縮となるので、そこそこの圧縮になると思います。
問題は1GBクラスのPNGデータ処理だとおもうのですが、
単体ファイルでの運用が厳しい場合は、
PNGを細かく分割してメモリ管理を行う必要がありそうです。
投稿2018/01/10 10:01
総合スコア764
0
出来る出来ないで言えば理論上「可能」です. 但し, zipファイルを展開する機能はWEBブラウザは備えていないので, 別途何らかのライブラリを導入する必要があります.
しかし, お求めの「1GB」もの（ログ）データを扱う事自体が既にWEBブラウザで動作させるスクリプトの範疇を超えていると言ってよく, たとえ正しく実装できたとしても実用に耐えうるか甚だ疑問です.
むしろ, テキスト処理を得意としている他の言語でJSON（JavaScript）データを読み込み, それをHTMLファイルに変換する方針を取ったほうが建設的でしょう.
投稿2017/12/27 11:31
総合スコア4756
ご回答ありがとうございます。
zipファイルを展開する機能自体は「JSZip」を使用しています（「試したこと」のコード内でも使用しています。ただし、ご指摘にある実用に耐えうるかは試していません。本件の解決後に調査/対策とりたいと思います）。
現状ではご指摘の「HTMLファイルに変換」という方針を取っています(質問時の文面がわかりにくくて申し訳ないです)。しかし、その結果、HTMLファイルのサイズ１GBを超えてしまう場合がでてきており、ファイルの移動やHDDの容量の面から、ファイルサイズを圧縮した方法がとれないかと検討しているところです。
現状では、ローカルにある圧縮したファイルを読み取るのに、「ファイル指定を明示的に行う」という手間をかければ可能だったのですが、非圧縮時には必要なかった手間がかかってしまうため、この手間がかからない方法があれば知りたいです（もしくはセキュリティ上の理由等でそんなことはできないという結果でも知りたいです）。
個人的意見ですが, 「JavaScriptによる解決」にこだわるのではなく, 「圧縮された巨大ログファイルのリーダブル化」といった質題とし, 実際に**運用に際して**直面している問題を提示した上で広範な識者の意見を求めたほうが現実的な解決策が得られると思います. （文字列処理に長けた言語やツールが見つかるかもしれません）
※内容からしていかにもありそうな要件ですが, 現状ではタグ付けや質題が適切でないことで「経験者」の目に留まりにくい質問となっている気がします.
0
ローカルでの動作ですよね？
であれば、ZIPにする意味はないと思いますよ。そのままでも一瞬で読めるので。
投稿2017/12/26 13:08
総合スコア84499
早速のご回答ありがとうございました。
はい。ローカルの動作です。
ただ、ZIP化の目的はファイルサイズが大きくなりすぎる(1G以上)ことによるファイルサイズの圧縮です。
ロードについては多少時間がかかっても問題ないと考えています(zip化でロード時に解凍の時間がプラスされてでも、ファイルサイズを小さくしたいです)。
ディスクの残り容量が少ないと言うことですかね。そういうことならしょうが無いですが、根本的にはディスク容量拡大でしょうか。
時間については、HDDであれば圧縮した方が速いんじゃないかなと思います。
ディスク読みとり時間＞＞解凍時間
なので、高速化目的で圧縮したいのかと思っていました。
0
手間を省いて機械化したいのであれば、ローカルにApacheを立て、gzip圧縮したファイルを用意する方法が良いと思います。
Re: teratail_sone さん
投稿2018/01/10 13:56
編集2018/01/10 13:57総合スコア18162
ご回答ありがとうございます。
ご指摘の通りサーバーを立てることが一番ではあるかと思うのですが、ローカルであってもサーバーを立てることが（本件に関しては）できないため、この方法を用いることはできないです。
あなたの回答
tips
プレビュー
