« 2007年3月 | トップページ | 2007年5月 »

2007年4月の12件の記事

2007年4月30日 (月)

RPC呼び出し

dojo.io.bindを用いるのではなく、dojo.rpc.JsonServiceを用いることで、JSONで提供されるサービスをRPCのようなAPIにより呼び出すことができる。内部的にはdojo.io.bindを用いている。

RPC呼び出しを用いるときは、Simple Method Description (SMD)と呼ばれるRPC呼び出しの定義を記述したファイルを作成する。SMDファイルは以下のようにJSON形式で記述する。

SMDファイルの形式では、serviceTypeは"JSON-RPC"を指定する。serviceURLは呼び出し先のURLを指定する。methodsには、各メソッド名とパラメータ名、パラメータの型を指定する。 

{
  "serviceType": "JSON-RPC", 
  "serviceURL": "rpcProcessor.php", 
  "methods":[ 
    {
      "name": "add", 
      "parameters":[
        {"name": "x", "type":"STRING"},
        {"name": "y"}  
      ]
    },
    {
      "name": "subtract", 
      "parameters":[
        {"name": "x"},
        {"name": "y"}  
      ]
    }
  ]
}

RPC呼び出しを実行するときは、まず作成したSMDファイルを指定して、dojo.rpc.JsonServiceをインスタンス化する。 

var myObject = new dojo.rpc.JsonService("http://localhost/definition.smd");

SMDファイルを作らずに、JSONオブジェクトを直接渡してJsonServiceをインスタンス化することもできる。JSONオブジェクトを直接渡すときは、smdObjの値としてJSONオブジェクト(以下の例ではjsonSmdDefinition)を指定した値を渡す。 

var myObject = new dojo.rpc.JsonService({smdObj: jsonSmdDefinition});

JsonServiceをインスタンス化した後は、作成したオブジェクトに対してメソッド呼び出しを実行する。呼び出すだけでなく、結果を受け取るにはaddCallbackメソッドを用いて、コールバック関数を指定する。コールバック関数で指定したfunctionでは、引数として呼び出し結果を受け取ることができる。 

var myObject = new dojo.rpc.JsonService("http://localhost/definition.smd");
var myDeferred = myObject.add(3,5).addCallback(myCallbackMethod);

addCallbacksを用いことで、コールバック関数だけでなく、エラー時に呼び出す関数も指定できる。 

var myObject = new dojo.rpc.JsonService("http://localhost/definition.smd");
var myDeferred = myObject.add(3,5).addCallbacks(myCallbackMethod, errCallbackMethod);

2007年4月30日 (月) Dojo | | コメント (0) | トラックバック (0)

クロスドメイン呼び出し

Dojoでは、異なるドメインのサービスをブラウザから直接呼び出する方法として、scriptタグによる方法(ScriptSrcTransport)とIFrame(XhrIframeProxy)による方法の２つを提供している。

ScriptSrcTransport

scriptタグを用いてJavaScript/JSONサービスを呼び出すことで、異なるドメインのサービスをブラウザから直接呼び出すことができる。

scriptタグを用いて呼び出すときも、dojo.io.bindを用いる。transportプロパティとしてScriptSrcTransportを指定する点が異なる。scriptタグによる呼び出しの最も簡単な例を以下に示す。 

dojo.require("dojo.io.ScriptSrcIO");

dojo.io.bind({
  url: "http://the.script.url/goes/here",
  transport: "ScriptSrcTransport"
});

上記の例では、呼び出しが完了したことを知ることができない。呼び出すサービスのレスポンスメッセージにJavaScriptの変数が含まれるときは、その変数が定義されるのを待って、通知を受けることができる。

レスポンスメッセージに含まれるJavaScriptの変数をcheckStringパラメータの値として指定する。以下の例では、変数fooが定義されたら(typeof(foo) != undefinedとなったら)、loadパラメータで指定したFunctionが呼び出される。 

dojo.io.bind({
  url: "http://the.script.url/goes/here",
  transport: "ScriptSrcTransport",
  checkString: "foo", 
  load: function(type, data, event, kwArgs) { alert(data);},
  error: function(type, data, event, kwArgs) { alert(data.message);},
  timeout: function() { /* Called if there is a timeout */},
  timeoutSeconds: 10
});

JSONP形式のcallback関数名を指定できるサービスのときは、jsonParamNameパラメータとしてcallback関数名を指定するパラメータ名を指定することで、呼び出しが完了した通知を受けることができる。また、mimetypeには"application/json"を指定する。

DojoのJSONP対応のAPIを利用するには、callback関数名を指定できるようになっている必要がある。callback関数名を指定するパラメータ名をjsonParamNameに指定する。

以下の例では、 livedoor クリップのJSONPによるAPIを使っている。 

dojo.require("dojo.io.ScriptSrcIO");

dojo.io.bind({
  url: 'http://api.clip.livedoor.com/json/clips',
  content: {livedoor_id: "staff_clip", limit: 10}, 
  transport: "ScriptSrcTransport",
  jsonParamName: "callback",
  method: "get", 
  mimetype: "application/json",
  load: function(type, data, event) {
    var output = dojo.byId('output');
    output.innerHTML+="タイトル："+data.title+"<br />";
    for(i=0; i<data.clips.length; i++){
      output.innerHTML+="<br />";
      output.innerHTML+="<a href='"+data.clips[i].link+"'>"+data.clips[i].title+"</a>";
    }
  }
});

XhrIframeProxy

dojo.io.XhrIframeProxyを用いることで、JSONPではないクロスドメインのサービスを呼び出すことができる。 XhrIframeProxyはサービスと同じドメインにIFrameを配置し、配置したIFrameからサービス呼び出ししている。

XhrIframeProxyを使うときは、dojo.require("dojo.io.XhrIframeProxy")を追加する。

dojo.io.bindのiframeProxyUrlパラメータの値として、サービスが提供されているドメインと同じドメインの場所に置いたxip_server.htmlファイルの場所をdojo.io.bindの引数に追加する。xip_server.htmlはsrc/io/xip_server.htmlに置かれているので、このファイルをコピーして、サービスと同じドメイン内に置く必要がある。

また、xip_server.htmlと同じフォルダにisAllowed.jsを作成して、リクエストごとにサービス呼び出しを許可するかどうか判別する必要がある。isAllowed.jsには、isAllowedRequest(request)メソッドを実装する。以下 にisAllowed.jsの例を示す。 

function isAllowedRequest(request){
/* Decide if you want to allow the request. Return true or false */
  return true;
}

以下にXhrIframeProxyの呼び出し例を示す。 

dojo.require("dojo.io.XhrIframeProxy");

function init(){
  dojo.io.bind({
    iframeProxyUrl: "http://ymdmstk.cocolog-nifty.com/src/xip_server.html",
    url: "http://ymdmstk.cocolog-nifty.com/sample/sample.txt",
    mimetype: "text/plain",
    load: function(type, data, evt){
      dojo.debug(data);
    }
  });
}

XhrIframeProxyでは、非同期リクエストのみがサポートされる(sync:trueは無効となる)。

2007年4月30日 (月) Dojo | | コメント (0) | トラックバック (0)

パラメータ指定

パラメータを指定してAjaxの呼び出しをする場合、一番シンプルな方法は、URLの後ろに文字列としてパラメータを指定する方法である。 

dojo.io.bind({
  url: "http://ymdmstk.cocolog-nifty.com/sample?param1=aa&param2=bb",
  load: function(type, data, evt) { alert(data);}
});

contentパラメータにオブジェクトを指定することで、パラメータを指定することもできる。この場合、空白や日本語などの文字列を自動的にURL Encodeしてくれる。 

