明けましておめでとうございます。長らく更新が途切れていましたが、少しずつ手直しをしてました。初めて海外で新年を迎えたような気もする今日この頃です。正月3が日は休みが取れたので、かなりプログラミング作業が進みました。ここパリは寒いんですが、まだ雪は降らないんですよねぇ。福岡は元旦から初雪だったと聞きましたが。

　さて、ppBlogですが、JavaScriptは大幅な書き換えを遂行しました。細かいところの動作チェックはまだですが、勉強も兼ねてoParts.jsという簡単なライブラリを作成して、これをもとに色んな動作を設定しています。オーパーツ.jsという名前を付けましたが、これはppBlogではもとより、o（アルファベットオーの小文字）関数が基本でしたし（他のメジャーなJSライブラリでいう$関数に相当）、o関数で得られるパーツを操作し、またppBlogに必要な各種パーツを用意したという意味合いも込めてです。オーパーツといえば、あのオーパーツWを先ず思い出しますが、まぁ関係ないです。好きですけどね。

　あとは、画像タグの出力周りもちょいと変更しました。主にIEのバグ対策のためですが、ドロップシャドウをもう少し綺麗に見せようというのもあります。このドロップシャドウに関して、現時点では、IE6対策はしていないのですがブラウザシェアではまだまだ最大でしょうから、配布版では対策がされていると思います。

　あと、実験的ですが、コメントのインターフェイスで、スパム対策として、画像認証（CAPTCHAW）を導入してみました。ひらがなを入力させるのでHIRAPTCHA（ひらぷちゃー）と名付けました。まぁどれくらい効果があるかわかりませんが、単に実装してみたかったという…。

　現時点では、oParts.js^GもHIRAPTCHA^Gもググっても検索にかからないのが、また良いですね。

　あ、画像タグの話をしたのでサンプルを載せときます。特に切手風などの効果をかけないやつノーマルなやつです。

---

---

---

---

---

---

こんばんは、martinです。ソーシャルブックマークへのリンクアイコンを各記事に付けるようにしました。近々配布予定の最新版に採用してます。またJavaScript関連の話をば。

　愛用しているタブブラウザFirefoxの現行バージョンは2ですが、バージョン3からはネイティブでdocument.getElementsByClassNameがサポートされる ようです。現時点でこのメソッドをサポートしている主要なブラウザは存在しないので、document.getElementsByClassName^Gでググれば分かるように、皆さん、色んなgetElementsByClassNameを書いています。ppBlogのJavaScriptのライブラリlib.jsでも、この関数(getByClass)は多用しているのですが、この関数は、ページ内のオブジェクトを逐一調べていくループ作業を伴うので、一般的に言って動作に時間がかかります。

　JavaScript使いの間では、常識かと思いますが、この手の操作で一番スピードが速いのは、XPath^Gを利用するやり方です。jQuery^Gで有名なJohn Resig氏のブログに、この手の関数のスピード比較記事があります。
　→http://ejohn.org/blog/getelementsbyclassname-speed-comparison/

　ネイティブサポートのFirefox3が無茶苦茶速いのは当然として、XPathもDOMを解析していく手法よりはずっと高速なのが分かります。IE6,7を除くモダンなブラウザは、このXPathをサポートしているので、ppBlogでもXPathを使うようにしました。以下のような感じです。

document.getElementsByClassName(className, pElement, tagName){
 var d = document, nodes = [], item;
 try { // XPathをサポートしているならこれを使う
  var xp = d.evaluate(
   './/'+(tagName || '*')+'[contains(concat(" ", @class, " "), " '+className+' ")]',
   (pElement || d), null, XPathResult.ANY_TYPE, null
  );
  for (item = xp.iterateNext(); item; item = xp.iterateNext()){
   nodes.push(item);
  }
 } catch(e){ // そうでなければ地道にDOM解析
  var cls, items = (pElement || d).getElementsByTagName((tagName || '*'));
  for(var i = 0, l = items.length; i < l; i++){
   item = items[i];
   if(item.className){
    cls = item.className.split(/¥s+/);
    for(var j = 0, k = cls.length; j < k; j++){
     if(cls[j]==className){
      nodes[nodes.length] = item; break;
     }
    }
   }
  }
 }
 return nodes.length > 0 ? nodes : null;
}

