JavaScriptこんばんは、martinです。タイトル通りなんですが、要は以下のようなことを簡単に実装したい。それをメソッドチェーンに拘ってやりたい。簡単な例を挙げてみます(うまく行かないサンプルです)。this;をかまして、用意した関数オブジェクト自身を返すようにする必要があります。上のawait関数内で、setTimeoutを用いて遅延処理をしようと思いましたが、どうもうまい方法が思いつかず、とあるサイトで質問してみました。確かにそうなんですが(なのであえて.delayという単語を選んだ)何かすごい技があって、それで解決!みたいなことを期待していたわけです(jQueryを使わずに)。2つ目に付いたコメントで、簡単に済ませる方法はなくて、何か別のキューシステム(待ち行列システム?)を用意する必要があるよ、と。ヒントを頂いたんで、自分なりに作ってみました。次のようなキューシステムを用意しました。}}こいつを最初のサンプルに適用すると以下のような感じになります。キューシステムに頼らずに自己完結できる目から鱗な手法がないですかねぇ。動作サンプルを以下に。').await(2000).say('world!');ってのが実行されます。!」とボタンの右側に表示されます。何か、「こうしたらいいよ」とかのアドバイスあればよろしくお願いします。CSSこんばんは、martinです。以前、IEでもCSS3のドロップシャドウ(text-shadowやbox-shadow)を使いたいということで、それを可能にするスクリプトを書きました。IE7以下では、text-align:centerを指定すると影がすごくズレるというご指摘をいただきました(IE8では問題ない)。調べてみると、どうも「text-align:centerの指定が内包されるボックス要素にも適用されてしまう」という、懐かしいIEのバグが原因のようなので、それを修正しました。ついでに、画面のリサイズ(window.onresize)にも対応させました。以下のスクリーンショットのように、Firefox3.6など今時のブラウザに引けを取らない感じで、ボックスシャドウやテキストシャドウが可能になります。Firefox3.6でのスクリーンショット。ChromeやOperaでもほぼ同じ。IE8で、後方互換モード(IE7相当)表示。遜色ないレベルで再現。実際のデモのページはこちら。→http://p2b.jp/demo/CSS3dropshadow.html使い方は簡単で、CSS3なページのHEAD要素内に、IE(IE9未満)だけ読み込むような外部JavaScript(実態はHTCファイル)を記述するだけです。最新版を添付しておきますね。<![endif]-->デモページにもありますが、box-shadowのinset(内側ドロップシャドウ)や複数のtext-shadow指定にも対応しています。IE7互換モードでの表示。JavaScriptもう7月も終わりですね、martinです。相変わらず時の流れは速いもので。このサイトのブログの基本テーマ(スキン)「Basic」では、試験的にHTML5を導入しています。navなどのクールで新しい要素に対するスタイルシート指定が効かない、という事が昔から知られています。document.createElementを使うとスタイルシートでの指定が可能になるよ、というのがよく知られています。さんあたりでしょうかねぇ。知られていると思います(個人的には、印刷のサポートまではあまり興味がありませんが)。このcreateElementを使うテクニックは、ベタに書けば以下のような感じになります。ここでは簡潔化のため、以下の6個の新要素に絞ってます。各要素に適用}<![endif]-->どこで最初に見かけたのか失念しましたが、これを一行(ワンライナー)で簡潔に済ませたスクリプトを見たときはいたく感心しました。function(a){document.createElement(a)});上のポイントは、replaceメソッドの引数に関数を指定できて、その関数内では、正規表現にマッチした要素を適宜適用していく点です。ループみたいなことを勝手にやってくれる点ですね。これ以上短くは書けないのではないかと思うのですが、息抜きに自分なりにいくつか考えてみました。document.createElement(a)*1});これも、似たような発想からですね。自動でなんかやってくれるという。with("header,nav,article,section,aside,footer".split(',')))while(length)document.createElement(pop());ここではwith構文を使ってみました。これもなかなかシンプルです。短さ命で、グローバル変数の汚染なんて気にしないぜっ、という向きには以下のようなものもありかと思います。s="header,nav,article,section,aside,footer".split(','))document.createElement(s[i]);とかfor(i=0;n="header,nav,article,section,aside,footer".split(',')[i++];document.createElement(n));とかですかねぇ。ちなみに、配列を作るのに、文字列にsplit()をかませるというのは、よく見かける手法です。シングルクォート)で括っていくやり方と大きく差が付いてきます。こっちが記述が短い正規表現から配列も出来ますね。JavaScriptこんにちは、martinです。まとまった時間が取れないので、ppBlogの最新版をリリースできずにいます最新版のバージョンとしては、v1.9.0を予定しています。新機能としては、コメント認証機能だとか、HTML5を意識したppBlogエンジンでしょうか(ちなみにテーマBasicのソースはHTML5仕様ですよ)。このHTML5なんですが。過去のエントリーでいくつかあるように、最新版では、記事投稿の際に複数ファイルアップロードが可能になっています。積極的に採り入れたものにしようか、それとも「レガシーな」もので実現させるか迷いましたが、とりあえず「レガシー」なバージョンで行こうと思います。理由はいくつかありますが、一番の理由は、どうもHTML5のFileAPIの使い勝手が悪い点です。ブログでの写真投稿において、一度に複数枚の写真を選択してアップロードできる点は、HTML5を使う魅力のひとつですが、この「複数枚のファイルを選択」というのが、どうも洗練されていない印象です。アップする写真を複数枚決めてそれをアップロードする場合を考えてみます。頭の中では、大まかに写真をのせる順番が決まっていて、ファイル選択画面から、コントールキー(CTRL)を押しながら、順序良く写真をいくつか選んだとします。最新のブラウザなら以下のように、multipleを指定するだけで、この複数枚選択という動作が可能になります。否応なしに、ファイル選択画面上で表示されている通りの順序になるようです。何か、選んだ順序を紐付けするような属性が欲しくなります。