jQuery plugin 要素を中央に移動させる (position center)

jQueryのouterHeight,outerWidthがイイ感じなので、こんなもの書いてみた。

単純に要素を画面中央に位置するようにtopとleftを設定するというものです。

• demo

DOMツリーに追加する前の状態でも使用可能なのがポイント。

(function($){
$.fn.extend({
  positionCenter: function() {
    var 
    $win = $(window),
    win = {
      h:$win.height(),
      w:$win.width(),
      st:$win.scrollTop(),
      sl:$win.scrollLeft()
    };
    
    return this.each(function(){
      var
      $t = $(this),
      to = {},
      posStyle =  $.css(this,'position');
      
      if(posStyle != 'absolute' && posStyle != 'fixed') {
        $t.css({ position:'absolute' });
        posStyle = $.css(this,'position');
      }
      
      function getOuterSize($x){
        to.h = $x.outerHeight();
        to.w = $x.outerWidth();
      }
      
      //!this.parentNode.tagName はIE対策
      if (!this.parentNode || !this.parentNode.tagName) {
        var $cln =$t.clone().hide().appendTo(document.body);
        getOuterSize($cln);
        $cln.remove();
      }else{
        getOuterSize($t);
      }
      
      var cPos = {
        top: Math.floor((win.h - to.h)/2),
        left: Math.floor((win.w - to.w)/2)
      }
      
      if (posStyle == 'absolute') {
        cPos.top += win.st;
        cPos.left += win.sl;
      }

      $t.css({
        top:cPos.top,
        left:cPos.left,
        margin:0
      });
    });
  }
});
})(jQuery);

こんな感じで使う。

$(function(){
 $("#hoge").click(function(){
  $(this).positionCenter();
 });
 
 $("#foo").click(function(){
  $("<p/>")
   .css({
    "border":"4px solid #333",
    "padding":"40px",
    "background-color":"#ccc"})
   .text("foo.")
   .positionCenter() //←まだDOMツリーに追加されていない状態で使用
   .appendTo(document.body);
 });
});

outerHeight,outerWidthのイイところは、該当要素のスタイル属性「visivblity」が hidden でも「display」が noneでも値を取得できるとこ。

これを改造してanimate でセンターまで移動させるってのもアリかな?

クロージャ(clojure) - JavascriptとC#

Javascript で一見クラスのようなオブジェクト。

function Color(r, g , b){
 this.R = r;
 this.G = g;
 this.B = b;
}

var color = new Color(255, 0 , 0);
alert(color.R); //255
color.R = 128;
alert(color.R); //128

でも、これはクロージャ。

もっと分かりやすい例を挙げる。

function InclementCounter(val){
 this.value = val;
 this.getValue = function(){
  return this.value++;
 }
}

これをもっと簡略化すると、

function InclementCounter(val){
 this.getValue = function(){
  return val++;
 }
}

こうなる。

これを使ってみる。

var ic = new InclementCounter(0);
alert(ic.getValue()); //0
alert(ic.getValue()); //1
alert(ic.getValue()); //2

渡された値(val)が保持されているのだが不可視となっている。
関数オブジェクトのインスタンスが不可視に内部変数を保持しているという動作がクロージャ。

これをC#でクラスとして書くならこんな感じ。

public class InclementCounter
{
    public InclementCounter(int val)
    {
        this.Value = val;
    }

    public int Value
    {
        get;
        protected set;
    }

    public int getValue()
    {
        return this.Value++;
    }
}

上記の Value プロパティを省略することは出来ないので上のJavascriptと全く同じように書くことは不可能。

ただ、C#でクロージャを書けないワケではない。
C# で書くならこんな感じ。

class Program
{
    static void Main()
    {
        Func<Func<int>> getInclementCounter = () =>
        {
            int n = 0;
            return () => n++;
        };

        Func<int> ic = getInclementCounter();

        Console.WriteLine(ic()); //0
        Console.WriteLine(ic()); //1
        Console.WriteLine(ic()); //2

        Console.ReadLine();
    }
}

こっちの方が分かりやすいかな?

