Perlを中心とした技術系の話などをつらつら

2005年09月30日

続・onload時に複数のfunctionを実行するJavaScript

ちょっと前に書いたonload時に複数のfunctionを実行するJavascriptというエントリーへのkoさんのコメントでaddEventListenerというのを初めて知りました。

これは何なんだろうということで、調べてみると、W3C DOM Level2 のイベントモデルでイベントハンドリングを行う際に使う関数だということがわかりました。

もう少し調べてみると、このDOM Level2、FirefoxなどMozilla系のブラウザには実装されているようなのですが、IEには実装されていないため、addEventListenerが使えず、そのかわりに同等の機能をもったattachEventという関数が定義されているそうです。

将来的にはIEもDOM Level2をサポートして、addEventListenerが使えるようになると思いますが、現状では、ブラウザを判定してaddEventListenerを使うか、attachEventを使うかを切り替える必要がありそうです。うーん、めんどくさい。。

なので、ブラウザに依存しない前回書いた方法もまんざら無駄骨ということもなかったかな、と思っていたんですが、昨日友人にイベントの登録はprototype使えば簡単にできるよといわれ、無駄骨だったことが確定しましたｗ

prototype.jsを使ったonload時に実行するfunctionの登録はこんな感じです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Event observe sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<script type="text/javascript" src="/js/prototype-1.3.1.js"></script>
<script type="text/javascript">
function foo() {alert('foo')}
function bar() {alert('bar')}
function baz() {alert('baz')}
Event.observe(window, 'load', foo, false);
Event.observe(window, 'load', bar, false);
Event.observe(window, 'load', baz, false);
</script>
</head>
<body></body>
</html>

prototype.jsで定義されているEvent.observeを使って関数を登録します。引数は最初に対象となるオブジェクトを渡すところ以外はaddEventListenerと同じです。IE6とFirefox1.0.7で動作することを確認しました。

IEと、Firefoxでは関数の実行順が逆になってましたが、DOM Level２でもイベントの実行順は定義されてないことと、そもそも実行順に結果が依存するような関数はひとつにまとめておくべきだと思うので、これは問題にならなそうです。

prototypeにはこれ以外にもまだまだ知らない便利な関数、クラスがたくさんありそうです。prototype恐るべし。

Posted by horiuchi at 10:37 | Permalink | Comments (1) | TrackBack (0)

Movable Type 3.2 日本語版の提供を開始

Movable Type 3.2 日本語版がリリースされたみたいですね。

落ち着いたら移行しよっと。

via: Six Apart - MovableType News: Movable Type 3.2 日本語版の提供を開始

Posted by horiuchi at 10:04 | Permalink | Comments (0) | TrackBack (0)

2005年09月28日

Google VideoでFlashVideoを採用！

なんとGoogleVideoがムービーの再生にFlashを採用しました！

Googleがオープンソースでない技術を採用したのにちょっとびっくり。

How do I playback video?

In order to playback video on Google Video, you simply need to have Macromedia Flash Player installed on your computer. Once installed, you will be able to playback the video from within your browser.


次世代のムービーの標準になったらいいなー。


Google Video Help

Posted by horiuchi at 21:19 | Permalink | Comments (0) | TrackBack (0)

2005年09月19日

onload時に複数のfunctionを実行するJavaScript

昨日に引き続きJavaScriptねたです。

ページを表示した時点でJavaScriptを実行したい場合、

window.onload=function(){ alert('called when window is loaded.'); }

のようにwindowオブジェクトのonloadイベントに実行したいfunctionをセットしてやればいいのですが、これだと、オンロード時にひとつのfunctionしか実行できません。

そこで、オンロード時に複数のfunctionを実行できるようなスクリプトを書いてみました。今回のコードはnaoyaさんのprototype.js でデザインパターン - IteratorのエントリにあるIteratorパターンのコードをそのまま借りたリスペクト指向プログラミングになってますｗ

