« 2007年4月 | トップページ | 2007年6月 »

2007年5月の10件の記事

2007年5月22日 (火)

ボタン

Buttonのwidgetを利用するには、dojo.widget.Buttonをrequireし、button要素に対してdojoType="Button"を指定する。通常のbutton要素と同じく、<button>~</button>で囲まれた部分がボタン上に表示される。

<script type="text/javascript">
dojo.require("dojo.widget.Button");
</script>
<button dojoType="Button"><b>click</b><br>test</button>

無効化

button要素にdisabled="true"属性を追加すると、無効化されたボタンが表示される。

<button dojoType="Button" disabled="true">test</button>

ボタンの有効/無効を動的に変えるには、ボタンのwidgetオブジェクトを取得してから、setDisabled(true)/setDisabled(false)メソッドを実行する。

<script type="text/javascript">
  dojo.require("dojo.widget.Button");

  function init(){
    dojo.event.connect(dojo.widget.byId('test'), 'onClick', 'toggleDisable');
  }
  function toggleDisable(){
    var button = dojo.widget.byId('disabledbutton');
    button.setDisabled(true);
  }
  dojo.addOnLoad(init);
</script>

<button dojoType="Button" widgetId="disabledbutton">test</button><p>
<button dojoType="Button" widgetId="test">click here</button>

ボタンのwidgetオブジェクトのdisabledプロパティの値を取得して、現在のボタンの状態を取得できる。

var button = dojo.widget.byId('disabledbutton');
var disabled = button.disabled;

ボタンの表示内容を変更

setCaption(str)メソッドを使ってボタンの表示内容(innerHTML)を変えることができる。

var button = dojo.widget.byId('setcaption');
button.setCaption('changed');

Button widgetを動的に作成

Buttonのwidgetを動的に作る例を以下に示す。

var makebutton = dojo.widget.createWidget("Button", {caption: "hello world", onClick: toggleDisable});
dojo.byId("makeb").appendChild(makebutton.domNode);

2007年5月20日 (日)

暗号/ハッシュ関数

Blowfish (暗号)

Dojoは、ライセンスフリーのBlowfish共通鍵暗号方法を提供している。

文字を暗号化するときは、dojo.crypto.Blowfish.encrypt(plaintext, key, ao)を用いる。plaintextに暗号化したい文字列、keyに暗号化に用いる鍵を指定する。aoは、ao.outputTypeとして出力形式, ao.cipherModeとして暗号化モードを指定できる。outputTypeには、Base64:0, Hex:1, String:2, Raw:3のいずれかを指定できる(デフォルトはBase64)。cipherModeには、ECB:0, CBC:1, PCBC:2, CFB:3, OFB:4, CTR:5のじずれかを指定できる。

暗号化された文字列を戻したいときは、dojo.crypto.Blowfish.decrypt(ciphertext, key, ao)を用いる。ciphertextに暗号化された文字列、keyには暗号化したときに用いた鍵を指定する。

dojo.require("dojo.crypto.Blowfish");

var message = "The rain in Spain falls mainly on the plain.";
var key = "foobar";
var enc = dojo.crypto.Blowfish.encrypt(message, key);
--> "WI5J5BPPVBuiTniVcl7KlIyNMmCosmKTU6a/ueyQuoUXyC5dERzwwdzfFsiU4vBw"

var dec = dojo.crypto.Blowfish.decrypt(enc, key);
--> "The rain in Spain falls mainly on the plain."

MD5 (ハッシュ関数)

MD5によるハッシュ値を求めるには、dojo.crypto.MD5.compute(data, outputType)を用いる。dataには、ハッシュ値を求めるデータを指定する。outputTypeは出力形式を指定する。

鍵付きのハッシュ関数を用いるときは、dojo.crypto.MD5.getHMAC(data, key, outputType)を用いる。keyに鍵を指定する。

dojo.require("dojo.crypto.MD5");

var message = "The rain in Spain falls mainly on the plain.";
var hash = dojo.crypto.MD5.compute(message);
--> "OUhxbVZ1Mtmu4zx9LzS5cA=="

SHA-1 (ハッシュ関数)

SHA-1はMD5と同じハッシュ関数である。SHA-1はMD5と同じく、computeとgetHMACの関数が提供されている。