class Program
{
    static void Main()
    {
        Func<int> ic = GetInclementCounter();

        Console.WriteLine(ic()); //0
        Console.WriteLine(ic()); //1
        Console.WriteLine(ic()); //2

        Console.ReadLine();
    }

    private static Func<int> GetInclementCounter()
    {
        int n = 0;
        return () => n++;
    }
}

ミスった。上のJavascriptと同じ動作にするならこうだった。

class Program
{
    static void Main()
    {
        Func<int, Func<int>> getInclementCounter = (int n) =>
        {
            return () => n++;
        };

        Func<int> ic = getInclementCounter(0);

        Console.WriteLine(ic()); //0
        Console.WriteLine(ic()); //1
        Console.WriteLine(ic()); //2

        Console.ReadLine();
    }
}

渡された値(n)を保持するための入れモノが無いでしょ!

最近、点で覚えてきたことが線で繋がる感覚を覚える。

color and font style tester β

HTML でフォントカラーやフォントサイズなんかを決めるときにいろいろ簡単に試してみたいこともあるかな?と思い、こんなものを作ってみた。


color and font style tester β


フォントは自身のPCにインストールされているフォントをC#で取得してJavascriptの配列に変換して持たせてただけ。

ローカルのフォントを動的に取得することが出来ればもっと良かったのだが、今回はこれぐらいで勘弁。


動作確認:

• IE7
  
• Firefox3
  
• Chrome
  

IEだと toString を呼んでくれない

自分が使いやすいように下記のようなカラー オブジェクト(クラスのようなもの)を作っていたんですが、どうも IE では toString を呼んでくれないようだ。

function Color(){
 this.initialize.apply(this, arguments);
}
Color.prototype = {
 initialize:function(arguments){
  var r = arguments.r || 0;
  var g = arguments.g || 0;
  var b = arguments.b || 0;
  var name = arguments.name || "";
  var code = arguments.code || "";
  this.R = function(){ return r; };
  this.G = function(){ return g; };
  this.B = function(){ return b; };
  this.Name = function(){ return name; };
  this.Code = function(){ return code; };
 },
 toString:function(){
  return (this.Code());
 }
}

Color.aqua = function(){
 return new Color({r:0, g:255, b:255, code:"#00ffff", name:"aqua"});
}

上の Color オブジェクトは toString を書き換えてカラーコードを返すようにしています。

で、こんな感じで使用するつもりでした。

$(function(){
 $("div").css("background-color", Color.aqua()); 
});

Firefox や Chrome ではちゃんと背景色が変わるんですが、IE では toString が呼ばれないため、結果として背景色が変わらない。

何かとウザス、IE の奴め!

Javascript のスコープ

Javascript のオブジェクトのスコープについて。

下記の例ではグローバル(ウィンドウ)スコープの "a" を取得し、表示している。

var a = "global";

function fn1() {
 alert(a); //global
}

fn1();

メソッドの中に同じ変数名の変数がある時にはまた違った動きを見せた。

var a = "global";

function fn2() {
 alert(a); //undefined
 
 var a = "local";
 alert(a); //local
 
 alert(window.a); //global
}

fn2();

予想では "global" と表示されると思われたところで "undefined" と表示された。

このことから推測すると「メソッド内で単に上から処理しているだけ」というわけではないようだ。

昔FizzBuzz問題なんてモノが流行ったようで

へ～ (-。-)y-゜゜゜

こんなモンを尺度に書ける or 書けないなんて決められてもねぇ。

じゃあ FizzBuzz 問題なんてことすら知らずにプログラム書いてた私はなんて

"ザコ"扱い?　「ザクとは違うのだよ... ザクとは」

求められるものによってコードだって変わるからね。

剰余記号は使わないとか、ワンライナーで、なんてことは既に誰かがやっていると思われ、独自に条件を課して実現してみる。

再帰とdelegateを使用して簡潔に書く

