こんばんは、martinです。

ppBlogでは、アクセス解析画面に「記事アクセスランキング」が組み込まれていますが、最新版(まだ配布していませんが)ではこれに「勢いランキング」も追加しました。

　従来のアクセスランキングでは、記事のレビュー数のみでの評価なので古いエントリーの記事が上位に来やすいです。これに対して、「勢いランキング」は、理論上は、一日あたりのレビュー数（平均）になるので、最近のエントリーでも上位に来ることが出来、なんとなく流行のトレンドみたいなものが見えてきて、興味深いです。

　このサイトのサイドバーのメニューに「人気記事ランキング」があります。このリンクでも、ほぼ同じ内容のものを見ることが出来るので、興味ある方はどうぞ。タブ切り替えにしてみました。限られたスペースで、多くの情報を見せることができるので、使いどころによっては良いですね。

---

　innerHTMLに比べると、outerHTMLを使う頻度はぐっと少ない。現状、IEと Safari, Chrome, Operaが対応していて、未対応はFirefoxだけ。使用頻度が低いメソッドに対して、Firefox向けに、長々しいスクリプトを書くのもどうかねぇ、と思ってググってみたところ、ナイスな投稿がありました 。

sOuterHTML = new XMLSerializer().serializeToString(oElement);

　確かに、これは理にかなってますね。outerHTML自体は、値の取得だけでなくて、設定も出来るんだけど、そういう場面はまずないだろうから、このgetterだけで十分ですね。

<div id="Here">Hello, <strong>really strange</strong> World !</div>

対して、innerHTMLなら

Hello, <strong>really strange</strong> World !

が返されるし、outerHTMLなら、

<div id="Here">Hello, <strong>really strange</strong> World !</div>

が返される。実装例としては、

function getOuterHTML(e) {
 if(e.outerHTML){ // IE, Webkit, Opera
  return e.outerHTML;
 } else { // Firefox (, Webkit, Opera)
  return  new XMLSerializer().serializeToString(e);
 }
};

あるいは、短く

function getOuterHTML(e) {
  return e.outerHTML || new XMLSerializer().serializeToString(e);
};

とか。

　実際には、Firefoxだと xmlns="http://www.w3.org/1999/xhtml" という属性が付加されるので、気になるようなら適宜省けば良いでしょう。

JavaScript  

　簡易画像ギャラリーのテスト。タイトルのような場合、ひとつの画像をクリックして、拡大表示にした際に、ポップアップした画面の右端に矢印が表示される。それをクリックすると、同じ記事に含まれる次の画像を読み込む仕様。

　特に画像キャプションが付いている場合は、それも表示されるので、写真を主体に見せたい場合なんかには、好都合だと思います。

JavaScript  

　この頃は、リッチなツールチップ（バルーンヘルプ）が増えてきたように思います。中には、派手すぎて逆に分かりづらかったりするものもありますが、まぁそういうので遊んでみるのもたまには良いかなと思います。

　自分なりに実装するとしたら、どのようなものが良いか考えてみました。

という感じで、矛盾をはらんだリストですが、これを実装するにはどんなが良いか考えてみました。

　いつものようにCSS3のサポートが貧弱なIEが足かせとなります。でも、IEでも同じように見せるために四苦八苦するのがweb開発の面白いところでしょう。画像を使わずに、角丸コーナーやドロップシャドウ効果を付けるには、IEのVMLやfilter機能を使うのが良いでしょう。

　角丸コーナーは、VMLのroundrect^Gを使って実現できます [参考記事： VMLやSVGを用いた角丸コーナー ]。ドロップシャドウは、IEのフィルター機能のひとつであるBlurを使うことでOKです[参考記事： IEでCSS3のドロップシャドウを使いたい ]。問題は、吹出しには必須とも言える、あのしっぽみたいなやつですが、これはCSSのボーダー属性を使うことで可能です。トリッキーな（でも正統派）手法ですが、これに関して、レファレンスともいうべきサイトがあります 。このサイトは、以前から知っていていつか利用しようと思っていたんですが、ようやくお世話になる時が来ました

　とりあえず、試験的なモデル（プロトタイプ）を作ってみて、それが意図したように実現可能であれば、それを自動化すべくスクリプト化という流れが良いでしょう。プロトタイプが、よさげな感じに仕上がったのでスクリーンショットをば。 　

実際のデモのページはこちら。

　で、かなり手抜きですが、これを元にスクリプト実装したのが以下。

実際のデモのページはこちら。

　ppBlogで、これらをどれくらい採り入れるかは未定ですが、引き出しは多ければ多いほど良いでしょう

CSS   JavaScript  

---

　ppBlogのoParts.jsにtweenアニメーションみたいな動きを取り入れてみました。まだ試作段階ですが、テーマ：Basicであれば、左側のサイドバーの展開や、ソーシャルブックアイコンで、ちょっとした動きをみることが出来ます。

　写真のポップアップにも。

JavaScript