//multiple_onload.js
var OnloadFunction = Class.create();
OnloadFunction.prototype = {
    initialize : function(func) {
        this.func = func;
    },
    getFunc : function() {
        return this.func;
    }
};
var OnloadFunctions = Class.create();
OnloadFunctions.prototype = {
    initialize : function() {
        this.last = 0;
        this.functions = new Array();
    },
    getFunctionAt : function(index) {
        return this.functions[index];
    },
    appendFunction : function(func) {
        this.functions[this.last] = func;
        this.last++;
    },
    getLength : function() {
        return this.last;
    },
    iterator : function() {
        return new OnloadFunctionIterator(this);
    }
}
var OnloadFunctionIterator = Class.create();
OnloadFunctionIterator.prototype = {
    initialize : function(functions) {
        this.functions = functions;
        this.index = 0;
    },
    hasNext : function () {
        return this.index < this.functions.getLength();
    },
    next : function() {
        return this.functions.getFunctionAt(this.index++);
    }
}
var onloadFunctions = new OnloadFunctions();
function multipleOnload () {
    var it = onloadFunctions.iterator();
    while (it.hasNext()){
        var func = it.next();
        func.func();
    }
}
window.onload = multipleOnload;

使用方法はこんな感じです。

動作させるにはprototype.jsが必要なので最初にインクルードしています。

<html>
<head>
<script type="text/javascript" src="/js/prototype-1.3.1.js" ></script>
<script type="text/javascript" src="/js/multiple_onload.js" ></script>
<script type="text/javascript">
functon foo() {alert('foo');}
functon bar() {alert('bar');}
functon baz() {alert('baz');}
onloadFunctions.appendFunction(new OnloadFunction(foo) ); 
onloadFunctions.appendFunction(new OnloadFunction(bar) ); 
onloadFunctions.appendFunction(new OnloadFunction(baz) ); 
</script>
</head>
<body>
...
</body>
</html>

まず、multiple_onload.jsをインクルードしておきます。そして、定義したfunctionをappendFunctionメソッドを使ってセットしておきます。

これでfoo,bar,bazがオンロード時に順番に実行されます。

Posted by horiuchi at 06:03 | Permalink | Comments (7) | TrackBack (1)

2005年09月18日

画像のスワップをクラス名で制御するJavaScript（プリロード付き）

ちょっとJavaScriptをまじめに勉強しようかと思い始めました。

というわけで、手始めにマウスオーバーすると別画像に切り替わるスクリプトを書いてみました。

マウスオーバーで画像が切り替わるなんて、Dreamweaver使えばJavaScriptを知らなくてもできてしまうんですが、Dreameweaverが吐き出すコードはHTMLタグの中にonload="xxxxxxxx"とか、onmouseover="xxxxx"をやたらと追加して、非常に見づらいのです。

これだとテキストエディタでちょろっとHTMLを編集したい時に大変ですし、きっとGoogleさんもクロールしにくいでしょうから、imgタグに予めスワップ用に設定しておいたクラス名を記述しておけば、マウスオーバー、マウスアウトで画像が切り替わるようにしてみました。

作成したスクリプトはこんな感じです。クラス名から要素を取得するところはprototype.jsから借りてきました。

// swap_image.js
var imagesNormal = new Object();
var imagesHilite = new Object();
function SwapImage (name,normalSrc,hiliteSrc) {
   this.name = name;
   this.normalSrc = normalSrc;
   this.hiliteSrc = hiliteSrc;
}
function setupSwapImages(swapImages) {
    preloadSwapImages(swapImages);
    setupSwapEvent(swapImages);
}


function preloadSwapImages (a) {
    for (var i=0; i < a.length; i++){
        imagesNormal[a[i].name] = new Image();
        imagesNormal[a[i].name].src = a[i].normalSrc;
        imagesHilite[a[i].name] = new Image();
        imagesHilite[a[i].name].src = a[i].hiliteSrc;
    }
}
function setupSwapEvent (a) {
    for (var i=0; i<a.length; i++){
        var images = getElementsByClassName(a[i].name);
        for (var j=0; j<images.length; j++){
            var image = images[j];
            if (image.getAttribute("src")){
               image.onmouseover = function () {swapImage( this, "hilite" );}
               image.onmouseout  = function () {swapImage( this, "normal" );}
            }
        }
    }
}
// 2006-05-15追記
function swapImage(image,type){
    if (type=="hilite") {
       image.src = imagesHilite[image.className].src;
    } else if (type=="normal") {
       image.src = imagesNormal[image.className].src;
    }
}
// 追記ここまで（こぴぺしわすれ・・。）
// copied from prototype.js v1.3.1
// http://prototype.conio.net/
function getElementsByClassName (className) {
  var children = document.getElementsByTagName('*') || document.all;
  var elements = new Array();
  for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var classNames = child.className.split(' ');
    for (var j = 0; j < classNames.length; j++) {
      if (classNames[j] == className) {
        elements.push(child);
        break;
      }
    }
  }
  return elements;
}

