こんばんは。こっちに来て体重が数キロ減りちょっと吃驚したので最近心がけてよく食べるようにしているmartinです。このところ、やたら忙しくppBlogの開発にまるで時間が割けませんでしたが、ちょいと一息おけたので、一気に進めるところまで進めてみました。何とか頭に思い描いていた感じに仕上がってますが、静的リンクの出力を取り入れようとしてからこんなに時間が経つとは。。

　結果的に、かなりの部分で静的リンク出力に見合ったナビゲーションにすることが出来ましたが、あとちょっと残ってます。まぁ、拘らなければ良いのですが、どうも統一感がないと落ち着かないので。

　従来の動的なリンク出力と静的リンク出力は、管理画面で簡単に切り替えることが出来ます。この動作を実現させたいがために、utils.phpは大幅な書き換えを余儀なくされたんですが、苦心した甲斐があったと思ってます。

　あとは、ブログのページングをデフォルトで付けてみました。これがあると古い記事にも簡単にアクセス出来るので、従来のものにあった「古い順にソート」するという機能はオプション扱いになります（各テーマテンプレートで指定）。

　現状、日本語で指定したカテゴリーは、独自のエンコード処理をしてリンク表示(英数字指定のカテゴリーはそのまま)していますが、これが任意のアルファベットを指定できるようになれば、だいたいやりたいことは済むかなぁ。

　1.7.1ベータ版をお使いの方は、記事やコメント・トラックバックなどのログファイルなどを除いて、ほぼ全てのPHPファイルを上書きすれば良いと思います。index.phpもかなり書き換えてます。あ、一番の方法は、新規にアップして、そこに従来のログファイルを流し込むというやり方ですね。

　まだナビが変な部分がありますが、ちょっとお腹が空いたので、とりあえず。

ppBlog  

---

　こんばんは。これは、数年前にppBlogを開発し始めて、そう経たないうちに要望として出ていたことなんですが、ppBlogが出力するページの静的化を検討中です。静的化と言っても、実際にHTMLとして生成したファイルをサーバーに置いておくわけではなく、「見かけ上」静的ファイルがあるように見せるというものです。具体的には、Apacheサーバーで使用可能なmod_rewrite^Gを使用します。mod_rewriteの設定を.htaccessファイルとして記述し、サーバー上に置いときます。このやり方では、.htaccessファイルが有効である必要がありますが、多くのレンタルサーバーでは、Apacheの設定をいじれない代わりに、この.htaccessファイルを使用可にしていると思います。

　そもそも、どうして静的化が必要なのか？という話ですが、これは動的ページと静的ページ(1) 一般論 あたりによく纏まっています。要はSEO絡みの問題なのですが、少なくともグーグルに関しては、「動的URLも静的URLと同様に扱う」 ということらしいので、数年前ならいざ知らず、SEO対策として是非とも静的リンクにしたい、というのはちょっぴりout-of-dateなことかもしれません。実は、個人的には検索エンジン対策のための静的化というのはあまり興味がありませんで、じゃなぜ静的化かというと、勿論、そういう要望があるという理由と、あと、個人的にはこっちにウェイトがあるんですが、見た目がすっきりするというのがあります。昨日から本格的にいじりだしたんで、まだどうするか流動的なんですが、一応、個人のブログサイト の方に反映させています。静的化というと何となく拡張子htmlで終わってるというイメージがありますが、SEO的には拡張子のあるなしは関係ないはずです。なので拡張子なしにしていますが(すっきりするので)、これだと何だか落ち着かないという意見もあるでしょうから、その辺は管理画面で指定できるようにします。

　で、静的リンクの指定ですが、現状、2パターン用意してます。ひとつは、記事のタイトルとは別に、予め英数字からなるタイトルを別に指定しておいて、その指定があれば(例えばemmenagementという指定)、

http://martin.p2b.jp/200802-emmenagement 

みたいになるパターン（頭の200802-は自動的に付加されます）と、あとはそういう指定がない場合のパターンで、これは単にUIDがリンクになります。以下のような感じです。

http://martin.p2b.jp/1201100476 

　最初のパターンでは日付が勝手に付加されますが、これはサーバーへの負荷を減らすのが目的です。これがないと、リクエストの度に、すべてのログを走査して合致するタイトルを探し出す必要がありますが、予め日付が分かればログを決め打ち出来るので。これに関しては、UIDとリンク用記事タイトルの対応表を別に作っておくという手もありますが。まぁ、何となく日付が分かるのも良いかなと、ない方がもっとスッキリしますが。。このあたりは如何様にも出来ます。まだ途中なんで、記事リンクにちゃんと反映されていないとかありますが、まぁそのうち改善されるでしょう。何か要望とかありましたらどうぞ。

---

　明けましておめでとうございます。長らく更新が途切れていましたが、少しずつ手直しをしてました。初めて海外で新年を迎えたような気もする今日この頃です。正月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に対するマウスオーバーチップ処理を追加しています。

---