今日からあなたも使える！？ uupaa.js入門！

前書き

JavaScript Advent Calendar 2011(フレームワークコース) 8日目担当 ArcCosineです。
JavaScriptのフレームワークは数多く存在しますが、国内産で優秀な機能を持つuupaa.js(Ver0.8)についての解説もどきを書きたいと思います。
本エントリでは最後のTipsにHTML5のCanvasを用いているため、IEでは正常に表示できない可能性がありますが、仕様ですのでご了承ください
OperaかGoogle ChromeかFirefoxかSafariでの閲覧を強くおすすめします。
excanvas.js?(∩ ﾟдﾟ)アーアーきこえなーい

uupaa.jsとは

uupaa.jsは、uupaaさん(Webサイト:latest log)が作成されたJavaScriptのフレームワークです。
uupaa.jsの特徴は幅広いブラウザをサポートしつつ、最新の機能で差異のある部分を美味しく吸収してくれ、尚且つjQueryやprototypeよりも高速という点を上げることができます。
さらに、無駄を省き、エレガントな表現が出来るように色々と拡張が施されているのも特徴の一つです。
導入実績はよく知らないのですが、uuCanvas.jsがgooの歌詞サービスで使用されています。
(サンプル：夏色 ゆず 歌詞情報 - goo 音楽)
なお、このページはJSで右クリック死ね死ね処理をしているので、ハックしてやろうとか思わないほうが懸命です。

なにはともあれ使ってみる

uupaa.jsはgooglecodeで公開されていますので、そこから直接チェックアウトしましょう。
svnコマンドが搭載されていましたら、

svn co http://uupaa-js.googlecode.com/svn/trunk/0.8/

でソースを手元にチェックアウトできます。
TortoiseSVNがある方はそちらを使ってみてください。

uupaa.jsをビルドする

uupaa.jsはビルドして使います。これが少しハードルを上げているかもしれませんが、実はめっちゃ簡単です。
ビルドにはPHP、Java Runtime、.NET Framework が必要です。
PHPのインストールはXAMPPが一番手っ取り早いかもしれません。
その他は、公式サイトから普通に落とせば問題なく使えると思います。
build手順ですが、buildディレクトリに移動してdos.batを実行し、以下のコマンドを叩けばuupaa.jsをビルドできます

upa

この場合、全部いりのuupaa.jsが出来上がります。
場所は/js/以下に未圧縮版のcatfood.jsと圧縮版のuupaa.jsの2つが生成されます。
テストするときは、catfood.jsを使うならばデバッグしやすいかもしれません。
詳細は、公式ドキュメントを御覧ください
BuildTool - uupaa-js - build/upa.php はプリプロセスとMinifyを施し最適化された.jsファイルを生成します - JavaScript Library for Casual Creator

ビルドが……、ビルドが面倒です、安西先生……

はい。そんな方は直接code.google.comのスクリプトを読み込みましょう。
以下のコードをHTMLの中に適当に差し込みましょう

<script src="http://uupaa-js.googlecode.com/svn/trunk/0.8/src/uupaa.js" type="text/javascript"></script>

やったね、あーくちゃん！uupaa.jsが簡単に使えるよっ。
おいやめろ

実際に動かしてみる

今回は以下の3つを簡単なコードで実験してみたいと思います。

• DOMを生成する
• Styleを変えてみる
• hoverイベントを簡単に

どれも、jQueryや普通のJavaScriptでも出来ることですが、uupaa.jsだとこう書けるよ！って感動を皆様にお伝えしたいと思います

DOMを生成する

では、まずDOMを生成してみましょう。

よくあるJavaScriptの書き方

//entry point
document.addEventListener("DOMContentLoaded",  init, false );

//initialize
function init(){
 domNormal();
}

function domNormal(){
 var dom = document.getElementById("dom");
 var ul = document.createElement("ul");
 var li1  = document.createElement("li");
 li1.appendChild(document.createTextNode("list1"));
 var li2  = document.createElement("li");
 li2.appendChild(document.createTextNode("list2"));

 ul.appendChild(li1);
 ul.appendChild(li2);

 dom.appendChild(ul);

 var btn = document.createElement("input");
 btn.setAttribute("type","button");
 btn.setAttribute("value","Click");
 btn.addEventListener("click", function(){
  var res = document.getElementById("result");
  res.innerHTML = "Hello, Normal DOM World!";
 },false);
 //I'm very tired...

 dom.appendChild(btn);
}

うんざりする長さですね。
これをuupaa.jsで書くとこんなに短くなります。

スマートなuupaa.js