delegate void Exec(int n, Exec callback);
static void Main(string[] a)
{
    Func<int, int, bool> isFB = (x, y) => { return x % y == 0; };

    Exec exec = (int n, Exec callback) =>
    {
        Console.WriteLine(
            isFB(n, 15) ? "FizzBuzz" :
            isFB(n, 5) ? "Buzz" :
            isFB(n, 3) ? "Fizz" : n + ""
        );

        if (++n <= 100) callback(n, callback);
    };

    exec(1, exec);
}

何やってるかニュアンスが伝わりやすいかな…　と。

でも、これ書くのに2分以上かかってしまった。

ﾌｯ...　私はラルにも成りきれないのか...

Google Code でリリースされているプログラムを使わせて頂くには

Google Code でリリースされているプログラムを使うのに、必ずしもダウンロードする必要はない。
ソースを書き換える必要がないならダウンロードせずにそのまま使わせて頂きましょう。

google-code-prettyを例に説明します。

まず使用させていただくプログラム(プロジェクト)を開きます。

[Source] - [Browse] - [trunk] - [src] を選択します。

すると以下のようにファイル一覧が表示されます。
この中から必要なファイルを一つ選択します。

今回は『prettify.js』を選んでみます。
ページ右側に表示された File info の『View raw file』をクリックします。

するとプログラムのソースが表示されます。
このページのURLがイコール『prettify.js』のURLとなります。

これを以下のようにして使用させていただく、ということになります。

<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>

Bloggerのタグ クラウドを改良する

ネタとしては古いですが「そんなことはどーでもイイのだ。」

当ブログのタグ クラウドは先人様の遺産を使用させて頂いているのですが、不満な点が二つほどあったので改良しました。
元ネタは柔軟材: Labelをクラウドに、のソースです。


Javascriptで実装している人もいるようですが、Bloggerならタグ クラウドにするのにJavascriptなんて要りません。

ちなみにBloggerの場合、タグではなくラベルなんですが…　。


とりあえず、先人様のソースのままだと...

これがデフォルトの表示状態。
『Blogger』と言う文字に注目して下さい。

『Blogger』という文字をクリックすると、このように文字の大きさが変わってしまいます。

これが修正後です。
文字の大きさが変わらないようにしました。

title属性も見直す

titleも投稿数のみでさみしいので…

ラベルの文字も表示するようにしました。
投稿数が少ないと文字が小さいですから、補助的な意味合いでも良いかな?と。

改良後のTag Cloud

<b:widget id='Label1' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<span id='labelCloud'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.count > 15'>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_xl'><data:label.name/></span>
<b:else/>
<a  class='label_xl' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
<b:else/>
<b:if cond='data:label.count > 7'>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_l'><data:label.name/></span>
<b:else/>
<a  class='label_l' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
<b:else/>
<b:if cond='data:label.count > 3'>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_m'><data:label.name/></span>
<b:else/>
<a  class='label_m' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
<b:else/>
<b:if cond='data:label.count > 1'>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_s'><data:label.name/></span>
<b:else/>
<a  class='label_s' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
<b:else/>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_xs'><data:label.name/></span>
<b:else/>
<a  class='label_xs' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
</b:if></b:if></b:if></b:if>
</b:loop>
</span>
</div>
</b:includable>
</b:widget>

スタイル(CSS)

サンプル程度に。

#labelCloud span,
#labelCloud a{
  line-height:1.2em;
  padding:1px;
}

#labelCloud .label_xs  { font-size:90%; }
#labelCloud a.label_xs{ color:#808080; }
#labelCloud .label_s    { font-size:100%; }
#labelCloud a.label_s  { color:#999; }
#labelCloud .label_m  { font-size:120%; }
#labelCloud a.label_m{ color: #ccc; }
#labelCloud .label_l    { font-size : 150%; }
#labelCloud a.label_l  { color: #ddd; }
#labelCloud .label_xl  { font-size : 180%; }
#labelCloud a.label_xl{ color: #eee; }

#labelCloud a:hover{
  color: $sidebarhovertxtcolor;
  text-decoration:underline;
}

タグ付けされている数が1個のタグは表示しないようにする

タグの種類が異様に多い方におすすめ。
以下の部分をバッサリ削除すると1個だけのタグは表示されなくなります。