実際の使用例はこんな感じです。クラス名により画像のスワップを制御するようにすることで、HTMLがすっきりしました。さらにhead要素内のscriptタグを削除してもValidなHTMLのままってところもいいですよね。

<html>
<head>
<script type="text/javascript" src="/js/swap_image.js" ></script>
<script type="text/javascript">
var swapImages = [
new SwapImage('class01','/images/foo.gif', '/images/foo_onmouse.gif'),
new SwapImage('class02','/images/bar.gif', '/images/bar_onmouse.gif'),
new SwapImage('class03','/images/baz.gif', '/images/baz_onmouse.gif')
];
window.onload = function () {setupSwapImages(swapImages);};
</script>
</head>
<body>
<img src="/images/foo.gif" class="class01" />
<img src="/images/bar.gif" class="class02" />
<img src="/images/baz.gif" class="class03" />
</body>
</html>

Posted by horiuchi at 02:38 | Permalink | Comments (2) | TrackBack (0)

2005年09月14日

Sledge::Dispatcherリリース

Sledge用のmod_perlハンドラSledge::Dispatcherがリリースされたみたいです。

トリガのCGIファイルを作らないですむのはかなり便利ですね。

もうひとつ僕がいいなーとおもったのは、URLからPages内のdispatchメソッドがどこにあるかわかりやすくなるなーという点。

トリガのCGIファイルを使う場合、CGIファイル内に呼び出すPagesクラスを記述するのですが、Pagesクラスならどのクラスも

呼べるので、適当に設計して作っていると、URLとPagesクラスが対応しなくなっちゃうときがあるんです。特に僕はちょっと考えたら、

まず手を動かしちゃう人なので、うまく対応しなくなってCGIファイルを編集しなおしなんてことをよくやっちゃいます。

なので、dispatchメソッドを書いた時点でURLが決定するSledge::Dispatcherはかなりイイ！と思いました。

via: #!shebang.jp:Sledge::Dispatcher

Posted by horiuchi at 21:18 | Permalink | Comments (0) | TrackBack (0)

Google Blog Search 突然リリース

Googleのブログ検索が突然リリースされたようです。

Google Blog Search

ブログ検索もGoogleがすべて持っていってしまうのか、今後に注目です。

Posted by horiuchi at 20:15 | Permalink | Comments (0) | TrackBack (4)

2005年09月11日

Class::DBI 3.0.1の中身は0.96

MFPMのRecent MailでClass::DBIが3.0.1にバージョンアップしたことを知りました。

search.cpan.org: Tony Bowden / Class-DBI-3.0.1

早速何が変わったのかChangesを見てみると、、

3.0.1 UNRELEASED
  • Code is identical to 0.96
  • New section added to documentation on Release Philosophy
  • Replace eq_set with is_deeply in t/04 to work around Test::More bug
3.0.0 UNRELEASED
  • IDENTICAL to 0.96. Only difference is version renumbering.

ということで、中身は0.96と同じで、バージョンを付け直しただけみたいです。

これから大きなバージョンアップを行う下準備というところでしょうか。

Posted by horiuchi at 20:54 | Permalink | Comments (0) | TrackBack (0)

2005年09月03日

オフィス崩壊

会社倒産とかそういうことではありませんｗ


[Vcube][解体]
壁撤去3
created by horiuchi.

会議室の数を増やすため、オフィスの解体工事が始まりました。

今まで1つだった会議室が週明けには5つに増えることになります。


撤去完了
Originally uploaded by horiyasu.

壁の撤去にかかった時間は30分くらい。あっという間になくなってしまいました。


Posted by horiuchi at 14:21 | Permalink | Comments (3) | TrackBack (0)

2005年09月01日

ぐっさんのムービーブログがスタートしました。

OCNムービーブログの第2弾、ぐっさんこと山口智充さんによる「ぐっさん部屋 > 山口智充ムービーブログ 15秒のドウガ」が本日スタートしました。

初回からかなり体を張ったムービーになってますｗ


ちなみに相武紗季さんのときと同じく、ムービーティッカーも同時に提供しています。

実際に貼り付けるとこんな感じ。

貼り付け用のＨＴＭＬはこちらから取得できます。

Posted by horiuchi at 12:49 | Permalink | Comments (0) | TrackBack (1)

アーカイブ