一昨日のエントリに書いたjQuery-narrative-selectの動作不良だけども、あれこれしてたら直りました。
一遍あきらめたけど、どうしても気になって、さっきのエントリに書いたとおり資料を作ってからなんちゃってECサイトの[会員登録]画面のコード眺めてたら、narrative-selectが効いてる生年月日のselectはvalueが全部1から始まってて、駄目な都道府県のselectは0から始まってる。なので｢都道府県を指定してください｣optionのvalueを48にして、一番後ろに持ってく。そしたら動いた！やった。
で、デフォルトで北海道が表示されてるので、PHPを書きなおして｢都道府県を指定してください｣optionにselectedを付ける。そしたら何とまた動作不良。｢もしかして文字数？｣。試しに｢都道府県を指定してください｣を｢都道府｣って変えたらビンゴ！ちゃんと動く。面白いなー。というかスクリプトちゃんと理解できれば何でそうなってるか判るんだろうけど、今の僕にはまだ難しかった。とりあえず今は動けば良しとして、さすがに｢都道府｣はまずいので｢選択してください｣にする。泥縄式だけど、一応不具合に対処できたってことでメモ。
他のselectにも貼り付けてみよう。場所ごとの挙動の差でスクリプトの理解ができるかも知れないので、根本的に解決できたらまたエントリ書きます。明日は就職面談だ。
10年12月10日(金)‡03時09分17秒 ‡
未分類
就職活動の面談用の資料づくりも必要で、コード演習なら新たな課題｢業務用webアプリ制作｣というのも始めるつもりなのに、気が付いたらECサイトのスクリプトをいじっている。やっぱり細かな処で気に入らないところが残ってるのよねー。
で、トップページの画像ローディング中の画面が酷かった。大分前から判ってたんだけど、手持ちの著作権フリーの画像をそのまま放り込んだだけだったので、最低横800px以上で、中には2000px近くある画像も混じってて、そのサイズでは仕方がないなと放っておいた。参考にAmazon閣下を見ても画像サイズは小さいのを使っておられるようで、実際にECサイトとして運用するなら画像サイズ上限は決めるべきだとも思って、システム側で対処する必然性を感じなかったのです。
しかし、いかんせん酷すぎる。それに画像にしか｢色｣が無いうちのECだと、画像をあまり粗くすると全体的にきちゃなくなるので出来ればそのまま行きたい。では、以下今日の試行錯誤。所要時間4時間。
まずグーグル先生で｢jquery 画像 ローディング中」と質問。いくつか出てきたんだけど、CSSよりのプラグインとかが出てきて、構造は完成しちゃっているうちのサイトを一から作り直すのはいやで却下。そんで見つけたのがここ。すごいなー。プリロード処理のショーケース。こういう風に他人のために情報を整理して提示してくれる人にはほんとに頭が下がる。ありがとうございます。
で、全部のデモページを見て、うちのに合いそうなこれを使うことに決める。ドキュメントを読みだすと、初っ端からアップデートの案内リンクがあって、飛んだ先には｢前のに不具合があったことをなんで皆すぐ言ってくれなかったんだ！｣みたいなことが書いてあって微笑ましい。ドキュメントの通り実装。動かない。コードを読み返す。｢.preload」指定死んでない？と思ってドキュメントを再読するとコメント欄にそのことを文句付けてる人発見。｢あなたはこの部分のスクリプトは他の人のをコピーしたって書いてるけど、『.preload』指定の部分だけコピー抜けてるよ！」だって。この作者は結構コメントに返事返してるんだけど、これはスルー。以降コメント欄に出現せず。修正もされず。仕方がないのでこの部分の引用元に行ってみると。確かに抜けてる。で、直したらちゃんと動いた。このプラグイン作者さんにも当然感謝だけれども、今回すごく助かったのはこのページ。ローディング中表示用のGIFアニメを作ってくれるサイト。すごいの一言。
その結果。相変わらず酷い。ロード中のGIFアニメがガタガタ動いてるっていうだけ。ようするに画像自体のローディング中の表示不具合というより、画像サイズの取得中の各ブロックのサイズが未定義なのでガタガタなのよね。なのでimgタグを包んでる要素にサイズを明示する。anchor-linkにサイズ指定なんて効いたっけ？と思いながら全部指定したらちゃんとなった。あ、そうか。float指定の時にdisplay:blockにしてるからだ。結局最初の「画像サイズがでかいから」という理解は全くの間違いで、floatさせてる要素のサイズ明示が抜けてるから、画面が落ち着かなかったというだけだった。うーん。この手直しも結構勉強になったなー。今後は画像ブロックのfloat時には気をつけよう。あと、altの内容もローディング中にはみ出しちゃってガタガタになるというのも、画像ラッパーのサイズ明示で防げることも判った。最後に細かな手直し。alt文は非表示になるんだけど、そのborder-bottomがFireFoxだと表示される。黒い線がポツポツ。altのcolorを背景色と一緒の白にすると今度はアニメの上にだけ白い線が走る。で、「CSS 文字色 透明」でグーグル先生に聞くと、何でかトップにW3C先生（本物）登場。一応見てみると「CSS3ではtransparentをcolorにも指定して良いんですよー」って優しく書いてある。いつも怒ってばかりの先生が今日は変。で、そのとおり指定すると、おお、白いところは白、黒いところは黒で完璧に消えてる！
以上。試行錯誤メモ。今から面談用資料作ろー。
10年12月10日(金)‡00時51分02秒 ‡
未分類