<b:else/>
<b:if cond='data:blog.url == data:label.url'>
<span class='label_xs'><data:label.name/></span>
<b:else/>
<a  class='label_xs' expr:href='data:label.url' expr:title='data:label.name + "(" + data:label.count + ")"'><data:label.name/></a>
</b:if>
</b:if>

応用すれば、2つ以下でも3以下でも可能です。
分からなければ聞いてくだせえぇ。

Color構造体に見るデザイン･パターン(妄想) [C#]

クラスや構造体を作成する際のお手本ともなる基本的なデザイン･パターンは身近なところにある。
例えば Color構造体。

このColor構造体を妄想を含めてその構造を見てみる。

ユーザーに直接 new させない

new させないといってももちろんインスタンスを生成できないワケではなく、インスタンス生成するより簡単な方法を提供することで、new することの必要性をなくしている。

Color 構造体の場合、そのインスタンスを生成するには通常このように行う。

Color color1 = Color.FromArgb(0, 255, 255);
Color color2 = Color.FromKnownColor(KnownColor.Cyan);
Color color3 = Color.FromName("Cyan");

これらのstaticなメソッドを使用することでより簡単にインスタンスを生成することが出来るようになっている。

staticを上手く活用する

上記に挙げたインスタンスを生成するメソッドはstatic のため、インスタンスを生成すれば不可視になる。
インスタンスにとってこれらのメソッドは不要となるため、使用側、開発側どちらにとってもありがたいものとなる。

逆にインスタンスの生成によってR,G,Bなどのプロパティが可視となる。

このように、クラス(構造体)のstaticなメンバによってそのオブジェクトの言ってみれば"インスタンス生成工場"の面を見せ、生成されたインスタンスではそれらを不可視にして、必要なプロパティを保持するという二つの面を持ち合せている。

Color構造体の妄想コード

恐らくこのようになっているだろうという単なる妄想です。
シンプルにするため大分ハショってますが「大体こんな感じでは?」というものです。

『xColor』として書いてます。

public struct xColor
{
    private struct Rgb
    {
        byte red, green, blue;

        public Rgb(byte r, byte g, byte b)
        {
            red = r; green = g; blue = b;
        }

        public byte R { get { return red; } }
        public byte G { get { return green; } }
        public byte B { get { return blue; } }
    }

    byte alpha, red, green, blue;
    string name;
    static Dictionary<KnownColor, Rgb> _rgbList = new Dictionary<KnownColor, Rgb>();

    static xColor()
    {
        _rgbList.Add(KnownColor.Cyan, new Rgb(0, 255, 255));
        _rgbList.Add(KnownColor.Yellow, new Rgb(255, 255, 0));
        _rgbList.Add(KnownColor.Magenta, new Rgb(255, 0, 255));
        _rgbList.Add(KnownColor.Control, new Rgb(204, 204, 204));

        //...
    }

    public static xColor FromArgb(int a, int r, int g, int b)
    {
        return xColorFactory((byte)a, (byte)r, (byte)g, (byte)b, string.Empty);
    }

    public static xColor FromKnownColor(KnownColor kc)
    {
        return RgbSelecter(kc);
    }

    public static xColor FromName(string name)
    {
        foreach (KnownColor c in Enum.GetValues(typeof(KnownColor)))
        {
            if(name.ToUpper() == c.ToString().ToUpper()) return RgbSelecter(c);
        }

        throw new NotSupportedException("err");
    }

    private static xColor xColorFactory(byte a, byte r, byte g, byte b, string name)
    {
        xColor xc = new xColor();
        xc.alpha = a;
        xc.red = r;
        xc.green = g;
        xc.blue = b;
        xc.name = name;
        return xc;
    }

    private static xColor RgbSelecter(KnownColor kc)
    {
        try
        {
            Rgb rgb = _rgbList[kc];
            return xColorFactory(255, rgb.R, rgb.G, rgb.B, kc.ToString());
        }
        catch (KeyNotFoundException ex)
        {
            throw new KeyNotFoundException(ex.Message);
        }
    }

    public string Name{ get { return name; }}
    public byte A{ get { return alpha; }}
    public byte R{ get { return red; }}
    public byte G{ get { return green; }}
    public byte B{ get { return blue; }}

    public static xColor Cyan { get { return RgbSelecter(KnownColor.Cyan); } }
    public static xColor Yellow { get { return RgbSelecter(KnownColor.Yellow); } }
    public static xColor Magenta { get { return RgbSelecter(KnownColor.Magenta); } }
}

これを使用した結果は擬似的に Color 構造体と同じになるよう作っているので使用例までは出さないが、もちろん Color 構造体の代わりになるワケではない。

少し言葉を付け加えるなら、
なぜ Color 構造体のプロパティにはない『Color.Control』のインスタンスを生成できるのか?

一つは KnownColor にあること。

もう一つは上記コードで言うところの『RgbSelecter』メソッドでサポートすれば可能となる話である。

以上、妄想が入り混じったお話でした。

jQueryのセレクターでRegexを使用できるようにするプラグイン

『Regex Selector for jQuery』にて、jQueryのセレクターでRegexするプラグインを投稿されていたので、どんなもんかとそちらで書かれているサンプルを全部試してみました。

id属性が『a,e,i,o,u』で始まる要素を取得します。

$(':regex(id,^[aeiou])');

class属性に半角数字が含まれている要素を取得します。

$('div:regex(class,[0-9])');

src属性に"jQuery"という文字列が含まれているscriptタグ(要素)を取得します。

$('script:regex(src,jQuery)');

コードを見ると"i"フラグを使用しているため大文字/小文字を区別しません。
ですから『jquery』、『jQuery』共に取得します。


widthが100～399pxの要素を取得します。(原文では100 - 300pxですが...)

$(':regex(css:width, ^[1-3]\\d{2}px$)');

styleで指定されたものという意味ではなく、結果として要素のwidthが100～399pxの範囲にある要素を取得します。
ブラウザによって(もちろんIEですが)widthの解釈が異なるので結果も異なります。


"display"が"block"でないdiv要素を取得します。

$('div:not(:regex(css:display, ^block$))');

『:not(expr)』を併用して"display:block"ではないdiv要素を取得しています。


img要素の中で画像の拡張子が『png』または『jpg』の要素を取得します。

$('img').each(function(){
    $(this).data('extension', $(this)[0].src.match(/\.(.{1,4})$/)[1]);
});
 
$('img:regex(data:extension, png|jpg)');

img要素のdataに拡張子を格納し、それをセレクターで拾っています。


結構使えそうな感じですね。
ちなみにこれ書いたのイギリスの18歳の方です。

Bloggerでgoogle-code-prettifyを使う

SyntaxHighlighterを使ってるんですがgoogle-code-prettifyなんてモノもあり、試しに使ってみた。

気になるところは文字コードが『Shift-JIS』なこと。

一応こんな感じで指定しといたので多分おｋ。(気休め?)

<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript' charset='Shift_JIS'/>

ここを見てもらえば分かりますが、適用するスタイルはこれだけなので、テンプレートに直接ベタ貼り or ウィジェットとして追加すれば後に自分好みに書き換えるのが簡単です。

デフォルトのまんまでイイなら

<link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css">

こいつを head タグ内に挿入して下さい。


onload時に読み込まなきゃいけないんだけど
こんな感じでタグの属性に追加するのが嫌だったんで...

<body onload='prettyPrint()'>

テンプレートにこんなん追加しました。

<script type='text/javascript'>
window.onload = prettyPrint;
</script>

こちらによると『pre』または『code』タグに『class="prettyprint"』とクラス属性を追加することで色付けされるんですが、『blockquote』じゃダメなの?と思い試しましたが...　やはりダメでした。やはりタグも指定してたか…

『<span class="nocode">fuga</span>』
とすると色付けを無視してくれます。

気付いたことは『@echo off』なら問題ないんですが、
『string dir=@"C:\mydir";』のような『@』の使い方をするとバグりますね。

<span class="nocode">@</span>

とすれば回避できます。


実際に見てみると…

しょぼ～ぃ

自分で色変えなきゃ。そのためにCSSをテンプレートにベタばりしたんだけど。

C#

static IEnumerable IteratorMethod(string[] s)
{
    for(int i = 0 ; i < s.Length; i++)
    {
        yield return s[i];
    }
}

static void Main(string[] args)
{
    string[] ternarystar = {"Gaia", "Ortega", "Mash"};
    foreach (string s in IteratorMethod(ternarystar))
    {
        Console.WriteLine(s);
        //Gaia
        //Ortega
        //Mash
    }
}

CSS

body{
 color:#999;
 font-size:90%;
 font-family:Meiryo;
}

CSSは別途jsファイルが必要でした。
必要な方はこちらからどぞ。
クラス属性に『class="prettyprint lang-css"』必須です。

Javascript

function flash(){
 $('.fuga').fadeTo('slow', 0.4,
  function(){
  $(this).fadeTo('slow', 1.0, flash);
 });
};

ついでにこっちもタグの対応しときました。
私自身(しか?)が活用してるコードを投稿用に加工したりタグで囲んだりするものなんですが、あると結構便利です。

jQuery Animate Sample

jQueryのanimateを使用してちょっと遊んでみました。

• 背景色を変更するサンプル

jQueryにはいろいろなプラグインはあるんですが、使い方を知るのも結構な手間で、サクっとできちゃうモノは自分で書いた方が早いわけで。サクッと作れるモノをアップしてみます。

jQueryで以下のようにしているだけです。

Javascript

$("#fuga").hover(function(){
    $(this).prev().stop().animate({top:"-400"},"slow");
},function(){
    $(this).prev().stop().animate({top:0},"slow");
});

HTML

<div id="Container">
    <div class="bg"></div>
    <img id="fuga" src="img.png"/>
</div>

『"#fuga"』の上にマウスカーソルがのると背景画像を動かします。
『$(this).prev()』、上記例で『.bg』が動かす要素です。


背景となる要素(.bg)のスタイル

.bg{
    position:relative;
}

動かす要素の親要素

#Container{
    position:relative;
    overflow:hidden;
}

