Techracho

クロスドメインDojo

このエントリーをはてなブックマーク Share
2009.08.22    dojo toolkit, javascript, ネットワーク, 馬場      baba   

Dojoは、デフォルトでは読み込み元HTMLと同じサーバに置くことを前提に作られています。
具体的には、dojo.require()が、XMLHttpRequestを使ってデータを取得します。

このため、同じドメインにライブラリを設置できない場合(共有サーバで権限が無い時など)、クロスドメインの制限でdojo.require()が失敗してしまいます。
dojo.parserなどの内部でrequireを使っているため、ライブラリの読み込み時点でエラーが多発してしまいます。

この場合は、クロスドメインビルドをしたdojoライブラリ(XDomain Dojo)を使用します。

方法1: AOLを使用
お手軽に使うには、AOLのCDNを活用します。
http://dev.aol.com/dojo に書いてあるように、以下の形式でdojoライブラリを読み込むだけでOKです。

<script type=”text/javascript” src=”http://o.aolcdn.com/dojo/1.3/dojo/dojo.xd.js”></script>

この場合、dojo.requireは、デフォルトで用意されているdojo, dijit, dojoxのみ使用可能で、自前のコンポーネントは使用できません。

方法2: クロスドメインDojoのビルド
方法1はお手軽ですが、AOLのサーバが重いとか、自前で設置したいこともあると思います。
その場合、Dojoをソースからビルドします。

  1. ソースを入手
    まず、Dojoのダウンロードサイトから、ソースを取得します。dojo-release-1.3.0-src.zip のように、srcが付いているものがソースです。
    ダウンロードサイト: http://download.dojotoolkit.org/
  2. ビルド
    そして、以下のページの手順に従い、ビルドします。
    ビルドの手順: http://www.dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/package-system-and-custom-builds

    具体的には、以下のコマンドでビルドできます。(Linuxの場合)
    xdDojoPathに、Dojoライブラリを設置するディレクトリ名を記述します。テスト環境と本番環境ではURLが違うと思うので、その場合は2回ビルドする必要があります。
    パックするライブラリを変更したい場合は、profileを変更します。

    $ cd util/buildscripts
    $ build.sh profile=standard loader=xdomain xdDojoPath=http://www.bpsinc.jp/dojoxd action=release

    以上のコマンドを入力すると、ビルドが始まり、しばらくするとreleaseフォルダにXDomainビルドされたDojoが生成されます。

  3. 設置
    xdDojoPathに設定したフォルダに、dojoを設置します。
    上記の例では、DocumentRootのdojoxdフォルダに、dojo/dijit/dojox が入っている状態になります。
  4. 読み込み
    あとは、

    <script type=”text/javascript” src=”http://www.bpsinc.jp/dojoxd/dojo/dojo.xd.js”></script>

    のように読み込めばOKです。

dojoの細かいTIPS

このエントリーをはてなブックマーク Share
    CSS, HTML, dojo toolkit, javascript, 馬場      baba   

dojo使いには当たり前かもしれない、ちょっとしたTIPSです。

(1)dojo.byId
dojo.byIdは、HTMLのエレメントを渡すと、そのまま帰ってきます。
つまり、dojo.byId(dojo.byId(’hoge’)); とやっても正常に動作します。

なので、dijit等で「ノードのIDを渡す」と書かれているところに、直接エレメントを渡しても、たいてい上手く動きます。
動的に要素が増えてIDを付けにくい場合などに、ちょっと役立ちます。

(2)dojo.query
dojo.queryは、CSSのセレクタで要素を選択できる便利なものです。
この第2引数にHTMLのエレメントを渡すと、その子要素のみ検索対象になります。

var img = dojo.query('img', hogeNode)[0];

基本かつ必須な機能のはずなのに、なぜか解説サイトにあまり書いていないという。。

(3)dojox.layout.ResizeHandle
ドラッグ＆ドロップはサンプルがたくさんあるのに、リサイズはなぜか少ないですね。
dojoはリサイズも簡単なので、以下にサンプルを載せておきます。

<html>
<head>
	<script type=”text/javascript” src=”dojo/dojo.js”></script>
	<script type=”text/javascript”>
		dojo.require(’dojox.layout.ResizeHandle’);
		dojo.addOnLoad(function() {
		var handle = new dojox.layout.ResizeHandle({
		activeResize:true,
		minWidth:30,
		minHeight:30,
		targetId: ‘box’
		}, dojo.byId(’handle’));
		});
	</script>
	<link rel=”stylesheet” href=”dojox/layout/resources/ResizeHandle.css” />
</head>
<body>
	<div id=”box” style=”position:relative; background:yellow;”>
		<p>リサイズできます</p>
		<div id=”handle”></div>
	</div>
</body>
</html>

↓動作サンプル


リサイズ可能

JavaScriptでCSSのプロパティを削除する(IEでfilterがあるとClearTypeが無効になるバグ対策)

このエントリーをはてなブックマーク Share
    CSS, dojo toolkit, javascript, 馬場      baba   

javascriptからCSSを変更したい場合は、

//生
var node = document.getElementById('hoge');
node.style.marginLeft = '10px';

//dojo
dojo.style(dojo.byId('hoge'), 'marginLeft', '10px');

といった感じになります。

しかしこれだと、CSSのプロパティ自体を削除することはできません。

普段はそんな必要も無いのですが、IEにはfilterプロパティの付いた要素のその子要素でフォントのアンチエイリアス(ClearType)が効かなくなるというバグがあるので、filterプロパティ自体を削除したいことがあります。

node.styleで取得できるオブジェクトはCSSStyleDeclarationで、これにはremoveProperty()というメソッドがあるので、

node.style.removeProperty('filter');

とすれば良さそうです。

しかしIEではなぜかこれが未定義です。代わりにremoveAttributeが使えます。

なので、

var node = document.getElementById(’hoge’);
if (node.style.removeProperty) {
	node.style.removeProperty(’filter’);
}
if (node.style.removeAttribute) {
	node.style.removeAttribute(’filter’);
}

のような使い方になります。

—–具体的な使用例—–
dojoでは簡単にフェードインが使えます。
しかし、IEだと、フェードインした要素はフォントがガタガタになります。特にメイリオ等のアンチエイリアス前提フォントだと悲惨です。
以下のようにonEndを設定することで、フェードイン完了後はなめらかになります。

//fadeInを使うのであらかじめ透明度を0にする
dojo.style(dojo.byId(’hoge’), ‘opacity’, ‘0′);

(new dojo.fadeIn({
	node: ‘hoge’, //フェードインさせるノードのID
	duration: 1000, //ミリ秒
	onEnd: function() {
		var node = dojo.byId(’hoge’);
		if (node.style.removeProperty) {
			node.style.removeProperty(’filter’);
		}
		if (node.style.removeAttribute) {
			node.style.removeAttribute(’filter’);
		}
	}
})).play();

上がonEndを設定しない場合、下が設定した場合です。メイリオフォント使用。
090822_cleartype

COPYRIGHT [C] 2009 BEYOND PERSPECTIVE SOLUTIONS LTD. ALL RIGHTS RESERVED.