ヘッドラインモードでの表示周りを整備していて、記事ごとのスタイルシート指定が効いていなかったので、効くようにスクリプトを書き換えましたが、正規表現周りの挙動がブラウザ間で異なっていて、ちょっとはまったのでメモ。簡単な例を示します。

<script type="text/javascript">
function doRex(){
 var example = "J'adore Firefox!"; // I like Firefox!
 var RE = /Fire/g;
 var result = RE.exec(example); 
 if(result) alert("マッチ: " + result + "¥nlastIndex: " + RE.lastIndex);
       else alert("マッチしません！:" + "¥nlastIndex: " + RE.lastIndex);
}
</script>
<button onclick="doRex();"> 実 行 1 </button>

実 行 1

　上のdoRex()関数を実行すると、最初ボタンを押したときはちゃんとマッチしますが、2回目にボタンを押したときの結果がブラウザで異なります。Firefox3.0.7, Chrome1.0, Opera9.64では、「マッチしない」、IE6-8とSafari4 public betaでは、マッチして1回目と同じ結果です。なぜ、こういうことになるかというと、lastIndex絡みです。1回目の実行に対して、lastIndexの値が保持されているからです。2回目の実行で、マッチしないとなると、RE.lastIndexはまた0に戻るので、3回目の結果は初回と同じく「マッチ」です。

　でも、疑問なのが、doRex()という関数の中で定義したローカルな変数だから、doRex()を実行する度に、lastIndexの値はリセットされるのが正しい気もするんだけどなぁ。doRex()の中ではなく、グローバルな空間で同様のことをやれば、SafariもIEも2回目は「マッチしない」となり、これは納得できる挙動なんですが。

　では、このブラウザ間の差異をなくすにはどうするか？ひとつは、RE.exec(example) した後に、

RE.lastIndex = 0; // 値をリセット

という記述を加えて、明示的にlastIndexを元に戻す方法。もうひとつは、new演算子を使う方法です。これなら、どのブラウザでも同じ挙動、何度ボタンを押しても、「マッチ」となります。new RegExp("foo", "g") と /foo/g って同じと思っていたんだけど。

<script type="text/javascript">
function doRex2(){
 var example = "J'adore Firefox!"; // I like Firefox!
 var RE2 = new RegExp("Fire", "g"); // new演算子を使用する
 var result2 = RE2.exec(example);
 if(result2) alert("マッチ: " + result2 + "¥nlastIndex: " + RE2.lastIndex);
       else alert("マッチしません！:" + "¥nlastIndex: " + RE2.lastIndex);
}
</script>
<button onclick="doRex2();"> 実 行 2 </button>

　上のコードであれば、ブラウザ間の差異がない。

実 行 2

　でも、Safari/IE と Firefox/Chrome/Opera、どっちが正しい挙動なんだろうな。今イチ、すっきりしないです。

---

　おはようございます。ソーシャルブックマーク（以下SBM）周りの整備中です。ppBlogでは、はなてやdelicious、Yahooなど主要なSBMへの追加リンクを採り入れたりしてますが、実際のところ、パフォーマンスに問題があって、あまり気軽に使えるものではなかったというのが実情でした。なので、アルゴリズムを見直したり、ちょこちょこ変更を加えながらやってます。

　現時点で、これに落ち着こうかなと思っているのは、実際にこのサイトで動いているやつですが、複数記事表示の時は、各SBMへのリンクアイコンをその場で（Ajax経由）で生成するようにして、単独記事モードの際に、従来のように最初からアイコンを並べるやり方にしようかなと。

　後、登録されたブックマーク数の更新タイミングは、基本的に単独記事モードの時に作動するようにして、複数記事モードの際はキャッシュから読み込む方式で。

　複数記事モードのときには、SBMへのアイコンが表示されていて、マウスオーバーで(実際にはonmousemove)、各種SBMサービスへのアイコンがポップ表示されます。初回だけAjaxで読み込むので、ちょっとタイムラグがあり、後は生成されたレイヤーを表示するので、これは瞬時です。mousemoveで監視していると、ユーザーが意図しないonmousemoveでAjax呼び込みが起動する場合もあるでしょうから、mousemoveの移動量がある閾値に達してから、動作するようにしています。まぁマウスクリックでも良いかなぁとは思いますが。

　後は、SBMにTwitThis へのエントリーも入れてみました。ちょうど1年ほど前に、動作確認のために、Twitterのアカウントを取得したけれど、まるで活用していなかったんで、こういうお気軽エントリーが出来ると良いかなとは思います。

　こんにちは。まだまだ寒い日が続きますね。さて、ppBlogには、以下のような感じで、普通のアップした写真をちょいとお洒落に演出するスクリプトが付いてますが、IE8でエラーが出ていたりしたんで、更新しました。

　IE8のdocument.querySelectorAllの実装に始まり、Safariもサポート、Firefoxは3.1でサポートするでしょうし、この手の用途には、staticなnodeListでこと足りるので、photo-effectをいうクラス名を付けたIMG要素の検索には、document.querySelectorAllを第一に試すようにしてます。

　始めは、よくやるように、

var nodes = Array.prototype.slice.call(element.querySelectorAll("img.photo-effect"));

　としたのですが、何故かIE8では、JSオブジェクトがないと怒られて折角のquerySelectorAllが使えません。なので仕方なしに次のようにしました。

var nodes, items = element.querySelectorAll("img.photo-effect"), index = items.length;
while(index) nodes[--index] = items[index]; /* 地道に */

　IE8でも、Array.prototype.slice.call(arguments) は問題なく作動するのに。。きっと、正式版前のバグなんだろうけど。

　てな訳で、最新版を添付しておきます。ついでに言っておくと、このスクリプトは単体で動作します。ただし、2種類の写真フレームの画像も用意して適切にパスを書かないといけませんが。デフォルトでは、Imagesディレクトリにあるphotoframe.png とstampframe.png の2つです。