久しぶりにppBlog標準装備のアクセス解析の手直しをしてみました。中国最大手の検索サイト百度（バイドゥ）が日本語版サービスを開始へ という話は知っていたけれど、そのクローラー来てますねぇ。

　これに合わせ、いくつかのアイコンを作成し、またview.phpもこちらで確認できる限りのバグ退治をしました。

　参考までに、1月末の4日間ほどのOS・プラットフォーム別アクセス解析のショットを挙げておきます。発売されたばかりのWindows Vistaも早速エントリしてました。

　あと、新たなアイコン達とview.phpの最新版。view.phpはstatディレクトリにあるやつをそのまま上書き。アイコンはstat/iconディレクトリへ。

---

ハロー。オートポスト。携帯電話から編集です。

---

ひとつ前のエントリーで書きましたが、記法は簡単です。次のようになります。

[yt:(ビデオのID):横幅:縦幅]

YouTubeなら、yt、Googleビデオならgv、マイクロソフトsoapboxならsbです。縦と横のサイズ(整数)は省略できるので、簡単にしたいなら、ビデオのIDを記述するだけでOKです。具体例で見ていきましょう。

[yt:hEYHvLnVcnQ::]

と記述すると（任天堂ゼルダ曲のピアノ演奏、再生すると音が出ますよ）、 次は、GoogleVideoの場合。

[gv:-5379890076544103730::]

と記述すると（任天堂マリオ曲のピアノ演奏）、[gv:-5379890076544103730::]最後に、マイクロソフトのSoapbox。

[sb:022cb97f-95f8-403a-9c1b-5032c70de2e1::]

と記述すると（任天堂Wiiのゼルダデモ映像）[sb:022cb97f-95f8-403a-9c1b-5032c70de2e1::]

　こんな感じです。簡単ですね。この記法のために、スタイルシート用ですが video-linkというクラス名を出力するようにしました。このbasicのテーマの場合は、basic.cssにて次のように指定しています。

/*--------------[ 外部動画 ]-------------*/
.video-link {
  width: 425px; margin: auto; z-index:1;
}

　とりあえず、代表的な３つのビデオサイト向け記法を用意しましたが、utils.phpのソースを見れば分かるように、今後いくらでも追加できるようにしています。この手のは、たいていFlashを用いていますから。ちなみに、utils.phpの該当部分は以下のようになっています。配列なので、FLASH系なら、いくらでも追加できると思います。

 // 外部動画リンク表示処理 (YouTube, Google Video, SoapBox MSN, and so on...)
 if(preg_match_all('{¥[(yt|gv|sb):([0-9a-z¥-]+?):(¥d+?|):(¥d+?|)¥]}i', $com, $movlinks)){
  $length = count($movlinks[0]);
  $embeds = array( # src, type, others, width/height
   'yt' => array('http://www.youtube.com/v/', 'application/x-shockwave-flash', '', '425,350'),
   'gv' => array('http://video.google.com/googleplayer.swf?docId=', 'application/x-shockwave-flash', 'id="VideoPlayback"', '400,300'),
   'sb' => array('http://images.soapbox.msn.com/flash/soapbox1_1.swf?v=', 'application/x-shockwave-flash', 'wmode="transparent" name="msn_soapbox" flashvars="c=v&v=SB_MOV_ID"', '412,362'), //
  );
  for($i=0; $i<$length; $i++){
   $_mv = NL.'<div class="video-link">'.NL;
   $tar = $embeds[$movlinks[1][$i]];
   list($def_w, $def_h) = explode(',', $tar[3]);
   $w = $movlinks[3][$i]=='' ? $def_w : $movlinks[3][$i];
   $h = ($h=$movlinks[4][$i])=='' ? ($movlinks[3][$i]=='' ? $def_h : ceil($w * .75)) : $h;
   $_mv .= ' <object style="width:'.$w.'px; height:'.$h.'px;">
  <param name="movie" value="'.$tar[0].$movlinks[2][$i].'"></param>
  <embed src="'.$tar[0].$movlinks[2][$i].'" type="'.$tar[1].'" '.str_replace('SB_MOV_ID', $movlinks[2][$i], $tar[2]).' width="'.$w.'" height="'.$h.'"></embed>
 </object>';
   $_mv .= NL.'</div>'.NL;
   $com = str_replace($movlinks[0][$i], $_mv, $com);
  }
 }

