わさっきhb

大学(教育研究)とか ,親馬鹿とか,和歌山とか,とか,とか.

大きく,小さく

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ファイルを使用しています.和歌山大学サイトのほうは,従来どおりのファイルです.