こんにちは。ほんとは早朝にアップする予定が、立て続けに所用が入りお昼になりました。RC2=Release Candidate 2ということで、正式版ではありませんが、これのバグフィックスをもって正式版になると思います。1.5系は1.5βに始まり、RC1まで来ていましたが、それらよりはバグは減ったと思います。また、細かいチューニングにより1.5系では最速かなぁと。　

　とはいえ、画像キャッシュの生成アルゴリズムは煮詰まっていませんで、まだまだ改良の余地があります。目処は立っているので、皆さんからのフィードバックも得ながら、早めの正式版リリースを果たしたいですね。

　RC2からインストーラーが付きましたので、インストール作業としては、プログラム自体のアップロード及び、いくつかのディレクトリのパーミッションの設定が主体となります。一番時間が掛かるのが、このアップロード作業だったりしますが、まぁこれはFTPソフトで、さくっとドラッグして気長に待ちましょう。

　パーミッションの設定が済めば、あとはinstall.phpにアクセス、IDとパスワードを聞いてくるので、適切なやつを入力してsubmit、上手く行けば１秒もかからずにインストール完了です。

　RC2でのポイントをいくつか挙げておきます。

• コメントのログ形式がちょっと変わった。→これはログ変換スクリプトで簡単に対応できます。
• いくつかのディレクトリ名が変わった。例えば、attachedディレクトリはaffixedになりましたし、cmtディレクトリはcommentsディレクトリに、feedディレクトリはfeedsディレクトリになったり。何か意味があるのかと言えば、ありませんこちらのネーミングの方がセンスがあるなと現時点で思っただけです。
• モブログの強化。今どきはPCよりもモバイル機器からインターネットに接続する方が多いようで。なので、ケータイからの投稿も、複数の添付ファイルに対応したりしてます。とはいいつつ、実は自分のSO902iでしか試していないのですが。。このモブログ投稿のスクリプトに関しては、naoKさん の尽力が大きいです。naoKさんのカスタムスクリプトでは、よく投稿に失敗すると言われているVodafone系からの投稿も問題なく行えるようで、そのコアな部分をmob.phpにマージしています(で、こちらのスクリプトでも上手く行くかどうかは未確認なのですが)。改めてnaoKさんに感謝です。
• コメントスパム・トラックバックスパムへの対応。一時期、自分のブロッグを放置していたら、すごい数のスパムが届いていて吃驚。その殆どは英数字のみで日本語を含んでいません。なので、英数字のみのやつは弾くようにしたら、これだけで来なくなりました。ときに日本語でのスパムもありますが、こちらにはIPアドレスや、NGワードで対処することが可能です。
• ログイン認証の簡略化。AJAXを使ってログイン出来るようになったので、手間が省けます。更には、共有ユーザーがいなければ、自動ログインも有効にすることが出来て、これだと、ほんとにワンクリックでログインモードが完了、使い勝手が非常に良いです。
• アクセスログファイルの分割化。まぁ、これは初めから分かっていたことですが、アクセス数が多ければそれだけ、ログファイルのサイズが肥大化します。で、大体ひと月で1ファイル１MBを超えるようになると、もうファイルを開くだけでも息が切れだすので、900KBになった時点で分割するようにしました。アクセス解析は、そのログファイル毎に見ていく感じになりますが、まぁ特に不都合はないかなと思っています。

　もうお昼が終わりそうなので、とりあえずこの辺で。続きは今夜にでも。あ、コメントログ変換スクリプト添付しときます。

---

ppBlogのRC2リリースはもうすぐです。で、こういうプログラムを作っていると派生的に、使えそうなCSSのテクニックだとかJavaScript/Ajax関連の技術も身に付くもんです。なのでメモも兼ねて汎用性がありそうなのは、ここに書いておこうと思います。

　ネットを検索すれば、CSSのみによる(JavaScriptを用いない)展開型のメニューはいくらでも出てきます。厳密には、IE6に限ってはCSSのサポートが時代遅れなので、IEだけは仕方なくJavaScriptで制御というパターンが多いのですが。

　で、この手のウェブに転がっているPure CSS展開型メニューは、「2階層目」までのやつが殆どではと思います。この2階層目までの展開メニューはppBlogの管理画面でも使っていますが、今回のバージョンアップにあたり、3層目まで展開するやつが欲しくなったので、そんなやつを作りました。原理的には、何階層まででも作ることが可能ですが、階層構造がややこしくなるので、実用上は3階層までというのが妥当なところでしょう。具体的にデモを見てみましょう。

　→http://p2b.jp/demo/CSS_menu1.html