dojo.io.bind({
  url: "http://ymdmstk.cocolog-nifty.com/sample",
  content: {
    param1: "aa", 
    param2: "bb"
  }, 
  load: function(type, data, evt) { alert(data);}
});

HTTPメソッド

デフォルトではGETによりパラメータを送信している。POSTでパラメータを送信したいときは、methodパラメータで"post"を指定する。methodには、postかgetを指定できる。 

dojo.io.bind({
  url: "http://ymdmstk.cocolog-nifty.com/sample",
  method: "post", 
  content: {
    param1: "aa", 
    param2: "bb"
  }, 
  load: function(type, data, evt) { alert(data);}
});

フォーム

formNodeパラメータの値としてHTML FormのDOMノードを指定することで、フォームに入力したの値をパラメータとして送ることができる。 

<html>
<head>
<title>dojo.io.bind</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <script type="text/javascript" src="dojo.js"></script>
  <script type="text/javascript">
dojo.require("dojo.io.*");

function doit() {
  dojo.io.bind({
    url: "sample.xml",
    mimetype: "text/xml",
    method: "post", 
    formNode: dojo.byId("sampleform"),
    load: function(type, data, evt) {
      alert(data);
    }
  });
}
</script>
</head>

<body>
  <form id="sampleform">
    <input type="text" name="param1"><br />
    <input type="radio" name="param2" value="1a" checked="checked">1a
    <input type="radio" name="param2" value="2a">2a
    <input type="radio" name="param2" value="3a">3a<br />
    <input type="text" name="param3"><br />
  </form>
  <input type="button" value="Get sample.txt" onclick="doit();">
</body>
</html>

dojo.io.FormBind

フォームに入力した値をAjax呼び出し時に用いるときは、dojo.io.bind()ではなく、dojo.io.FormBind()を使うことができる。formのmethod, actionパラメータの値、formのsubmitボタンをそのままAjax呼び出しにおいても利用できる。 

<html>
<head>
<title>dojo.io.bind</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
  <script type="text/javascript" src="dojo.js"></script>
  <script type="text/javascript">
dojo.require("dojo.io.*");

function doit() {
  var x = new dojo.io.FormBind({
    formNode: dojo.byId("sampleform"),
    mimetype: "text/xml",
    load: function(type, data, evt) {
      alert(data);
    }
  });
  x.onSubmit = function(form) {
    dojo.byId("output").innerHTML = "Loading...";
    return true; 
  }
}
dojo.addOnLoad(doit);
</script>
</head>

<body>
  <div id="output"></div>
  <form method="post" action="sample.xml" id="sampleform">
    <input type="text" name="param1"><br />
    <input type="radio" name="param2" value="1a" checked="checked">1a
    <input type="radio" name="param2" value="2a">2a
    <input type="radio" name="param2" value="3a">3a<br />
    <input type="text" name="param3"><br />
    <input type="submit" value="Get sample.txt">
  </form>
</body>
</html>

2007年4月30日 (月) Dojo | | コメント (0) | トラックバック (0)

2007年4月22日 (日)

Ajax機能

Dojoでは、dojo.io.bind()により、クロスブラウザのAjax機能を提供する。以下のシンプルな例では、ボタンを押すと、"sample.txt"を取得して、ファイルの中身をポップアップで表示する。 

<html>
<head>
<title>dojo.io.bind</title>
<script type="text/javascript" src="dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.io.*");

function doit() {
  dojo.io.bind({
    url: "http://ymdmstk.cocolog-nifty.com/sample/sample.txt",
    load: function(type, data, evt) {
      alert(data);
    }
  });
}
</script>
</head>

<body>
  <input type="button" value="Get sample.txt" onclick="doit();">
</body>
</html>

dojo.io.bindの引数となるObjectのパラメータに、Ajax呼び出しの方法を指定する。先の例では、urlとloadをパラメータとして指定している。urlには呼び出し先のURL、loadには呼出し後の処理を記述する。

loadパラメータはFunctionを引数として取り、Functionは、type, data, evtの３つを引数として受け取る。typeには文字列"load"が固定で入る。dataには、取得したデータが入る。この例ではテキストファイルを取得しているため文字列としてデータが入る。evtには、XMLHttpRequestオブジェクトが入る。

エラー処理

ファイル/サービスが存在しないなどの理由によりAjaxの呼び出しに失敗したときの処理を、errorに書く事ができる。 

dojo.io.bind({
  url: "http://ymdmstk.cocolog-nifty.com/sample/sample.txt",
  load: function(type, data, evt) { alert(data);},
  error: function(type, data, evt) { alert("エラー："+data.message);}
});

errorのときは、dataにdojo.io.Errorが入る。dojo.io.Errorは、message, type, numberの３つのパラメータを持つ。messageにはエラーメッセージ、typeにはエラーの種類、"io", "parse", "unknown"のいずれかが入る。numberにはエラー番号が入る。

loadまたはhandleのFunction中においてエラーを投げたときも(throw new Error("..."))、errorのFunctionが呼ばれる。

タイムアウト処理

timeoutSecondsパラメータを指定することで、タイムアウトするまでの時間を秒単位で指定できる。デフォルトのtimeoutSecondsは0となっており、永遠に処理を待つ設定となっている。ブラウザから同一ドメインへの同時アクセスは２つまでとなっているため、永遠に待つ設定となっているのは問題がある。timeoutSecondsを設定するのが望ましい。

タイムアウトしたときは、timeoutで指定したFunctionが呼ばれる。timeoutのFunctionはerrorと同じように指定できる。 

dojo.io.bind({
  url: "http://ymdmstk.cocolog-nifty.com/sample/sample.txt",
  load: function(type, data, evt) { alert(data);},
  error: function(type, data, evt) { alert("エラー："+data.message);},
  timeout: function(type, data, evt) { alert("タイムアウトエラー："+data.message);},
  timeoutSeconds: 10
});

レスポンスのデータ形式

レスポンスのデータ形式は、テキスト, XML, JavaScript, JSONに対応する。 デフォルトはテキストだが、レスポンスのデータ形式を変えるときは、mimetypeプロパティで指定する。 テキスト: "text/plain", XML: "text/xml" or "application/xml", JSON: "text/json" or "application/json", JavaScript: "text/javascript"をそれぞれ指定する。

テキスト以外のときは、レスポンスのデータ形式が文字列ではなく、それぞれの対応するオブジェクトになる。XMLではDOM、JSONではJSON、JavaScriptではJavaScriptのオブジェクトが返る。

JSON、JavaScriptのときは返り値のテキストをevalしてJavaScriptのオブジェクトに変換しているだけ (JSONのときは前後に"(", ")"を付けている) であるため、セキュリティについて考慮するときは、問題があるコードが含まれていないかevalする前にテキストを処理するコードを追加することが必要である。

パラメータ一覧

以下に、dojo.io.bindの引数となるObjectのパラメータ一覧を示す。

パラメータ型概要
load Function 呼び出しに成功した後の処理を指定する
error Function 呼び出しに失敗した後の処理を指定する
timeout Function タイムアウトした後の処理を指定する
handle Function load, error, timeoutの全てのときに、handleが呼ばれ、typeの 値で処理の振り分けできる。
url String URL
method String GET, POST、デフォルトはGET
mimetype String "text/plain", "text/javascript", "text/xml", "application/xml", "text/json", "application/json", デフォルトは"text/plain"
transport String "XMLHTTPTransport", "RhinoHTTPTransport", "ScriptSrcTransport", "IframeTransport"
headers Object HTTP request headerのnameとvalue
sendTransport boolean trueのときはdojo.transport=xmlhttpがrequestに加えられる
encoding String kwArgs contentを処理するときのエンコーディング指定
content Object dojo.io.argsFromMap()が渡されると、name=value&name=valueに変換される
formNode DOMNode 通常は使わない。dojo.io.FormBind()を使うべきである。name=value&name=valueに変換される
postContent String name=value&name=valueをrequestの一部に加える
back or backButton Function backボタンが押されたときに呼ばれる関数を指定する
changeUrl boolean or String backボタンのサポートとして使われる
user String XMLHttpRequest.open()に渡される
password String XMLHttpRequest.open()に渡される
file Object or Array of Object アップロードするファイルを指定する。Objectは、name or fileName, contentType, contentを含む。
multipart boolean multipartを用いるかどうかを指定する
sync boolean trueにすると同期呼び出しとなる。デフォルトはfalse
useCache boolean キャッシュの利用有無を指定する。デフォルトはfalse
preventCache boolean trueにすると同じリクエストに対して内部キャッシュを使う。デフォルトはfalse。
timeoutSeconds int タイムアウトするまでの秒数

