並行していくこと

学校のカリキュラムがDWの操作からｊQueryに入った。
まだインストールを終えたところなのでなんとも。数学的思考が全くできない自分には敷居が高いです。
ですが課題作品でモーダルやアニメーションを使う予定であるので、気を引き締めてかからないと。
今のところ課題制作のほうはワイヤーフレームを考えつつ、金魚たちのマスクをじみじみなぞっています。
ビジュアル押しでデザインを考えていると、すぐに機能性を失いそうになるのでサイト設計の難しさを実感中であります。

またぼちぼち就職活動も開始。
やっぱり求人の数が違う。photoshopとillustratorだけのしょぼいスキルだけで求人票を眺めていたころに比べると、未経験者とはいえ応募できるだけ成長したのかなと思います。
もちろん、「実務経験2年以上」の文句を見るたびに、単にスタートラインに立とうとしている程度なのは強く自覚するのですが。

面接でお聞きした話や求人票を見ていると、現場で必要とされている技術は単にHTML+CSS、DW操作に留まらず、PHPやJAVA,javascript（ｊQueryでなく）も求められているところが多いようです。少数精鋭の制作会社だと当然ですがこの傾向は特に顕著です。
どれも、現在通う学校の授業範囲外・・・たった3か月のコースなのでそこは仕方ないのですが。
講師の先生はとてもわかりやすく教えて下さるし、頼りになる方です。それだけにもっと長く広く深く学校で学べたらなと思ってしまいます。

残念ながらそうもいかないし、もとより職業訓練校は新しい技能習得の足がかりとして、という認識だったので甘えず、独学でも何か一つ、勉強を進めていこうと思いました。

ということでフロントエンドはjQueryを学ぶので、バックエンドを学ぼうと今日図書館で「みるみるPHPがわかる本」を借りてきました。
うーん、なんてやさしそうな題名！　本自体も薄くて入門にはよさそうです。
まだfor構文とは？　なんてところをやってるんですが、プログラミングの考え方になれるまで自分は時間がかかりそうです。
とりあえず、黒い画面のコマンドプロンプトをいじくりまわしているだけでテンションが上がるので（パソコンできる人っぽい！）この単純思考のモチベーションを逃さずに少しずつですが勉強を進めていきたいと思います。


関係ないですが、隅田川の花火大会がかわいそうなことになってます。テレ東の中継が大変そうです。

制作開始

ぼちぼち次の課題の制作を開始。
次の課題といっても、通っているスクールは三か月コース。八月末には修了するので、このサイトが最後の制作になる。
学んだことを駆使して……といっても今現在折り返しぐらいなので、まだまだ習っていないことだらけ。それでも授業終わってから考えよーではとてもじゃないが終わらなさそうなので、すこしずつつ準備を始めていく。

今回は自由テーマだったので、金魚の生体販売サイトにした。
金魚…は飼ったことないけれど、好きなので。パスでじみじみなぞるのも楽しそうという……安直？

サイトの構造がぼんやりとまとまってきたのでとりあえず、Fireworksでワイヤーフレームをつくっているところ。
（ちなみに画像に移っている金魚はらんちゅうではない）
前回の花屋のサイト制作で、自分のページの操作性の悪さに作り終わってから気づかされたので、できるだけコンパクトにまとめようと思った。
現在、多くのユーザーのファーストビューは大体1000×600～700px程らしいので、だいたいそんなところにメインコンテンツが収まるように設計していく。
UIを考えて設計することを考えると、IA（インフォメーション・アーキテクチャ）分野について勉強しなくちゃいけないんだろう。うーん…今すぐには取り掛かれそうもないけれど、おいおい関連書籍を読むかなんかしよう。

jQueryとCSS3の透過を積極的に使っていこうと考えているけれど、まだどちらも基礎を勉強していないので、検索でひっかかるtipsを見てもちんぷんかんぷん。
そっちの勉強も合わせると、作るのでいっぱいいっぱいになりそう。残り時間も少ないので、どこかで折り合いをつけなければいけないとは、思っているんですが。そこの選択もまた難しいな。

アナログ人間

四年ぶりに夏を東京で過ごしている。
集合住宅の狭いベランダに出るたびに、この世は地獄だと思う。
日差しが凶悪すぎる。