　John Resig氏のブログにあるのと同じ実験 をしてみましたが(パクっただけ)、彼のサイトにある、Prototype.jsのXPathを使ったもの(xpath.html )と同等か少し速いくらいですね。

　当然ながら、XPathをサポートしていないIE6,7は、通常通りDOM解析をするアプローチしかないです。こちらの計測では、XPathを利用するより5倍ほど遅いです。

　ちなみに、１つ前のエントリで紹介したphotoeffect.jsも、この関数を使用しているので更新しました。ついでに添付しておきますね。このphotoeffect.jsは、単体で動くので、ppBlog以外の各種ブログでも外部ファイルとして呼び込むだけで簡単に使えます。要望があれば、詳しいクラス指定などの解説書きますんで、その時はたずねて下さい。

JavaScript  

---

　久しぶりのJavaScriptネタです。最近は、マック（MBP）で作業することも多いのですが、アップルの提供する.Mac というサービスを使うと簡単に見栄えのよいホームページ（HP）を作成することが出来ます。このサービスはマックを使ってこそ活きるものですが。

　で、何種類ものHP向けのテンプレートが予め用意してあるんですが、多くのテンプレには、デジカメで撮った写真を単に貼り付けるだけでなくて、それらをちょこっと斜めにしたり切手風に縁取りしたり出来て、お洒落に演出できるわけです。自分も以前からこういうことをppBlogでしたいなぁとは思っていて、現状、写真っぽく見せたりドロップシャドウを付けたりというのはスタイルシートを使って出来るようにしています。後は、切手風とか写真を少し傾けて貼り付けるとかですが、これらはサーバーサイドのPHPプログラムで画像を加工すれば可能なんだけど、写真をアップする際の手間が増えるのは好ましくないし、何よりプログラムを書かないといけない。

　画像の回転（写真を傾けて貼り付けたいので）なんて、クライアント側のJavaScriptで出来れば楽チンだけど無理だよなぁと思っていたんだけど、実は<canvas> を使えば簡単に出来ちゃうんですね。しかも画像同士を合わせることも簡単に出来る。これなら自分がやりたいことはJavaScriptで出来るじゃないか、ということで書いてみました。

　これは通常の、ppBlogでデフォルトで出来ることです。つまり写真のように白枠を付けて、ドロップシャドウを付けて、ということですが、さすがに写真をちょいと傾けるとかは出来ません。ところが、これに、canvasを利用したJavaScriptをかますと以下のようになります。

　この写真は上の写真と同じ画像ファイルを指定していますが、見栄えが随分と違ってます。しかもこれをJavaScriptでやっているわけで、canvas恐るべしですね。反対向きの傾きにしたらこんな感じです。

　これは写真風のフレーム画像を合わせてますが、切手風のフレームを合わせたのが以下です。

　てな感じです。どちらに傾けるかとか(傾けないというのもあります)、写真風か切手風かというフレームの選択は、何れもIMGタグの中でクラス指定をすることで実現します。

　ほかにいくつかデモを並べてみます。

　ちなみに、IE(インターネットエクスプローラー)はcanvasをサポートしていないので、こちらはVML^Gを利用して同様の効果を見せるようにしています。こちらで動作が確認できたブラウザは、ウィンドウズではIE7, Firefox2.0でマックではSafariとFirefoxです。OperaやIE6以下は未確認です。

　一応、このスプリプトは外部読み込み形式で作動するようにしています。ppBlogであれば、各テーマのテンプレートHTMLファイルに、外部スクリプトを呼び込む要領で、

<script type="text/javascript" src="js/photoeffect.js"></script>

と記述して、あとはlib.jsのDOM.onloadの最後の行にでも、

if(typeof photoEffect != 'undefined'){
 photoEffect.init();
}

と書いておけば動きます。あ、あと2種類のフレーム用の画像はトップページのImagesディレクトリにアップしておく必要があります。クラス名の指定ですが、IMGタグでのクラス指定で photo-effect が指定されていれば、それを認識して、このスクリプトが発動します。このスクリプトと画像ファイルを添付しておきます。まだ作りたてなので細かいところは見ていませんが興味ある方はどうぞ。

[Update：2007/10/8 17:31:18]

　傾きの角度は、自由に指定出来るようにしました。クラス名で photo-angle3 や photo-angle-3 みたいに指定します。数字は-360度から360度まで。マイナスの値なら、右肩上がり、正の値なら左肩上がりです。

