今日も一日就職活動。久しぶりに母校に卒業証明書発行を申し込んだり。
で、晩飯後息抜きにスクリプトいじる。なんちゃってECの｢問い合わせフォーム｣にもUIエフェクトを付ける。会員登録画面と同じだと面白くないんで、slidinglabelsを付ける。そこでいつも通り設定でハマったのでメモ。
ドキュメントも判り易く、設定も簡単なのに、その通りやっても駄目。グーグル先生で調べると、結構日本語のドキュメントもある。でもどこにも解決策らしきものがない。大分プラグイン借りるのに慣れてきて、コードをあっちこっち書き換える前にプラグインのコードを熟読。あれ？デフォルトclassNameが｢form-slider｣になってる。｢<- new to version 3.2｣だって。日本語の解説サイトにはもちろん、本家サイトにも書いてない。｢.sliderと指定しなさい｣って記述がチラホラ。
まぁ、コードみればすぐわかるんで、無料のものに文句付ける気は全くないです。でもminバージョン使ってたりすると判らないな。もし同じとこでハマる人がいたらと思い書いときます。俺だけか。
Autogrow Textareaも付けようかと思ったんだけど、デモページでもひらがなが誤動作したので却下。それほど必然性のあるエフェクトでも無いしね。
明日からは今度こそ次の演習に取り掛かる。まずはデータベースの設計。また頭使い過ぎで頭痛の毎日か。そろそろPHP向けの頭の使い方(というかサイト設計時の頭の使い方)に慣れないとなー。やっぱりJavaScriptいじってる方が見た目をイメージしながらなんで面白い。PHP書きはホント脳みそだけの勝負って感じ。プログラミング自体はPHPの方が判りやすいんですけどね。
10年12月11日(土)‡00時32分18秒 ‡
未分類
一昨日のエントリに書いた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秒 ‡
未分類