質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.23%

  • JavaScript

    11811questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6464questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

ローカルにあるHTMLファイルから、ローカルにあるZIP化したjavascriptをロードすることはできるでしょうか?

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 358

前提・実現したいこと

HTMLファイルとjavascriptファイルを使用して、ブラウザで表示できるHTMLレポートを生成するアプリを作成しています。
この生成したファイルサイズが大きくなりすぎる(主にjavascriptファイル)ため、ファイルサイズを小さくする目的でjavascriptファイルをzip化し、それをロードしたいと考えているのですが、zipファイルをロードする方法として、ファイル選択してもらうという方法(下記[試したこと]にコード記載しています)しかわかりませんでした。

可能であれば、ファイル選択を行う事無く、zip化していないjavascriptファイルと同じ様に自動でロードしたいのですが、そのようなことは可能でしょうか?

該当のソースコード

<html>
  <script src="./test.js"></script>
</html>
// test.jsファイル例。このファイルサイズが大きくなりすぎるため、zip化してロードできればと考えています
console.log('load test');

試したこと

zip化したjavascriptファイルをロードするという目的で、下記の例が一番近いのですが、この例では「HTMLをブラウザで開く」→「zipファイルを選択する」という必要があるため、可能であれば「zipファイルを選択する」という手間をなくしたいです。

<html>
    <body>
        <input type="file" id="file" name="file" multiple /><br />
    </body>

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
    <script type="text/javascript" src="./jszip.min.js"></script>

    <script type="text/javascript">
        $("#file").on("change", function(evt) {
            console.log('change file');
            function handleFile(f) {
                console.log('handleFile call');
                var jszip = new JSZip();
                jszip.loadAsync(f)
                .then(function(zip) {
                    console.log(zip);
                    zip.forEach(function (relPath, zipEntry) {
                        jszip.file(zipEntry.name).async("string")
                        .then(function(content) {
                            console.log("eval run")
                            eval(content);
                        });
                    })
                });
            }
            var files = evt.target.files;
            for (var i = 0; i < files.length; i++) {
                handleFile(files[i]);
            }
        });
    </script>
</html>

補足情報(言語/FW/ツール等のバージョンなど)

  • サーバーを立てることはできません。
  • 目的はファイルサイズの縮小のため、zipである必要はありません。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • defghi1977

    2017/12/27 20:00

    「zip化する必要があるほど巨大な動的JavaScriptファイル」についてのイメージがわきません. (もしかして何らかのログが格納されたJSONファイル?)

    キャンセル

  • teratail_sone

    2017/12/27 20:06

    はい。ご指摘の通りログが格納された情報のファイルで、そのログでは数値データの文字列が単純に多いというものです。

    キャンセル

  • think49

    2018/01/09 14:10

    HTMLファイルもローカルに存在するのでしょうか。ローカルファイルとするなら、ローカルファイルへのアクセス手段はfile:///, http://127.0.0.1/ のどちらでしょうか。

    キャンセル

  • teratail_sone

    2018/01/09 15:29

    はい。HTMLファイルもローカルに存在し、アクセス手段は「file:///」です。

    キャンセル

回答 4

checkベストアンサー

+1

PNGにjsを埋め込むという手法はいかがでしょうか。

ググれば(js png 圧縮)実装方法がいくつか出てきます。
これならFile Apiの制約である「ユーザーによるファイル指定」が不要となり、
画像読み込み時に自己解凍、実行が可能となるでしょう。
zipと同じdeflate圧縮となるので、そこそこの圧縮になると思います。

問題は1GBクラスのPNGデータ処理だとおもうのですが、
単体ファイルでの運用が厳しい場合は、
PNGを細かく分割してメモリ管理を行う必要がありそうです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/15 17:23

    ご回答ありがとうございます。
    理想的です。この方法を用いたいと思います。

    キャンセル

+1

ローカルでの動作ですよね?
であれば、ZIPにする意味はないと思いますよ。そのままでも一瞬で読めるので。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/27 19:01

    早速のご回答ありがとうございました。
    はい。ローカルの動作です。
    ただ、ZIP化の目的はファイルサイズが大きくなりすぎる(1G以上)ことによるファイルサイズの圧縮です。
    ロードについては多少時間がかかっても問題ないと考えています(zip化でロード時に解凍の時間がプラスされてでも、ファイルサイズを小さくしたいです)。

    キャンセル

  • 2017/12/27 20:25

    ディスクの残り容量が少ないと言うことですかね。そういうことならしょうが無いですが、根本的にはディスク容量拡大でしょうか。
    時間については、HDDであれば圧縮した方が速いんじゃないかなと思います。
    ディスク読みとり時間>>解凍時間
    なので、高速化目的で圧縮したいのかと思っていました。

    キャンセル

+1

出来る出来ないで言えば理論上「可能」です. 但し, zipファイルを展開する機能はWEBブラウザは備えていないので, 別途何らかのライブラリを導入する必要があります.

しかし, お求めの「1GB」もの(ログ)データを扱う事自体が既にWEBブラウザで動作させるスクリプトの範疇を超えていると言ってよく, たとえ正しく実装できたとしても実用に耐えうるか甚だ疑問です.

むしろ, テキスト処理を得意としている他の言語でJSON(JavaScript)データを読み込み, それをHTMLファイルに変換する方針を取ったほうが建設的でしょう.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/09 13:37

    ご回答ありがとうございます。
    zipファイルを展開する機能自体は「JSZip」を使用しています(「試したこと」のコード内でも使用しています。ただし、ご指摘にある実用に耐えうるかは試していません。本件の解決後に調査/対策とりたいと思います)。

    現状ではご指摘の「HTMLファイルに変換」という方針を取っています(質問時の文面がわかりにくくて申し訳ないです)。しかし、その結果、HTMLファイルのサイズ1GBを超えてしまう場合がでてきており、ファイルの移動やHDDの容量の面から、ファイルサイズを圧縮した方法がとれないかと検討しているところです。

    現状では、ローカルにある圧縮したファイルを読み取るのに、「ファイル指定を明示的に行う」という手間をかければ可能だったのですが、非圧縮時には必要なかった手間がかかってしまうため、この手間がかからない方法があれば知りたいです(もしくはセキュリティ上の理由等でそんなことはできないという結果でも知りたいです)。

    キャンセル

  • 2018/01/09 14:27

    個人的意見ですが, 「JavaScriptによる解決」にこだわるのではなく, 「圧縮された巨大ログファイルのリーダブル化」といった質題とし, 実際に**運用に際して**直面している問題を提示した上で広範な識者の意見を求めたほうが現実的な解決策が得られると思います. (文字列処理に長けた言語やツールが見つかるかもしれません)
    ※内容からしていかにもありそうな要件ですが, 現状ではタグ付けや質題が適切でないことで「経験者」の目に留まりにくい質問となっている気がします.

    キャンセル

0

手間を省いて機械化したいのであれば、ローカルにApacheを立て、gzip圧縮したファイルを用意する方法が良いと思います。

Re: teratail_sone さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/15 17:17

    ご回答ありがとうございます。
    ご指摘の通りサーバーを立てることが一番ではあるかと思うのですが、ローカルであってもサーバーを立てることが(本件に関しては)できないため、この方法を用いることはできないです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.23%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11811questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    6464questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。