jQuery.jsのcompressed版の作成方法と自動変換について

このQ&Aのポイント
  • jQuery.jsのcompressed版(pack版or軽量版)はどのように作成しているのでしょうか?jQueryというJavaScriptのライブラリでは、compressed版とuncompressed版をダウンロードすることができます。compressed版はファイルサイズが小さくなるようにコーディングされており、中身は判読できない形式になっています。
  • 質問者は、uncompressed版からcompressed版への自動変換が可能なソフトやライブラリがあるか知りたいとしています。もし自動変換が可能であれば、既存のソースコードを変換し、ファイルサイズの軽量化と判読難解化を実現できると考えています。
  • 質問者はjQuery.jsのcompressed版の作成方法と自動変換の可能性について情報を求めています。
回答を見る
  • ベストアンサー

jQuery.jsのcompressed版(pack版or軽量版)はどのように作成しているのでしょうか?

jQueryというJavaScriptのライブラリ(http://jquery.com/)では、 jQuery (uncompressed) 55kb jQuery (compressed) 19kb の2パターンをダウンロードすることができるようになっています。 機能は同じですが、compressed版の方が、ファイルサイズが圧倒的に小さくなるように、コーディングされています。 ファイルサイズの大きい、uncompressed版の中身をみると、よく知っている記述方法でJavaScriptが記述されているのですが、 軽量版であるcompressed版の方の中身を見てみると、eval(function(p,a,c,k,e,d)..から始まり、改行コードは一つも含まれておらず、1行で記述されており、中身も私レベルではとても判読できるものではありません。 そこでお尋ねしたいのですが、ファイルサイズの大きい、uncompressed版を、軽量版であるcompressed版に自動変換することができるソフト・ライブラリなどがあるのでしょうか? (もし、このような自動変換が可能であれば、私の既存のソースコードを変換し、軽量化・判読難解化させることができるのでは、と考えております) どうぞよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

http://blog.metawrap.com/blog/JavaScriptCodeCompressionTools.aspx まともに使い込んでませんのでどれくらいのものかわかりませんが「Code Compression」で検索すると圧縮系のソフトは色々あるようです。 Perlスクリプトであるjsjamを用いてjQueryのソースコードを圧縮したところ,58KB→34KBにはなりました。しかしまだコードとしては読めそうです。 他のツールも試してみてはいかがでしょうか?

その他の回答 (1)

回答No.2

追記。 「Code Compression Javascript」 で検索しないと今ひとつの検索結果になっている。

関連するQ&A

  • jQueryって一言で言うとなんですか?

    調べたら 「ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量な JavaScriptライブラリである。」 と出てきたのですが、 JavaScriptの一部と考えていいのでしょうか? jQueryは プログラミング言語と思っていいのでしょうか?

  • jquery.MultiFile.jsで5GB

    お世話になります。 jquery.MultiFile.jsを使って5GBのファイルをアップロードしたいのですが、5GBどころか10MB程度のファイルでもアップロードに失敗してしまいます。 数KB程度のファイルではアップロードに成功するので基本的なコードは間違っていないと思うのですが、どこかにファイルサイズの上限を設定する項目があるのでしょうか? WEBサーバーはクリーンインストールしたCentOS5.5のサーバーとサクラサーバーで試しましたがどちらも同じ現象でした。 入力ページでファイルを指定し、確認ページでアップロードしたファイルを確認しているのですが、確認ページでvar_dump($_FILES);を実行したところ、大きなファイルだと何も渡ってきません。 小さいファイルですと <参考>のような結果が得られます。 どの辺を直せばいいのかアドバイスをお願いします。 <参考> array(1) { ["upfile"]=> array(5) { ["name"]=> array(1) { [0]=> string(5) "a.zip" } ["type"]=> array(1) { [0]=> string(28) "application/x-zip-compressed" } ["tmp_name"]=> array(1) { [0]=> string(14) "/tmp/phpV8T91h" } ["error"]=> array(1) { [0]=> int(0) } ["size"]=> array(1) { [0]=> int(1244) } } }

  • jQuery.jsを使ったhtml外部読み込み方法

    JavaScript超初心者です。 何卒ご協力の程よろしくお願い致します!! タイトルの通り、jQuery.jsを使ってページのある部分に外部htmlファイルを読み込みたいと考えています。 以下のページを参考にやってみましたが上手くいきません。 http://blog.sugulab.com/?p=14 やってみたのは下記のような作業です。 まず、下記サイトより「jquery-1.9.1.min.js」ファイルをダウンロードし、「js」というフォルダに「jquery.js」として保存しました。 http://jquery.com/download/ 次に参照ページにならってhead要素内に下記のように記述しました。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> <!– $(function(){ $("#leftcontent").load("shopmenu.html"); }); // –> </script> body要素内には<div id="leftcontent"></div>と記述しています。 このleftcontentの部分に、同じ階層にある「shopmenu.html」を表示させたいのですが、何も表示されず困っています。 PHP等の知識は一切ない為、これでいけそうなら頑張りたいのですが・・・ ド素人の為、見当違いのご質問でしたらご容赦ください。 どなたかご教示、アドバイスの程よろしくお願い申し上げます!!m(*u_u*)m

  • htmlファイルとjsファイルを作成 サンプル

    JavaScript初心者なのですが、 http://www.tohoho-web.com/js/start.htm#Prepare のように HTMLの中にJavaScriptのコードを記述する書き方ではなく htmlファイルとjsファイルを作成して コードを記述する書き方を勉強したいのですが そのようなサンプルがたくさん載ったサイトはありますか?

  • jQuery版のlightbox.jsについての質問です。

    jQuery版のlightbox.jsについての質問です。 配布元:http://leandrovieira.com/projects/jquery/lightbox/ お客さまから、1つの画像から複数の拡大画像にリンクさせたいという要望があって困っています。 a要素に「lightbox」というclassが指定されているとlightboxが動くようになっており、 お客様の方で下記のソースコードで一応実現できているようなのですが バリデータでエラーがあるのでもっと良いやり方はないか、というご要望です。 <a href="拡大画像1" class="lightox"><img src="縮小画像1"></a> <a href="拡大画像2" class="lightox"></a> <a href="拡大画像3" class="lightox"></a> 上記のソースで、縮小画像1をクリックすると拡大画像1に「next」が付いて次の拡大画像も表示出来るようになりますが、1つ目以外のa要素が当然空になるので文法上よくない状態です。 文法もおかしくなく、1つの縮小画像から複数の拡大画像を表示していくことは可能でしょうか。 JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら、教えていただけるとありがたいです。 よろしくお願いいたします。

  • jQuery.lightpop.jsの動作について

    jQuery.js : Ver1.3.1 jQuery.light.js Ver0.7.5 使用ブラウザ:FireFox3.0.8(Firebugインストール済み) Google Chrome2.0.169.1 お世話になります。 現在弊社ではjQuery.lightpop.jsライブラリを使用して リンク先(以下例では「hogehogeName」のリンク先「hogehoge.html」)をポップアップ表示させようとしています。 以下(1)のように「静的」にテーブルタグを記述するとうまくいきますが (2)のように「動的」だとポップアップされず 普通にページ遷移してしまいます。原因はどこにあるのでしょうか?? ちなみにFireBugで動作確認を行いましたが、エラーはなかったです。 (1)タグ内にテーブルを直接記入 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"> <table class="table1" id="table1" border="1" bgcolor="white"><tbody> <td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td> </tr></tbody></table> </div> </body> </html> (2)divタグ内に「動的」にテーブルを記入する方法 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); &(view).innerHTML = '<table class="table1" id="table1" border="1" bgcolor="white"><tbody>' + '<td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td>' + '</tr></tbody></table>'; }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"></div> </body> </html>

  • jQuery を書くファイルはどれですか

    ほんっとうに基本的なことすぎて見つけられないのかもしれないのですが、 2日間ググってもわからないのでお助けください。 jQuery でアコーディオンメニューを作りたいと思っています。 だいたいのサイトをみると、サイトより jQueryをダウンロードしろと 書かれているのでuncompressedのものをダウンロードして、jQuery.jsと リネームしたのちに jsフォルダ内に格納しました。 あとは、html、CSS、jQuery の3つの記述が掲載されているのですが、 jQuery をどこに書くのかわかりません。 どういう名前のどの拡張子(js?)でhtmlファイルに読み込ませるのか、 それともhtmlファイルに書くのかすらわかりません。 なにとぞご教示お願いいたします。

  • jquery自体をJavaScriptで読み込む

    以下のようなものを想定して、jquery.js という中身がjqueryでないものから jqueryの実態を読み込みをさせようとしているのですが、うまくいきません。 ・jquery 2以降は、IE8以前をサポートしなくなるので、useragentで  読み込むjqueryを選択したい。 ・現在、CGIスクリプト上で、jqueryの読み込みを判断しているが、できれば  外部JavaScriptで巨大なjqueryの読み込みの判断をさせたい。 ・キャッシュされたとしても、ライブラリであることから、圧縮して70kバイトと  あまりにも巨大である ・(googleapiを利用すると、IE8以前では、プライバシーの警告が出る場合がある) 確かに、スマホにjqueryを普通に読み込ませても、何も問題なく動作しますが、 相当がんばって圧縮をしても70kバイト程度のライブラリを、使用しないのに 読み込むというのも気が引ける部分もあります。 何とか、動的に、かつ、何も問題なく、jqueryをJavaScriptで読み込む方法は あるでしょうか? このようなコードは、document.bodyがnullであるため、はじかれてしまいます。 var script = document.createElement('script'); script.src = 'http://hoge/jquery-1.js'; document.body.appendChild(script); var callee = arguments.callee; var interval = setInterval(function() { if (!document.evaluate) return; clearInterval(interval); interval = null; callee(); }, 100); このコードでも、jqueryを使用するものが、jQueryがないというエラーで、うまくいきません var scrptE = document.createElement("script"); scrptE.setAttribute("type", "text/javascript"); scrptE.setAttribute("language", "JavaScript"); scrptE.setAttribute("src", "http://hoge/jquery-1.js"); document.getElementsByTagName("head")[0].appendChild(scrptE); 以下のようなのは、googleapiのため、使わないものと考えます。 http://phpjavascriptroom.com/?t=ajax&p=jquery よろしくお願いします。

  • Adobe distiller ジョブオプション設定に詳しい方、助けて!(PDF変換)

    Windows98で、acrobat4.0とdistiller4.0 を使って パワーポイント(PowerPoint97)の資料を PDFファイルへ変換を試みています。 もとのPPTファイルのサイズは約700KB なのですが、 (※ブラウザでWWWを観た画面をキャプチャして、  JPG画像ファイル化したものが貼りこまれたPPTファイル) (※そのJPG画像内に画像として写っている細かい文字が有り、   これが判読出来るようにしたい。) distillerジョブオプションを CJKscreen_OPTIMIZEDにすると 約300KB で画像の圧縮がキツ過ぎてピンボケ状に見え、 今度は Print_OPTIMIZEDにすると 約1800KB で、なんとか画像解像度は判読可能でセーフですが 2メガ近いファイルサイズでは重た過ぎで、 圧縮している意味が無い! この両者の間を取って、 画像がピンボケしないようにしつつ せめて数百KBのファイルサイズを達成したいのですが、 どの設定項目をいじれば良いか、アドバイス下さいませ。 よろしくお願いいたします。

  • JavaScriptライブラリってそもそも・・・

    私はweb制作をはじめて3年たらずのwebデザイナーです。 プログラムはまったくと言っていいほど書けないので、アニメーションなどを実装したいときはwebで拾った著作権的に大丈夫なものを使いまわしています。 ほとんどjqueryライブラリを使ったものです。 最近はそのソースも少しは読めるようになり、少し手を加えられるようになりました。 そこで、かなり根本的な疑問がわいてきたのです。 ◆JavaScriptライブラリってそもそもなにが書いてあるものなのでしょうか? ※JavaScriptライブラリとはで調べたのですが、難しい言葉が多くて・・・ (jqueryとは具体的にどんなものが書いてあるものなのか。) ◆jqueryのアドオンとかjqueryのプラグインとか書いてあるのをよく見かけますが、これはなんのでしょうか?アドオンとプラグインは違うものなのでしょうか? ◆jqueryを読み込んで実行するためのスクリプトをソースに追加すれば意図した動きになりますよね。(アコーディオンメニューなど) ↓こういうもの=========== <script type="text/javascript"> $(function(){ // ここにコードを書いていく。 }); </script> これは「jqueryライブラリを使用して作ったプログラム」という言い方であっているのでしょうか? それともこのソースに追加するスクリプトのことをアドオンというのでしょうか? 無知で恥ずかしいのですが、この辺のことをきっちり理解できれば、もう少し自分のできる範囲が広がるのではないかと思い、質問しました。 よろしくお願いします。