　あ、ついでにppBlogユーザー向けも。これは、Firefoxに対するマウスオーバーチップ処理を追加しています。

---

　いつのまにか、アマゾンアソシエイト（以下AWS）のプログラムがバージョンアップしてたので（しかも以前とは別物と言って良いほどの変わりよう）、それに合わせてそれ用のPHPスクリプトを書き換え。今回、ほぼスクラッチからamazon_associate.phpを書き上げました。バージョン1.6.2までは、これ以外にもXSL変換用のスクリプトもあったんですが、実は不慣れなXSL言語を使わなくてもPHPだけで、十分実用的なスクリプトが書けることが分ったので、サーバーサイトは（XSLTは使わずに）PHPのみで処理するようにしました。ppBlog上ではこのAWSプログラムは埋め込み型で、記事投稿画面のところで使用しますが、感じをつかんでいただくようにデモを置いてみました。最終的にはppBlog向けのタグが生成されるだけなので、汎用性はありませんが。。　→AWSサンプルスクリプト

　技術的なことで言えば、ppBlog上では、記事の中にAWSのタグがあると、動的にアマゾンのサイトから情報を取得してHTMLタグを生成します。これは、表示内容に売上ランキングや動的な価格やアマゾンユーザーの平均評価（星によるrating）を含むためです。こういう内容は、刻一刻と変動するものなので静的なHTMLタグとしてログ化してしまうのは好ましくありません。

　でもここで問題が生じます。最終的なHTMLの生成時間が、アマゾンのサーバーからのレスポンスに左右されてしまうことです。複数のAWSタグがあると、それはレスポンスとして体感できるくらいのタイムラグになります。ppBlogは、軽快さが売りのひとつなのでこういう現象は避けたいです。なので、解決策として、キャッシュファイルを生成するようにしました。具体的には、24時間以内に生成されたAWSのHTMLタグなら、それを表示、もし24時間以上たったキャッシュファイルであれば、削除して新たにアマゾンのサーバーから情報を取得するようにしました。とりあえずは24時間というスパンを取りましたが、これはもっと小さくても良いかもです。

　ちなみに、映画のサントラで好きなものを挙げろと言われれば、間違いなくマイケル・ナイマンの「The Piano」を挙げます。映画の方も好きですが（DVDも所有）、このCDが秀逸過ぎです。彼の作品はほかにも持っていますが、この「ピアノ・レッスンW」でのマイケルは神がかりともいえる旋律を紡ぎ出しています。19曲収録されていますが、個人的には「Big My Secret」「The Scent Of Love」が好き。有名なのは、「The Sacrifice」ですが。@TOWER.JP で各トラックのさびが聴けます（WMA形式）。

アマゾン  

---

　こんにちは。こちらパリはお昼を回ったところです（昨日からサマータイムで1時間進みました）。渡仏にあたって、いつも使っていたノートPCでは大きすぎるので、新たにノートを購入してそれを使っています。PC移行にあたり、仕事の環境はほぼ移行していたのですが、肝心のppBlog関連の環境移行が中途半端でした。なので、まずはローカル環境へのApache2.2+PHP5のインストールを昨日済ませ、配布中のppBlog1.6.2をダウンロードして、テスト環境が構築できたところです。VistaへのApache+PHPのインストールは、Windows XPのときと勝手が違って、ちょっと苦労しました。

　4月9日(日本は10日)に帰国しますが、帰国したらすぐに1.6.3をリリースしようと思っています。現状、ppBlogのデフォルトの文字コードはEUC-JPですが、今、手元のテスト環境ではUTF-8が問題なく動いているので、v1.6.3からは、UTF-8版も同時配布となります。ほんとは、以前v1.5β版をリリースしたときに、UTF-8移行を考えていたのですが、まだまだEUC-JP全盛で見送っていました。最近はUTF-8がもはや業界標準のようですし、Ajaxを含めたJavaScriptなどはもとよりUTF-8でのやり取りが当たり前ですし、UTF-8を出さない理由がないので出します。現状でさえ、複数の文字コードがあって、それに起因する文字化け問題などがある中、これ以上の新しい文字コード体系なんて不要だろうし、今後はUTF-8に収束していくのかぁ、と思っています。

---