2009年の抱負

新年、 あけましておめでとうございます。
ニューイヤー駅伝を見て、箱根駅伝を見て、卒論を書いて、新年を満喫しています。

昨年はたくさんの制作作業に関わることができましたが、
しょせん学生の域を超えず、ツメの甘ーい自分自身を改めて感じました。
特に、「サイトデザインをWebサイトに忠実に再現するのが楽しいんです！とか言いながら、
細かいヴィジュアル的な要素に関してひどく無頓着であったことに気付き、本当に反省しました。

コーディングするにあたっての、今年の目標。

１．色情報はスポイトで抽出する。

今までは見た目、アバウトに色を指定していたので、
今年はちゃんと背景色も文字色も、データからスポイトで抽出いたします。

２．余白を測る。

今までは見た目、アバウトに（以下略）。
きちんとPhotoshopで目盛りを表示させて、ガイドで区切って調整いたします。

３．フォントに気を配る。

サイトを作るにあたって、フォントのサイズとか、太さとか、書体とか、フォントに関しては無頓着でした。
Photoshopの画像じゃ、自分でサイズとか抽出できないし。と責任転嫁していたのも問題でした。
今年は、フォント指定に関しても心配りをいたします。

４．使用技術のゆれをなくす。

たとえば画像置換をする場合が特に顕著なのですが、
テキストをインデントで画面外にとばすとか、spanタグでおおいかぶせるとか、様々な手法があり、
場面によってどれを使用する、しないというブレが大きくありました。

個人的なことを考えるとJavaScriptでやるのが一番いいのですが、
今の私の技術力からすると少し難しいので、img画像をCSSで調整する方向で取り組んでいきます。

５．能動的に行動する。

基本的に、デザイナーからコーダーへ、という仕事の流れは一般的であり、
私自身、その流れに沿ってデザイナーの要望を最優先で取り入れる、ということが念頭にありました。
しかし、実はそれがデザイナーの意見に従うことによって衝突を避けていただけで、
誰にとっても何のメリットももたらしていないことに気付きました。

ので、自分の制作作業（つまり、全体の進捗状況）に悪影響が出そうな場合とか、
自分自身の意見はきちんとデザイナーに伝えていきたいと思います。

などなど、課題がいっぱいですが、
とりあえず全てに共通するのは、「誰のために作ってるんだ？」という感情が欠けていること。
「自分が楽しいから作る」っていう動機は、「自分が楽しければどうでもいい」ともとれるわけで。

自分以外の人が編集しやすいコードを書こう。
クライアントにとっても、同僚にとっても、働いててよかったって思ってもらえるようにしよう。
傷をなめあうのはやめよう。

「誰のために作ってるんだ？」を常に考えて、
「その結果何を得るんだ？」を見つめていこう。

今年はそんな年にしたいと思います。

2008年を振り返って

今年一年おつかれさまでした。

HTMLをさわり始めて５年目が終わろうとしています。
さすがに５年も経てば、もう何も覚えることはないと思っていましたが、
そんなことはありませんでした。
５年目の今年も、自分自身、確実に成長することができました。

2008年のキーワード

１．clearfix

恥ずかしながら今年初めてclearfixを知りました。
結局、廃れ始めている技術だと言うことも同時に知ったわけですが。

２．CSSの作り方

今まで、divだったり、はたまたclass、idといった付加的な要素でさえも付加するのが嫌で、
CSSは1ページに１CSSみたいな感じで、超編集しづらいつくりをしていました。
来年からはdivとかbodyにclassをつけて、CSSファイルをすっきりまとめたいと思います。

３．Web標準

今まで、何が何でもJavaScriptを使わずにCSSとHTMLで表現するんだと躍起になっていましたが、
情報構造はHTMLでおこない、装飾表現はCSSでおこない、振舞い（動的表現）はJavaScriptでやるんだと言うことに初めて気付いたのでした。
ということで、JavaScriptを毛嫌いせずに、協力して生きていきます。

今年の1月と、今のHTMLやCSSのコードを比べてみるとずいぶん違うなあと気付かされます。
今年はたくさんのサイト制作に関わらせていただいて、自分としてもかなり成長できたと思います。

