YUI
最近ただの私的日記に成り下がっているので、久々にプログラムネタを。
一般ユーザー向けのサイトはエンタープライズウェブアプリケーションに比べて見た目や操作性といったデザインが優れている傾向にある(と思う)。エンタープライズアプリケーションを作成している場合、ついついビジネスロジックに注力してしまい、デザインがおろそかになってしまう。というのは自分の経験談。
世の中に目を向けてみれば、ここ2〜3年でjavascriptのライブラリが本当に充実してきたので昔に比べればかなり低コストでデザインを向上させることができるはず。まずはYahoo User Interfaceをベースに勉強してみよう。
ちなみにここにjavascriptライブラリがきれいにまとめられています。
とはいえ、YUI膨大。。。早速挫折しそうだ。全部やろうとせずに、即効性のあるものだけをピックアップしていく。
まずはyahoo.jsに納められている超基本的な機能から。
YAHOO.lang
javascriptの便利機能が提供されています。サンプル
いちいち書くのは面倒なので早速サボりますが(汗)。
javaでいうところのStringUtilsと似た感じの機能があるようなので、こういうのはしっかり抑えておいた方がいい。
YAHOO.namespace
ネームスペースという機能がある。javaでいうパッケージみたいなものと理解しています。あとグローバルオブジェクトになるのを簡単に防止するためでもあるでしょう。以下はSomeClassという同名のオブジェクトを異なるネームスペースで宣言している例。
YAHOO.namespace("sample1"); YAHOO.namespace("sample2"); YAHOO.sample1.SomeClass = function(){}; YAHOO.sample2.SomeClass = function(){}; var s1 = new YAHOO.sample1.SomeClass(); var s2 = new YAHOO.sample2.SomeClass();
あと、YUIを使ってプログラミングする時の決まりごととして、namespaceを宣言する必要がたまにあるみたい。
例えばYUIのカレンダーを利用する時は以下のような感じ。当然ネームスペース名は任意ですが。
YAHOO.namespace("example.calendar"); YAHOO.example.calendar.init = function() { YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","callContainer"); YAHOO.example.calendar.cal1.render(); }