JavaScriptファイルのサイズ軽減 の変更点

*JavaScriptファイルのサイズ軽減について [#n67db38d]
　XOOPSには最初からBBcode使用時などに使われる「xoops.js」という7KB程度のJavaScriptファイルが存在する。また、個々のモジュールが「Prototype」や「jQuery」といったライブラリと呼ばれるものを独自に持って読み込んだりする。xoops.jsの7KBはそれほどでもないが、ライブラリのファイルサイズは数万KBとかなり大きい。大きい分、圧縮がかなり効くので時間的な余裕があれば圧縮処理をしておきたい。
**YUI Compressorを使っての圧縮 [#nb5247f2]
　JavaScriptファイルは適度に改行が入っていたりして、人が後々編集しやすいように書かれている場合が多い。当然、読みやすくしているなりにファイルサイズが大きくなっている。しかし、個人がサイト運営を行うにあたってxoops.jsやPrototype、jQueryを独自にカスタマイズするというケースはまずないと思われるので、改行などは取っ払ってしまっても問題ない。難読化とも呼ばれる作業だが、YUI Compressorというプログラムを使ってJavaScriptファイルを圧縮してしまおう。

　[[YUI Compressor>http://yuilibrary.com/downloads/#yuicompressor]]

　なお、JavaScriptファイルの圧縮(難読化)プログラムはいくつかあるが、たまに圧縮の仕方に問題があるのかJavaScriptが動かなくなるときがあるので注意したい。私がいくつか試した限りではYUI Compressorを使って問題が出たことはなかった。
|そのままのxoops.js|YUI Compressorで圧縮したxoops.js|
|#ref(xoops_js.gif)|#ref(xoops_js2.gif)|
|14KB|7KB|
***参考サイト [#p6cfa1d3]
　[[YUI Compressor - StackTrace>http://stacktrace.jp/tools/yuicompressor/]]
**gzipを使っての圧縮 [#z860a5d5]
「そこに並んでいる人たち、もっと詰めて～」という感じのYUI Compressorによる圧縮と比べると、gzipによる圧縮はもっとデジタルっぽい。実際は「1111111111」なのだがこれを「1が10」として、使うときに「1111111111」に戻そうという感じになる。圧縮率もかなりのもので、YUI Compressorによって7KBになったxoops.jsを2KBにまでにすることができる。ノーマルな状態では14KBなので実に7分の1の圧縮になる。
　既存ファイルをgzip形式で圧縮できるソフトはLhaplusなどがある。

　[[Lhaplus>http://www.vector.co.jp/soft/win95/util/se169348.html]]

　問題は「1111111111」を「1が10」と書かれてもうまく解釈できず、「1111111111」に戻せないブラウザもあるということだ。なので、そういったブラウザのためにmod_rewriteを使って「gzipを展開できるブラウザはこっち」「展開できないブラウザはこっち」という振り分けを行う。

　xoops.js(ノーマル)
　xoops.js.gz(gzipで圧縮したxoops.js)

　とincludeフォルダ内に二つ用意し、同じくincludeフォルダの中に、
#pre{{
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

ForceType application/x-javascript
AddEncoding x-gzip .gz
}}
　と書いた.htaccessファイルを入れておくといいだろう。
***参考サイト [#l6339fb2]
　[[prototype.jsを10KBにする方法 : 亜細亜ノ蛾 - Weblog>http://asiamoth.com/mt/archives/2006-11/16_2331.php]]
**必要のないユーザには読み込ませないようにする [#g5a71e1b]
　私の[[本家>http://kudok.com/]]ではゲストユーザにフォーラムやコメント欄を開放していない。なので、ゲストユーザにxoops.jsを読み込ませる必要がない。よって、
#pre{{
<{if $xoops_isuser}>
<script type="text/javascript"><{$xoops_js|regex_replace:"/(\/\/\-\->|<!\-\-)/":""}></script>
<{/if}>
}}
　と括っている。こうすればゲストユーザには<script type="text/javascript"><{$xoops_js|regex_replace:"/(\/\/\-\->|<!\-\-)/":""}></script>が表示されず、当然、xoops.jsが読み込まれることもない。''<{if $xoops_isuser}>は「登録ユーザにだけ(表示する)」という意味''を持っていて、よく、「○○さんようこそ」という挨拶をログインした登録ユーザに見せるために使われているが、こんな使い方もできて便利だ。
　自分を含めてサイトを利用する全員、BBcodeは使わないということであれば、themesフォルダ内テーマ別フォルダ(たとえばthemes/default)の中にあるtheme.htmlから
#pre{{
<script type="text/javascript"><{$xoops_js|regex_replace:"/(\/\/\-\->|<!\-\-)/":""}></script>
<script type="text/javascript">
<!--
<{$xoops_js}>
// -->
</script>
}}
　↑自体を削除してしまってもいいだろう。

　ゲストには読み込んでもらう必要があるが、登録ユーザには読み込ませたくないというJavaScriptファイルもあるかもしれない。その場合は<{if $xoops_isuser}>を<{if !$xoops_isuser}>(＝''登録ユーザ以外に''の意)にして、
#pre{{
<{if !$xoops_isuser}>
<script type="text/javascript" src="hoge.js"></script>
<{/if}>
}}
　と括ればよい。

[PR]