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

CSSのみで3階層目までのメニュを実現

　ネットを検索すれば、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

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