zjsに手を加えました.ファイルはhttp://github.com/takehiko/zjsより取得可能です.http://wakkzen.homelinux.net/zjs/とhttp://www.wakayama-u.ac.jp/~takehiko/zjs/も,最新版にしました.
パネルを大きく
前のバージョンアップ以後,ブラウザをフルスクリーンのサイズにしても,パネルのボタンやフォームが大きくならないことが,気になってきました.それでちゃちゃっとコードを足しました.
デフォルトで,パネルの表示にスタイルシートの書式で表すと「font-size: 120%」とするようにしました.
停止時に,キーボードでBを押せば,拡大率が変わります.120%→150%→200%→100%→120%→…としています*1.細かくするだとか,ブラウザのサイズに連動するだとかいう必要はないでしょう.
新たに導入した変数は,zjs.configの中で,以下の2つです.
- boardMagnifyMode:拡大の可否と対象を指定します.0は拡大無効です.1はボタンとパネルが拡大でき,これがデフォルトです.2はボタンとパネルだけでなく,「はじめにお読みください」「ショートカットキー」「ログ」のメッセージも,拡大率が変わります.
- boardMagnifyPercent:初期状態での拡大率で,パーセンテージで指定します.デフォルトは120です.100,120,150,200以外の値でもかまいませんが,その場合,Bを押すと100%になります.
URLからでも設定できます.boardMagnifyModeに関しては,?mg=0,?mg=1,?mg=2の3種類です.boardMagnifyPercentに関しては,?mp=200,?mp=50などです.
HTMLファイルを小さく
開発時は,src/index0.htmlとsrc/z.jsを参照し,コードを書き加えています.満足できる状態になったら,src/index0.htmlの
<script type="text/javascript" src="z.js"></script>
と書いているところに,src/z.jsの内容を取り込むようにして,新たなHTMLファイルを作り,そのファイル一つで,タイマーとして使用できるようにしています*2.
これまでは,その取り込み作業には,src/build.shという名前のシェルスクリプトを使用していましたが,入力や出力のHTMLファイルの名前を変更したいだとか,JavaScriptのコードを,可読性を損なうことなく減らしたいだとかいった俺ニーズが発生しましたので,Rubyスクリプトを作ってsrc/build.rbとし,src/build.shを削除しました.
githubからzjsの最新版を取得し,srcのディレクトリ上で,ruby build.rbを実行すると,その一つ上のディレクトリに,index.htmlが作られます.これは従来の,単純なJavaScriptファイル取り込みと同じです.
入力や出力のファイル名変更の方法は,ruby build.rb --helpで表示するようにしました.
肝心なのは,どうやってJavaScriptのコードを減らすかです.これについては-cオプションで,次のように設定できるようにしました.
- ruby build.rb -c 1とすると,インデントを詰めます.具体的には,行頭の空白4文字ごとに,空白1文字に変換します.
- ruby build.rb -c 2とすると,変数名などを縮めます.縮める対象は,「zjs」「zjs.プロパティ*3」「prop」の3つです.
- ruby build.rb -c 4とすると,「// 」から始まるコメントを取り除きます.コメントを取り除くと,空行もしくは空白文字しかない行になる場合は,行ごと取り除きます.
1,2の次が3ではなく4なのは,これらの“圧縮”オプションを足し算で*4指定できるようにするためです.例えば-c 7にすると,上記3つの処理をすべて行います.また,-c 0というのもオプションとしては有効で,意味はコード削減を一切しないということになります*5.
どのくらい減るかですが,シェルでループさせて,計算してみました.
$ for i in 0 1 2 3 4 5 6 7; do ruby build.rb -o $i.html -c $i; done $ for i in 0 1 2 3 4 5 6 7; do ruby -e "x=test(?s,'$i.html');y=test(?s,'0.html');puts'%d: %d %5.2f'%[$i,x,100.0*x/y]"; done 0: 51434 100.00 1: 44492 86.50 2: 49328 95.91 3: 42386 82.41 4: 42741 83.10 5: 36315 70.61 6: 40727 79.18 7: 34301 66.69
各行の3つの数値は順に,-cの後に書く値,生成されるHTMLファイルのバイト数,「コード縮減なしでできるファイル」に対する「生成されるHTMLファイル」のバイト数の割合(パーセンテージ)です.現在の実装では,3種類の縮減をすべて試みると,サイズはおよそ2/3になること,また,-cの後に書く数値の大きさに応じて,圧縮の度合いが高まっているとは限らない(のでヘルプの「compression level」という書き方には語弊がある)ことが,分かりました.
*1:Internet Explorerと,Lunascape+Tridentでは,200%から100%にすると,ベルの種類を変更できるプルダウンメニューの高さが変わりません.フォントサイズは100%になるのですが.
*2:さらに,githubへpushする対象のzjs.htmlでは,src/z.jsで「ringMode: null,」と定義しているところを「ringMode: 0,」に書き換え,音の鳴らないモードにしています.
*3:この形は,入力のHTMLファイルの中にも含まれています.もちろんそれらも変更しています.
*4:「ビットごとのOR演算で」という方がいいのかもしれません
*5:wakkzen.homelinux.netのデモページは,-c 7により作られたHTMLファイルを使用しています.和歌山大学サイトのほうは,従来どおりのファイルです.