2007年4月22日 (日) Dojo | | コメント (2) | トラックバック (0)

2007年4月20日 (金)

Cookieへのデータ保存

DojoではCookieを扱うAPIをdojo.io.cookieにおいて提供する。オブジェクトをシリアライズすることで、文字列だけでなく、オブジェクトを保存して取り出すことができるのが特徴である。 

dojo.provide("dojo.io.cookie");

メソッドの一覧を以下に示す。setCookie/getCookieは文字列のみをCookieに保存/取得できる。setObjectCookie/getObjectCookieを使うことでオブジェクトを扱える。オブジェクトは、配列、連想配列または、単純なプロパティ名と値(文字列または数値)の組を持つオブジェクトに限られる。

メソッド説明
dojo.io.cookie.isSupported() ブラウザがCookieをサポートしているか
dojo.io.cookie.setCookie(name, value, days, path, domain, secure) 文字列をCookieに保存する
dojo.io.cookie.setObjectCookie(name, obj, days, path, domain, secure, clearCurrent) オブジェクトをCookieに保存する
dojo.io.cookie.getCookie(name) Cookieに保存した文字列を取り出す
dojo.io.cookie.getObjectCookie(name) Cookieに保存したオブジェクトを取り出す
dojo.io.cookie.deleteCookie(name) Cookieから削除する

clearCurrentがtrueのときは、古いオブジェクトは削除される。clearCurrentがfalseのときは、古いオブジェクトのプロパティのうち、追加/更新された値だけが更新される。上書きされないプロパティは削除されない。

daysは有効期限の日数を指定する。domainとpathによりCookieの利用範囲を指定することができる。secureはCookieのセキュアフラグの有効/無効を指定する。 

var array1 = [1, 3, 5, 12, 22];
	
if(dojo.io.cookie.isSupported()){
  dojo.io.cookie.setObjectCookie("array1", array1, 60, true);
  dojo.debugShallow(dojo.io.cookie.getObjectCookie("array1"));
  dojo.io.cookie.deleteCookie("array1");
}

2007年4月20日 (金) Dojo | | コメント (0) | トラックバック (0)

2007年4月13日 (金)

ドローイングAPI

dojo.gfxはクロスブラウザのドローイングAPIを提供する。ブラウザはFireFox 1.5+、Internet Explorer 6+、Opera 9をサポートしており、IEではVML、FireFoxとOperaではSVGを用いて実現している。

dojo.gfxを使うときは、dojo.gfx.*をrequireする。 

dojo.require("dojo.gfx.*");

最初にcreateSurfaceを使って描画する領域となるdojo.gfx.Surfaceを作る。createSurfaceの引数として、描画領域を作成するHTML要素、幅、高さを指定する。 

var node = dojo.byId('test');
var surfaceWidth = 150;
var surfaceHeight = 150;
var surface = dojo.gfx.createSurface(node, surfaceWidth, surfaceHeight);

このSurfaceに対して、図形(shapeオブジェクト)を追加する。以下の例では、Surfaceに対して、長方形(Rectオブジェクト)を追加している。 Rectオブジェクトに対してsetFillで色を指定している。最初の4つの引数でRGBを指定し、4つ目の引数で透明度を指定する。 

var rect = { x: 50, y: 50, width: 100, height: 70 };
surface.createRect(rect).setFill([0, 0, 255, 0.5])

Shapeオブジェクトの種類

Surfaceオブジェクトに対して、craeteXXXメソッドを使うことで、Shapeオブジェクトを作ることができる。以下の7つのShapeオブジェクトを作ることができる。

createメソッド作成されるオブジェクトcreateメソッドの引数の例
createPath ベジェ曲線 "m100 100 100 0 0 100c0 50-50 50-100 0s-50-100 0-100z"
createRect 長方形 { x: 150, y: 50, width: 100, height: 70, r:15}
createCircle 円 {cx: 250, cy: 160, r: 35}
createEllipse 楕円 {cx: 250, cy: 50, rx: 80, ry: 30}
createLine 直線 {x1: 20, y1: 180, x2: 380, y2: 130}
createPolyline 折れ線 [{x: 350, y: 200}, {x: 100, y: 100}, {x: 100, y: 200}, {x: 20, y: 50}]
createImage 画像 {width: 225, height: 96, src: "http://dojotoolkit.org/sites/all/themes/dojotoolkit.org/logo.png"}

各種Shapeオブジェクトのサンプル

塗りつぶし

setFillメソッドを使うことで、Shapeオブジェクトの内側の色/画像を指定できる (LineとImageは設定できなかった)。同じ色で塗りつぶすだけでなく、グラデーションをかけることができる。以下に例を示す。 

var radial = {type: "radial", cx: 0, cy: 100, r: 50,
 colors: [{offset: 0, color: "red"}, {offset: 0.5, color: "green"}, {offset: 1, color: "blue"}]}
rectShape.setFill(radial);

var linear = {type: "linear", x1: 0, y1: 0, x2: 75, y2: 50,
 colors: [{offset: 0, color: "#F60"}, {offset: 1, color: "#FF6"}]};
rectShape2.setFill(linear);

var pattern = {type: "pattern", x: 0, y: 0, width: 96, height: 96,
 src: "http://dojotoolkit.org/img/viewcvs.png"}
rectShape3.setFill(pattern);

同じ色で塗りつぶすときは、文字列としてRGBまたは色名で色を指定する方法と、配列またはdojo.gfx.color.Colorオブジェクトで指定する方法とがある。配列またはdojo.gfx.color.Colorでは、RGBと透過率を指定する。

  • "#ddd"
  • "green"
  • [255, 0, 0, 0.5]
  • new dojo.gfx.color.Color([255, 0, 0, 0.5])

グラデーションをかけるときは、連想配列で設定値を指定する。連想配列のキー: "type"により、グラデーションの掛け方を指定できる。typeには、"radial": 放射状、"linear": 線形、"pattern": 格子状(?)の３つを指定できる(patternはうまく動作しなかった)。 

var radial = {type: "radial", cx: 0, cy: 100, r: 50,
 colors: [{offset: 0, color: "red"}, {offset: 0.5, color: "green"}, {offset: 1, color: "blue"}]}

var linear = {type: "linear", x1: 0, y1: 0, x2: 75, y2: 50,
 colors: [{offset: 0, color: "#F60"}, {offset: 1, color: "#FF6"}]};

var pattern = {type: "pattern", x: 0, y: 0, width: 96, height: 96,
 src: "http://dojotoolkit.org/img/viewcvs.png"}

Shape塗りつぶしのサンプル

枠の指定

setStrokeメソッドによりShapeオブジェクトの枠を指定できる。setStrokeメソッドの引数の連想配列で設定値を指定する。連想配列のキーとして、color: 枠の色, width: 枠の太さ, cap: 端の処理, join: 線の継ぎ目、の4つを指定できる。