dojo.require("dojo.crypto.SHA1");

var message = "The rain in Spain falls mainly on the plain.";
var hash = dojo.crypto.SHA1.compute(message);
--> "GJjfAfBq/Lm9o2JoVzEi2DujBHU="

行列計算

dojo.math.matrixに行列計算のための関数が提供されている。

以下に関数一覧を示す。各関数名は、"dojo.math.matrix."を省略している。

メソッド名概要
format(m, decimal_points)配列を文字列形式に変換する。引数として小数点以下の桁数を指定できる (デフォルトは5)
determinant(m)行列式を計算
scale(2, m)掛け算
multiply(m, m)
adjoint(m)余因子行列
inverse(m)逆行列
upperTriangle(m)上三角行列
transpose(m)転置行列
product2つ以上の行列の積
sum2つ以上の行列の和
create(a, b, value)a x bの行列をデフォルト値valueで作成する
ones(a, b)a x bの行列をデフォルト値1で作成する
zeros(a, b)a x bの行列をデフォルト値0で作成する
identity(size, scale)sizeの単位行列をscaleで掛け算して作成する
copy(a)複製を返す

以下に行列計算の例を示す。

dojo.require("dojo.math.matrix");

var m1 = [[1,2,3],[4,5,6],[7,8,9]];
var m2 = [[1,2,3],[1,2,3],[1,2,3]];
var m3 = dojo.math.matrix.multiply(m1, m2);
dojo.math.matrix.format(m3);
--> "| 6.00000 12.0000 18.0000 | | 15.0000 30.0000 45.0000 | | 24.0000 48.0000 72.0000 | "

XSLT

クロスブラウザ(IE, Mozilla, 一部Opera)で動作するXSLTのAPIを提供している。スタイルシートファイルを参照するURIを指定して dojo.xml.XslTransform をインスタンス化した後、以下のメソッドを実行する。

  • transformToDocument(xmlDoc, params): xmlDocを変換してXML Nodeとして結果を返す。paramsによりスタイルシートのパラメータを2次元配列で渡すことができる
  • getResultString(xmlDom, params, parentDoc): xmlDocを変換して文字列として結果を返す。parentDocはHTMLの親Nodeを指定する(documentを指定すればよい?)
  • transformToContentPane(xmlDoc, params, contentPane, parentDoc): 変換結果をdojo.widget.ContentPaneのインスタンス(contentPane)に追加する
  • transformToRegion(xmlDoc, params, region, parentDoc): 変換結果をregionで指定したHTML NodeのinnerHTMLに置き換える
  • transformToWindow(xmlDoc, params, windowDoc, parentDoc): 変換結果をwindowDocで指定したdocumentオブジェクトの中身に置き換える
dojo.require("dojo.xml.XslTransform");

var sampleXml;
dojo.io.bind({
  url: "sample.xml",
  mimetype: "text/xml",
load: function(type, dom, httpreq){ sampleXml = dom;}
});

var simpleProc = new dojo.xml.XslTransform("simple.xsl");
var region = document.getElementById("test");
var params = new Array();
params[params.length] = ["foo", "bar"];
params[params.length] = ["focus-id", "site_ind"];
simpleProc.transformToRegion(sampleXml, params, region, document);

2007年5月19日 (土)

文字列操作

dojo.stringには、文字列操作の関数が提供されている。

  • dojo.string.trim(str): 前後の空白文字を除く
  • dojo.string.trimStart(str): 前の空白文字を除く
  • dojo.string.trimEnd(str): 後ろの空白文字を除く
  • dojo.string.repeat(str, count, separator): separatorの文字列を挟んで、strをcount回数繰り返して繋げる
  • dojo.string.pad(str, len, c, dir): str.length
  • dojo.string.padLeft(str, len, c): dojo.string.pad(str, len, c, 1) と同じ
  • dojo.string.padRight(str, len, c): dojo.string.pad(str, len, c, -1) と同じ
  • dojo.string.isBlank(str): strが空白文字列かどうかをtrue/falseで返す
  • dojo.string.capitalize(str): strを全て大文字にして返す
  • dojo.string.escape(type, str): strをtype指定に応じて特殊文字をエスケープする。typeは、xml, html, xhtml, sql, regexp, regex, javascript, jscript, js, asciiのいずれかを指定できる
  • dojo.string.summary(str, len): len文字数以降を切り捨てて、最後に"..."を追加する
  • dojo.string.normalizeNewlines(str, newlineChar): 改行コードを newlineChar に置き換える。newlineCharは'\n'または'\r'のいずれかを指定できる。newlineCharを指定しないと、CRまたはLFをCRLFに置き換える

