スキップしてメイン コンテンツに移動

今日からあなたも使える!? 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) さんです。
それでは良い終末を
以上です。

コメント

  1. なぜmofmof.jsではなく、uupaa.jsなのでしょうか?

    返信削除
  2. それは、uupaa.jsが好きだからです

    返信削除
  3. とても魅力的な記事でした!!
    また遊びに来ます!!
    ありがとうございます。。

    返信削除

コメントを投稿

このブログの人気の投稿

EFIブートローダを移動した話

EFIブートローダを移動した HX90に環境を整え終わってから、アホな事をしたので、その記録を残す。 SSD: Cドライブ SSD: Dドライブ(データストレージ用) + ESP※ SSD: Eドライブ(データストレージ用) ※ESP(EFI System Partition) インストールした時、こんな構成だった。 ESPがDドライブにあるのが気持ち悪かったので、これを削除した。 そしたら、BIOS画面が出るだけになり、Windowsが起動しなくなった。 移動手順 この時の自分はMBRをふっ飛ばした時と同じ現象だと思ったので、MBRというキーワードで検索したが、今はEFIブートローダーと呼んでいるらしい。 【Win10】任意のディスクにEFIブートローダをインストールする 色々検索した結果この記事が参考になった。 Diskpartを使って、パーティションを新たに分割し、bcdbootを実行して、無事に事なきを得た。 パーティションの分割はこんな感じ Diskpart Select volume 0 shrink desired = 200 Select disk 0 Create partition EFI size=200 Format quick fs=fat32 label="ESP" Assign letter=P exit EFIブートローダーのインストールはこんな感じ bcdboot C:\Windows /s P: /f UEFI ちなみに、自分の環境だけの問題なのだが、コマンドラインで、「\」を入力するのができなかった。我が家のキーボードはHHKBだけなので、日本語配列を無理やり適用されると、バックスラッシュが入力できないという不具合が生じる。 結局、コマンドプロンプトからマウスで範囲選択してコピーして貼り付けるという荒業でクリアした。 普通の人は、何も考えずに、\を入力すれば良い。 最終的に SSD: Cドライブ + ESP※ SSD: Dドライブ(データストレージ用) SSD: Eドライブ(データストレージ用) ※ESP(EFI System Partition) という構成に切り替えることができた。

PlemolJP導入

PlemolJP を導入した 思い立つことがあり、 PlemolJP をインストールする事にした。 自分は、PowerLine を使っているので、PlemolJP Nerd Fonts 版である、PlemolJP_NF をダウンロードしてインストールした PlemolJP の releases から、PlemolJP_NF_vx.x.x.zip をダウンロードする。 zip を展開し、PlemolJPConsoleNF-Regular.ttf をインストールする set guifont=PlemolJP_Console_NF:h18 を gvimrc に書く(フォントサイズはお好きに) ちなみに、これは Windows 限定の設定なので、Mac や Linux などで導入する際には、別の方法をオススメする。 余談 gvimrc に指定するフォント名が微妙にわかりづらい。 普段は、 set guioptions-=m してメニューバーは出していないが、今回は :set guioptions+=m を実行して、編集 → フォント設定からフォントを選び、フォント名に入力されている文字列をコピペして、スペース部分をアンダースコアで置き換えた。 この辺のルールとかに詳しい人にぜひとも教えて欲しい所。 導入した感想 今までの Powerline フォントはいまいちなのが多かったが、PlemolJP の表示は非常に良い。 今後はこちらをメインで使って行きたい。 あと、僕はヱビス派です。