jQueryシリーズ続きます
Allabout >> プログラミング >> JavaScript
jQueryのセレクタ 基本フィルタ1
今回は、jQueryのセレクタで基本フィルタの1回目です。「最初の要素」「奇数要素」「○番目の要素」など手軽な検索が可能になります。
LGPLからGPLv3への議論を呼んだ変更を受け、ExtJSのライセンスは発展し続けている
作者 Nick Laiacona, 翻訳者 沼田 暁子 投稿日 2008年5月7日 午後6時40分
http://www.infoq.com/jp/news/2008/05/extjs-licensing
Ext JSのライセンスをめぐる最初の議論(source)は、Ext JS 2.1が先頃リリースされたことに端を発する。このリリースにおいてプロジェクトは、条件の緩和されたGNU劣等一般公衆利用許諾契約書（LGPL）のライセンスからGNU一般公衆利用許諾契約書 v3（GPL v3）(source)へと変更した。
バージョン2.1までは、Extは独自のライセンスである「Ext License」の下でリリースされていました。このライセンスはLGPLのライセンス規約の下で（一定の条件が満たされた場合に）利用を許諾していました。2.1より前のExtとともに配布されるCSSや画像（「資産」）にはそれぞれのライセンスがあり、そもそもオープンソースと矛盾するものでした。私達は、オープンソースコミュニティの何人かの著名なメンバーから、私達のライセンスがオープンソースプロジェクトにとって使いづらいものであるという、たくさんの否定的な意見を受け取りました。ある人たちはExtは全くオープンソースではないとさえ言いました。なぜならこれらのライセンスは、標準的なオープンソースのライセンスで提供されている自由を提供していなかったからです。私達は当初からオープンソースの会社ですので、こうした意見や懸念は致命的なものであり、この問題を解決するために努力しなければならないと感じたのです。
この初めの動きはプロジェクトの立場がオープンソースプロジェクトであることを明確にしたが、GPLに基づくライセンスを利用していない（あるいは利用できない）というプロジェクトの懸念を晴らしはしなかった。LGPLライセンス下で製品を無料で利用している、GPLライセンスが重荷となっているクローズドソースのプロジェクトからも、否定的な反響があった。今週初めに、この状況はOpenExt(サイト・英語)の形でプロジェクトの分岐を引き起こした。Ext JSのライセンスがこの分岐を許すのかどうかについて疑問がある。
既存の2.0版の分岐はLGPLの適用方法のために合法的ではない、とExtは主張しています。これは間違っていそうです。もし正しいとすれば、LGPLの名前の利用は極めて誤解を招くおそれのあるものだったのです。
#魅力的なExtだからこそ、ライセンスの変更に注目があつまるわけですが、この行方が、JavaScriptフレームワークの雌雄を決する可能性もあるという気もしないではありません。
Ext JS Open Source FAQ
http://extjs.com/products/license-faq.php
Ext JS Open Source FAQ 対訳付
YUIもjQueryもお気に入りのライブラリなんですが、YUIのブログでaddClass的な処理のチュートリアルがあって、「ああ、最近はこうだよね」と、思いつつも、ふと、試しにjQueryに書き換えてみたら、やっぱりjQueryの楽チンさが際立ちました。
ちなみにこのjQueryコードで書き換えるのに要した時間は30秒です(^^;。CSSやHTMLはまったく同じでコード部分だけが違います。＜むしろ、ブログに書くのに時間がかかりますf^^;;
Introduction to Unobtrusive JavaScript, DOM Scripting, and the Yahoo! User Interface (YUI) Library
http://2tbsp.com/node/91
Unobtrusive Rollovers Using YUI
http://yuiblog.com/blog/2008/04/28/unobtrusive-rollovers-using-yui/
このYUIサンプル
http://jsgt.org/lib/jquery/test/yui-rollover.html
YUIソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu with YUI Goodness</title>
<link rel="stylesheet"
href="yui-rollover_files/yui-rollover.css"
type="text/css" media="screen">
<script type="text/javascript"
src="yui-rollover_files/yahoo-dom-event.js"></script>
<script type="text/javascript">
// Create a menu object, put everything we need into it
var menu = {
// Initialize the menu rollover
init : function() {
// Get the btn elements
btns = YAHOO.util.Dom.getElementsByClassName('btn', 'div', 'menu');
// Assign event listeners to the btns
for (var i=0; i<btns.length; i++) {
YAHOO.util.Event.addListener(btns[i], 'mouseover', menu.roll, i);
YAHOO.util.Event.addListener(btns[i], 'mouseout', menu.roll);
}
},
// First, turn 'em all off, then turn one on
roll : function(e, i) {
YAHOO.util.Dom.removeClass(btns, 'btn-over');
YAHOO.util.Dom.addClass(btns[i], 'btn-over');
}
};
// Initialize the menu
YAHOO.util.Event.on(window, 'load', menu.init);
</script></head><body>
<div id="menu">
<div class="btn">
<a href="#">Link 1</a>
<p>Description for link 1</p>
</div>
<div class="btn">
<a href="#">Link 2</a>
<p>Description for link 2</p>
</div>
<div class="btn">
<a href="#">Link 3</a>
<p>Description for link 3</p>
</div>
</div>
</body>
</html>
試しに作ったjQueryサンプル
http://jsgt.org/lib/jquery/test/yui-rollover.html
jQueryソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu with jQuery</title>
<link rel="stylesheet"
href="jquery-rollover_files/jquery-rollover.css"
type="text/css" media="screen">
<script type="text/javascript"
src="jquery-rollover_files/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
btns = $('.btn');
btns.hover(
function(){ $(this).addClass('btn-over')},
function(){ $(this).removeClass('btn-over')}
)
})
</script></head><body>
<div id="menu">
<div class="btn">
<a href="#">Link 1</a>
<p>Description for link 1</p>
</div>
<div class="btn">
<a href="#">Link 2</a>
<p>Description for link 2</p>
</div>
<div class="btn">
<a href="#">Link 3</a>
<p>Description for link 3</p>
</div>
</div>
</body>
</html>
もちろん、こんなhoverはCSSでやれば良い(笑)と思うんですけれど、addClass/removeClassという考え方は、いろんな場面でスマートに使える良い手法で、このサンプルはその基本手法がわかりやすくて良いかなと。
たとえば、ドラッグ中のフラグや、アニメーション中のフラグをclass名に追記したり削除しながらコントロールするという使い方は、実際にjQuery UIなどでもよく使われていますが、構造が把握しやすく便利です。
Ext JS 2.1 and Ext GWT 1.0 released, preview of Ext JS 3.0
http://extjs.com/blog/2008/04/27/open-source-license-exception-for-extensions/
Ext JS Downloads
http://extjs.com/products/extjs/download.php
古籏一浩 ( 2008年04月28日 17:14 )
ExtJS 2.1のサンプル作っている最中です。
http://www.openspc2.org/reibun/ExtJS/library/2.1/index.html
日本語のドキュメントが少ないので、ちょっと辛いところもありますが。
Adobe Spryは本命ではなくて、ExtJSがフレームワークの本命の1つかなと思います。
高橋 ( 2008年04月28日 19:36 )
やはりデザインは大事ですね。ライセンスが難しげかな？と思ってましたが、そうでもないみたいで？今なにか検討しているみたいですね。
あとは、やはり少し重いかなと思うことがありますので使い方でしょうか。
古籏一浩 ( 2008年04月29日 02:08 )
少し重いというより、結構重いです。
特に最初の読み込みはどうしようもなく低速です。
なんせ読み込むサイズがでかいですから...
gzip圧縮で送りつけて展開させるという具合で高速化できるようですが、元がでかいですからね...
XML, JSONなどもほぼ区別なく使えるというか、入り口だけ修正すればよいので、データフォーマットがXML -> JSONとかになった時に修正が容易でいいかもしれません。
あと、ブラウザの非互換部分もあるので、そこも何とかして欲しいところ。単純に入れ忘れているだけでは？といったミスもありますが。
ExtJS ver 3になれば、もっと洗練されるのかなと思いますけどね。
高橋 ( 2008年04月29日 08:48 )
Dojoもそうですが、この路線はまだブラウザを含めた環境の能力が追いついていないという気がします。
jQueryなどの小さなライブラリは、実際の業務でも、作業を補完する感じで使うと、かなり便利になるんですが、フルで汎用ツールをすべてダウンロードしてから動かすタイプは、CPUメモリ回線がそれなりでないとどうしてももっさり感がでてしまいますね。
そういう場合はAIRという選択肢も良いかも？と感じはじめてます。といっても、各ライブラリもサポートしてるので区分けするものでもないかもしれませんけれど。
高橋 ( 2008年04月29日 09:16 )
ようするに、使い方次第で、プラスにもマイナスにも成り得る現況という感じかなぁ。
(←clickで入力欄open)
データに欠落があったときにグラフがそこだけ沈んでしまうので、Nullの場合はスキップしたい、というリクエストをもらったので試してみたんですけれど、返事がないので、どうしようかなぁ。。。
http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/min0-3-skip.htm
Nullだけではなくて、'undefined'や'string'の場合など'Number'以外も自動的にスキップするという方法もあるわけですけど、本実装はどうするかなぁと。。。。たとえば、デフォルトはスキップなし、Nullで明示的スキップ、autoでNumber以外全部スキップとか？
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