『overflow:hidden;』ではみ出た部分は見えないようにします。


一番上になる画像を持つ要素

#fuga{
    position:absolute;
    top:0;
    left:0;
}

その他、各要素にwidth,heightの指定も必須です。

jQueryがどうと言うより、CSSの指定がポイントかもしれませんね。

『jQuery.color.js』を使うと文字色や背景色も変えられるようになるので今回併用しています。

他にも2，3個できたんで機会があればそのうちに...

AJAX Libraries API でYUIまでホスティングし始めた

Googleは代表的なAJAXライブラリをホスティングしてくれてるんですが、いつの間にかその種類が増えている。

追加されたのは二つ。

1. SWFObjectNew!
2. Yahoo! User Interface Library (YUI)New!

個人的は以下があるので使ってます。

1. jQuery
2. jQuery UI
3. Prototype
4. script_aculo_us

これ機会にYUIも一度触ってみようかな?

参考:AJAX Libraries API

YUI Compressorを使う

久しぶりに使おうとしたら使い方忘れた...
ググるのも面倒なので、ここに書いておく。

ダウンロードはここから
Download YUI Compressor

Javascriptとcss用に二つbatファイルを作成。

Javascript用

@echo off
java -jar yuicompressor[Version].jar --charset UTF-8 %1 -o min.js

CSS用

@echo off
java -jar yuicompressor[Version].jar --charset UTF-8 %1 -o min.css

D&Dするだけで『min.(js|css)』というファイルが出来上がる。

文字コードの指定は日本語でコメントなんて書いてたりするとエラーが出るので必要。

jsファイルの縮小にオプションの"-v"を加えると「こうした方が良い」みたいな情報がプロンプトに表示されるので利用した方が良いかも。

こんな感じで

@echo off
java -jar yuicompressor-2.4.2.jar --line-break 100 -v --charset UTF-8 %1 -o min.js
pause

変数名や関数名などを短く書き換えてファイルサイズを小さくしてくれるものあるが使わない方が無難。それだけで完結しているものでない限り、大概動かなくなる。