2009年2月27日金曜日

Argumentsオブジェクト

JavaScriptの関数は、引数の数が固定ではありません。
だから、

function test1(a, b, c) {
/*コード*/
}

とか書いても、

test1("test1");

と呼び出すことができます。
引数が少なかった場合は、残りの引数はundefinedになります。
じゃあ、多かった場合はどうするの?ってことになりますが、
それは Argumentsオブジェクトを利用して取得することができます。
下記はArgumentsオブジェクト(argments)を使って引数を取り出しています。

function argument_test() {
str = "";
for (var i = 0;i <= arguments.length;i++) {
   str += arguments[i];
}
document.getElementById("result").innerHTML = str;
}

function load_func() {
argument_test("test1", "test2", "test3");
}

上記は、test1test2test3が出力されます。

引数にオブジェクトを渡して for/in文で取り出すなんかもできます。

function argument_object_test() {
str = "";
for (var i = 0; i < arguments.length; i++) {
var target = arguments[i];
for (var name in target) {
str += target[name] + " ";
}
}
document.getElementById("result").innerHTML = str;
}

function func1() {
argument_object_test({
aibu: "saki",
horikita: "maki",
ueto: "aya",
});
}


これはJQuerryなんかでも使われていて、

jQuery.extend = jQuery.fn.extend = function() {
// copy reference to target object
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

のようにArgumentsオブジェクトを利用しています。
で利用する側は

jQuery.fn.extend({
show: function(speed,callback){
....
});

のようにオブジェクトを渡したりしています。

DHTMLのコンテンツばかり書いていると、
このようなコアJavaScriptについてついつい忘れてしまうものです。
もっと勉強しないとね。


2009年2月25日水曜日

2009年2月22日日曜日

OperaウィジェットでSVGのデジタル時計


ブラウザベンダがFlashやSilverlightのようなリッチコンテンツに対抗するには、標準仕様のSVGをサポートするのが一番であり、OperaはSVGのサポートをガンガン増やしています。
Opera ウィジェットはレンダリングエンジンがブラウザそのものなので、SVGが使用できます。
Operaが入っている環境ならばWindowsだろうがMac OSXだろうがLinuxだろうが、もちろんWiiだろうがSVGを利用したウィジェットを楽しむことができます。



Opera のウィジェットで
SVG を使って画像にあるようなデジタル時計を作成してみました。

config.xml
<?xml version="1.0"?>
<widget>
<widgetname>SVG Clock</widgetname>
<width>350</width>
<height>350</height>
</widget>

index.html
<html>
<head>
<script type="text/javascript" src="script/clock.js"></script>
</head>
<body>
<object id="svgdoc" type="image/xml+svg" data="clock.svg" width="350" height="350" />
</body>
</html>

clock.svg
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="150" cy="150" r="140" fill="#FFFFFF" stroke="#0000FF" stroke-width="10" />
<g>
<text x="130" y="50" font-size="30pt">12</text>
<text x="250" y="160" font-size="30pt">3</text>
<text x="135" y="280" font-size="30pt">6</text>
<text x="30" y="160" font-size="30pt">9</text>
</g>
<line xml:id="h_line" x1="150" y1="150" x2="150" y2="0"
stroke="#000000" stroke-width="5" />
<line xml:id="m_line" x1="150" y1="150" x2="150" y2="0"
stroke="#000000" stroke-width="5" />
<line xml:id="s_line" x1="150" y1="150" x2="150" y2="0"
stroke="#FF0000" stroke-width="5" />
</g>
</svg>

clock.js
function clock() {
var svgdocument = document.getElementById('svgdoc').getSVGDocument();
var svgNS = "http://www.w3.org/2000/svg";

var cx = 150;
var cy = 150;
var r = 140;

var now = new Date();
var hou = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var h_line = svgdocument.getElementById('h_line');
var m_line = svgdocument.getElementById('m_line');
var s_line = svgdocument.getElementById('s_line');

h_rad = 2 * Math.PI * (hou/12);
h_line.x2.baseVal.value = cx + 0.8 * r * Math.sin(h_rad);
h_line.y2.baseVal.value = cy - 0.8 * r * Math.cos(h_rad);

m_rad = 2 * Math.PI * (min/60);
m_line.x2.baseVal.value = cx + r * Math.sin(m_rad);
m_line.y2.baseVal.value = cy - r * Math.cos(m_rad);

s_rad = 2 * Math.PI * (sec/60);
s_line.x2.baseVal.value = cx + r * Math.sin(s_rad);
s_line.y2.baseVal.value = cy - r * Math.cos(s_rad);

setTimeout(clock, 1000);
}

window.addEventListener('load',
function(e){ clock();},
false);

2009年2月19日木曜日

GM_setValue / GM_getValue

覚書。

GM_setValue はFirefoxを終了させたとしても消えないデータを作成する事ができる。
GM_setValue(name, value)で設定できる。

GM_getValue は GM_setValue で設定した値を取得できる。
GM_getValue(name)で取得できる。
GM_getValue(name, default) でデフォルト値を設定して、値が取れなかった時も対応できる。

これを利用すれば、prototype.js を GreaseMonkey で簡単に使えるようになるようです。
prototype.js を GM_setValue() で設定して、利用するときは GM_getValue() で取得してevalすればできるようです。
Greasemonkeyで永続的に外部スクリプトを利用する

2009年2月18日水曜日

グリモンでXPath

XPathって何に使われているかいまいちよくわからなかったけど、
ユーザスクリプトでwebページを加工するのに便利そう。

練習で、yahooの要素を目立たせるスクリプトを書いてみた。


// ==UserScript==
// @name xpath_test
// @namespace sassy
// @description xpath test
// @include http://www.yahoo.co.jp/
// ==/UserScript==

(function(){
var xp = document.evaluate("//span", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i <>
xp.snapshotItem(i).style.background = "#FF0000";
}
})()


Document.evaluate() でXPathで指定した要素を探し、 XPathResult.snapshotItem()で検索結果の要素を参照しています。
XPathについては下記が参考になると思います。
https://developer.mozilla.org/ja/Introduction_to_using_XPath_in_JavaScript

2009年2月16日月曜日

絶滅危惧種


現在、社内で唯一のSVG担当者となってしまっているため、SVGに関する質問はほぼ100%僕のところに来ます。
ちょっと前まで、「俺に任せろ!」と胸を張っていたわけですが、ここのところずっとSVGに関してはご無沙汰であるため、たまに質問がくるとうまく答えられないことがあります。
今日もに関して質問されて、即答できませんでした。。。

これではいかん。SVGの仕様書をもう一度読みなすつもりです。
http://www.w3.org/TR/SVGTiny12/

はじめてのグリモンスクリプト

とりあえず、練習で書いてみた。

アメブロの文章のbackgroundColorを水色にして、フォントをboldにしてみました。


// ==UserScript==
// @name BlogWatch
// @namespace sassy
// @description blogを観るScript
// @include http://ameblo.jp/*
// ==/UserScript==

(function(){
var title = document.getElementsByTagName("div");
var div = document.getElementsByTagName("div");
for (var i = 0; i <>
if (div[i].className == "subContents") {
div[i].style.backgroundColor = "#99FFFF";
div[i].style.fontWeight = "bold";
}
}
})()


どうだ!(ほんとうに簡単なスクリプトだから自慢する意味がないんだけど。)

しかし、以前友人が JavaScript でクラス名でノードが取れないのは不便だ!っといっていましたが、たしかに不便ですね。CSSのためにめちゃめちゃclass使っているコンテンツもあるわけだし。

たぶん、DOM的にはclassなんていう概念は存在しないのだろうけど、(Nodeを特定するのはidなわけだし)でも現実的にはあった方が便利そうだな。

2009年2月15日日曜日

Greasemonkey

自宅のFireFoxにGreasemonkeyを導入しました!!
仕事では、テストのためにJavaScriptをちょこちょこ書いていますが、実はかなり自信がないため、
「自分のブラウジング生活が向上し、JavaScriptのスキルも向上し一石二鳥やん!素敵やん!」
と思い、入れていました。(会社のFireFoxには入れているけど、全く使ってなかったなぁ。。。。)

とりあえず、貪欲にいろいろ書いてみよっと!

2009年2月14日土曜日

モンスターハンター

最近、もっぱらモンスターハンターにはまっております。だいたい、毎日1時間ほどプレイしており、もうかれこれ、半月くらいたちました。

現在、ティガレックスが倒せず、伸び悩み中。片手剣じゃ限界なのかな。。。