dojo.string.substituteParams(template, hash)は、テンプレートを指定して文字列を作成する。テンプレート文字列の%{str}の部分を、hash(オブジェクトまたは連想配列)で指定したstrパラメータの値で置き換える。%{0}のように数値で指定したときは、指定した数値+1番目の引数の値に置き換える。指定したパラメータが与えられないときはExceptionを返す。

dojo.require("dojo.string.extras");

var tpla = "This %{string} has %{parameters} %{toReplace}";
dojo.string.substituteParams(tpla, { string: "area", parameters: "foo", toReplace: "bar"});
-->"This area has foo bar"

var tplb = "Passed as arguments: %{0}, %{1}, %{2}.";
dojo.string.substituteParams(tplb, "zero", "one", "two");
-->"Passed as arguments: zero, one, two."

dojo.string.Builder

dojo.string.Builderは、文字列操作をするためのオブジェクトである。コンストラクタの引数には文字列/数値または文字列/数値配列を指定できる。Builderオブジェクトに対して、以下のメソッドを利用して、文字列操作ができる。

  • valueOf(): 文字列を返す
  • toString(): valueOfと同じ
  • append(arg1, arg2, ...): 文字列の最後に全ての引数(文字列または文字列の配列)を追加する
  • clear(): 文字列を空にする
  • replace(str1, str2): 最初に現れたstr1をstr2に置き換える
  • remove(start, length): startからlength文字数の文字列を削除する
  • insert(index, str): index番目に文字列strを追加する
dojo.require("dojo.string.Builder");

var c = new dojo.string.Builder("foo", "bar", ["baz", "thud"]);
c.toString();
-->"foobarbazthud"
c.remove(3, 2);
c.toString();
-->"forbazthud"

2007年5月18日 (金)

文字列の検証

dojo.validateには様々な文字列検証のための関数が用意されている。

文字列

dojo.validate.isText(value, flags)は、空文字列かどうかをチェックする。flagsを指定することで、文字列の長さ、最大の長さ、最小の長さを指定できる。文字列以外が指定されたときは常にtrueとなる。
dojo.require("dojo.validate");

dojo.validate.isText('txt');
dojo.validate.isText('123456', {length: 6});
dojo.validate.isText('123456', {maxlength: 6});
dojo.validate.isText('1234567', {minlength: 6});
dojo.validate.isText('1234567', {minlength: 6, maxlength:7});

数値

dojo.validate.isInteger(value, flags)は、数値かどうかをチェックする。引数のvalueは数値を文字列として指定する。flagsには、signedにtrue/false、separatorに区切り文字を指定できる。
dojo.require("dojo.validate");

dojo.validate.isInteger('+0');
dojo.validate.isInteger('1.000.000', {separator: "."});
dojo.validate.isRealNumber(value, flags)は、実数かどうかをチェックする。valueは数値を文字列として指定する。flagsは、placesとして小数点の位置を数値で指定する、decimalは小数点として使う文字列を指定する、exponentは浮動小数点表記を許すかどうかをtrue/falseで指定する、eSignedはeに+または-を付けることを許すかどうかをtrue/falseで指定する、その他、isIntegerと同じflagsを指定することができる。
dojo.require("dojo.validate");

dojo.validate.isRealNumber('+0');
dojo.validate.isRealNumber('1.0');
dojo.validate.isRealNumber('100.25e32', {exponent: true});
dojo.validate.isRealNumber('100.25', {places: 2});
dojo.validate.isInRange(value, flags)は、数値が指定した範囲内にあるかどうかをチェックする。valueは数値を文字列として指定する。flagsに数値範囲を指定する。flagsの値して、min, maxに数値、decimalとして小数点の文字列を指定できる。separatorおよびsymbolに指定した文字列は無視される。
dojo.require("dojo.validate");