capは、"round": 丸み、"butt": バット、"square": 四角、のいずれかを指定できる。capを指定しなかったときは"butt"となる。

joinは、"miter": 留め継ぎ/角、"round": 丸み、"bevel": 面取り、または数字、のいずれかを指定できる。joinを指定しなかったときは"miter"となる。数字を指定すると、つなぎ目の太さを指定できる。 

rectShape.setStroke({color: [0, 0, 255, 0.5], width: 2, cap: "butt", join: 2}) 

Shape枠のサンプル

移動/変形

setTransformメソッドにより、Shapeオブジェクトを移動/変形できる。setTransformメソッドの引数には、dojo.gfx.matrix.XXX メソッドを渡して、移動/変形方法を指定する。引数に配列を渡して、複数の変形方法を組み合わせることもできる。 

rectShape.setTransform(dojo.gfx.matrix.rotategAt(45, 250, 250));

rectShape2.setTransform([dojo.gfx.matrix.translate(100,0), dojo.gfx.matrix.rotateg(-45)]);

以下にsetTransformの引数として指定できるメソッド一覧を示す。メソッド名の最後にgがあるときは、角度を度(degree)ではなくラジアン/弧度(radian)で指定する。 メソッド名の最後にAtがある場合は、変形(回転、縮尺変更、斜めのゆがみ)の中心点を指定できる。通常は原点(0, 0)が中心となる。

メソッド説明
dojo.gfx.matrix.translate(100,100) 位置の移動
dojo.gfx.matrix.scale(2, 1.5) X座標, Y座標の縮尺変換。引数が一つのみのときはX/Y軸を同じ縮尺で変換する
dojo.gfx.matrix.scaleAt(2, 1.5, 100, 50)  
dojo.gfx.matrix.rotate(0.17*3.14) 回転 (角度をラジアンで指定する)
dojo.gfx.matrix.rotateAt(0.17*3.14, 250, 50)  
dojo.gfx.matrix.rotateg(30) 回転 (角度を度で指定する)
dojo.gfx.matrix.rotategAt(30, 250, 50)  
dojo.gfx.matrix.skewX(0.17*3.14) X軸に対して斜めに歪める (角度をラジアンで指定する)
dojo.gfx.matrix.skewXAt(0.17*3.14, 250, 50)  
dojo.gfx.matrix.skewXg(30) X軸に対して斜めに歪める (角度を度で指定する)
dojo.gfx.matrix.skewXgAt(30, 250, 50)  
dojo.gfx.matrix.skewY(0.17*3.14) Y軸に対して斜めに歪める (角度をラジアンで指定する)
dojo.gfx.matrix.skewYAt(0.17*3.14, 250, 50)  
dojo.gfx.matrix.skewYg(30) Y軸に対して斜めに歪める (角度を度で指定する)
dojo.gfx.matrix.skewYgAt(30, 250, 50)  

移動/変形は、Shapeオブジェクト１つずつに対して指定するだけでなく、グループ化してからまとめて指定できる。グループ化するには、まずSurfaceオブジェクトに対してcreateGroup()を実行することでGroupオブジェクトを作成する。 

var surface = dojo.gfx.createSurface("shapes", 400, 200);
var g1 = surface.createGroup();

作成したグループに対してShapeオブジェクトを登録するには、Groupオブジェクトのaddメソッドを用いるか、Groupオブジェクトに対して、createXXXメソッドを実行してShapeオブジェクトを作成する。 

var rect = { x: 50, y: 50, width: 100, height: 70 };
var rectShape = surface.createRect(rect).setFill([0, 0, 255, 0.5]);

var circle = {cx: 250, cy: 160, r: 35}
var circleShape = surface.createCircle(circle).setStroke({color: "black", width: 2});

g1.add(rect);
g1.add(circleShape);
g1.setTransform(dojo.gfx.matrix.rotateAt(-45, 250, 250));

前面/背面に移動

Shapeオブジェクトの重ね合わせの順番を変えることができる。Shapeオブジェクトに対して、moveToFront()を指定すると前面に移動する。moveToBack()を指定すると背面に移動する。 

rectShape.moveToFront();
rectShape2.moveToBack();

ベジェ曲線

ベジェ曲線を描くときは、Surfaceオブジェクトに対してcreatePathメソッドを 実行する。createPathの引数において、直線/曲線の描き方を指定する。

下記の例では、MはmoveTo (座標の移動)、LはlineTo (線を引く)を示している。 大文字で指定すると絶対座標、小文字で指定すると相対座標を示す。 指定の仕方はSVGにおけるpath要素のd属性値と同じである。 

var surface = dojo.gfx.createSurface("shapes", 400, 200);
var pathShape = surface.createPath("M10,10 L200 80, l30,50");
pathShape.setStroke({color: "red", cap: "butt"});

直線/曲線の描き方は、createPathの引数として指定するだけでなく、Pathオブジェクト に対するメソッドにより指定することもできる。以下に上記と同じ線を描く例を示す。 setAbsoluteModeは、絶対位置(true または "absolute")/相対位置指定(false または "relative")を指定する。 

var pathShape = surface.createPath();
pathShape.setStroke({color: "red", cap: "butt"});
pathShape.moveTo(10, 10);
pathShape.lineTo(200, 80);
pathShape.setAbsoluteMode(false);
pathShape.lineTo(30, 50);

直線/曲線の指定方法を以下に示す。

コンストラクタでの指定メソッド説明
m moveTo(10, 10) 移動
l lineTo(30, 50) 直線を引く
h hLineTo(100) 水平に線を引く
v vLineTo(100) 垂直に線を引く
c curveTo(300, 300, 200, 200, 100, 100) ３次ベジェ曲線を引く
s smoothCurveTo(300, 300, 100, 100) 滑らかな３次ベジェ曲線を引く
q qCurveTo(300, 300, 100, 100) ２次ベジェ曲線を引く
t qSmoothCurveTo(100, 100) 滑らかな２次ベジェ曲線を引く
a arcTo(25, 100, 15, true, true, 150, 125) 楕円の弧を引く
z closePath() Pathを閉じる

イベント割り当て

Shapeオブジェクトに対して、クリックやドラッグなどのイベントを割り当てることができる。イベントを割り当てるには、dojo.event.connectを用いる。dojo.event.connectの最初の引数となるHTML Nodeとして、Shapeオブジェクトのノード(getEventSource()またはgetNode()メソッドで得られる）を指定する。 
var circle = {cx: 250, cy: 160, r: 35}
var circleShape = surface.createCircle(circle).setStroke({color: "black", width: 2});
...

dojo.event.connect(circleShape.getEventSource(), "onclick", "func1"});
setFillで塗りつぶしてないと枠のみがonclickに反応する。

2007年4月13日 (金) Dojo | | コメント (0) | トラックバック (0)

2007年4月10日 (火)

Collection

dojoでは、以下のCollectionオブジェクトが提供されている。GraphとSkipListはソースは存在しているが利用できなくなっている(dojo.experimentalにより無効化されている)。

ArrayList

一般にArrayListはサイズ変更可能な配列である。元々JavaScriptの配列はサイズ変更可能であるため、配列の途中に新たな要素を容易に追加したり、削除できる点などがDojoのArrayListの特徴である。

ArrayListの内部では配列として値を保持しており、ArrayListのためのメソッドを追加している。配列のメソッドを利用することはできない。

ArrayListを利用するときは、dojo.collections.ArrayListをrequireする。 

dojo.require("dojo.collections.ArrayList");

コンストラクタは、dojo.collections.ArrayListを用いる。 

