こんにちは, @the_theorierです.
今日はちょっとした備忘録というか愚痴みたいなものです.
欲はきりがない
元々はとりとめのない話でやることになったWebサイトでしたが(ここじゃなくgeocitiesの方です), 最初の内は特に深く考えることなく「何かホームページビルダーってのがあるらしいし、それでいいや」と決めてしまったものです.
当然cssやjavaはおろか, htmlの知識さえありませんでした, というか今も全然です^^;
昨年パソコンが壊れたのをきっかけにビルダーから卒業し(というかあの動作の重さは本当にイライラしました, そりゃ1ページ辺りのボリュームが多いのも悪いんですがw), 取り敢えず今はTeraPadで直接htmlなりcssなりを弄ることで凌いでいます.
レスポンシブ対応もググって何とかそれっぽくなり安心しました, もうどういう風にやったか覚えてません…でも何とかなった…よかった…
分かってれば最初からレスポンシブにしましたよ…ってのは誰でも言えることですよね…
当面の課題
まぁデザインセンスは元々欠片もないのでそこはご勘弁いただくとして, 何とかしたいのはあの1ページ辺りのボリュームの多さです.
今の時点でもページによっては246KB(19日更新時点)なんてものあります.
やめない限りいくらでも増えるので, これまでtableを廃止してみたりキャッシュ設定してみたり(これ効いてるのかよく分かってません…), gz圧縮したりと色々工夫はしてきましたが, 単発記事と違いああいうページの特性上, いずれ限界がやってくるのは目に見えています.
なのでなんか
- 検索フォームがあってそこでand・or検索して結果だけ一覧表示できないか
- せめて効率よくスクロールできないか
とか, 時間があるときに考えていたわけですが, 流石に前者はちんぷんかんぷんで(企業サイトとかにある商品検索とかどうやってるんでしょうね, ああいうのやってみたい), 取り敢えず後者はなんとかググって出来そうだったので今朝試験的に下のページだけやってみた次第です.
上に見える固定の↑ボタンと↓ボタンを配置し, それをクリック(タップ)すると3ページくらい一気に移動します.
スクロールバーをつまんだりクリックしたり, 或いはスワイプしたり…とは別にあると便利かもしれない(妄想)ってことで勢いでやってみました.
ただパッと移動するのでは味気ないのでアニメーションでやってみたわけですよ, 因みにソースを見れば一目瞭然ですがコードは下のような感じです.
<script type="text/javascript"><!--
var dElm = document.documentElement , dBody = document.body;
var nY = dElm.scrollTop || dBody.scrollTop;
function LargeScrolld() {
$('html,body').animate({scrollTop: screen.height+nY}, 400 );
nY = nY + screen.height*2;
}
function LargeScrollu() {
$('html,body').animate({scrollTop: screen.height*(-1)+nY}, 400 );
nY = nY + screen.height*(-2);
if($(this).scrollTop()<0){
$(this).scrollTop = 0;
}
}
function ScrollTop() {
$('html,body').animate({scrollTop: 0}, 400 );
nY = 0;
}
// --></script><div style="z-index: 1500; position: fixed; bottom: 220px; right: 30px;"><input type="image" src="up.png" width="50px" onclick="LargeScrollu()" complete="complete"></a></div>
<div style="z-index: 1500; position: fixed; bottom: 150px; right: 30px;"><input type="image" src="down.png" width="50px" onclick="LargeScrolld()" complete="complete"></a></div>
<div style="z-index: 1500; position: fixed; bottom: 50px; right: 30px;"><input type="image" src="pagetop00.png" width="50px" onclick="ScrollTop()" complete="complete"></a></div>
<script type="text/javascript">
JavaScriptの知識なんてさっぱりですが, Cとかと似てる所は似てるんじゃね？ってことでやってみたら意外と出来たという感じです, 分かってて書いてないので当然ながらこれで完璧ではありません.
取り敢えず分かってる「問題」は2点あって, このままだと
- ScrollTopがいくらでも負の値を取れる(逆も同様)
- スクロールして折り返すときの1度だけ上下しない
ですね.
前者がかなり痛いです, 例えばページを上げすぎてScrollTopが例えば-10000みたいなことになると, 以降ページを下げるとき, ScrollTopが0より大きくなるまで何度もクリックしないとページが上下してくれません…
スクリプトの真ん中らへんにある
if($(this).scrollTop()<0){
$(this).scrollTop = 0;
}
で解消したつもりですが間違ってるようで無駄コードと化しています…
取り敢えずPage Topボタンで使ってる
$('html,body').animate({scrollTop: 0}, 400 );
nY = 0;
で解消出来てるっぽいです.
あ, じゃあこれに差し替えれば良いのか…とも思ったんですが今度はピクリとも動いてくれなくなってしまったのでこれで妥協してしまいました…
何かあったらPage Top押せばリセットされるよ！ってことで…
寧ろ多くのサイトはトップに戻るのばっかりだし, 或いは最近の有名サイトがやってるような, ページを分割して上下にスライドさせるパターンだったり, コードもclass使ってたりと現状をなるべく維持したまま希望の仕様にするのは中々簡単そうじゃなかったんです(自分の薄識さがまずありますけど)…
〆
というわけで何だか凄いようで全然凄くもなんともないんです, 結局根本的な解決にはならないんですよね…
ただ, 有名サイトとかでもページ表示までに10秒20秒かかる所もあったりするんですよね, そういうの見るとなんだか安心してしまいます^^;
いや安心してるだけじゃダメなんですけどね.
仕事で忙しい中で何とか解決したい所です, "そういうカテゴリのサイトだから"意外とこれで良いって声もあるんですけどね.