　因みに、残念ながらこのままではIE6では動きませんので、IEに限ってはJavaScriptの助けを借りることになります。IE7βでは、一応は動いてくれますが、ときにトリッキーな動作をします。まぁベータ版ですから。FirefoxやSafari、Operaなどのモダンなブラウザであれば、問題なく動くのではと。ソースも非常にシンプルですので興味がある方は色々アレンジしてみて下さい。

　で、未だに大多数のユーザーが使っているであろうIE6を無視してしまうのは、さすがに心もとないので、JavaScriptで制御する訳ですが、それは次回に。

---

　ppBlogでは、もとより記事に貼り付けられた画像を元の大きさで表示する画像ポップアップというのを備えてましたが、近頃では、Web2.0に触発されてか、ThickBox だの、Lightbox だの、GreyBox といった、画像表示に際して、ちょいとエフェクトを付けたりするのが流行のようで。

　なのでppBlogでも画像ポップアップをパワーアップさせました。かといって過剰な演出はあまり好きではないので、そんなに凝らずに、これだけは備えておきたいというものにしています。

　昨今のブロードバンドの普及に伴い、表示サイズの大きな写真を圧縮せずにそのままアップするケースも増えてきたように思います。結果、パソコンの解像度によっては、そんな画像を表示させるとブラウザからはみ出してしまうこともあります。なのでこのあたりを考慮して、ブラウザの枠からはみ出してしまうような大きなサイズの画像は2段階のポップアップとしました。まず、ブラウザ画面にフィットするような表示段階があって、で、さらに「実寸大アイコン」をクリックすると、元のブラウザからはみ出すような画像を表示させるというものです。

　具体的にアクションを見たほうが分かりやすいでしょう。なお、画像は、National Geographicのサイト にあったサイズが大きめの写真を拝借してます(1024x768ピクセル)。効果を確認するには、ブラウザのサイズを1024x768ピクセルより小さくしておいて下さい。このサイトには秀逸な写真がたくさんあって、個人的にお気に入りの写真は、スクリーンセイバー用にダウンロードしたりしてます。

　余談になりますが、このナショナルジオグラフィックの雑誌(日本語版もあります)には、新しく見つかった「ユダの福音書」の驚くべき解読結果のレポートが載っています。近々「ダ・ヴィンチ コード」の上映が始まりますし、何とも絶妙なタイミングですね。歴史とは、勝者が創り出す日記みたいなもんです。　→http://nng.nikkeibp.co.jp/nng/feature/0605/index.shtml

　スタイルシートの話になりますが、Firefoxだと、写真のドロップシャドウが意図したように見事に実現されるのですが、IE6やIE7βでは、まだまだですね。IE7の正式版では、せめてこのドロップシャドウのCSSぐらいは出来るようになって欲しいもんです。

---

　こんばんは。昨日のエントリーで、ログイン認証をAjaxで実現しようかと述べていたのですが、そうしました。流れとしては、

1. ログインアイコンをクリックすると、その場でログイン画面を生成
2. IDとPWDを入力したら送信。このときにAjaxのPOSTモードで送信しますが、IDとPWDはJavaScriptでMD5^G処理して送出されるので、セキュリティー的には安心です。
3. 正しいIDとPWDであれば、指定していた管理画面に遷移しますし、認証に失敗すれば警告が出ます。

てな感じです。Ajaxを使うことの利点は、わざわざログインページに移って、そこで認証して･･･という流れがなくなり、少ない手順でログイン出来ることです。これに慣れると、これまでのログイン手順が面倒に感じますよ。キモのスクリプトだけを抜粋しておきます。

function AjaxLogIn(){
 var module = Ajax.cloneScript("js/md5.js");
 if(module){
  o("loginSubmit").disabled = true;
  Ajax.post("admin.php", "mode=login&adminName="+MD5.$(o("adminName").value)
                                  +"&adminPass="+MD5.$(o("adminPass").value)
                                  +"&type=ajax",
   function(to){
    if(to.match(/¥.php/)){
     d.write('<script type="text¥/javascript">window.location.href="'
                                                   +to+'";<¥/script>');
    } else {
     alert(to);
     o("loginSubmit").disabled = false;
     o("adminName").focus();
    }
   }
  );
 } else alert("md5.js module Not Loaded!");
}

　ダイアログ画面は、マックOSXっぽくアニメーション化してみました。まぁお遊びですが。。アニメーションといっても、単に上からにょろっと出てくるだけですが、この際に昨日紹介したループ関数メソッドを使ってみました。

var slideDown = function(ob){ob.style.top = (parseInt(ob.style.top)+10) +"px"};
slideDown.loop(1, 16)(IO); // IOは、ダイアログのこと

　１ミリ秒おきに、slideDownという関数を１６回繰り返すという指定です。興味がある方は、ソースをどうぞ。

