こんばんは、martinです。タイトル通りなんですが、要は以下のようなことを簡単に実装したい。

foo.await(2000).say("Hello, ").await(1500).say("world !");

　まぁfooという関数オブジェクトがあるとして、２秒後に「Hello, 」を出力して、そこで小休止、で1.5秒後に「world !」を出力すると。それをメソッドチェーンに拘ってやりたい。簡単な例を挙げてみます(うまく行かないサンプルです)。

var foo = function(){}; // 関数オブジェクトを作成

foo.prototype = { // プロトタイプを設定
 say : function(s){
  alert(s);
  return this;
 },
 await : function(ms){ // ここで遅延処理をゴニョゴニョしたい
  // var _this = this;
  // setTimeout(function(){
  // return _this; # まぁ、これはダメだけど、こんな感じでやれたらいい
  // }, ms);
   return this;
  }
}

var bar = new foo();
bar.await(2000).say("Hello"); // すぐに「Hello」が出力される

　メソッドチェーンを実装するとなると、return this;をかまして、用意した関数オブジェクト自身を返すようにする必要があります。上のawait関数内で、setTimeoutを用いて遅延処理をしようと思いましたが、どうもうまい方法が思いつかず、とあるサイトで質問してみました 。すると、数分後(!)に返答があって、「それ、jQueryで出来るよっ！」と（そのコメントは今は消されたようなんですが)　まぁ確かにそうなんですが（なのであえて.delayという単語を選んだ）何かすごい技があって、それで解決！みたいなことを期待していたわけです（jQueryを使わずに）。

　２つ目に付いたコメントで、簡単に済ませる方法はなくて、何か別のキューシステム(待ち行列システム？)を用意する必要があるよ、と。やっぱりそうか。で、沢山ヒントを頂いたんで、自分なりに作ってみました。次のようなキューシステムを用意しました。

Queue = {
 entries : [], // 関数を登録する配列を用意
 inprocess : null,
 enqueue : function(entry){ // 関数を登録する
  Queue.entries.push(entry);
 },
 flush : function(){ // 配列に登録された関数群を一気に実行
  if(Queue.inprocess) return; // 「待ち中」なら実行しない
  while (Queue.entries.length){
   var entry = Queue.entries.shift(); // 配列の頭から取り出す（つまり登録順）
   if(entry.toString().indexOf('await:') !== -1){ // 「待ち」のマークを見つけたら
    var ms = Number(entry.split(':')[1]);
    Queue.inprocess = setTimeout(function(){
     Queue.inprocess = null;
     Queue.flush(); // 指定時間後に処理を再開
    }, ms);
    return;
   }
   entry(); // 取り出された関数を実行
  }
 }
}

　こいつを最初のサンプルに適用すると以下のような感じになります。

var foo = function(){};

foo.prototype = {
 say : function(s){
  Queue.enqueue(function(){ // 配列に関数を登録
   alert(s);
  });
  Queue.flush();
  return this;
 },
 await : function(ms){
  Queue.enqueue('await:' + ms); // 配列に「await:2000」みたいなマークを登録
  return this;
 }
}

　自分のスキルではこの程度です キューシステムに頼らずに自己完結できる目から鱗な手法がないですかねぇ。

とりあえず動作サンプルを以下に。ボタンを押すと、

var bar = new foo();
 bar.await(1500).say('Hello, ').await(2000).say('world!');

ってのが実行されます。ここでは、ボタンを押して1.5秒後に「Hello, 」、更に２秒後に「world !」とボタンの右側に表示されます。 　何か、「こうしたらいいよ」とかのアドバイスあればよろしくお願いします。

JavaScript  

---

　こんばんは、martinです。以前、IEでもCSS3のドロップシャドウ（text-shadowやbox-shadow）を使いたいということで、それを可能にするスクリプトを書きました 。

　で、コメント で、IE7以下では、text-align:centerを指定すると影がすごくズレるというご指摘をいただきました（IE8では問題ない）。調べてみると、どうも「text-align:centerの指定が内包されるボックス要素にも適用されてしまう」という、懐かしいIEのバグが原因のようなので、それを修正しました。ついでに、画面のリサイズ（window.onresize）にも対応させました。以下のスクリーンショットのように、Firefox3.6など今時のブラウザに引けを取らない感じで、ボックスシャドウやテキストシャドウが可能になります。

実際のデモのページはこちら。→http://p2b.jp/demo/CSS3dropshadow.html

　使い方は簡単で、CSS3なページのHEAD要素内に、IE（IE9未満）だけ読み込むような外部JavaScript（実態はHTCファイル）を記述するだけです。最新版を添付しておきますね。

 <!--[if lt IE 9]>
  <script type="text/javascript" src="path/to/css3shadow.htc"></script>
 <![endif]-->

　デモページにもありますが、box-shadowのinset（内側ドロップシャドウ）や複数のtext-shadow指定にも対応しています。

　スクリプト自体はそんなに凝ってるわけではないのですが、あまり気合の入った指定をしなければ、それなりに動いてくれるかなと思います

CSS3   JavaScript  

---