dojo.validate.isInRange('10', {min: 1, max: 100});
dojo.validate.isInRange('-50', {min: -100, max: 100});
dojo.validate.isInRange('5.7e28', {min: 5.567e28, max: 6.000e28});
dojo.validate.isInRange('1,500,000', {separator: ',', min: 0});
dojo.validate.isCurrency(value, flags)は貨幣単位を含む数値かどうかをチェックする。flagsには、signed, symbol, placement, separator, fractional, cents, decimalを指定できる。fractionalとcentsは小数点を許すかどうかをtrue/falseで指定する。placementは、symbolの位置を'before'または'after'で指定する。
dojo.require("dojo.validate");
dojo.validate.isCurrency('\u20AC 123.456.789,00', {separator: ".", decimal: ",", symbol:"\u20AC"});

dojo.require("dojo.validate.us");
dojo.validate.us.isCurrency('$1,000');
dojo.validate.us.isCurrency('$1,000.25', {cents: true});

dojo.require("dojo.validate.jp");
dojo.validate.isJapaneseCurrency('\u00a51,000');
dojo.validate.isJapaneseCurrency('- \u00a510,000,000');

dojo.require("dojo.validate.de");
dojo.validate.isGermanCurrency('1.000 \u20AC');

Web

dojo.validate.isIpAddress(value, flags)はIPアドレス(IPv4 or IPv6)として正しいかをチェックする。flagsとして、allowDottedDecimal, allowDottedHex, allowDottedOctal, allowDecimal, allowHex, allowIPv6, allowHybridそれぞれにtrue/falseを指定できる。デフォルトは全てtrueとなる。
dojo.require("dojo.validate.web");

dojo.validate.isIpAddress('24.17.155.40');
dojo.validate.isIpAddress('24.17.155.40', {allowIPv6: false});
dojo.validate.isIpAddress('0x18.0x11.0x9b.0x28');
dojo.validate.isIpAddress('3482223595');
dojo.validate.isUrl(value, flags)は、正しいURL文字列かチェックする。flagsとして、allowLocal, allowIP, allowPort, scheme, それぞれにtrue/falseを指定できる。schemeがtrueのときは頭にhttp/https/ftp/ftpsがあるかチェックする。tldはドメイン名のチェックをする。host, ipAddress, tldのチェックと同じ
dojo.require("dojo.validate.web");

dojo.validate.isUrl('www.yahoo.com');
dojo.validate.isUrl('http://www.yahoo.com');
dojo.validate.isUrl('localhost:8080', {allowLocal: true});
dojo.validate.isUrl('http://www.yahoo.com/index.html?a=12&b=hello%20world#anchor');
dojo.validate.isEmailAddress(value, flags)は、Emailアドレスとして正しいかをチェックする。flagsとしてallowCruftにtrue/falseを指定できる。host, ipAddress, tldのチェックと同じ
dojo.require("dojo.validate.web");

dojo.validate.isEmailAddress('x@yahoo.com')
dojo.validate.isEmailAddress("", {allowCruft: true});
dojo.validate.isEmailAddressList(value, flags)は、Emailアドレスのリスト表現として正しいかをチェックする。listSeparatorを指定できる。emailAddress, host, ipAddress, tldのチェックと同じ
dojo.require("dojo.validate.web");

dojo.validate.isEmailAddressList(
  "x@yahoo.com \n x.y.z.w@yahoo.com ; o'mally@yahoo.com , fred&barney@stonehenge.com");
dojo.validate.isEmailAddressList(
  "mailto:x@yahoo.com; ; ; fred&barney@localhost", 
	{allowLocal: true, allowCruft: true, listSeparator: ";"});
dojo.validate.getEmailAddressList(value, flags)は、valueに含まれるEmailアドレスを配列にして返す。flagsにはisEmailAddressListと同じflagsを指定できる。

クレジットカード

クレジットカード番号のためのチェックをする関数として以下の4つが提供されている。
  • dojo.validate.isValidLuhn(value): Luhnアルゴリズムを使ってクレジットカード番号をチェックする
  • dojo.validate.isValidCvv(value, ccType): ccTypeに対して、CCV(value)が正しいかをチェックする
  • dojo.validate.isValidCreditCardNumber(value, ccType): ccTypeに対して、クレジットカード番号が正しいかチェックする
  • dojo.validate.isValidCreditCard(value, ccType): isValidLuhnとisValidCreditCardNumberの両方をチェックする
