タグ『
JavaScript 』
就職活動の面談用の資料づくりも必要で、コード演習なら新たな課題｢業務用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秒 ‡
未分類
大した話では無いんだけど(いつもか)、タグクラウド?を追加して自分でも笑ってしまったのでメモです。
とにかく触ってみてもらったら判るんだけど、すごく使いにくいです。動き回ってなかなか希望のタグにポイント出来ない。で、段々可笑しくなってPCの前で一人で笑って家人にびっくりされた。あるタグがactiveになったらFreezeさせる設定もあるんだけど、それだと今度は動きがギクシャクしちゃう。何か国産にない雰囲気が面白い。
このブログは出来るだけシンプルに文章以外のものを排除するようにデザインしているし、今後もそれは変わらないんですけど、面白いので入れておこうと思います。
見つけた記事はこれ。ドキュメント等はここです。あ、canvas要素使って描画してるのでIE8以前では見れません。FFとChromeはOK。初HTML5。
今日は就職活動。面談の予約のために面談行ってきたり、情報収集したり。あ、朝は職業訓練の修了式でした。訓練の総括については稿を改めて後日に。
10年12月9日(木)‡01時23分16秒 ‡
未分類
今の僕にはこれが限界です。作る予定だったものはこれでほぼ全部終わりました。
昨日今日でUI周り改造。といっても会員登録ページだけだけども。この記事を参考に付けまくった。世の中にはもっと色んなスクリプトがあるのは知ってるけど、簡単なページ1つにこれだけつけるのはちょっとやりすぎじゃないかと思う。面白いの見つけたらまたくっつけるけど。住所→郵便番号の逆引きは実現出来ませんでした。そういうスクリプトは見つけられなかった。自分でPHP組んでJSONで渡せば良いんだけどまだ僕には無理と冷静に判断しました。だって順引きの実現のために、たった7文字のインプットのために、JSONファイル900本以上使ってるんだよ！っていっても今回はダウンロードしただけだけど。作者さんに感謝！
以下備忘のために列挙すると、
記事にあった：Input Hint Overlay、Text input field filter、jQuery Validation、Simplest Twitter-like dynamic character count、jQuery-narrative-select
と、郵便番号→住所のためにajaxzip2（これだけ国産）（当たり前か）。過去エントリに書いていたIME制御はCSS（ime-mode)でやりました。なのでfor IE,FireFox onlyです。JSで頑張って何か作ろうかな。スクリプト同士がバッティングしないか怖々で、一つ一つ動作確認しながら付けて行きました。やっぱりバッティングは起きるんだけど、一つ一つ解消して行って、最後にselect部分のエフェクト(jQuery-narrative-select)だけは解消できなくて、都道府県選択部分は外しました。ajaxzip2とbindの熾烈な攻防をしてるんじゃないかと推察。あ、そうか。どっちかbindじゃなくすれば良いのか。明日見てみよう。
改造の結果W3C先生から怒られまくり。今までPHP組んでた時は全部直してきたけど、今回のは難しい。中でもautocomplete属性なんて、代替策を探してたら「HTML5では非推奨では無くなります」だって。じゃあW3C勧告が決まったら怒られなくなるのか。なんか変。まぁ、少しづつインラインからJSとかに書き換えて直していきます。
このECサイトの改善について思いついているのは後は細かい修正ばかり。次は何組もうかな。
今日で職業訓練の授業は終了で、明日が修了式なんだけど、今度こそ本当の卒業制作を一人でやろうかなと思ってます。もともと訓練が始まったころは業務用のWEBアプリを作ってみたいと思ってたので、それを今度はゼロから自分で創る。
とはいえ、訓練終了で本気で職探し始めなきゃいけないんですが、それも資格試験の（不？）合格発表を待って本格化する予定ですので、少しは時間があります。
ECサイトのようにある程度出来たらUPしますのでまたご意見下さい。
最後に改めて、上記スクリプトの作者の皆様に心より感謝します。いつか、恩返しとして、僕も色んな人に使ってもらえるようなコードが書けるように頑張ります。
(12/8追記)
残文字数カウンターの挙動がおかしかったのを修正。
入力し始めはちゃんと機能しているんだけど、Validationのエラーが表示されて以降は死んじゃう。ドキュメントを色々読んでもわからないので、スクリプト本体を読む。function calculateってのがthisを引数にしてるのにピンと来て、FireBugで変更後のHTMLを見ると、inputとカウンター用のspanの間にエラー表示labelが挿入されてる。これでターゲットが移っちゃうのね。このページ(jQuery Validationの日本語解説としてはこの方のページが一番判りやすいと思います。感謝！)を参考にValidationのエラー表示を後ろに移す。正解！JSも挙動が面白いなー。やんちゃなくせにDOMにだけは忠実、って感じ。
10年12月7日(火)‡23時19分13秒 ‡
未分類