SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「Dojo道場」~実用アプリ構築のためのベストプラクティス

Dojo道場 ~ 第4回「ビルドでパフォーマンス・チューニング(3)」
XDローダー

「Dojo道場」~実用アプリ構築のためのベストプラクティス


  • このエントリーをはてなブックマークに追加

 Dojoツールキットにはソース・コードをビルドする機能が備わっており、Dojoの最も優れた機能の一つとも言われています。中規模以上のDojoベースのアプリケーション開発では欠かすことのできない必須の機能と言えます。3部構成の後編では、パフォーマンス・チューニング手段としても使えるXDローダーを紹介します。

  • このエントリーをはてなブックマークに追加

XDローダーでパフォーマンス・チューニング

 「ビルドでパフォーマンス・チューニング(2)」でも軽く触れましたが、dojoにはXDローダーと呼ばれるコードをロードする機構が提供されており、デフォルト・ローダーに代えて使用することができます。使い方次第ではパフォーマンスの向上にも役立ちます。ここではXDローダーの仕組み、特徴および使い方を説明します。

XDローダーとは

 ローダーは、dojo.require呼び出しの際、要求されたモジュールに対するコードをダウンロードし、そのコードを評価(実行)する役割を持つ機構です。dojoのデフォルト・ローダーは、dojo.require呼び出しの際、同期(sync)モードのXHR(XMLHttpRequest)呼び出しによりモジュールをロードし、評価を行います。

 ただし、XHRにはセキュリティ上の理由からメインのHTMLファイルが置かれているサーバーとしか通信できないという制約(クロスドメイン制約)があります。従って、デフォルト・ローダーではメインのHTMLファイルが置かれているサーバーとは異なる外部サーバーからコードをロードすることができません。

 これに対し、XDローダーはクロスドメイン・ローダー(Cross-domain Loader)とも呼ばれ、外部サーバーからのコードのロードを可能にするローダーです("XD"の名前は"Cross-domain"に由来します)。XHRにはクロスドメイン制約がありますが、<script>タグによるコードへのアクセスにはそのような制約がありません。そこで、XDローダーでは動的に<script>タグを生成し、<script>タグを使ってコードのロードを行います。XDローダーが内部的に利用している基本的な仕組みはリスト1のとおりです。

リスト1. XDローダーが利用する基本的な仕組み
function loadScript(/*String*/url){
    var element = document.createElement("script");
    element.type = "text/javascript";
    element.src = url;
    document.getElementsByTagName("head")[0].appendChild(element);
}

AOL CDN

 XDローダーを使えば外部サーバー上に置かれているdojoモジュールをロードできることを説明しましたが、実はローダー自体も含めたdojoシステム全体が外部サーバー上にあっても構いません。その場合は、自サイトにはメインのHTMLファイルのみがあればよいことになります。

 米AOL社がCDN(コンテンツ・デリバリー・ネットワーク)サービスの一環で、XDローダーを使うクロスドメイン・モードでビルドされたdojoをホストしており、それを使えば自分のサーバーにはdojoシステムを一切置かずにHTMLファイルを用意するだけで手軽にdojoを利用することができます。リスト2にAOL CDNを利用したdojoアプリケーションの例を示します。

リスト2. AOL CDNを利用したdojoアプリケーション例
<html>
<head>
<style type="text/css">
  @import "http://o.aolcdn.com/dojo/1.5/dojo/resources/dojo.css";
  @import "http://o.aolcdn.com/dojo/1.5/dijit/themes/tundra/tundra.css";
</style>
<script src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js"
  djConfig="parseOnLoad: true"></script>
<script language="JavaScript" type="text/javascript">
  dojo.require("dojo.parser");
  dojo.require("dijit.Calendar");
</script>
</head>
<body class="tundra">
  <div dojoType="dijit.Calendar"></div>
</body>
</html>
実行結果
実行結果

 AOLでは最新版以外にも過去にリリースされたバージョンのdojoのビルドもホストしています。また、圧縮のかかっているdojo.jsに加えて、圧縮されていないdojo.xd.js.uncompressed.jsも提供されています。詳しくはhttp://dev.aol.com/dojoを参照してください。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
XDローダーとパフォーマンス

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
「Dojo道場」~実用アプリ構築のためのベストプラクティス連載記事一覧

もっと読む

この記事の著者

神山 淑朗(カミヤマ ヨシロウ)

日本アイ・ビー・エム株式会社 ソフトウェア開発研究所に勤務。現在は主にdojoベースのwebアプリケーションの研究開発に従事。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5695 2012/01/30 11:50

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング