WISS inc.

Dojoについて

Dojo (Dojo Toolkit)はフルスタックのJavascriptライブラリです。

AJAXに必要な基本機能からダイアログやスライドショーなどのGUIに至るまで、ほぼすべてが用意されたオールインワンライブラリです。

prototype + script.aculo.us, jQuery, YUIなどと比べて機能は豊富で、フルスタックなフレームワークと言っていいと思います。リッチテキストエディタも入っているのも特徴の１つです。

全体のモジュールサイズは大きいですが、必要な機能だけを選んで動的に利用する事ができ、パフォーマンスもかなり良いので少しずつ人気が出てきているようです。
ちょっとした欠点はというと、HTMLソースが少し汚くなる（属性でクラス定義などを拡張）ことでしょうか。そのぶんスクリプトソースが汚くならないのでトレードオフといえます。

また、Dojoと同類のものとして、Ext JS がありますが、少し重たく、複雑すぎる部分があります。しかし、GWT や Abobe AIR などにも採用されており、検討するに値しますが、どちらかというとイントラネットなど業務系システムのクライアントに向いていると思います。

Dojoはまだ日本語のドキュメントが少なく、またこのブログのような制約の中でどこまで利用可能か調査をしながら、実際に動作できるサンプルを作成していきます。

※ 使用したバージョンは、1.2です。

Dojoのインストール

簡単な３つのステップで完了です。

1.ダウンロード
http://www.dojotoolkit.org/downloadsよりダウンロードします。

2.ファイルの配置
展開したファイルを、公開するサーバー、もしくはテストするドキュメントフォルダに「/js/dojoroot」などのディレクトリで配置します。
基本的に、dojo, dijit, dojox, util すべてのフォルダを配置します。

3.動作の確認
http://yoursite.com/js/dojoroot/dijit/themes/themeTester.html にアクセスして下のような表示ができれば設置完了です。

Hello World (XHR)

core. まずは簡単なサンプルを作ってみたいと思います。

headタグでスクリプトをロードします。

<script type="text/javascript" src="/js/dojoroot/dojo/dojo.js"></script>

<input type="button" value="GET" onclick="getFunc()"/>
<script>
function getFunc() {
  dojo.xhrGet({
    url: '/readme.txt',
    load: function(response) {
      dojo.byId("box").innerHTML = response;
    }
  });
}
</script>
<div id="box" style="border:1px solid gray"></div>

RSSフィードを表示する

core. RSS2.0のフィード(XML)を非同期で取得して表示します。

<input type="button" value="GET" onclick="getFunc()"/>
<script>
function getFunc() {
  dojo.xhrGet({
    url: '/rss.xml',
    handleAs: 'xml',
    error: function(response, ioArgs){
      console.error("HTTP status code:",ioArgs.xhr.status);
      return response;
    },
    load: function(response) {
    var html = "<ul>";
    var items = dojo.query("item",response);
    for(i=0; i<items.length; i++) 
      html += "<li>"+
        dojo.query("title",items[i])[0].firstChild.nodeValue+"</li>";
    dojo.byId("box").innerHTML = html+"</ul>";
    }
  });
}
</script>
<div id="box" style="border:1px solid gray"></div>