記事アクセスランキングで勢いランキング

category-icon

 こんばんは、martinです。

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

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

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


— posted by martin at 06:49 am   commentComment [2]  pingTrackBack [0]

FirefoxでのouterHTML

category-icon

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

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);
};
とか。
outerHTML
Hello, really strange World !

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

 

— posted by martin at 01:25 am   commentComment [0]  pingTrackBack [0]

ひとつの記事に複数の拡大画像がある場合

category-icon

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

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

IMG_4128
サンチャゴ・コンポステーラへの道 その1
IMG_4095
サンチャゴ・コンポステーラへの道 その2
IMG_4156
サンチャゴ・コンポステーラへの道 その3
IMG_4078
サンチャゴ・コンポステーラへの道 その4

 

— posted by martin at 11:39 pm   commentComment [0]  pingTrackBack [0]

画像なしで吹き出しみたいなもの

category-icon

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

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

  1. シンプルであること
  2. 軽快であること
  3. 吹き出しっぽく見せたいな
  4. 角丸コーナーが良いな
  5. 出来ればドロップシャドウぐらいは付けたい

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

  1. シンプルであること → 画像ファイルを使わずにやれるか?
  2. 軽快であること → フェードなどのエフェクトはなしで
  3. 吹き出しっぽく見せたいな → あのニョロっとした尻尾みたいなのをどうやって作るか?
  4. 角丸コーナーが良いな → CSS3に対応していないIEはどうするか?
  5. 出来ればドロップシャドウぐらいは付けたい → 同上

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

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

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

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

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

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

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

   


— posted by martin at 01:57 am   commentComment [2]  pingTrackBack [0]

表示オンオフ制御周りの改良

category-icon

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

 写真のポップアップにも。
IMG_0285
モン・サン・ミシェル

 

— posted by martin at 11:31 pm   commentComment [0]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0096 sec.
prev
2017.12
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31