通学電車で少し時間があるので、できるだけ本を読むようにしている。（50％くらいで睡眠時間になっているけど）
翔泳社の Web制作標準講座・総合コース は知識ゼロの自分には優しく、導入書としてとてもよかった。
最近読んだ スタジオ　イースペースの　web制作新人育成ガイド　は大まかな制作の流れを想像できて、なにより現場のシズル感が伝わるイラストがかわいらしかったな。
今日から読み始めた アーキテクチャの生態系――情報環境はいかに設計されてきたか ですけれども、やばい。これは勉強できる人の文章だ。引用がたくさんあってめまぐるしくて、なんだか若々しい文章だなあと思ったら自分と10しか離れていなかった。
少しずつ、制作スキルだけでなくこういった持っていて当然の知識も勉強していかないといかんなあと思う。

というわけで読むべき本、参考にしたいビジュアル集が多いので、いちいち買っていたらあっという間に生活費がなくなる。
自分一人ならどうとでもなるが家族と同居中なので、生活費は折半なのだ。なんとか倹約しなければ……

とそんな時に助かるのが行政サービス。図書館や産業支援室のようなところへいけば豊富、までいかなくともWeb関連書籍も貸し出してくれる。まだ秋田県に県民税収めている身ですけど…ありがとうございます……。
四年前以前は文庫コーナーや画集コーナーくらいしか立ち寄ったことなかった。お金のかからない勉強法って探せばいくらでもあるんだよなあ。

Webに限って言えばインターネット全てが生きた資料なのだし、個人でまとめてくれている最新のデザイン集やコードが非常にわかりやすく載っていて、その気になればいくらでも吸収できるんですよね。

とはいえ、自分はアナログ的？ なのかマウスホイールぐりぐりして液晶に表示されるテキストを読んだり、エディタかなんかにタグをコピペしてまとめておいても、頭に入っていく感覚が薄くて不安になる。
紙をめくる指先に感じる厚みや、整理されていない走り書きのような手書きのノートをシャーペンの芯を折りながら埋めていく感覚が伴っていないと、どうしても自分の中に定着してかないような気がする。
ワイヤーフレームをつくろうとFireworksを開いても、新規のキャンバスを前に呆然とする。やっぱりノートかチラシの裏でもどこでもいいんだけれど、手書きのワンステップがないと非常に進みづらい。
視覚的なものより、どちらかというと、ハプティックなものが重要な気がする。
すぐにデジタルで制作に取り掛かれたら、それはやっぱり効率的なんだろうけど、きっと自分に合ったステップの踏み方なんだろうと前向きに思うことにした。
尊敬する原研哉さんも、ハプティックな感覚器官をもっと積極的に開いて世の中見るべき、というようなことをどこかの著書で言っていたはず……うろ覚えなので今度また読み返そう。

そろそろ次の課題の準備をすすめていかなければ。正直に言うけど怖いです。

Brackets

DreamWeaverの勉強が始まって、あまりの便利さにコードをすべて忘れそうな勢いでビビっている。
なんにせよ、課題を持ち帰っては持っていないので使えないDWの代わりに、同じadobeのオープンソースエディタ、「Brackets」をダウンロードしてみた。

まだしっかり触れていないが、Terapadより便利機能がいっぱいあるみたいだ。
DWを使ってからだと移行が難しそうだが、自分にはまだこれで十分。

Bracketsの特徴と拡張機能についてわかりやすくまとめたページがあった。
家に帰ったらゆっくり見てみる。拡張もしたい。

http://dev.classmethod.jp/etc/review-brackets/

帰り道

課題提出が無事終了。

アップロードした時点で大きなエラーはなかったものの、firefoxで表示ズレがあった。

自宅からは崩れてなかったはずなので、これはバージョン違いの差異なんだろうか。

同じく学んでいる人の作品を閲覧出来る機会があったので、見てみた。

やはり他の人のを見るのは勉強になる。

デザインがいいな、と思うものも機能的なページだと感じるものも、様々。

全てを自分のものと比べて悔しくなるばかり。

これは時間かけても思いつかなかったろうと思う視点での発見が多かった。

何より腹立たしいのはこの作品には遠く及んでいない、と感じたサイトの制作者が経験者だと聞いて、ほっとした自分。

伝統工芸じゃあるまいし、経験値が全てではないのだから、そんなところで納得してはダメだとおもった。

