Re: 「はてブのフッターを小さく固定にする」をグリモンにしてみた
「はてブのフッターを小さく固定にする」をグリモンにしてみた - SO NOTE そうのて (；^ω^)
こちらで先日作ったはてブのフッターを小さく固定にするユーザースタイルシート
フッター上をカーソルが通過する度に一瞬伸び縮みするのが少し気になってた(；^ω^)ので、グリモンにさせてもらいました。
http://d.hatena.ne.jp/so_blue/20090218/1234969578
とのこと、確かに私自身もその挙動はちょっと気になってたので、こうした改善のフィードバックはとても有り難いですね。ありがとうございます。
で、そのGreasemonkeyについて少し気がついたことがあったので、こちらからもフィードバックを
// ==UserScript== // @name fixedBottomHatebuFooter // @namespace http://d.hatena.ne.jp/so_blue/ // @include http://b.hatena.ne.jp/* // ==/UserScript== (function(){ var btn_open = '\u25b2', btn_close = '\u25bc'; var footer = document.getElementById('footer'); if (footer) { //footerのstyle設定 footer.style.position = 'fixed'; footer.style.left = 'auto'; footer.style.bottom = '0px'; footer.style.zIndex = '100'; footer.style.borderTopWidth = '3px'; footer.style.height = '2.5em'; footer.style.opacity = '0.8'; //透過したくない時はここをコメントアウト //伸縮ボタン作成とstyle設定 var elmP = document.createElement('P'); elmP.style.position = 'fixed'; elmP.style.bottom = '0px'; elmP.style.width = '99%'; elmP.style.height = '1.5em'; elmP.style.zIndex = '101'; elmP.style.textAlign = 'right'; var elmSPAN = document.createElement('SPAN'); elmSPAN.style.cursor = 'pointer'; elmSPAN.style.color = '#00f'; elmSPAN.innerHTML = btn_open; elmSPAN.addEventListener('click', function(e) { var h = (footer.style.height == '2.5em') ? 'auto': '2.5em'; var t = (e.target.innerHTML == btn_close) ? btn_open: btn_close; footer.style.height = h; e.target.innerHTML = t; }, false); elmP.appendChild(elmSPAN); document.body.appendChild(elmP); } })();
こちらが元のGreasemonkey
特に気になったのはこの部分
//footerのstyle設定 footer.style.position = 'fixed'; footer.style.left = 'auto'; footer.style.bottom = '0px'; footer.style.zIndex = '100'; footer.style.borderTopWidth = '3px'; footer.style.height = '2.5em'; footer.style.opacity = '0.8'; (略)
となっているのですが、style属性を一つ一つ設定していくのは効率が悪いです。というのも指定していく度に再描画が行われてしまうので、1度に設定した方が良いでしょう
参考リンク
複数回のスタイル変更は一回にまとめよう - 効率的な JavaScript
この場合
footer.setAttribute('style','position:fixed;left:auto;bottom:0px;z-index:100;border-top-width:3px;height:2.5em;opacity:0.8;');
とやってもいいのですが、今回はGreasemonkeyなのでGreasemonkeyのAPIのGM_addStyle関数を使ってスタイルシートの設定を行ってみます
GM_addStyle(<><![CDATA[ #footer{ position: fixed; left: auto; bottom: 0px; z-index: 100; border-top-width: 3px; height: 2.5em; opacity: 0.8; } ]]></>);
これだと、CSSの書き方で記述できるので、便利です。
ボタンについても、スタイルシートが書きやすいよう、idを割り振っておきます
var elmP = document.createElement('P'); elmP.id = 'HB_footerbtn';
名前は適当で。
で、あと気になったのは、フッターの表示がどうなっているかの判定
elmSPAN.addEventListener('click', function(e) { var h = (footer.style.height == '2.5em') ? 'auto': '2.5em'; var t = (e.target.innerHTML == btn_close) ? btn_open: btn_close; footer.style.height = h; e.target.innerHTML = t; }, false);
今回はオンかオフしかないので、その判定を1回だけにまとめた方が効率が良いのでは？と考えました。
それも合わせると
(function(){ var btn_open = '\u25b2', btn_close = '\u25bc'; var footer = document.getElementById('footer'); if (footer) { var elmP = document.createElement('P'); elmP.id = 'HB_footerbtn'; //idを設定 var elmSPAN = document.createElement('SPAN'); elmSPAN.textContent = btn_open; elmSPAN.addEventListener('click', function(e) { var h,t; if(this.textContent == btn_open){ //style属性ではなく、ボタンでフッターの状態を判定 h = 'auto'; t = btn_close; }else{ h = '2.5em'; t = btn_open; } footer.style.height = h; this.textContent = t; }, false); //スタイルの設定 GM_addStyle(<><![CDATA[ #footer{ position: fixed; left: auto; bottom: 0px; z-index: 100; border-top-width: 3px; height: 2.5em; opacity: 0.8; /* 透過したくない時はここをコメントアウト */ } #HB_footerbtn{ position: fixed; bottom: 0px; width: 99%; height: 1.5em; z-index: 101; text-align: right; margin: 0; /* 継承があるので追加 */ } #HB_footerbtn span{ cursor: pointer; color: #00f; } ]]></>); elmP.appendChild(elmSPAN); document.body.appendChild(elmP); } })();
こんな感じになりました。
これで機能はそのまま高速化されています（とは言え、体感できるレベルでないですが）。なんか勝手に添削するみたいになりましたが、せっかくフィードバックをいただいたのでこちらも、というところで。
参考になれば幸いです。
あと
三項演算子を使った代入は正直あまり理解してなかったので、そちらも参考になりました。