---

　こんばんは。ケータイの着信音をジャックバウアーの「24^G」(ピッ、ピッ、ピッってなるやつ)にしているのですが、仮眠中に鳴った着信音に起きるどころか、何故か、ジャックと一緒に、日本の某所で潜入捜査をしていて「日本だけに、銃が使えないよね」と匍匐(ほふく)前進しつつ、ジャックに夢の中で話しかけていたmartinです。

　さて、ppBlog1.5版では、デフォルトでついているテーマは、2ペイン(サイドバーとメインコンテンツの2カラム)のベーシックなやつですが、それ以前のバージョンには3ペインのテーマも付けていました。で、1.5系に対応する手間だとか、配布ファイルサイズが大きくなるからなどの理由で、1.5系からは付けていなかったのですが、3ペインの要望もあり、とりあえず1.5系に対応させてみました。自分の3ペインには、「こだわり」があって、クリックで2ペインと3ペインの切り替えが出来たり、ソースを見ると、メインコンテンツがサイドバーの内容より先に表示されるとかです。

　まだ、細かい詰めはこれからなのですが、まぁまぁの出来かなと思っています。記事日付の表示に少し凝ってみました。これは、1.5β版で作成していたテーマ「le chic」などでも似たようなことはやっていたんですが、「日めくりカレンダー」のような雰囲気です。ちなみに、「りえっぺさん のと似てない？」という突っ込みはなしで。。

　日付周りは、テーマディレクトリにあるtemplate.phpの記事ボックススタイルで指定するわけですが、実は、それなりに多彩な表現が可能です。このカレンダーっぽい日付の部分は以下のように指定しています。

<p class="article-date" title="%_ARTCL_DATE_FORMAT[g:iA]_%">
   %_ARTCL_DATE_FORMAT[D]_%
   <em>%_ARTCL_DATE_FORMAT[d]_%</em>
   %_ARTCL_DATE_FORMAT[M]_%
   ’%_ARTCL_DATE_FORMAT[y]_%
</p>

これに対応するスタイルシートの指定は、article-dateというクラス名に対して、

.article-date {
  width: 48px; height: 48px;
  color: #585d86;
  float: left; /* この指定がポイント */
  text-align: center;
  font: 500 11px Arial, sans-serif;
  margin-right: 10px;
  background: url(Images/date.png) no-repeat;
}
.article-date em { /* 日付の太文字数字に対応 */
  font: 800 23px Georgia, serif;
  text-decoration: none;
  display: block;
  margin: -6px 0 -3px 0;
}

という指定をしています。template.phpでのポイントは、%_ARTCL_DATE_FORMAT[*]_% という日付に関する変数を複数回用いていることです。これの(*)の部分にはPHPのマニュアルにある日付に関する様々なフォーマット文字を入れることが出来ます。詳しくは、マニュアルの該当箇所 をどうぞ。

　ちなみに、このテーマは、途中なので、まだテーマのプルダウンメニューに入れていませんが、http://p2b.jp/index.php?theme=theme/3pane2/3pane.css で見ることが出来ます。

---

関連エントリー： Google Adsenseの表示タイミングを制御する

