タグ『 UI 』

≒ ほぼ予定通りECサイト完成

今の僕にはこれが限界です。作る予定だったものはこれでほぼ全部終わりました。

昨日今日でUI周り改造。といっても会員登録ページだけだけども。この記事を参考に付けまくった。世の中にはもっと色んなスクリプトがあるのは知ってるけど、簡単なページ1つにこれだけつけるのはちょっとやりすぎじゃないかと思う。面白いの見つけたらまたくっつけるけど。住所→郵便番号の逆引きは実現出来ませんでした。そういうスクリプトは見つけられなかった。自分でPHP組んでJSONで渡せば良いんだけどまだ僕には無理と冷静に判断しました。だって順引きの実現のために、たった7文字のインプットのために、JSONファイル900本以上使ってるんだよ!っていっても今回はダウンロードしただけだけど。作者さんに感謝!
以下備忘のために列挙すると、

記事にあった:Input Hint OverlayText input field filterjQuery ValidationSimplest Twitter-like dynamic character countjQuery-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にだけは忠実、って感じ。