var al = new dojo.collections.ArrayList(["foo","bar","test","bull"]);
メソッド名概要
add(obj) pushと同じ
addRange(array) pushと同じ
clear() splice(0, ary.length)と同じ
clone() ArrayListのクローンを作成する
contains(obj) objがArrayListに含まれるか
count lengthと同じ
forEach(function, scope) ArrayListの各要素にfunctionを適用する
getIterator() dojo.collections.Iteratorを返す
indexOf(obj) objの順番を返す。ないときは-1を返す
insert(index, obj) index番目にobjを挿入する
item(index) index番目の要素を返す
remove(obj) ArrayListからobjを削除する
removeAt(index) index番目の要素を削除する
reverse() reverse()と同じ
setByIndex(index, obj) index番目の要素をobjに置き換える
sort() sort()と同じ
toArray() 配列に変換して返す
toString('str') join('str')と同じ

2分木/BinaryTree

2分木は要素を検索しながら、要素の挿入/削除も行うときに効果がある。 同じ要素を複数挿入することはできない。 また、数値と文字列を混在させることもできない。 2分木/BinaryTreeを利用するときは、dojo.collections.BinaryTreeをrequireする。 

dojo.require("dojo.collections.BinaryTree");

以下に利用例を示す。 

var tree = new dojo.collections.BinaryTree(2);
tree.add(3);
tree.add(23);
tree.add(12);
tree.add(1);
tree.toString();
 --> '1 2 3 12 23'
メソッド名概要
add(obj) 要素を追加する
clear() 全ての要素を削除する
clone() BinaryTreeのクローンを作成する
contains(obj) 要素が含まれるかどうかを返す
count 要素の数を返す
deleteData(obj) 指定した要素を削除する
getIterator() dojo.collections.Iteratorを返す
search(data) 2分木を探索してnodeオブジェクト(プロパティとしてvalue, left, rightを持つ)を返す
toString(order, sep) 探索方法と区切り文字を指定して、各要素を繋げた文字列を返す。引数は省略できる。orderには、dojo.collections.BinaryTree.TraversalMethods.Preorder/Inorder/Postorder (または1/2/3)のいずれかを指定できる

Dictionary/連想配列

Dictionary/連想配列は、文字列(key)を添え字とした配列である。JavaScript自体でも連想配列が提供されているが、Dictionaryではいくつか便利なメソッドを提供している。Dictionaryを利用するときは、dojo.collections.Dictionaryをrequireする。 

dojo.require("dojo.collections.Dictionary");

以下に利用例を示す。 

var dic = new dojo.collections.Dictionary();
dic.add("foo","bar");
dic.add("baz","fab");
dic.add("buck","shot");
dic.add("apple","orange");
dic.item("foo");

以下にDictionaryのメソッド一覧を示す。keyは文字列のみを指定できる。

メソッド名概要
add(key, obj) 新しい要素を追加
clear() 全ての要素を削除する
clone() Dictionaryのクローンを作成する
count 要素の数を返す
contains(key) 指定したkeyが含まれるかどうか
containsKey(key) contains(key)と同じ
containsValue(obj) 指定した要素が含まれるかどうか
entry(key) keyに対応する要素をdojo.collections.DictionaryEntryとして返す
forEach(function, scope) Dictionaryの各要素にfunctionを適用する
getIterator() dojo.collections.DictionaryIteratorを返す
getKeyList() 登録されている全てのkeyの配列を返す
getValueList() 登録されている全ての要素の配列を返す
item(key) keyに対応する要素を返す。entry(key).valueOf()と同じ
remove(key) keyと対応する要素を削除する

 

DictionaryEntryは、toString()とvalueOf()のメソッドを持つ。 DictionaryIteratorは、以下のメソッドを持つ。

atEnd() カーソルが最後に達したかどうかを判定する
get() 要素を取り出し、カーソルを１つ進める
map(function, scope) 各要素にfunctionを適用する
reset() カーソルをリセットする

SortedList

内部的にkeyでソートされた連想配列を作る。SortedListはDictionaryのメソッドを全て持ち、さらにindexを引数として取るメソッドが追加されている。 登録しながら、ソートされた一覧が欲しいときには便利だが、登録処理は遅くなる。 登録後に置き換えると、indexで取得する要素とkeyで取得する要素が合わなくなるときがある。 SortedListを利用するときは、dojo.collections.SortedListをrequireする。 

dojo.require("dojo.collections.SortedList");

以下に利用例を示す。 