　このサイトのppBlog's webRingのリストは、BlogPeople からdocument.writeで書き出しています。というかBlogPeopleのスクリプトがそうなっているのですが。で、document.writeが、HTMLソースの最初の方にあると、document.writeによる書き出しが終わるまで、それ以降のページのレンダリング(HTMLの書き出し)はストップした状態となります。document.writeによって呼び出している外部サーバー(ここではBlogPeople)のレスポンスが速ければ、ページ描画で待たされることはありませんが、たまにはレスポンスが遅くて、ページの残りがなかなか表示されないという事態は起こりえます。このdocument.writeは、広告バナーなどでも当たり前のように使われていて、メインコンテンツの内容が知りたいのに、バナー広告がなかなか表示されず、イライラしたという経験もあるかと思います。確か、GoogleのADWordsなどでも使われているのではないでしょうか。

　こういう事態を避けるには、HTMLソースの最後の方で document.write を呼び出すというのがあり、これはこれで有効ですが、そう汎用性のあるやり方ではなく、また、スクリプト(JavaScript)がHTMLの中で、あちこちに散らばるのは美しくないです。

　ここでは、document.writeの内容をとりあえず配列などに一時的に退避させといて(この間にHTMLソースの描画は進んでいきます)、ページ読み込み完了と同時に、そのストックしておいたdocument.write内容を吐き出すという方法について書いておきます。

　まず、普通にdocument.writeを含んだ外部スクリプトを呼び出すやり方。これは、BlogPeopleがこうしましょう、と述べているものです。

<script type="text/javascript"
  src="http://www.blogpeople.net/display/usr/0f0d40535b5b4103.js"
  charset="euc-jp"></script>

これの実際の中身は、次のようになっています。

document.write('<div class=¥'blogpeople-main¥'>');
document.write('登録されたサイト')
　　　　　：
　　　　　：
document.write('</div>');
document.write('<div class=¥'blogpeople-powered-by¥'>');
document.write('<br /><a href=¥'･･･¥' target=¥'_blank¥'><img src=¥'･･･¥' border=¥'0¥' alt=¥'Powered By BlogPeople¥' /></a>');
document.write('</div>');

ここに使われているdocument.write内容をとりあえず配列に入れておけば良いのですが、それには次のようにします。

(function(){
  var alts = []; // document.writeの内容を入れておく配列を準備 
  d._write = d.write; // オリジナルはコピーしておく
  d.write = function(s){ alts.push(s);} // d.writeを新たに定義
  var src = "http://www.blogpeople.net/display/usr/0f0d40535b5b4103.js";
  var script = d.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('charset', 'euc-jp');
  script.setAttribute('src', src);
  d.getElementsByTagName('head')[0].appendChild(script);
  addEvent(window, "load", function(){
   o("_webRing").innerHTML = alts.join(""); // 指定した場所に流し込む
   d.write = d._write; // d.writeを元の定義に戻しておく
  });
 }());

　ポイントは、既存のdocument.writeを新たに、

document.write = function(s){ alts.push(s); }

と再定義している点です。ここではaltsという配列に退避させています。こうすることで、document.writeによる書き出しを待つことなく、残りのページレンダリングを進めていくことが出来ます。このスクリプトで、SafariでもIE6でもFirefoxでもきちんと動くことを確認しています。

　小生のブログであるmartin.p2b.jpのwebRing と、このサイトにあるwebRing とは同じ外部スクリプトを呼び出しているのですが、比較のために、このサイトのwebRingは上記の手法で、martin'sの方は従来の方法で呼び出しています。BlogPeopleのサーバーレスポンスは素早いので、なかなか差が実感できにくいかと思いますが、このサイトのやつは、(サイドバーのHTMLソースはdocument.writeよりも後にもかかわらず)サイドバーが先に表示されて、最後にwebRingのリストが表示されるのに対して、martin'sの方は、HTMLソースの順序通り、webRingリスト→サイドバーという順序で表示されています。

　ちなみに、このサイトのwebRingは、ppBlogの「ページ作成機能」を使って作成しているのですが、具体的に、どのような内容になっているのか、理解の一助のために添付しておきますね。

　まぁ、こんなアプローチもありますよということで

JavaScript  

---