それでは、あと4時間弱ですが。
今年はおつかれさまでした。

JavaScriptでCSSを切り替えて文字サイズを変更する。

ごぶさたしています。
アルバイトと年賀状書きが忙しく、まったく更新できませんでした。

話は変わりますが、以前アルバイト先で
「最近、文字の大きさを画面上のボタンで切り替えられるサイトがあるよね。あれできる？」
と聞かれたことがありました。

結局、時間と労力のなさから実装しないこととなったのですが、
後々の自分のために色々と調べてようやくつくることができたのでメモ。

正常動作環境：Windows OS
Firefox, Safari, Opera, Necscape, GoogleChrome, IE7

準動作環境（オンマウスでの色変更なし）：IE6, IE5.0

確認不可：IE5.5

詳しくはHTMLで説明しているので見てください。

神戸出張2日目

現在、研究室の教授に連れ添って、友人とふたり神戸にやってきています。
神戸の大学で教授が年2回持っている授業があり、今回はそのアシスタントとしてお供いたしました。
朝9時から夕方5時まで、3日間集中講座の本日は二日目でした。

私の所属する大学はデジタルメディア系の大学なのですが、
今回訪れた大学では、デジタルメディア系学科が数年前にできたばかり。
その学科の方半分、それ以外の文学部・社会学部系の方半分で授業をしました。

まず、女子大ということで、雰囲気がかなり華やか。
お嬢様大学ということは聞いていたのですが、さすがです。
うちの大学にはいない、騒がしくてそして素直な娘が多かったです。

実際に制作作業に入ると、メディア系学部の人はもちろんさくさくやっていましたが、
それ以外の学部の人も積極的に質問をして、試行錯誤しながらやっていました。

この環境で感じたことは、
「自分のいる学部と、作品の質とは比例しないんだ」ということ。

やる気があれば文学部だってWebサイトは作れるし、
メディア学部であっても受動的な人はWebサイトを作れないまま終わるんです。

私も自分の環境に甘んじないで、勉強に励みたいと思います。

Drawterでデザインカンプ制作

ブラウザ上でWYSIWYG的にWebサイトが作れる、Drawterに関するメモ。
サイトにアクセスするとでさっそくサイト制作ができます。

Drawterは、jQueryライブラリをベースにしたJavaScriptで制作されています。
テーブルレイアウトではなく、CSSでレイアウトが組めるツール。

PCスペック的には、メモリが256M以上、CPUが800Mhz 以上であることが必要条件です。

このDrawterは、マークアップをしていく際にHTMLやCSSの知識が必要になってくるので、最低限HTML、CSSがわかる人向け。
初心者向きのツールではありません。

ただ、ブラウザ上にルーラーがあって、ボックスを手早く生成することができるのは優れもの。
そして、他のオーサリングソフトとは比較にならないくらいの動作の軽さ。

はじめに「サイト制作ができます」とは書きましたが、どちらかというとデザインカンプ制作にオススメします。

なぜデザインカンプ用かというと、自分でも色々いじってみたのですが、サイトを作るにはあまりにエディタが本格的過ぎて、扱いづらいからです（笑）。自分でHTML打つほうが数倍早い。道具の使い方を覚えるのに苦労するくらいだったら、使わないほうがいいかな、というのが個人的見解。

詳しい動かし方は、DrawterのヘッダのOther→Screen Castで、サイト制作の手順を見ることができます。

が、相当でかいディスプレイサイズで手順を説明しているらしく、1024×768の私のPCでは画面が小さすぎてスクロールバーが出てしまいました。注意。
実際に作業をするときも、1024×768の画面では狭くて作業しづらいかもしれません。

また、制作者のサイトはどうもドイツ語っぽい言語で書かれているようで、純日本人の私にはうまく読めませんでした。

ちなみに、HTMLファイルを自動生成してくれるわけではないので、
作成したデザインをHTMLにしたい場合は、DrawterのヘッダのCode→Generate codeを選択すると、HTMLとCSSのコードが出てきます。これをコピペして使ってください。