2008年10月05日
JavaScript Libraries John Resig-October 2008
http://www.slideshare.net/jeresig/javascript-library-overview-presentation?src=embed
上記グラフ画像は、上のJohn Resigのスライドショウの中での紹介なので我田引水分は引く必要があります。
しかし、たとえば、
自分で試してみてもprototypeやdojoという単語がもともと有名だった当該ライブラリ以外にもヒットしそうなのに比して、jQueryは、たぶん、ぶれが少ないにもかかわらず、それらをしのぐ急激な伸びになっています。
こんなふうに↓。
2008年10月03日
2008年09月06日
PacMan!
http://www.digitalinsane.com/api/yahoo/pacman/
Another YUI-based Game from Kris Cieslak: Pacman
http://yuiblog.com/blog/2008/09/02/cieslak-pacman/
古籏一浩 ( 2008年09月06日 10:27 )
MacProだと、なんか異様に速くて難しいゲームに・・・
何となく暴走パックマン（笑）
高橋 ( 2008年09月06日 11:05 )
setIntervalのspeedが90とか80になってるせい? かなぁ、、、？
GameWebが懐かしい、、、＜って、今はメンテナンスをしていないですが、自動で ( 高橋ロボが働いて ) 動作はするので今でも新規登録はあるんですよね。
(←clickで入力欄open)
2008年08月31日
Yahoo! Search for the iPhone
http://search.yahoo.com/i
Optimizing Yahoo! Search for the iPhone
http://yuiblog.com/blog/2008/08/28/ysearch-for-iphone/
YUIによるインクリメントサーチになっています。かなりがんばって最適化したらしいです。このあたりの姿勢はYahoo!の良さかなぁ。
2008年08月15日
2008年07月30日
YUI AccordionView widget
http://www.i-marco.nl/weblog/yui-accordion/
AccordionView Widget for YUI from Marco van Hylckama Vlieg
July 25, 2008
http://yuiblog.com/blog/2008/07/25/accordionview/
2008年06月04日
YUIでもやっていますが、Googleが、オンラインで各種Ajaxライブラリを提供しますというもの。
load()で一元化する方向は、GoogleMapsと同じ。
まぁ、軽く使うには便利ですが、他のサーバーに依存するのと無駄なloadingオーバーヘッドをどう考えるかですね。
Google MapsなどのオンラインWebサービスを利用する場合で、これらのAjaxライブラリを併用する時は良いかも。
現在使えるライブラリは次の通り。
- jQuery
- prototype
- script_aculo_us
- MooTools
- dojo
What is the AJAX Libraries API?
http://code.google.com/apis/ajaxlibs/
コードはこんな感じ
<script>
// Load jQuery
google.load("jquery", "1");
// on page load complete, fire off a jQuery json-p query
// against Google web search
google.setOnLoadCallback(function() {
$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",
// on search completion, process the results
function (data) {
if (data.responseDate.results &&
data.responseDate.results.length>0) {
renderResults(data.responseDate.results);
}
});
});
</script>
Developer's Guide
http://code.google.com/apis/ajaxlibs/documentation/index.htm
それぞれのloadはこんな感じ。
google.load("jquery", "1.2.3");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");
関連:
【Google Maps】Google マップ API リファレンス 日本語版とGoogle AJAX API ローダー
http://jsgt.org/mt/archives/01/001907.html
【GAF】google.load
http://jsgt.org/mt/archives/01/001596.html
2008年05月23日
Reid Burkeさんの Scrolling TabView
http://yuiblog.com/blog/2008/05/20/scrolling-tabview/
いわゆるスロールビューなんですけれど、YUIのTabViewクラスを使ったエクステンションというかアドオンというか、丁寧に拡張しています。
ScrollTabView.js
http://internal.reidburke.com/yui-addons/yodeler/widget/ScrollTabView.js
Demo クイック
http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/quick.html
Demo 水平方向
http://internal.reidburke.com/yui-addons/yodeler/examples/ScrollTabView/horizontal.html
こんな感じ。
YAHOO.namespace('yodeler.widget');
(function() {
/**
* @constructor
* @extends YAHOO.widget.TabView
* @param {HTMLElement | String | Object} el (optional) The html
* element that represents the ScrollTabView, or the attribute
* object to use.
* An element will be created if none provided.
* @param {Object} attr (optional) A key map of ScrollTabView's
* initial attributes. Ignored if first arg is attributes object.
*/
YAHOO.yodeler.widget.ScrollTabView = function (el, attr) {
YAHOO.yodeler.widget.ScrollTabView.superclass.constructor.call(this, el, attr);
}
YAHOO.lang.extend(YAHOO.yodeler.widget.ScrollTabView, YAHOO.widget.TabView);
var proto = YAHOO.yodeler.widget.ScrollTabView.prototype,
Dom = YAHOO.util.Dom;
/**
* Overrides default contentTransition with a transition
* that animates between Tab views.
*
* @method contentTransition
* @param {YAHOO.widget.Tab} newTab
* @param {YAHOO.widget.Tab} oldTab
* @return void
*/
proto.contentTransition = function(newTab, oldTab) {
(略)
/**
* Adds a Tab to the ScrollTabView.
* If no index is specified, the tab is added to the end of the tab list.
*
* @method addTab
* @param {YAHOO.widget.Tab} tab A Tab instance to add.
* @param {Integer} index The position to add the tab.
* @return void
*/
proto.addTab = function(tab, index) {
(以下略)
2008年04月29日
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などでもよく使われていますが、構造が把握しやすく便利です。
2008年03月23日
2008年02月21日
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