var sl = new dojo.collections.SortedList();
sl.add("foo","bar");
sl.add("baz","fab");
sl.add("buck","shot");
sl.add("apple","orange");
for(i=0; i

Dictionaryに対して追加されているメソッドのみを以下に示す。

メソッド名概要
copyTo(arry, i) 引数の配列(array)のi番目にSortedListの内容を配列に変換して挿入する
getByIndex(i) i番目の要素を取得する
getKey(i) i番目のkeyを取得する
indexOfKey(key) 指定したkeyのindexを取得する
indexOfValue(obj):指定したobjのindexを取得する
removeAt(i) i番目の要素/keyを削除する
replace(key, obj) 指定したkeyに対応する要素を置き換える
setByIndex(i, obj) i番目の要素をobjに置き換える

Queue

QueueはFirst In First Outのデータ構造である。Queueを利用するときは、dojo.collections.Queueをrequireする。 

dojo.require("dojo.collections.Queue");

以下に利用例を示す。 

var queue = new dojo.collections.Queue(["foo","bar","test","bull"]);
queue.enqueue("new");
queue.peek();
queue.dequeue();
queue.toArray();
--> ["bar", "test", "bull", "new"]
メソッド名概要
clear() queueを空にする
clone() Queueのクローンを作成する
contains(obj) 指定した要素が含まれるかどうか
copyTo(array, i) 引数の配列(array)のi番目にqueueの内容を配列に変換して挿入する
count 要素数を返す
dequeue() queueの先頭から要素を取得して、queueから削除する
enqueue(obj) queueに要素を追加する
forEach(function, scope) queueの各要素にfunctionを適用する
getIterator() dojo.collections.Iteratorを返す
peek() queueの先頭の要素を取得する。queueからは削除しない
toArray() 配列に変換して返す

Stack

StackはFirst In Last Outのデータ構造である。Stackを利用するときは、dojo.collections.Stackをrequireする。 

dojo.require("dojo.collections.Stack");

以下に利用例を示す。 

var stack = new dojo.collections.Stack(["foo","bar","test","bull"]);
stack.push("new");
stack.pop();

StackのメソッドはQueueとほぼ同じメソッドが提供されている。Queueのdequeue(), enqueue(obj)が、Stackでは、pop()とpush(obj)の２つのメソッドに置き換わっている。

Store

Storeは連想配列としても配列としても利用できるデータ構造となっている。オブジェクトを削除すると、配列の添え字の番号が自動的に詰められる。 Storeを利用するときは、dojo.collections.ArrayListをrequireする。 

dojo.require("dojo.collections.Store");

以下に例を示す。 

var data=[
  {Id:"key1", val1:"testval", simpleNum:1.2, getName:function(){return "Bob Smith";}},
  {Id:"key2", val1:null, simpleNum:56, getName:function(){return "Jane";}},
  {Id:"key3", val1:"value", simpleNum:1, getName:function(){return "Bam bam";}, nested:{name:"value"}}
];
var store=new dojo.collections.Store(data);

Storeのメソッド一覧を示す

メソッド名概要
addData(obj, key) オブジェクトを追加する。keyが指定されないときは、オブジェクトのIdフィールドがkeyとして使われる
addDataRange(array) オブジェクト配列を追加する
clearData() Storeをクリアする
forEach(function) 登録されている全ての内部オブジェクトにfunctionを適用する
forEachData(function) 登録されている全てのオブジェクトにfunctionを適用する
get() 内部オブジェクト(keyとsrcフィールドを持つ)の配列を返す
getByIndex(index) 指定したindexの内部オブジェクトを返す
getByKey(key) 指定したkeyに対応する内部オブジェクトを返す。登録したオブジェクトを返すときはgetDataByKey(key)を用いる
getData() オブジェクトの配列を返す
getDataByIndex(index) 指定したindexのオブジェクトを返す
getDataByKey(key) keyに対応するオブジェクトを返す
removeData(obj) 指定したオブジェクトを削除する
removeDataByIndex(index) 指定したindexのkeyとオブジェクトを削除する
removeDataByKey(key) keyと対応するオブジェクトを削除する
setData(array) Storeをクリアした後、指定したオブジェクト配列を登録する
update(obj, fieldPath, val) 指定したオブジェクトのフィールド(fieldPath)の値をvalに変更する。fieldPathは文字列として[.]で区切って指定することができる

2007年4月10日 (火) Dojo | | コメント (0) | トラックバック (0)

2007年4月 8日 (日)

グラフ/dojo.widget.Chart

dojo.widget.Chartを使ってグラフを描くこともできる。dojo.widget.Chartは、widgetとして提供されるため、JavaScriptを記述せずにHTMLだけでグラフを描くことができる。dojo.widget.Chartは、dojo.charting.Chartよりも低機能であり、縦向きのグラフ種類のみを提供する。

まず、グラフを描画する部分にdojoTypeとしてchartを指定したdiv要素を作る。 

<div dojoType="chart" style="border:1px solid black;width:400px;height:250px;">

グラフの情報は、divの子要素にtableとして記述する。table要素では、軸の情報と、グラフの種類を指定する。 

<table padding="12 12 20 30" axisAt="0 xmin" rangeX="0 100" rangeY="-100 100">
  • plotType: グラフの種類
  • axisAt: Y軸/X軸の位置
  • rangeX: X軸の値の範囲
  • rangeY: Y軸の値の範囲

axisAtでは、先にY軸の位置を指定し、半角スペース空けてX軸の位置を指定する。ymax, ymin, xmax, xminのように記述して、Y軸/X軸の最大値、最小値を軸に指定できる。

plotTypeは、line (なめらかな線グラフ), bar (棒グラフ), area (なめらかな面グラフ), scatter (散布図), bubble (バブルチャート)のいずれかを指定できる。thead/tr/thにおいてデータの系列ごとに個別にグラフの種類を指定することもできる。指定しないとデフォルトでlineが指定される。

thead/tr/thで、データ系列ごとにグラフ種類と色を指定できる。最初の列はX軸の値になるため、属性を指定しても無視される。2列目移行では、plotTypeとcolorを属性として指定できる。color属性でグラフの色を指定できる。 

<thead>
  <tr>
    <th>X</th>
    <th plotType="area">Series A</th>
    <th plotType="area">Series B</th>
  </tr>
</thead>

tbody/tr/tdにグラフの値を指定する。bubbleのときは、tdのsize属性で点の大きさを指定できる。 

<tbody>
	<tr><td>0</td><td>-92.45</td><td>63.06</td></tr>
	<tr><td>4</td><td>94.23</td><td>-100</td></tr>
	<tr><td>8</td><td>-93.12</td><td>-33.54</td></tr>
	...
</tbody>

なめらかな折れ線グラフ

<div dojoType="chart" style="border:1px solid black;width:400px;height:250px;background-color:#ededde;">
  <table padding="12 12 20 30" axisAt="ymin xmin" rangeX="0 50" rangeY="0 130">
    <thead>
      <tr>
        <th>X</th>
        <th plotType="line">Series A</th>
        <th plotType="line">Series B</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>0</td><td>110</td><td>20</td></tr>
      <tr><td>10</td><td>24</td><td>4</td></tr>
      <tr><td>15</td><td>63</td><td>32</td></tr>
      <tr><td>25</td><td>5</td><td>13</td></tr>
      <tr><td>40</td><td>98</td><td>7</td></tr>
      <tr><td>45</td><td>54</td><td>18</td></tr>
    </tbody>
  </table>
</div>
                                                                                                   
XSeries ASeries B
0 110 20
10 24 4
15 63 32
25 5 13
40 98 7
45 54 18

動的にグラフの値を変えることもできる。以下のボタンを押すと系列が追加される。 

function addSeries(){
  var test = dojo.widget.byId('test');
  var seriesC = new dojo.widget.Chart.DataSeries("SeriesB", "Third", "line", "red");
  seriesC.values=[
	{x:0,value:20},
	{x:10,value:50},
	{x:15,value:32},
	{x:25,value:13},
	{x:40,value:7},
	{x:45,value:18}
  ];
  test.series.push(seriesC);
  test.render();
}

2007年4月 8日 (日) Dojo | | コメント (0) | トラックバック (0)

2007年4月 6日 (金)

グラフ/dojo.charting.Chart

Dojoでは、グラフを描画する方法として、dojo.charting.Chartとdojo.widget.Chartの２つが提供されている。 dojo.charting.ChartはJavaScriptでグラフの描画方法を指定するのに対して、dojo.widget.Chartは主にHTMLのtable要素として指定する。

dojo.charting.Chartで指定する方法を説明する。

まず、以下の2つをrequireする。 

dojo.require("dojo.collections.Store");
dojo.require("dojo.charting.Chart");

次にJSON形式のグラフデータをdojo.collections.Storeに読み込む。 

var json = [
   { x: 0, y: 110, y2: 20},
   { x: 10, y: 24, y2: 4},
   { x: 15, y:63, y2: 32},
   { x: 25, y: 5, y2: 13},
   { x: 40, y: 98, y2: 7},
   { x: 45, y: 54, y2: 18}
];
var store = new dojo.collections.Store();
store.setData(json);

読み込んだデータを使って、データ系列を指定する。以下の例では、X軸とY軸の値のみを指定しているが、バブルチャートのときは、点の大きさを示すsizeも指定する。 

var s1 = new dojo.charting.Series({
  dataSource:store,
  bindings:{ x:"x", y:"y"},
  label:"Line"
});
var s2 = new dojo.charting.Series({
  dataSource:store,
  bindings:{ x:"x", y:"y2"},
  label:"Line 2"
});

範囲やラベルなど、X軸/Y軸の情報を指定する。originには"max","min"または数値を指定でき、軸の位置を指定する。 

//X軸の情報
var xA = new dojo.charting.Axis();
xA.range={upper:50, lower:0};
xA.origin="max";
xA.showTicks = true; //ラベルを指定した値の強調点のライン上に表示する
xA.label = "X-Axis";
xA.labels = [0, 20, 40];

//Y軸の情報
var yA = new dojo.charting.Axis();
yA.range={upper:130,lower:0};
yA.showLines = true; //ラベルを指定した値の点線を表示する
yA.showTicks = true; //ラベルを指定した値の強調点のライン上に表示する
yA.labels = [ {label:"min", value:0 }, { label:"35",value:35 }, { label:"max", value:120 } ];
yA.label = "Y-Axis"

グラフの種類を指定する。dojo.charting.Plotters.Lineと指定しているところで、グラフの種類を指定できる。 

var p = new dojo.charting.Plot(xA, yA);
p.addSeries({ data:s1, plotter: dojo.charting.Plotters.Line });
p.addSeries({ data:s2, plotter: dojo.charting.Plotters.Line });
  • Line (折れ線グラフ)
  • CurvedLine (なめらかな線グラフ)
  • DataBar (棒グラフ)
  • Area (面グラフ)
  • CurvedArea (なめらかな面グラフ)
  • Scatter (散布図)
  • Bubble (バブルチャート)  [データとしてx, y, sizeを指定]

以下の積み重ねグラフでは、グルーピングが必要となる。

  • StackedArea (積み重ね面グラフ)
  • StackedCurvedArea (なめらかな積み重ね面グラフ)

グルーピングを指定するには、dojo.charting.PlotのrenderTypeとして、dojo.charting.RenderPlotSeries.Groupedを指定する。 

var p = new dojo.charting.Plot(xA, yA);
p.renderType = dojo.charting.RenderPlotSeries.Grouped;
p.addSeries({ data:s1, plotter: dojo.charting.Plotters.Line });
p.addSeries({ data:s2, plotter: dojo.charting.Plotters.Line });

その他のグラフとして、以下を指定できる。

  • HorizontalBar [データとしてyを指定]
  • Gantt (ガントチャート) [データとしてhigh, lowを指定]
  • HighLow [データとしてx, high, lowを指定]
  • HighLowClose [データとしてx, high, low, closeを指定]
  • HighLowOpenClose [データとしてx, high, low, open, closeを指定]

グラフの描画領域を指定する。同じ描画領域に複数のグラフを指定することもできる。 

var pa = new dojo.charting.PlotArea();
pa.size={width:400,height:250};
pa.padding={top:20, right:20, bottom:30, left:50 };
pa.plots.push(p);

系列に色を割り当てる。 

s1.color = pa.nextColor();
s2.color = pa.nextColor();

グラフを描画する。 

var chart = new dojo.charting.Chart(null, "Title", "Description");
chart.addPlotArea({ x:50,y:50, plotArea:pa });
chart.node = dojo.byId("chart");
chart.render();

グラフを描画した後も、dojo.collections.Storeの値を変更した後に、dojo.charting.Chartのrender()メソッドを呼ぶことで、グラフの値を変更できる。dojo.collections.Storeの値を変更するには、setData, addData, addDataRange, addDataByIndex, addDataRangeByIndex, removeData, removeDataRange, removeDataByKey, removeDataByIndexなどのメソッドが使える。 

function changedata(){
  b0.removeDataByIndex(0);
  chart.render();
}

折れ線グラフ

なめらかな線グラフ

棒グラフ

バブルチャート

積み重ね面グラフ

ガントチャート

HighLowグラフ

HighLowOpenCloseグラフ

2007年4月 6日 (金) Dojo | | コメント (0) | トラックバック (0)

2007年4月 5日 (木)

Date/日時

DojoのDate/日時処理を用いるときは、dojo.date.formatをrequireする。 

dojo.require("dojo.date.format");

日付 → 文字列

Dojoでは、JavaScriptのDateを文字列に変換する関数として、dojo.date.formatが提供されている。一つ目の引数にDateオブジェクト、2つ目の引数として変換方法を示したパラメータを渡す。 

var sdate = dojo.date.format(new Date(), {selector:'dateOnly', locale:'ja-jp'});
=> 2007年4月5日木曜日
var sdate = dojo.date.format(new Date(), {selector:'dateOnly', formatLength:'short', locale:'ja-jp'});
=> 07/04/05

パラメータとして以下を指定できる。

  • selector: 'dateOnly' or 'timeOnly' or 'dateTime'のいずれかを指定する
  • locale: 'ja-jp', 'en-us', 'fr-fr, 'es', 'de-at', 'zh-cn'などのロケール。ハイフン「-」で繋ぐのに注意。指定しなければ、ブラウザのロケールが使われる
  • formatLength: 'full', 'short', 'long', 'medium'のいずれかを指定する
  • strict: trueまたはfalseを指定する
  • timePattern:'h:m:s'など、時間のフォーマットを指定する
  • datePattern:"ddMMyyyy"など、日付のフォーマットを指定する

timePattern、datePatternでは、以下を指定できる。

  • %a: 'Sun', '木', 短縮形の曜日
  • %A: 'Sunday', '木曜日', 曜日
  • %b: 'Jan', '4 月', 短縮形の月
  • %B: 'January', 4 月', 月
  • %c: 'Sunday, January 1, 2006 6:23:00 PM', '2007年4月5日木曜日 17時29分22秒GMT+09:00', 日時の文字列
  • %C: '20', 世紀
  • %d: '05', 日付
  • %D: '04/05/07', selector: 'dateOnly', formatLength: 'short'の日付文字列
  • %e: ' 5', 日付 (一桁のときに0を付けない)
  • %h: '4 月', 月 (%bと同じ)
  • %H: '17', 時
  • %I: '05', 時 (12時間表示)
  • %j: '095', その年から数えて何日目かを3桁で返す
  • %k: '17', 時
  • %l: ' 5', 時 (12時間表示)
  • %m: '04', 月
  • %M: '55', 分
  • %p: 'PM', '午後', AMかPMかを返す
  • %r: '06:23:00 PM', "%I:%M:%S %p"を返す
  • %R: '18:23', "%H:%M"を返す
  • %S: '00', 秒
  • %T: '18:23:00', "%H:%M:%S"を返す
  • %u: '7', 曜日を数字で返す
  • %U: '14' その年から数えて何週目かを返す
  • %w: '4', 日
  • %x: 'Sunday, January 1, 2006'
  • %X: '6:23:00 PM'
  • %y: '06', 年 (下2桁)
  • %Y: '2006', 年
  • %z: '+09:00', timezone
  • %%: '%', %のエスケープシーケンス指定

以下のように出力形式を指定することもできる。 

dojo.date.strftime(new Date(), "%y/%m/%d");
dojo.date.format(new Date(), "%y/%m/%d");

文字列 → 日付

文字列から日付を得るには、dojo.date.parseを用いる。指定する文字列の形式は、dojo.date.formatで得られる文字列と同じである。 

var date = dojo.date.parse("2006/8/11", {formatLength:'short', locale:'ja'});
var date = dojo.date.parse('2006/08/11", {formatLength:'medium', locale:'ja'});
var date = dojo.date.parse('2006/8/11", {formatLength:'medium', locale:'ja'});
var time = dojo.date.parse("12:30", {selector:'timeOnly', strict:true, timePattern:"h:mm"});

日時チェック

文字列で指定した日付または時間のフォーマットをチェックする関数が、dojo.validateに用意されている。日時チェックの関数を利用するときは、dojo.validate.datetimeをrequireする。

日付または時間のチェックをする関数は以下の4つが用意されている。

  • dojo.validate.isValidTime(value, flags)
  • dojo.validate.is12HourTime(value)
  • dojo.validate.is24HourTime(value)
  • dojo.validate.isValidDate(dateValue, format)

isValidTimeの引数flagsには、formatとしてフォーマット指定、amSymbol/pmSymbolとしてAM/PMのフォーマットを指定できる。amSympl/pmSymbolのデフォルト値は"AM"/"PM"である。

formatの指定には、以下のパターン文字を組み合わせて用いる。

  • h: 12時間指定
  • hh: 12時間指定, 1桁のとき0をつけて常に2桁指定
  • H: 24時間指定
  • HH: 24時間指定, 1桁のとき0をつけて常に2桁指定
  • m: 分
  • mm: 分, 1桁のとき0をつけて常に2桁指定
  • s: 秒
  • ss: 秒, 1桁のとき0をつけて常に2桁指定
  • t: 'AM' or 'PM'

is12HourTimeのフォーマットは、isValidaTimeのフォーマット指定で、format: ["h:mm:ss t", "h:mm t"]と同じとなる。is24HourTimeのフォーマットは、format: ["HH:mm:ss", "HH:mm"]と同じとなる。

以下に例を示す。この例は全てtrueになる例である。 

dojo.require("dojo.validate.datetime");

dojo.validate.isValidTime('5:15:05 pm');
dojo.validate.isValidTime('5:15:05 p.m.', {pmSymbol: "P.M."});
dojo.validate.isValidTime('5:15 pm', {format: "h:mm t"});
dojo.validate.isValidTime('15:15:00', {format: "H:mm:ss"});

dojo.validate.is12HourTime('5:15:05 pm');
dojo.validate.is24HourTime('22:03:59');

isValidDateは日付のフォーマットをチェックする。引数のformatは、日付のフォーマットを以下のパターン文字を組み合わせて指定する。

  • YYYY: 年, 4桁指定
  • M: 月
  • MM: 月, 1桁のとき0をつけて常に2桁指定
  • D: 日
  • DD: 日, 1桁のとき0をつけて常に2桁指定
  • DDD: 001-365の日付
  • ww: 01-53の週
  • d: 1-7の曜日

以下に例を示す。この例は全てtrueになる例である。 

dojo.validate.isValidDate("2005/08/06", "YYYY/MM/DD");
dojo.validate.isValidDate("2005-08-06", "YYYY-MM-DD");
dojo.validate.isValidDate("2005-W42-3", "YYYY-Www-d");
dojo.validate.isValidDate("2005-292", "YYYY-DDD");

2007年4月 5日 (木) Dojo | | コメント (0) | トラックバック (0)

Dojoを利用しているツール

Dojoをベースに使っているJavaScriptライブラリ

Dojoを利用しているフレームワーク

Dojoに対応した開発環境

Dojoを利用しているWebサイト

2007年4月 5日 (木) Dojo | | コメント (0) | トラックバック (0)

2007年4月 3日 (火)

Effect

効果を指定するときは、以下のように記述する。1つ目の引数としてID(配列として渡すことで複数指定できる)、2つ目の引数として効果を実行にかかる時間をミリタイムで指定する。play()メソッドを指定して実行する。play()メソッドの引数として実行時間をミリタイムで指定することもできる。 

dojo.lfx.fadeOut("elem", 500).play();

以下にEffectの例を一覧で示す。

フェードイン/アウト、ワイプイン/アウト

  • dojo.lfx.fadeOut: フェードイン
  • dojo.lfx.fadeIn: フェードアウト
  • dojo.lfx.fadeShow: フェードイン、既に表示されているときは消してからフェードインする
  • dojo.lfx.fadeHide: フェードアウト、display:noneを適用する
  • dojo.lfx.wipeIn: ワイプイン
  • dojo.lfx.wipeOut: ワイプアウト
  • dojo.lfx.fadeWipeIn: フェードインしながらワイプイン
  • dojo.lfx.fadeWipeOut: フェードアウトしながらワイプアウト

フェードイン/ワイプインするオブジェクトは、display: none、またはopacity:0の状態から現れる。以下の4つの引数を取る。

  • nodes: 効果を指定するDOMノード (配列により複数指定できる)
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • callbackfunc (option): 効果が終わった後に呼び出す関数

なめらかな移動

  • dojo.lfx.html.slideBy: 全体位置を指定して移動
  • dojo.lfx.html.slideTo: 相対位置を指定して移動

以下の5つの引数を取る。

  • nodes: 効果を指定するDOMノード (配列により複数指定できる)
  • coords: 移動位置を指定する。{ top: Decimal, left: Decimal }
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • callbackfunc (option): 効果が終わった後に呼び出す関数

拡大/縮小表示

  • dojo.lfx.html.explode: 拡大表示
  • dojo.lfx.html.implode: 縮小表示

以下の5つの引数を取る。

  • start: スタート位置を示すDOMノード
  • endNode: 終了位置を示すDOMノード
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • callbackfunc (option): 効果が終わった後に呼び出す関数

ハイライト

  • dojo.lfx.html.highlight: ハイライト
  • dojo.lfx.html.unhighlight: アンハイライト

以下の4つの引数を取る。

  • startColor/endColor: 変化を始める/終わるときの色
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • callbackfunc (option): 効果が終わった後に呼び出す関数

縮尺

  • dojo.lfx.html.scale: 縮尺を変える

以下の7つの引数を取る。

  • nodes: 効果を指定するDOMノード (配列により複数指定できる)
  • percentage: 縮尺を変える割合をパーセンテージで指定する
  • scaleContent: trueのとき、コンテンツ内のフォントの縮尺も変える
  • fromCenter: trueのときは、右上ではなく中心から変化させる
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • callbackfunc (option): 効果が終わった後に呼び出す関数

アニメーション

  • dojo.lfx.html.propertyAnimation: 変化内容を指定してアニメーション

以下の5つの引数を取る。

  • nodes: 効果を指定するDOMノード (配列により複数指定できる)
  • propertyMap: 変更するプロパティの値を定義するオブジェクト {property: String start: Decimal, end: Decimal?, units: String} の配列
  • duration: 効果を実行する時間(ミリ秒)
  • easing (option): dojo.lfx.easeIn, dojo.lfx.easeOut, dojo.lfx.easeInOutのいずれかを指定する
  • handlers (option): 効果が終わった後に呼び出す関数(複数指定することもできる)

効果の組み合わせ

dojo.lfx.chainを使って、複数のEffectを連続して実行できる。 
dojo.lfx.chain(
  dojo.lfx.fadeOut("3", 500),dojo.lfx.fadeIn("3", 500)
).play();
dojo.lfx.combineを使うと、複数のEffectを同時に実行できる。 
dojo.lfx.combine(
  dojo.lfx.scale("16", 0, true, false, 1000),
  dojo.lfx.fadeOut("16", 1000)
).play(1000);

サンプルコード

//Fade Out
dojo.lfx.fadeOut("1", 1000).play();

//Fade In
dojo.lfx.fadeIn("2", 1000).play();

//Fade Out-In
dojo.lfx.chain(
  dojo.lfx.fadeOut("3", 500),dojo.lfx.fadeIn("3", 500)
).play();

//Fade Out-All
dojo.lfx.fadeOut(["1","2","3","4"], 1000).play();

//透明度50%
dojo.html.setOpacity(dojo.byId('5'), 0.5);

//200, 200へ
dojo.lfx.html.slideTo('6', { top: 200, left: 200 }, 1000).play();

//現在位置から50,50へ
dojo.lfx.html.slideBy('7', { top: 50, left: 50 } , 1000).play();

//Highlight
dojo.lfx.html.highlight("8", [230, 180, 180], 1000).play();

//Unhighlight
dojo.lfx.html.unhighlight("9", [230, 180, 180], 1000).play();

//Explode
dojo.lfx.explode(dojo.byId('button10'), "10", 1000).play();

//Implode
dojo.lfx.implode("10", dojo.byId('button11'), 1000).play();

//Wipeout
dojo.lfx.html.wipeOut('12', 1000).play();

//Wipein
dojo.lfx.html.wipeIn('13', 1000).play();

//Wipein-out
var wipeOut = dojo.lfx.wipeOut('14', null, null, function(n) {
  n.innerHTML = "innerHTMLを変更";
  dojo.lfx.wipeIn(n).play();
});
wipeOut.play();

//PropertyAnimation
var anim = dojo.lfx.propertyAnimation(
  ["15"],
  [
    { property: "height", end:1},
    { property: "opacity", end: 0} ,
    { property: "top", end: 0},
    { property: "left", end: 0},
    { property: "width", end: 0}
  ],
  1000,
  dojo.lfx.easeInOut
).play();

//Scale
dojo.lfx.scale("16", 30, true, true, 500).play(1000);

//Fade Wipeout
dojo.lfx.fadeWipeOut('17', 1000).play();

//Fade Wipein
dojo.lfx.fadeWipeIn('18', 1000).play();

//Fade Show
dojo.lfx.fadeShow('19', 1000).play();

//Fade Hide
dojo.lfx.fadeHide('20', 1000).play();

2007年4月 3日 (火) Dojo | | コメント (0) | トラックバック (0)

« 2007年3月 | トップページ | 2007年5月 »