≒ <a> escaping malformed URI reference

引き続き模擬ECサイト制作中。ホントに進みが遅い。これでは仕事なら給料もらえないよな。
でも、職業訓練受講中(=職探し中)の今だけできることってことで、じっくりコードを一つ一つ咀嚼しながら打ち込んでます。

で、またエラー覚え書き。今回のはエラーというかW3C先生に怒られた。↓こういうselectボックス書いたら↑の警告が出た。

<select name=”sort”>
<option value=”item_name asc”>商品名・昇順</option>
<option value=”item_name desc”>商品名・降順</option>
<option value=”sale_price asc”>価格の安い順</option>
<option value=”sale_price desc”>価格の高い順</option>
<option value=”release_date asc”>発売日の古い順</option>
<option value=”release_date desc”>発売日の新しい順</option>
</select> 

例によってW3C先生の言ってることが全く分からない。なのでこれもいつも通りグーグル先生に質問する。
日本語ではヒットなし。うーん。結構深刻なやつか?

で、W3C先生(いや、ほんとはFireFoxのVALIDATORのことです)をいじってたら「警告」の三角びっくりマークをダブルクリックしちゃって、ヘルプ画面が出てきた。
知らなかったー。親切ー!英語なんだけど、例まで出して丁寧に説明してくれてるので僕にもわかる。
結局、空白(スペース)をURI(URL)に入れちゃいけないんですって。IETFも言ってるんだって!RFC番号までわざわざ書いてくれなくてもいいですよ!

再度グーグル先生に対処法を質問。今度はいくつか出てきた。
「URIには空白は入れるな。どうしても入れる場合は空白を『%20』に置き換えろ」とのお告げ。
言われる通りselectボックスのコードを書きかえる。

今度はPHP先生に怒られる。MySQL君はそんな単語(例:item_name%20asc)は知らん!ですと。
ですよねー!ってまたまたグーグル先生に泣きつくと、魔法の呪文「rawurldecode()」を教えてくれる。
で、呪文を唱えるとMySQL君OK!そいでまたW3C先生がご立腹。もー!
PHPマニュアルの「rawurlencode()」のページ見たら下のほうに「rawurlencode()」ってある。これだな!
で、片っぱしから唱えて回って解決。

以上、僕が今毎日やっていることを実況中継風にお送りしました。こんな馬鹿なことばかりやってるから時間がかかりますということで。

ちょっと不思議なのは、SQLにデコードして渡しただけで、$_GET変数はいじってないのにW3C先生に怒られたこと。参照渡ししてるってことかな。
PHPは変数の「参照渡し/値渡し」の取り違えで結構間違えることが多い。JSとちょっと感触が違うような。例えばmysql_fetch_array()をwhileでくくる定番の使い方あるけど、
「変数の値を引っこ抜いていって、空になるまで」ってことでしょ。やっぱりPHPは面白いなー。

≒ ウェブデザイン技能検定2級・受験記その3

試験本番
試験直前
前々日に試験勉強に完全に飽きました。以降は模擬試験も一切やらず、単語帳を読み返し、うろ覚えだった項目をExcelで表に纏めました。B5裏表で5枚程度。これは試験会場でも直前まで読み返ししました。
午前(学科)
何の問題もなく試験会場到着。受験者は大体30人位かな?メモを読み返しながら開始を待つ。で、時間通り、滞りなく開始。あれー見たことある問題が多い!すらすら解ける。かなりの数が「ひまつぶし(どうしても『ひつまぶし』を思い浮かべちゃう)」でみたことのある問題。設問内容も全く一緒。これで大分リラックスできました。大急ぎでやって色々確認して30分で終了。退出可能時間になったらすぐに会場を出ました。学科についての注意点。これは実技も一緒に受ける人限定なんだけれども、学科と実技は受験番号が「微妙に」違います。受験票(A4)を三つ折りにして持ってることが多いと思いますので、普通は一番上の部分にある学科試験受験番号を見ながら書き写すことになるので問題はないのですが、万一それをひっくり返して置いていて、実技の受験番号を見ながら記入してしまうと間違えてしまいます。また受験番号の記載された部分と「学科と実技で受験番号が違います~」の注意書きの部分が無意味に離れているんだよね。こういうところが不親切、というか受け取る側の立場に立って文書をデザインできない人々って感じ。
午後(実技)
昼ごはん食べても大分時間が余った。12時の開場とほぼ同時に会場入り。PCの電源が入っており、注意書きも何もないのでPCに触ってると、怒られた。当たり前か。この時点でXpであることがわかり、ちょっと動揺。学科と違い読み返すメモもないので手持ち無沙汰。15分経って説明開始。気になったのは「イラレがインストールされているけど使って良いのか」という質問があり、監督者さんからの回答が「かまいません。ただし指定ソフトウェア以外については状態保証はありません」というものでした。要項には「指定ソフト以外使用不可」って書いてあるよね。どっちでも良いけど。PC状態チェックをマニュアル通り各自行って試験開始を待つ。
実技1問目
例の「ロールオーバー」問題。2ちゃんで投稿してくれた人ありがとう!で、勉強している時から疑問だったんだけど、「ロールオーバーするボタン」を回答するってどういうこと?例えば使う画像を作って、さらにヘッダー部分のHTMLを組んで提出するのかな、とか思ってたんですが、問題文1行目に「ナビゲーションシステム用のパーツ画像をデザインし、作成しなさい」とあり、また下のほうに「作成する画像ファイルは~略~合計8ファイルとする」とあるので、ごちゃごちゃ書いてあるけど単にボタン用の画像を作れば良いのね、ってことでいつも通り作る。困ったのは保存形式。使ったことのないPNG形式が指定されていて、FireWorksを指定通り72dpiに指定して作成すると、出来た画像ファイルのプロパティが「71dpi」って表示される。やり直しても変わらず。なので忘れて次の問題へ。おそらくPNGはプロパティの計算が0から始まってるのだろう、ということで解決。今回の試験で一番の不安要素はここ。
二問目
アニメーションバナー問題。模擬試験と全く同じ。ただバナーの幅が800px、高さが48pxで「細長!」と思っただけ。練習の時と変えたのは「テキストの文字は可読できること」というのが気になって、文字の色を後で真っ赤に変えました。変な色遣いだけど間違いなく読める。
三問目
HTML+CSS作成。模擬試験と基本的に同じ。問題1と2で作ったパーツを入れる。問題集と違うところは、table要素など、使用する要素の具体的な指定がなくなってることと、CSSの別ファイルが必須であること、ロールオーバー。CSS切り出しとロールオーバーはDWでやればほぼ自動でできる。それ以外に、ヘッダー部分に作ったグローバルナビと同じ内容・順序のものを、フッター部分にテキストナビで組んで配置しなさいという指示もあった。これは初学者だと今時テキストナビなんて組んだことない人もいるかもしれないので練習しておいたほうが良いかもしれない。僕はたまたま前々日に職業訓練でやりました。a要素をli要素でくくってdisplay:inlineさせました。今考えたらただ単にa要素を並べればよかったのかとも思います。
四問目
HTML書きなおし問題。これも問題集類似問題。ただし要素指定やCSS指定が無くなった分楽。今考えると、もしかしてマークアップ要素の正解とかも今回からあるのかな。でも一応無難なマークアップはしたからよしとしよう。
五問目
選択問題。A:フォーム作成問題かB:JS問題。Aは「名前」「性別」「フリガナ」「電話番号」「郵便番号」「住所」「都道府県」の7項目指定。actionとmethodの指定はもちろん都道府県の対応パラメータの指定(別ファイル)もある。が、使用するフォームの指定はなし。もー意地悪!正直に言って僕でも難しくはないんだけど、手数がBに比べて圧倒的に多そうなのでパス。で、JS問題を気合いれて読み出したらすぐに拍子抜け。カンターン!2ちゃんで書かれてた問題とほぼ同じ。2ちゃんでは「リンクをクリックしたらフォントサイズが大きくなる」だったけど、試験問題は「色を#000に変える」という違いだけ。なのでスクリプトを2行書いて、試しにブラウザで動かしてみて、再度パラメータを確認して終了。
これは間違いなく不公平だと思う。JS初心者なら誰でもできる内容。JS優遇に過ぎる。まぁ今年だけかな。

 以上、3エントリに渡って長々と書いてきましたが、これで受験記は終了です。著作権にも配慮して書いてるので判りにくい点も多々あるかも知れませんが、その場合は問題集を買ってください。文句ばかり言ってるようですが、僕にはあの本はとても勉強の助けになりました。あの本自体が良いというよりあの本を起点に勉強する感じです。そして何よりmimiさんには心より感謝してます。感謝のしるしをあらわす方法が判りませんが、必要な本がリンクされている場合は必ずあのサイトから買わせてもらおうと思ってます。ちなみに問題集もリンクしておられます。
 こんなブログを読んでおられる方がそれほどいるとは思いませんが、もし、これらのエントリに関してご質問等あればコメント欄やメールで頂戴します。僕もたくさんのサイトから情報を頂いて勉強しましたので、わかる範囲でお答えしようと思ってます。 
 最後にこの試験について。色々まだ注文を付けたい点はありますが、僕はこの試験を受けてホントに良かったと思ってます。資格としての有用性と関係なく、例えばアクセシビリティという概念周辺について色々な知識を得ることができたことなど、単にHTML+CSS文法やwebプログラミングを勉強しているだけでは得られない知見が得られ、自分のwebサイト制作においての姿勢みたいなものができたように思います。
 次は2年後、1級試験だ!あ、まだ受かってるかどうか判んないんだっけ。

