和田憲幸のブログ

facebookにも同じようなツールバー付いてますよね。これ、意外と便利なんですよね。最初はabsoluteでonscrollで追従してみたんですがガクガク感が気に食わなかったのでfixedにしてみました。IE6だけabsoluteも考えましたが、IE6のシェアがだいぶ落ち込んできたので完全にfixedに。

ツールバー設置の意図

もともとこのブログのユーザビリティの悪さたるやもちろん私も自認しております。当初のコンセプトが文章を読みやすく焦点が散らないという意図でこのブログを作ったわけですが、いささか敷居が高く、ページの端でページがめくれようなんて誰も気付かないですよね言われないと。ましてやマウスゼスチャーに対応してるなんて言われないとわからないし。

で、当初から見ていただいている読者さん以上に新規ユーザが増えてきたので、これはいかんなと思ってツールバーを設置した次第です。私個人での考えですが２カラムや３カラムは焦点が散るので嫌なんですね。それに文章の領域は横幅で740は確保したい。文章をゆったり見れる領域はやはりほしい。で、左側にweb-dockが付いてるわけなんですが、onmouseoverだと誤って表示されたときウザイというお言葉もいただき、onclickにしたら余計わけわからんと…。

ということでbottomにツールバーというのは非常に理解しやすくfixedであるため見過ごす可能性も最小限に抑えられているわけです。このbottomにfixedなツールバーは今後、Webサイトのデファクトになる予感。positionでbottomが使えれば実装は簡単ですが、クロスブラウザを考えるとjsでやるしかないのが現状ですよね。

ともあれ、ページビュー増加の一端を担ってくれるでしょう。アクセス解析の結果が楽しみ。

bottomにfixedなツールバー表示の仕組み

onload時にウィンドウの内縁サイズを取得してツールバーの高さを引いたpositionにtoolbarを表示させます。あとはonresize時にウィンドウのサイズをリフレッシュして再描画すればOK。簡単ですね。

簡単にbottomにツールバーを表示できるライブラリを作ろうかなと思ってます。