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年01月18日
JavaScriptライブラリのパフォーマンス、最速はコレだ!
http://journal.mycom.co.jp/news/2008/01/17/030/
Javascript Library Performance Test Roundup
http://jst.pbwiki.com/
まぁ、ライブラリの評価はそれぞれ特長が違いますから単純ではないのですが、ひとつの目安として役に立つと思います。
関連：【jQuery】圧縮ツールの再検証
http://jsgt.org/mt/archives/01/001876.html
2007年11月25日
jQueryシリーズ続きます
Allabout >> プログラミング >> JavaScript
他のコードとの衝突を避けるテクニック
jQueryのプラグインの話を進める前に、prototype.jsやYahoo!UI(YUI)など他のコードを併用する場合の注意点と作法をみておきます。
- ライブラリと名前の衝突
- jQueryとprototype.jsのオブジェクト構成
- jQueryのオブジェクト構成
- prototype.jsのオブジェクト構成
- jQuery.noConflict()で衝突を回避する
- noConflictによる簡単な 衝突回避サンプル
- noConflict()する前のオブジェクト構成
- noConflict()した場合のオブジェクト構成
- ネームスペースを変えるテクニック
- jQueryのみを使う(jQuery用$を使わない)
- jQueryと新しいショートカット作成($jや$hogeなど)
- DOM構築待機関数を利用したローカル処理(jQueryと関数内で$)
- Queryという名前自体を取り替える(hogeなど)
- 他のライブラリ内へ組み込む
2007年11月09日
Dojo 1.0.0 available on AOL CDN
http://dojotoolkit.org/
http://dojotoolkit.org/2007/11/05/dojo-1-0
#前から1.0な勘違いしていて見逃してました(^^;
Dojo 1.0.0 available on AOL CDN
Tue, 11/06/2007 - 00:59 — jburke
http://dojotoolkit.org/2007/11/06/dojo-1-0-0-available-aol-cdn
YUIのようにWeb上で配信する体制ができたみたい？
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script>
参考：CDN 【コンテンツデリバリネットワーク】 (Contents Delivery Network) | インターネット用語辞典. ファイルサイズの大きいデジタルコンテンツをネットワーク経由で配信するために最適化されたネットワーク
2007年10月16日
国立国会図書館デジタルアーカイブポータル（PORTA）
http://porta.ndl.go.jp/portal/dt?JSPTabContainer.setSelected=JSPTabContainer%2Fhome&last=false
まさに、開かれたデータベースとしてのWebサービスにおける保守本流がAjax化しました。と、いっても(なぜか?)割とコツコツ作っている感じで、国会図書館の古びた不思議な香りも漂わせつつ？dojoの成果も利用して、意図は明確に伝わってきます。
平成19年10月15日よりPORTAを公開しました。
PORTAでは、現在、近代デジタルライブラリー、NDL蔵書目録（和図書・和雑誌）などNDLのアーカイブやデジタルコンテンツ12種類に加え、青空文庫、国立公文書館デジタルアーカイブ、秋田県立図書館デジタルライブラリー、デジタル岡山大百科など協力機関のアーカイブ8種類、合計
約800万件のデータが検索可能です。ユーザ登録を行うと、
パーソナライズ機能や
ブックマーク機能も利用可能です。どうぞご利用ください。（動作環境：Windows/IE6.0以上 Firefox2.0以上、MAC OS/Firefox2.0以上）
*注::強調などは引用者
うひょう！
キーワードランキング
http://porta.ndl.go.jp/portal/dt?JSPTabContainer/assist.setSelected=JSPTabContainer%2Fassist%2F04keyWordLanking&last=false
#グラフもちゃんとJavaScriptで描いています。
2007年08月31日
Yojo: Loading YUI with the Dojo loader
http://dojotoolkit.org/2007/08/29/yojo-loading-yui-dojo-loader
YUIとDoJoをコラボするという話。YUIはこの点でとても使いやすいと思います。
2007年05月29日
0.4.3 released: 0.4.2 and 0.4.1 users should upgrade immediately
(0.4.3 がリリースされた: 0.4.2と0.4.1 のユーザはすぐにアップグレードさせるべきである)
http://dojotoolkit.org/
Sat, 05/26/2007 - 17:13
2006年10月30日
2006年10月05日
最近、jslbなどいじっていて、ひとつのAjaxライブラリでしか動かないのはつまらないし、いちいちライブラリ移植の手間をかけるのもめんどくさい、と感じることが増えてきたので、互換処理を試してみました。
でも、まともに書き始めると、それぞれのライブラリ毎に特徴もあって、それらをすべて互換できるようにしようとすると、それだけのことで結構大きなライブラリができてしまうこともわかりました(笑)。
で、それは、無駄というか、それをやる気は無いので、とりあえず、あるjsgt_ajaxを使った処理に限定して、いくつかのライブラリを互換させてみるというのを試しました。まぁ、普通に動きますが、並べて動作比較などしてみるといくつか新たな発見があったりして面白いです。
//=====================================================================
// ライブラリ互換処理
// jslb_ajax.jsのsendRequest、prototype.jsのAjax.Request、
// YUIのConnect.asyncRequest、Dojoのdojo.io.bindを互換させます。
// 使わないライブラリは、実装現場で最後に
// case 'ライブラリ名':から;break;までの該当するブロックを削除
// することで、このソースの軽量化が可能です。
//
use : '',//使用するライブラリ名
//使用するライブラリ名を指定します。
setUse :function(libName){
this.use=(libName=='auto')?this._autoUse():((libName)?libName:'');
},
//setUseの第一引数が'auto'時に、下記配列順に検査しライブラリを自動指定します。
_autoUse :function(){
var lib=['prototype.js','yahoo.js','dojo.js','jslb_ajax.js'];
var liboj=[window.Prototype,window.YAHOO,window.dojo,window.sendRequest];
for(var i=0;i<=liboj.length;i++){
var t=typeof liboj[i];
if(t=='object'||t=='function'){return this.use=lib[i];};
};
},
//置き換え
_sendRequest :function(callback,data,method,url,async,sload){
function mkPrams(b){
var p='';
for(var i in b){
p+='&'+encodeURIComponent(i)+'='+encodeURIComponent(b[i]);
};
return p
};
switch(this.use){
case 'prototype.js':
var op={
method:method,
parameters:mkPrams(data),
onComplete:callback,
asynchronous:async
};
url=(sload)?url+'?'+(new Date()):url;
return new Ajax.Request(url,op);
;break;
case 'dojo.js':
dojo.require("dojo.io.*");
var postContent=''
url=(sload)?url+'?'+(new Date()):url;
if(method.toLowerCase()=='get')url+mkPrams(data)
else postContent=mkPrams(data);
dojo.io.bind({
method:method,
url:url,
load: function(type,data){
callback({responseText:data})
},
sync:async,
postContent:postContent
});
;break;
case 'yahoo.js':
var postData='';
url=(sload)?url+'?'+(new Date()):url;
if(method.toLowerCase()=='get')url+mkPrams(data)
else postData=mkPrams(data);
YAHOO.util.Connect.asyncRequest(
method,url,{success:this.onloaded},postData
)
;break;
case 'jslb_ajax.js':
sendRequest(callback,data,method,url,async,sload);
;break;
}
}
2006年07月06日
2006年06月20日
2006年06月17日
【Spry,prototype.js】$()ドル関数を比較すると
【Mini AJAX,prototype.js】$()ドル関数を比較する2 、
【YUI,prototype.js】YUIの$()ドル関数的メソッドに引き続き、なりゆきということで(^^;Dojoもみてみます。
Yahoo!UIと同様に、Dojoにも$関数はありませんが、同様のメソッドがあります。dojo.byId(id, doc)です。そろそろ、飽きてきましたので(笑)詳しくはやりませんが、下記の通り、複数指定は不可です。
dojo.byId = function(id, doc){
if(id && (typeof id == "string" || id instanceof String)){
if(!doc){ doc = document; }
return doc.getElementById(id);
}
return id; // assume it's a node
}
テストしてみます。→
サンプル
#Dojoのライセンスは、 BSD License または Academic Free License v 2.1
http://dojotoolkit.org/docs/licensing.html
2006年06月02日
http://dojotoolkit.org/へ接続できない。
うちの経路おかしいのかな、、、？
2006年05月18日
Dojo 0.3.0 Now Available
http://dojotoolkit.org/
#サイトのDemoの見せ方はAjaxぽくてかなり良くなってきたと思います。
#あと「Cross-domain Ajax support and cross-domain package loading」と書いてますね。
#コメットは次のバージョン？
#ローディングが改善されてるか見ないと、、、
2006年03月13日
ロード時間シリーズになってきました(^^;。
今回は、DojoとYahooのTreeです。
厳密には、Dojo ajaxエディションでTreeを書いた場合と、YAHooのTreeをたぶん最小構成で読み込んだ場合です。
当然ながら、この場合、初回ロードは、多数機能を読み込むDojoが圧倒的に不利になりますが、最小構成の作りやすさ、と、私の環境も諸条件に含むということで、、、。でも、案外、2回目以降はDojoが健闘していることが驚きです。
Dojoは起動に1分近くかっかってしまっていますが、たとえば、アクロバットのPDFなどでも、環境にもよりますが、それくらいかかったりします。でも、そうはいっても、PDFをWebページで使う意味は、普通十分にあるわけです(Topには置きませんが、、、)。つまり、見る人にとって、アプリの中身が有用ならそれくらいは待てると。でも、一見さんは、1分待たされたら、中身を見る前に帰ってしまうでしょう。
というわけで、一見さん相手のWebページでTreeだけ使うならYahooUI、Webサービスなどでいろいろ作り込むならDojoという使い分けはあるかも。とりあえず、の話ですが。。。
ISDNでの、ほとんどdojo.js+dojo.require("dojo.widget.Tree");(ただしajaxエディションなので関連パッケージはすべて読み込まれます)場合のロード時間
http://jsgt.org/dojo/tests/loadtime_tree1.htm
1回目 load時間--57.283秒--
2回目 load時間--1.021秒--
3回目 load時間--0.751秒--
ISDNでの、tree.css+YAHOO.js+treeview.jsのみの場合のロード時間
http://jsgt.org/yui/treeview/tests/loadtime_tree1.htm
1回目 load時間--2.864秒--
2回目 load時間--0.511秒--
3回目 load時間--0.62秒--
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