ccTypeは、以下のいずれかを指定する。
  • mc: Mastercard
  • ec: Eurocard
  • vi: Visa
  • ax: American Express
  • dc: Diners Club
  • bl: Carte Blanch
  • di: Discover
  • jcb: JCB
  • er: Enroute
以下に実行例を示す。
dojo.require("dojo.validate.creditCard");

dojo.validate.isValidLuhn('5105105105105100');
dojo.validate.isValidLuhn('5105-1051 0510-5100');
dojo.validate.isValidLuhn(38520000023237);
dojo.validate.isValidCvv('123','mc');
dojo.validate.isValidCvv(612,'ec');
dojo.validate.isValidCreditCard('5105105105105100','mc')

2007年5月15日 (火)

タイマー

setTimeout

setTimeoutを拡張したdojo.lang.setTimeoutを提供する。タイマーにより実行する関数とそのscope、引数を指定できる。
  • dojo.lang.setTimeout(func, delaynum, arg1, arg2, ...);
  • dojo.lang.setTimeout(scope, func, delaynum, arg1, arg2, ...);

delayThese

dojo.lang.delayTheseを利用して、複数の関数を一定間隔で実行することができる。
  • dojo.lang.delayThese(array funcArray, function callback, number delay, function onend)
  • dojo.lang.delayThese(array funcArray, number delay)
  • dojo.lang.delayThese(array funcArray, function callback, function onend)
  • dojo.lang.delayThese(array funcArray, function callback)
  • dojo.lang.delayThese(array funcArray)

funcArrにより指定した関数の配列をdelay(ミリ秒)の時間を空けて1つずつ実行する。 callbackが指定されたときは、funcArrの関数を実行した後にcallbackが毎回呼ばれる。 onendが指定されたときは、opendがfuncArrを全て実行した後に呼ばれる。

function func1(a1, a2){
  dojo.debug('func1');
}
function func2(){
  dojo.debug('func2');
}
function func3(){
  dojo.debug('func3');
}
function cb(){
  dojo.debug('cb');
}
function onend(){
  dojo.debug('onend');
}
var funcarr = new Array(3);
funcarr[0] = func1;
funcarr[1] = func2;
funcarr[2] = func3;

function init() {
  dojo.lang.delayThese(funcarr, cb, 1000, onend);
}
dojo.addOnLoad(init);
-->
DEBUG: func1
DEBUG: cb
DEBUG: func2
DEBUG: cb
DEBUG: func3
DEBUG: cb
DEBUG: onend

2007年5月12日 (土)

DOM操作

DOMノードの操作するメソッドがdojo.domに提供されている。以下に例を示す。利用するときは、dojo.domをrequireする。
dojo.require("dojo.dom");

var str = "<a><b>b1txt</b><b>b2txt</b><b2><c>c1txt</c><c>c2txt</c></b2></a>";
var dom = dojo.dom.createDocumentFromText(str);
var elm = dojo.dom.firstElement(dom.firstChild, 'b2');
var str2 = dojo.dom.innerXML(elm);
--> "<b2><c>c1txt</c><c>c2txt</c></b2>"
var tagName = dojo.dom.isTag(elm, "a", "b", "b2");
--> "b2"

以下にdojo.domのメソッド一覧を示す。