uu.ready(function(uu){
 var nodeArray = [
  uu.ul(
   uu.li("list1"),
   uu.li("list2")
  ),
  uu.click( uu.input({type:"button",value:"Click"}), function(){
   uu.id("result").innerHTML = "Hello, uupaa DOM World!";
  })
 ];
 uu.add( nodeArray,uu.id("dom"));

});

なんという事でしょう。あれほど長かったコードがこんなに短く！！
nodeArrayで生成する順番を書くというトリッキーな書き方が良いですね！
また、見て分かるように、uuオブジェクトはDOMを返してくれるので、appendChildとかinnerHTMLを使いたいな、と思った時に思考停止で使える点が他のライブラリ(主にjQuery)と違います

実際に動くコードです

スタイルを変えてみる

では、次に簡単にスタイルを変えてみましょう。

よくあるJavaScriptの書き方

//entry point
document.addEventListener("DOMContentLoaded",  init, false );
//initialize
function init(){
 domStyle();
}

function domStyle(){
 var styles = document.getElementById("styles");

 var btn = document.createElement("input");
 btn.setAttribute("type","button");
 btn.setAttribute("value","CSS");
 btn.addEventListener("click", function(){
  var styles = document.getElementById("styles");
  styles.style.margin = "10px";
  styles.style.padding = "25px";
  styles.style.border= "3px solid #fcc";
  styles.style.width = "50px";
  styles.style.height = "50px";
  styles.style.backgroundColor = "#ccf";
 },false);

 styles.appendChild(btn);

}

やっぱり、長くて見づらいという特徴がありますね。
uupaa.jsを使ってもっと楽をしましょう！

スマートなuupaa.js

uu.ready(function(uu){
 uu.add( uu.click( uu.input({type:"button",value:"CSS"}), function(){
   uu.css( uu.id('styles'),{
    m: 10,
    p:25,
    b: '3px solid #fcc',
    w: 50,
    h: 50,
    'background-color': '#ccf'
   });
  }), uu.id('styles')
 );
});

一瞬なんじゃこりゃああ？！と叫ぶ方がいらっしゃるかもしれませんが、実はuupaa.jsは内部的に隠しプロパティを持っています。
今回のケェスですと、marginはmにpaddingはpと省略することが出来るんですね。
他のプロパティについても知りたい方はuucssfix.dbって文字列を探すと幸せになるかもしれません

実際に動くコードはこちらです。

hoverイベントを簡単に

hoverって真面目に実装すると面倒なんですよね。
mouseout、mouseenterイベントをチェックして、さらに親要素から出てきたのか、子要素から出てきたのかなど厳密なチェックが必要だったりします。
jQueryでも似たように.hoverというイベントがありますが、uupaa.jsの場合は、uu.event.hoverでその処理を行なっています。
コードを見ていただくと分かるのですが、hoverイベント処理の第二引数で「enter」状態をチェックします。jQueryよりもfunctionの数が減り、本当に必要な分だけのコーディングで済むってのが素敵ですね。

uu.ready(function(uu){
 var canvas = uu.canvas(width = 768,height = 128);
 canvas.id = "uucan";
 function renderImages(ctx)
 {
  var icons = ["001_blogger.png","002_facebook.png","003_heart.png","004_mail.png","005_rss.png","006_twitter.png","007_wordpress.png"];
  for( var i = 0,len = icons.length; i<len; i++ )
  {
   var one = icons[i];
   var img = new Image();
   (function(pos){
    img.onload = function(){
     ctx.drawImage( this, pos*128, 0, 128, 128);
    }
   })(i);
   img.src = "icons/" + one;
  }
 }
 var ctx = canvas.getContext('2d');
 renderImages(ctx);

 uu.add( canvas, uu.id("canvas") );
 uu.event.hover( canvas,  function(evt,enter){
  var alpha = 1.0;
  if( enter ){
   alpha = 0.1;
  }
  var ca = document.getElementById("uucan");
  var ctx = ca.getContext('2d');
  ctx.globalAlpha  =  alpha;
  ctx.clearRect(0,0,768,128);
  renderImages(ctx);
 });
})

実際に動くコードはこちらです。hoverすると画像が半透明になります。

最後に

uupaa.js使ったのはめちゃくちゃ久しぶりでしたが、改めてその機能の素晴らしさを実感しました。
uupaaさんは日本を代表するJavaScripterの一人である事に間違いありません。
JavaScript使いの方は是非是非uupaa.jsを使ってuupaa.jsSUGEEEEEEEEEEEE!!!!!!!!!!!を体験してみてください！
明日は、taiju (id:jdg) さんです。
それでは良い終末を
以上です。