悔しい。

朝の山の手に揺られている時も今日はどうせ悔しい思いをすると考えていたが、案の定。

この情けなさを次に活かすために、どうしたらいいかを考えよう。

生産性のない感情の揺らめきにただ付き合っていられるほど、自分に猶予はないのだから。

ワークフローまとめ（課題1）

課題提出前夜なので、ちょっと振り返りつつ、自分が初めてのwebサイト制作でどんな手順を追ったのか振り返ってみる。


課題は花屋。幅は画面幅1024pxに収まるよう、ページ数は5ページ以上という課題設定だった。

コーディングに使ったのは、XHTML1.0TransitionalとCSS2.1。文字コードはUTF-8。
エディタはTerapad。画像編集はPhotoshop Elements 11と学校のFireWorks CS4。

----------------------------------------------------------

まずはコンセプトイメージを探った。
キーワードを列挙して、どんなサイトにしたいか漠然と書き出してみる。
↓
主要なコンテンツを考え、大まかな内容を決める。
この時の項目がグローバルナビゲーションになったり。
↓
項目別の内容をもう少し掘り下げ、どんな素材が必要になるかを洗い出す。
↓
サイトマップを考える（この辺りから素材集めを並行して行う）
↓
インターフェース設計
ラべリング項目名をわかりやすい単語にして決定
↓
ここで大まかなレイアウトを見るために、ためしにindex.htmlのみコーディングしてみる。
テキストなし、画像なし、各要素の幅・高さ、背景色をのみ設定した。
ここでなんとなくreset.cssの原型ができる。positionなどコーディングの大まかな流れをつかんだ。
↓
▲1：レイアウトテストしたものを元に、インターフェース設計のメモにposition数値やクラス、ID名などをメモしてレシピを作る。
↓
▲2：レシピを見つつコーディング。
並行してパーツのデザインなどを考えていく。コーディングするなかで画像のファイル名を決めてしまうことも。
↓
▲3：XHTML、CSSがあらかた出来上がってきたら、考えたパーツデザインのメモを元に怒涛の画像編集。
サイズもデザインもファイル名も決まっているのであとは作業！ 作業！ 作業！
↓
▲1～3を1ページごとに繰り返す。基本的に複数ページ同時進行はしない（頭悪くてできなかった）
但しレイアウトテストはindexのみ。他ページはレシピを元に書き出していった。
↓
前ページができたら、共通しているCSSはbase.cssに移すなどソースを整理する。
↓
チェッカーで採点してもらい、ソースの間違いや不足を修正していく。
↓
ブラウザ毎に確認する。
ブラウザハックを使い、デザインの崩れを手直しする。
↓
自分で借りているレンタルサーバに仮アップロード。
ローカルで見逃されていたファイル名の大文字小文字の間違いなどを確認。手直し。

---------------------------------------------------------------------------

ざばーっと書いたけど、大まかにこんな感じだったと思う。
今週はFireWorksでのデザインカンプの作成も始まったし、これからHTML5学ぶんだし、このワークフローはまたいろいろ増えたり減ったりするんだろな。
ま、今回はこんな流れだった。

HTML・CSS・アップロード検証

課題提出を目前にしてCSS採点ページがあるということを知った。
そりゃHTML採点があるならCSS採点もあるんでしょう。そうでしょう。
なぜもっと早く気付かなかったのか……と思いながらとりあえずCSS2.1で検証してもらうと、ボッコボコに減点してもらった。

CSSを策定しているW3WのCSS検証サービスはこちら。
http://jigsaw.w3.org/css-validator/validator.html.ja#validate_by_upload+with_options
もちろん無料。いやーありがたいことです。
単純に；落としてることとか、知らなかったCSS2.1準拠の書き方とか。

HTMLはこちらでチェック。
http://cetus.sakura.ne.jp/htmllint/htmllint.html

合わせて無料レンタルサーバにFFFTPでアップロードして検証してみるとローカルでは見逃されていたファイル名の大文字小文字の違いなどが見えてきて、うわー提出前に気が付いてよかったなあ。

ただ借りているサーバーのリリースがごく最近だったようで、初心者の自分にはひどく使いにくい。
初心者にやさしい、広告のでない無料サーバーをもう少し探したい。