スライド1: 2 分でわかる uupaa.js~ Build & Minify ~uupaa.js@gmail.com
スライド2: いきなりですが
スライド3: 実は uupaa.js というファイルはありませんビルドしてください
スライド4: [ ビルドのメリット ]使わない機能をはずせるモバイル用にコード削減assert() とかとか
スライド5: [ ビルドのデメリット ]すぐ試せない
スライド6: ビルド環境の整備は、開発者なら 5 分ぐらいで OK
スライド7: 今は、こんな機能がある• View– CSS 2.1, CSS 3(opacity, border-radius, Multiple BG, ...)• Struct– Node(Builder), HTML5, Layer• Action– Event, Ajax, Tween(Anim), UI(Slider, Tab, ...)• Data– Storage(Cookie), Codec(MD5, LZW), Color, CSS Parser• JavaScript++– ECMAScript 5 th , CSS3 Selector, <canvas>, Unit Test
スライド8: もちろん、これ以外の機能もどんどん増えるよ
スライド9: まず、ビルド環境の構築
スライド10: と。その前にPHP をインストールしたり• windows なら XAMPP を c:\xamppにインストールするとか• Ubunto なら$ sudo apt-get update$ sudo apt-get install php5-cli
スライド11: パスを通したり、.NET や Java ランタイムのインストールが必要かも• windows なら 環境変数 Path にC:\xampp\php; を追加するとか
スライド12: uupaa.js project から最新の zip ファイルをダウンロードし解凍( 最新版は Version 0.7)
スライド13: DOS 窓 or ターミナル でbuild/ に移動• windows + XAMPP 環境ならC:\xampp\htdocs\js\uupaa\0.7\build\とか
スライド14: minifier.zip をダウンロード , 解凍したlib.g.jar, lib.m.exe, lib.y.jarファイルを build/ に移動
スライド15: • 0.7/– uu.js展開後のディレクトリ構成– uu...– build/• #core.pkg• #full.pkg• b.bat ← windows 用ショートカット• b.php ← ビルドコマンド本体パッケージの読み込みと結合• lib.g.jar ← Google Closure Compiler• lib.m.exe ← Microsoft Ajax Minifier• lib.y.jar ← YUI Compressor
スライド16: ビルド方法
スライド17: • cd buildWindows なら• > b– フルパッケージでビルド• ../uupaa.js と• ./mini.full.y.js が生成される• > b core -g– uu.js (Core 機能 ) のみをビルド• ../uupaa.js と• ./mini.core.g.js が生成される
スライド18: • cd buildLinux なら• > php –f b.php– フルパッケージでビルド• ../uupaa.js と• ./mini.full.y.js が生成される• > php –f b.php core -g– uu.js (Core 機能 ) のみをビルド• ../uupaa.js と• ./mini.core.g.js が生成される
スライド19: • 0.7/– uu.js> b core -g 実行後の様子– uu...– uupaa.js ← Debug 用 ( 結合 + コメント除去 )– build/• #...pkg• b.bat• b.php• lib...• mini.core.g.js ← デプロイ用 ( 名前変更は各自で )
スライド20: ビルド コマンド• > b [ パッケージ ] [-y | -g | -m | -j][-out outfile] [-mb] [-debug]– パッケージとコンプレッサの指定は省略可能• デフォルトパッケージは full• デフォルトコンプレッサは y– パッケージの実体は、 build / #package.pkg– -g は Google Closure Compiler で Minify– -y は Microsoft Ajax Minifier で Minify– -m は YUI Compressor で Minify (Windows Only)– -j はファイルの結合のみで Minify しない
スライド21: ビルド コマンド ( -mb )-mb は {{{!mb から }}}!mb までのコードブロックを削除して → ビルド例 : > b core –y -mbvar a = 1 + 2;//{{{!mb IE onlyif (uu.ie) {...}//}}}!mbc = a * 2;// 0.7/uupaa.jsvar a = 1 + 2;c = a * 2;// 0.7/mini.core.y.mb.jsvar a=1+2;c=a*2
スライド22: ビルド コマンド ( -debug )-debug は {{{!debug から }}}!debug までのコードブロックを残して → ビルド例 : > b core –y -debugvar a = 1 + 2;//{{{!debugif (a >= 3) {throw new Error();}//}}}!debugc = a * 2;// 0.7/uupaa.jsvar a = 1 + 2;if (a >= 3) {throw new Error();}c = a * 2;// 0.7/mini.core.y.debug.jsvar a=1+2;if(a >= 3){throw new Error();}c=a*2
スライド23: 1| uu.jsパッケージファイル書式2| uu.str.js3| uu.node.js4| // uu.color.js comment line– 先頭が // で始まる行や空行はコメント– /* ... */ や #... はエラー ( コメント扱いしない )
スライド24: 初期パッケージ一覧 (1/2)• #core.pkg– USE: 機能評価– FILES: uu.js のみ• #full.pkg– USE: 先進的な Web ページ (HTML5, CSS3)– FILES: 全ファイル• #ajax.pkg– USE: Web2.0 な Web ページ (HTML4, CSS2.1)– FILES: uu.js, uu.str.js, uu.color.js, uu.css.js, uu.node.js,uu.ev.js, uu.img.js, uu.tween.js, uu.query.js, uu.ajax.js,uu.storage.js
スライド25: 初期パッケージ一覧 (2/2)• #canvasmini.pkg– USE: <canvas> を用いた先進的な Web ページやExplorerCanvas の置き換えなど– FILES: uu.js, uu.color.js, uu.img.js, uu.css.js, uu.canvas.js,uu.canvas.sl.js, uu.canvas.vml.js, uu.canvas.extend.js• #canvas.pkg– USE: <canvas> と Layer,ゲーム や 非 Flash な Web ページなど– FILES: #canvasmini.pkg + uu.layer.js
スライド26: ファイル名と機能の対応
スライド27: Core (1/3)• uu.jsuu.ver, uu.ie, uu.gecko - Browser and Version detectoruu.mix, uu.arg, uu.hash.* - Hash operatoruu.ary.*, uu.each - Array operator and iteratoruu.ajax.* - Ajax handleruu.jsonp - JSONP handleruu.attr.*, uu.klass.* - Attr and ClassName operatoruu.node.*, uu.div ... - Node accessor and Node builderuu.id, uu.tag, uu.klass - Node selectoruu.Class.*, uu.factory - Class I/F, Factoryuu.msg, uu.ev.* - Message Pump, Event handleruu.ready.* - DOMContentLoded, window.onload handler
スライド28: Core (2/3)• uu.jsuu.fix, uu.trim.*, uu.split.* - String operatoruu.fmt, uu.puff - sprintf, alert + sprintfuu.esc, uu.unesc - <"&"> ⇔ <"&">uu.ucs2, uu.unucs2 - "\\u0073" ⇔ "s"uu.date2str, uu.str2date - ISO8601 or RFC1123 ⇔ dateuu.str2json, - String to JSONuu.mix2json, uu. json2mix - Mix ⇔ JSONuu.type, uu.NUM, uu.DATE, ... - Type detectoruu.jam - Nodeset I/Fuu.text.*, uu.val.*, uu.config, uu.exp - Other FunctionsHTMLElement.prototype.* - innerText, outerHTML(for Gecko)
スライド29: Core (3/3)• uu.js (ECMAScript-262 5 th )Array.isArrayArray.prototype.* - indexOf, lastIndexOf, every, some,forEach, map, fliter, reduce,reduceRightBoolean.prototype.* - toJSONDate.prototype.* - toJSON, toISOStringFunction.prototype.* - bindNumber.prototype.* - toJSONString.prototype.* - toJSON, trim
スライド30: <canvas>• uu.canvas.jsuu.canvas.* - Canvas builder and operator• uu.canvas.sl.js– Silverlight 用の実装• uu.canvas.vml.js– VML 用の実装• uu.canvas.extend.js– Opera9.x, Opera10, Firefox3, Safari3.x, Chrome 用の実装uu.canvas.*.js は uu.js, uu.color.js, uu.css.js, uu.img.js に依存している
スライド31: • uu.codec.jsCodec, Base64, MD5uu.codec.hex - Hex Codecuu.codec.ucs2 - UCS2(UNICODE) Codecuu.codec.base64 - Base64 Codecuu.codec.datauri - DataURI Codec• uu.codec.lzw.jsuu.codec.lzw.* - LZW Codec• uu.codec.md5.jsuu.codec.md5.* - MD5 Codecuu.codec.*.js は uu.js に依存している
スライド32: Color• uu.color.jsuu.color.* - Color operator and dictionary• uu.color.famicom.js– FAMICOM(R) Named Color• uu.color.cud.js– CUD Named Coloruu.color.*.js は uu.js に依存している
スライド33: CSS 2.1 / StyleSheet /CSS Parser / CSS Validator• uu.css.jsuu.css.* - CSS 2.1 and StyleSheet operatoruu.Class.CSSRule - StyleSheet manage class• uu.css.parse.jsuu.css.* - CSS 2.1 / CSS3 Parser• uu.css.validate.jsuu.css.validate.* - CSS 2.1 / CSS3 Validatoruu.css.*.js は uu.js, uu.color.js, uu.str.js, uu.tween.js に依存している
スライド34: CSS 3 / IE Boost• uu.css3.jsuu.css3.* - CSS 3 operatoruu.Class.CSSRule - StyleSheet manage class• uu.css3.fixie.jsuu.css3.fixie.* - position: fixed, alpha-png, display: table,max-width: 100px• uu.css3.boxeffect.jsuu.css3.boxeffect.* - text-shadow, box-shadow,box-reflect, border-radius,Multiplue BGuu.css3.*.js は uu.js, uu.css.*.js, uu.query.js, uu.canvas.*.js,uu.layer.js, uu.ajax.js に依存している
スライド35: Event• uu.ev.jsuu.ev.* - more, fire, times, hover, dragbase• uu.ev.drag.jsuu.Class.Drag - Generic Drag and Drop manage classuu.Class.Draggable - Limited Drag and Drop manage classuu.Class.Sortable - Sortable Drag and Drop manage classuu.Class.ZIndex - z-index manage classuu.Class.Shim - IE6 bugfix• uu.ev.resize.jsuu.ev.resize.* - Window Resize Event handeruu.ev.*.js は uu.js, uu.css.js に依存している
スライド36: Image• uu.img.jsuu.img.* - Image loader, Actual dimensionuu.img.js は uu.js に依存している
スライド37: Layer• uu.layer.jsuu.layer.* - Layer factorylayer.* - Layer operatoruu.layer.js は uu.js, uu.css.js, uu.canvas.js に依存している
スライド38: Node ++• uu.node.jsuu.svg - SVG Elemenet creatoruu.flash - Flash Object loaderuu.xpath - XPath Stringuu.node.* - Extend Node operatoruu.node.data.* - Node Data operatoruu.node.js は uu.js に依存している
スライド39: CSS3 Selector• uu.query.jsuu.query.* - CSS3 selector• uu.query.compat.jsuu.query.filters.* - jQuery selectoruu.query.*.js は uu.js に依存している
スライド40: Storage• uu.storage.jsuu.cookie.* - Cookie handleruu.storage.js は uu.js に依存している
スライド41: String ++• uu.str.jsuu.split.token - CSS Shorthand property spliteruu.str.js は uu.js に依存している
スライド42: • uu.test.jsuu.test - Unit TestUnit Testuu.test.js は uu.js に依存している
スライド43: Tween• uu.tween.jsuu.tween.* - Tween handler and operatoruu.tween.js は uu.js, uu.color.js, uu.css.js に依存している
スライド44: URL• uu.url.jsuu.url.* - URL operatoruu.qs.* - QueryString operatoruu.url.js は uu.js に依存している
スライド45: • uup.ui.tab.js• uup.ui.slider.jsUI Pluginuup.ui.*.js は uu.js, uu.css.js, uu.node.js, uu.query.js,uu.tween.js, uu.jam.blue.js 等に依存している
スライド46: おまけ
スライド47: Microsoft Ajax Minifier の アレコレ• コンパイルが速い ( エラーチェックのお供に )• Hash 末尾の余計なカンマ { a: 1, } を検出– IE で遭遇する分かりにくいエラー原因の1つ• 無作法を検出– if 文内での代入 if ( a = b) {} や、 for, if の {} 省略– 未使用関数 / 変数 , 多重宣言 , 予約語のチェック– uupaa.js 0.7 は警告 1 ~ 20 個ぐらい ( 実害無し )• 出力される警告は静的な解析に基づいているので、動的に解決されるスコープや関数に関しては警告が出やすい。• jQuery 1.3.2 は警告 300 個• ハイパークランチモードはスコープをいじる– 危うい。手動で行った最適化も阻害されるかも
スライド48: リンク• uupaa.js project–http://code.google.com/p/uupaa-js/• minifier.zip– http://pigs.sourceforge.jp/uupaa/0.7/build/minifier.zip
スライド49: そろそろ 2 分
スライド50: おしまい
Copyright OpenType Corporation All Rights Reserved. 