メソッド名概要
isNode(obj)引数のobjectがDOM Elementであるかどうかをbooleanで返す
firstElement(parentNode, tagName)タグ名が文字列tagNameである最初の子要素を取得する
lastElement(parentNode, tagName)タグ名が文字列tagNameである最後の子要素を取得する
nextElement(node, tagName)タグ名が文字列tagNameである次の要素を取得する
prevElement(node, tagName)タグ名が文字列tagNameである前の要素を取得する
moveChildren(srcNode, destNode, trim)srcNodeの子要素をdestNodeの子要素に移し、移動させた要素数を返す。trim==trueを指定するとテキストノードを取り除く
copyChildren(srcNode, destNode, trim)srcNodeの子要素をdestNodeに子要素としてコピーし、コピーした要素数を返す。trim==trueを指定するとテキストノードを取り除く
replaceChildren(node, newChild)nodeの全ての子要素を取り除き、newChildに置き換える
removeChildren(node)nodeの全ての子要素を取り除き、除いた要素数を返す
replaceNode(node, newNode)nodeをnewNodeに置き換え、取り除いたnodeの参照を返す
destroyNode(node)nodeを取り除く
removeNode(node)nodeが親を持つとき、親からnodeを取り除き、取り除いたnodeの参照を返す
getAncestors(node, filterFunction, returnFirstHit)optionのfilterFunctionにマッチする(filterFunction(node)==trueとなる)全ての祖先要素を返す。returnFirstHit==trueのときは、最初にマッチした祖先要素のみを返す
getAncestorsByTag(node, tag, returnFirstHit)要素名tagである全ての祖先要素を返す。returnFirstHit==trueのときは、最初にマッチした祖先要素のみを返す
getFirstAncestorByTag(node, tag)要素名tagである最初の祖先要素を返す
isDescendantOf(node, ancestor, guaranteeDescendant)nodeがancestorの子孫要素であるかどうかをbooleanで返す。guaranteeDescendant==tureを指定するとnodeとancestorが同じときにfalseとなる
innerXML(node)DOM Element(node)のXML文字列表現を返す
createDocument()クロスブラウザのXML Documentを作成する
createDocumentFromText(str, mimetype)XML文字列(str)をDOM Elementにして返す。Firefoxのときは、mimetype指定を指定した場合、new DOMParser().parseFromString(abc, "text/html")のように使うことができる
prependChild(node, parent)parentの最初の子要素にnodeを追加する
insertBefore(node, ref, force)refの前にnodeを移動させ、移動できたときはtrueを返す。force==trueのときはnodeとrefが同じ要素、refがnodeの前の要素であってもtrueを返す
insertAfter(node, ref, force)refの後ろにnodeをを移動させ、移動できたときはtrueを返す。force==trueのときはnodeとrefが同じ要素、refがnodeの後の要素であってもtrueを返す
insertAtPosition(node, ref, position)refに対するpositionの指定("before", "after", "first", "last")に基づいてnodeを追加する
insertAtIndex(node, containingNode, insertionIndex)containingNodeの子要素のinsertIndex番目にnodeを追加する
textContent(node, text)nodeの子要素をXML文字列(text)に置き換える
hasParent(node)nodeが親要素を持つかどうかをbooleanで返す
isTag(node, tagName1, tagName2, ...)nodeの要素名がtagName1, 2...として与えた名前の中に当てはまるものがあればその名前を文字列として返す。ないときは空文字列を返す
setAttributeNS(elem, namespaceURI, attrName, attrValue)DOM2のsetAttributeNSの実装

2007年5月 6日 (日)

色指定/変換

Dojoにおける色指定はColorオブジェクトを用いる。Colorオブジェクトは、ドローイングAPIにおいても用いられる。