≒ ウェブデザイン技能検定2級・受験記その2

受験勉強続き
実技の勉強
学科の勉強と並行して、実技については問題集の模擬試験を毎日繰り返しやりました。最初の日は解くのに半日かかりましたが、一回やれば初心者レベルでも2時間位でできる内容です。後はタイムアタックのつもりで同じ内容を毎日繰り返す。ほんの少しバリエーションは変えながら(アニメーションをスクロールからフェードイン・アウトに変えてみる、とか)、最終的に模擬試験問題は1時間ほどで解けるようになりました。ちなみに、プロだとこの内容なら30分位だという噂も聞きました。当然なんだけど、やっぱり僕はまだまだです。
実技の勉強2
1週間ほどで飽きてきて、また、こんな勉強で良いのか不安なので、情報収集しました。すると「ロールオーバー問題」が出るとのこと。恥ずかしながらやり方を知らないので試験勉強に取り入れる。模擬試験を解くときにロールオーバー設定を入れるようにする。そして試験直前に2ちゃんに前回の実技内容が書かれてあったので、それを信じてやってみる。といってもそれまでやってた模擬試験と同内容なので、違いはJSのCSSスタイル操作関連の構文を復習しただけですが。
実技の勉強まとめ
学科と違い、まだ合否が全くわからない僕の経験を参考にしてもらっても意味がないですね。実技についてはホントに備忘録だとお考えください。ただ、感想を述べさせてもらうと、実技試験の勉強は資格試験対策というよりweb制作の練習として僕にはとても有意義でした。flashも使ったことがなかったので、これで初歩的な使い方は覚えられましたし、訓練の授業ではあまり好きでなかったDWにもだいぶ慣れることが出来ました。念のために書いとくと、この試験の受験勉強にはAdobeの関連ソフトの利用は必須です。何より試験会場では他のオーサリングソフトは使えませんし、ぶっつけ本番では無理です。サクラエディターは大好きですが、エディターではアニメーションバナーは作れません。国家試験での特定ソフトへの誘導は賛否は分かれるところでしょうが、ともかく体験版が1カ月使えますし、「資格を取得する」という目的だけなら、それで充分だと思います。ちなみに、試験会場には必ずCS4か5が導入されているようです。会場担当団体にはAdobeから無料貸与されるようですから、古いマシンが設置してある会場以外ではCS3以前がある理由がないかとも思います。受験会場にCS3以前が設置されている場合のみ、受験票と一緒にその旨の案内が送られてくるそうです。まぁ、僕の場合試験会場のPCはCS5だったのでそこはいつも使っているもので良かったのですが、XP(!)だったことに戸惑いました。Vistaよりはましとも言えますが、7が出て1年以上たち、サポートも切れた現在、Xpを触ることになるとは思いませんでした。

以上。まだ続きます。