HTML/Javascriptの最近のブログ記事

縦に長いページ構成がどうにも垢抜けなかったので、script.aculo.us を使ってちょっとだけ今時風にしてみました。

のむらの旅行写真集

今まで Javascript はブラウザによる振る舞いの差異が面倒くさすぎてなるべく近寄らないようにしていたのですが、初めて prototype.js および script.aculo.us を触ってみて、少しハマりそうになっています。一度これに手をつけてしまうと、もう javascript 無しの無骨なインターフェースではガマンできなくなりそうな気がする。

# といっても、今回は Ajax ライブラリたる script.aculo.us の Effect 機能しか使っていないので、これで script.aculo.us を使ったと言えるのかどうかははなはだ疑問ではある...。

ところで、レイヤーを切り替える際の フェードアウト(Effect.Fade) → フェードイン(Effect.Appear) の実装はただ並べて書いても2つのアニメーションのタイムラインが同時に走ってしまい意図通りの動作にはならないので、delay パラメータを使って

function changeLayer (elementname) {
  hideLayer(current_layer);
  showLayer(elementname);
  current_layer = elementname;
}
function showLayer (elementname) {
  new Effect.Appear($(elementname), {from:0.0, to:1.0, duration: 0.5, delay: 0.5});
}
function hideLayer (elementname) {
  new Effect.Fade($(elementname), {from:1.0, to:0.0, duration: 0.5});
}

要点だけ書くと上記のような感じでやってるのだけど、これでよいのだろうか。どうもベストプラクティスではない気がしてならない。

（追記） Effect Que という概念がありそれを使えばよいらしいことが判明しました。

最近国内でもよく見かけるようになってきた Lightbox.js を試していたところ、「画像のグループ化をしていて、"Next"または"Prev"で表示した画像のキャプションが空だと、直前に表示されていた画像のキャプションが表示されてしまう」バグがあるみたいなので直しました。といっても、

// if caption is not null
if(imageArray[activeImage][1]){
  Element.show('caption');
  Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
}

のあとに

else {
  Element.hide('caption');
}

と書いただけ。

しかしこれほどメジャーなスクリプトにこんなにシンプルで発覚しがちなバグがあるとも思えないので、自分が何か使い方を間違ってる気もしないではない。

というわけで、カンボジア・アンコール遺跡群 旅行写真集ができました。Lightbox.js は便利なんだぜ...。次はバンコクのやつもつくりますかね。

<div name="hoge">

などと HTML 的にはちょっとあれなことをした場合、 Firefox では問題なく getElementsByName('hoge') で取得できるのだが IE ではムリ。

しかたないので

<div id="hoge">...</div>
<div id="hoge">...</div>

と、さらにあれげなことに・・・。でもこっちはちゃんと動いた。将来のバージョンで動かなくなる可能性大・・・。

たまに Javascript を書いてみれば、やっぱり Mac IE5.5 でハマリまくり。

その1 画像サイズ取得編

img = document.createElement('img');
img.setAttribute('src', 'foo.jpg');

の後で、

img.width

で幅を取得すると、なんか変な値が返ってくる。具体的には、40px * 60px の画像を20個読み込んだら、最初だけ正しく 40 が返ってきて、2つ目以降は謎の数字 26 が返ってきた。

改めて考えてみると、src 属性を setAttribute した直後だったので画像をロードできていなかっただけという気もする（じゃあ 26 って何よ？）。

Win IE6.0/Firefox1.5、Mac Firefox1.5/Safari ではちゃんと全ての画像のサイズを正しく取得できていたけど、この人たちはきっと気を利かせて画像をロードするまで待っていてくれたということなんだろう。

その2 別フレームの関数実行編

parent.top.myFunc();

とかやると自分自身と並列にある top フレームの myFunc 関数を実行できるはずなのだけど、存在しないプロパティまたはメソッドですとかなんとかいわれて怒られる。これは結局フレーム名を top でなくしたら解決したので、top が _top と同一視されてる？検証してないので詳細不明もとりあえず Firefox では top でもちゃんと動いた。ちなみにこの問題は Win IE6.0 でも同様。

以上、2つともなんとなく自分が間違ってる気もします。Javascript はほとんど素人なので・・・。

IE: element.style.styleFloat = '***';
Firefox: element.style.cssFloat = '***';

だとか。float は言語によっては予約語だから、とはナルホドね。

Javascript とか DOM とか、ちょっとしたものを作るときに''リファレンスはここ見とけばとりあえずおｋ''、というのがなくてなかなか困ったものである。