Colorオブジェクトを利用するときは、dojo.gfx.colorをrequireする。以下にColorオブジェクトの作成例を示す。6桁または3桁のRGBカラーコード文字列(最初に#があってもなくてもよい)、CSSにおけるRGB指定の文字列、RGBの3つの数値または長さ3の数値配列のいずれかを指定できる。

dojo.require("dojo.gfx.color");
new dojo.gfx.color.Color("#003399")
new dojo.gfx.color.Color("rgb(0,51,153)")
new dojo.gfx.color.Color([0,51,153])
new dojo.gfx.color.Color(0,51,153)

各指定方法の最後にアルファチャネルを指定することもできる。

new dojo.gfx.color.Color("#003399", 0.5)
new dojo.gfx.color.Color("rgb(0,51,153)", 0.5)
new dojo.gfx.color.Color([0,51,153,0.5])
new dojo.gfx.color.Color(0,51,153,0.5)

Colorオブジェクトに対して、toXXX()メソッドを用いて様々な色指定方法に変換できる。HSV, HSLを用いるときは、それぞれ、dojo.gfx.color.hsv、dojo.gfx.color.hslをrequireする。

色指定方法メソッド概要
RGBtoRgb()RGBの3つの数値の配列を返す
RGB+αチャネルtoRgba()RGBとαチャネルを含む4つの数値の配列を返す
HEXtoHex()"#003399"のように、#と6桁のRGBカラーコード文字列を返す
CSStoCss()"rgb(0, 51, 153)"のようにrgb(...)を含んだRGBカラーコードの文字列を返す
HSVtoHsv()HSV(色相、彩度、輝度)の3つの数値の配列を返す
HSLtoHsl()HSL(色相、彩度、明度)の3つの数値の配列を返す

以下のdojo.gfx.colorのメソッドを用いて変換することもできる。

  • dojo.gfx.color.extractRGB(hex or "css-style string")
  • dojo.gfx.color.rgb2hsv(rgb)
  • dojo.gfx.color.rgb2hsl(rgb)
  • dojo.gfx.color.rgb2hex(rgb)
  • dojo.gfx.color.hsv2rgb(hsv)
  • dojo.gfx.color.hsl2rgb(hsl)
  • dojo.gfx.color.hsl2hex(hsl)
  • dojo.gfx.color.hex2rgb(hex)
  • dojo.gfx.color.hex2hsl(hex)

dojo.gfx.Colorspaceを用いて色指定方法を変換することもできる。dojo.gfx.Colorspaceを用いて変換するときは、dojo.gfx.Colorspaceをrequireし、dojo.gfx.Colorspaceオブジェクトを作成する。Colorspaceオブジェクトのconvertメソッドを用いて変換できる。

convertメソッドの最初の引数で、変換元の色指定方法における色指定を配列で指定する。2つ目の引数で変換元の色指定方法、3つ目の引数で変換先の色指定方法を指定する。以下に変換例を示す。

dojo.require("dojo.gfx.Colorspace");
var c = new dojo.gfx.Colorspace();
var cmy = c.convert([0,51,153], 'RGB', 'CMY');

以下に変換できる色指定方法の一覧を示す。

色指定方法配列での指定方法
RGB RGBを表す長さ3の配列
XYZ XYZ色空間を表す長さ3の配列
xyY XYZ系の変形であるxyY色空間を表す長さ3の配列
Lab Lab色空間の明度、赤~緑(a軸)、黄~青(b軸)を表す長さ3の配列
LCHab LCHab色空間を表す長さ3の配列
Luv Luv色空間の明度指数、色度(u)、色度(v)を表す長さ3の配列
LCHuv LCHuv色空間を表す長さ3の配列
CMY CMYを表す長さ3の配列
CMYK CMYKを表す長さ4の配列
HSV 色相、彩度、明度を表す長さ3の配列
HSL 色相、彩度、輝度を表す長さ3の配列

2007年5月 1日 (火)

IFrameを使った呼び出し

dojo.io.bindは、デフォルトではXMLHttpRequestを使ってサービスを呼び出すが、IFrameを使って呼び出すこともできる。 IFrameを使った場合、XMLHttpRequestを実装していない古いブラウザでも動作するメリットがある。一方で、IFrameでは、GETのみでPOSTが使えないため、主に情報の取得のみに使う。

IFrameを使って呼び出すときは、"dojo.io.IframeIO"をrequireし、dojo.io.bindの引数のtransportプロパティとして、"IframeTransport"を指定する。

IFrameを使ったときのサービスはHTMLを返す。mimetypeとしてtext/htmlを指定したときは、HTML全体のDOMを取得できる。以下にHTMLを返すサービスを呼び出す例を示す。

dojo.require("dojo.io.*");
dojo.require("dojo.io.IframeIO");

dojo.io.bind({
  url: "iframe.html",
  mimetype: "text/html",
  transport: "IframeTransport",
  content: {
    param1: "aa",
    param2: "bb"
  },
  load: function(type, data, evt) { alert(data);}
});

text/plain, text/javascript, text/json, application/jsonを指定したときは、サーバが返すHTML内の<textarea>以下に送りたい情報を含める。text/plainのときは、<textarea>以下の文字列がそのまま返る。text/javascriptのときは、<textarea>以下の文字列がevalされる。text/json, application/jsonのときは、<textarea>以下にJSON形式の文字列がJSONオブジェクトに変換されて返される。以下にJSONオブジェクトを返すときのIFrame HTMLの例を示す。

<html>
  <head></head>
  <body>
    <textarea>{"test": "hello"}</textarea>
  </body>
</html>

IFrameを使ったときはtext/xmlに対応していない。

« 2007年4月 | トップページ | 2007年6月 »