昨日かおととい、ブログのエントリーをTwitterに投稿できるTwitThis というTwitterのサービスを知ったんで、それをソーシャルブックマークのアイコンリンクに追加したんですが、これって投稿しようとするとIDとパスワードを求められて、ログイン後、タブを閉じるとセッションが切れるのか、毎回入力画面が出てきます。なので今いちスムーズさに欠けるなぁと思っていたら、普通にTwitterに投稿できる記法があることをついさっき知ったので。

http://twitter.com/home?status=Reading:(エンコードされた文字列)

で直接投稿できるみたいです(ログイン状態を保持していれば)。なので、これに変えました。投稿時のスクリーンショットを挙げときます。キャプチャのために開いただけなので、エントリーがダブってるように見えますが。

　後、facebook へのエントリーアイコンも追加してます。こちらフランスのラボでは、多くの人がfacebookを使っていて、自分もその流れにのってアカウントを取得しました。NYやコロンビアに帰った同僚もみんなやってて、元気にしてる様子とか分かるし、便利な時代ですね。うちのボスもよく更新してます。さすがに世界最大の写真共有サイトだけのことはあるなぁと。日本ではどうなんでしょうか。

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

<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つです。

　こんにちは。今日はスケジュールの都合で、徹夜で実験のmartinです。徹夜してるとお腹すくなぁ。

　さて、前回に続き、カレンダーねたで。前回は、テーブルレスカレンダーということで、OL要素を用いたカレンダーを紹介しましたが、かといってTABLE要素を用いたカレンダーを疎かにするわけではありません。現状、ppBlogでは、テーブルタイプのカレンダーは、大きくボックス型とライン型とがあります。更に、ボックス型には、セレクトボックスを付けるタイプと、そうでないタイプの2種類がありますが、次バージョンでは、カレンダーの種類がぐっと増えて、6種類になりそうです。前回、ちらっと触れましたが、大きな変更点は、曜日の並びを自由に指定出来るようになったことと、後、言語の指定が出来るようになったことです。言語といっても、英語か日本語のインターフェイスか、というだけですが。デフォルトでは、日曜日が週の始まりで日本語表示となります。

　ppBlogが生成するカレンダーのソースを改めて見てみると、すっきりしない点があったり、XHTMLの書式となじんでなかったりする点があったので、PHPのカレンダーのプログラム(calendar.inc.php)を見直して大幅に書き換え、はき出すソースも従来のものと若干変わりました。

---

　カレンダーの種類は、従来通り、template.phpで指定出来ますが、およそ以下のような書式になります。

# カレンダーのタイプ (1～4はTABLE要素使用。5, 6はOL要素使用)
# [ 0:非表示，1:ボックス型，2:月日セレクター付ボックス型，3:ライン型，4:ライン型 + セレクター，
#                    5:リスト要素仕様, 6:リスト要素仕様 + セレクター]
$_CALENDAR_TYPE = 2; 
$_CALENDAR_LANG = 1;  #  [ 0:英語，1:日本語 ]
$_CALENDAR_START = 0; #  [ 0:日曜開始，1:月曜開始，2:火曜開始，etc. ]

　$_CALENDAR_LANGと$_CALENDAR_STARTという変数が新たに加わりますが、この指定は必須ではありません。

　実際の出力のイメージは、リンク先で掴めると思います。なるべく構造をシンプルにすることで、特にCSSハックを使うこともなく、各ブラウザでほぼ同じ見栄えになっていると思います。

　http://p2b.jp/demo/calendar.html