　あと、追記ですが、上述のMD5関数は、Masanao Izumoさんのmd5.jsを圧縮したものを使用しています。　　　→http://www.onicos.com/staff/iz/amuse/javascript/expert/md5.txt

　有用なスクリプトを公開して下さっている同氏に感謝します。

---

　おはようございます。最新版のリリースに向けて、近頃はそれなりに時間を充てています。ppBlogでは、JavaScriptはかなり重要な位置を占めています。一応、JavaScriptオフでも閲覧には問題ないとは思うのですが、管理モードなどでは必須です。

　で、ppBlogでの主要なJavaScriptライブラリである、js/script.jsの見直しを進めているところです。この中で、windowのonloadイベントには、いくつかの関数を割り当てています。これまでは、

addEvent(window, "load", function (){
 roundedStyle();
 quotedStyle();
 initCSSHover();
 if(moz) hackFirefoxToolTip();
});

でしたが、これだと、HTMLのDOMエレメントのみならず、外部リンクや画像やらも読み込んだ後でないと発動しません。画像など読み終えてなくても、DOMエレメントを読み込んでパースした時点で動く関数などはさっさと動いて欲しいものです。このようなことは誰もが思っているみたいで、JavaScriptマスターのDean Edwardsは、Firefoxに DOMContentLoaded という隠し属性みたいなやつを見つけて、それで、ごにょごにょやっています。→ The window.onload Problem - Solved!

　でも、個人的には、あまりスマートな方法には見えないんで(IE向けには外部スクリプトを別に用意しないといけないし)、自分なりにも考えてみました。そもそも、IEにあるdocument.readyState^G みたいなやつが標準で提供されていれば、みんな悩まずに済むのだけれど、ないから仕方なし（IEでも、挙動不審なところがあるようだし）。

　で、原始的な方法ではあるが、DOMエレメントの数を取得する d.documentElement.getElementsByTagName("*").length をミリ秒単位で監視しておき、それがプラトーに達した時点を読み込み完了とするというアプローチでスクリプトを書いてみた。こんな感じ。

DOM = {
 ready : false,
 size : d.documentElement.getElementsByTagName("*").length,
 check : function(){ DOM.ready ?  DOM.onload() : DOM.update.await(100)(DOM.size); },
 update : function(i){
  if(d.documentElement.getElementsByTagName("*").length==i){
   DOM.ready = true;
   DOM.onload();
  } else {
   DOM.size = d.documentElement.getElementsByTagName("*").length;
   DOM.update.await(50)(DOM.size);
  }
 },
 onload : function(){}
}
DOM.check();

　あまり深くは考えていないけど、これで期待通りの動作をしている感じ。このサイトのppBlogでは、先ほどのwindow.onloadのイベントを、こっちに割り当てて、

DOM.onload = function(){
 roundedStyle();
 quotedStyle();
 initCSSHover();
 if(moz) hackFirefoxToolTip();
}

というふうにしています。このやり方だとブラウザを選ばなくてベターではなかろうか。アイコン画像なんかを全部表示していなくても、DOMツリーを読み込んだ時点で発動します。エドワーズのとこにあるデモのスクリプト（http://dean.edwards.name/my/busted.html ）に似せて同じことをDOM.onload で実現したサンプルを載せておきます。→http://p2b.jp/demos/busted.html

　ちなみに、Functionオブジェクトに、新たにawaitというメソッドを定義してそれを使っています。まぁ普通にsetTimeoutでやれば良いのだけれど、勉強がてら。JavaScriptマスターである最速インターフェース研究会さんのエントリーを参考にしました。→ Function.prototypeを拡張して遅延実行を実現する

　まだよく理解していないので違うかもしれないけれど、このawaitメソッドをまねて、loopというのを定義しました。正しいのかな？ 狙いとしては、limitで指定した回数だけ、msミリ秒おきに関数を実行するというやつです。

Function.prototype.loop = function(ms, limit){
 var count = 0, self = this;
 return function(a){
  if(limit <= count) return;
  count++;
  self.await(ms)(a);
  arguments.callee.await(ms)(a);
 }
}

　今のところppBlogでは、これは使っていないけど使うかもしれない。簡単な例としては、

var func = function(v){alert(v);}
func.loop(1000,3)("１秒おきにアラートを３回表示");

とか。

　あと、ログインの際にAjaxを使って、少しだけログインの手順を減らすというのを考えています。その際にAjaxのPOSTメソッドでユーザー名とパスワードを送信するのですが、このままだとセキュリティー的に気持ち悪いので、MD5で暗号化してから送信するようにする予定です。大まかな動作は確認出来ています。とりあえず。（あぁ、コメント数がマイナスになるのも直さないと･･･）